2274
No
1. 상호작용(interactivity)
1. 호버(hover), 포커스(focus), 액티브(active) 상태 스타일링
- 버튼이나 링크 같은 요소의 상태별 스타일을 Tailwind의 유틸리티 클래스로 쉽게 설정할 수 있습니다. 예를 들어:
- hover:bg-orange-500: 호버 시 배경색을 오렌지로 변경.
- focus:bg-green-500: 포커스 시 배경색을 초록색으로 변경.
- active:bg-yellow-500: 액티브 상태에서 배경색을 노란색으로 변경.
2. 그룹(group) 스타일링
- group 클래스를 사용해 부모 요소를 기준으로 자식 요소의 스타일을 변경할 수 있습니다.
- 예를 들어, 카드에 호버할 때 카드 내부의 텍스트 색상을 변경하려면 group-hover:text-white 같은 클래스를 사용할 수 있습니다.
3. 의사 클래스(pseudo classes)
- first, even, odd 등의 의사 클래스도 Tailwind에서 간단히 사용할 수 있습니다.
- 예를 들어, 리스트의 첫 번째 항목에만 스타일을 적용하려면 first:bg-red-200를 사용하고, 짝수 항목에 스타일을 적용하려면 even:bg-green-500를 사용할 수 있습니다.
4. Appearance 설정
- appearance-none 클래스를 사용해 브라우저 기본 스타일을 제거할 수 있습니다. 이는 특히 선택 박스(Select Box)나 체크박스 같은 폼 요소의 기본 스타일을 통일하는 데 유용합니다.
5. 커서 스타일링
- 커서 모양을 Tailwind로 쉽게 변경할 수 있습니다. 예를 들어:
- cursor-pointer: 손가락 포인터 모양.
- cursor-wait: 대기 모양.
- cursor-not-allowed: 금지 모양.
6. 텍스트 선택 제어
- select-none, select-text, select-all 클래스를 사용해 텍스트 선택 동작을 제어할 수 있습니다.
- 예를 들어, 특정 텍스트를 선택할 수 없게 하려면 select-none을 사용합니다.
7. 스무스 스크롤링 (Smooth Scrolling)
- Tailwind의 scroll-smooth 클래스를 사용해 페이지 내 스크롤을 부드럽게 만들 수 있습니다. 예를 들어, 특정 섹션으로 이동할 때 스크롤이 부드럽게 작동합니다.
결론
이 영상은 Tailwind CSS의 인터랙티브 기능을 활용해 다양한 상태별 스타일을 손쉽게 구현하는 방법을 다루고 있습니다. Tailwind의 유틸리티 클래스 덕분에 별도의 CSS 작성 없이 간단한 클래스 추가만으로 복잡한 스타일링을 쉽게 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Interactivity</title>
</head>
<body>
<a href="#item">Scroll To Item</a>
<!-- Hover State Styling -->
<button
type="button"
class="bg-black text-white py-3 px-5 rounded-lg m-3 hover:bg-orange-500 hover:text-black"
>
Submit
</button>
<!-- Focus State Styling -->
<button
type="button"
class="bg-black text-white py-3 px-5 rounded-lg m-3 focus:bg-green-500 focus:text-black"
>
Submit
</button>
<!-- Active State Styling -->
<button
type="button"
class="bg-black text-white py-3 px-5 rounded-lg m-3 active:bg-yellow-500 active:text-black"
>
Submit
</button>
<br>
<!-- Styling based on parent state -->
<!-- When you need to style an element based on the state of some parent element, mark the parent with the group class, and use group-* modifiers like group-hover to style the target element: -->
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white shadow-lg space-y-3 hover:bg-sky-500">
<div class="flex items-center">
<h3 class="group-hover:text-white">Card Title</h3>
</div>
<p class="group-hover:text-white">This is some card text</p>
</a>
<br>
<!-- Pseudo Classes -->
<ul>
<li class="even:bg-green-200 odd:bg-blue-200">Item 1</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 2</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 3</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 4</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 5</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 6</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 7</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 8</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 9</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 10</li>
</ul>
<br />
<!-- Appearance -->
<!-- Use appearance-none to reset any browser specific styling on an element. This utility is often used when creating custom form components. -->
<select>
<option>Yes</option>
<option>No</option>
</select>
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
</select>
<br />
<!-- Cursor -->
<button
type="button"
class="bg-black text-white py-3 px-5 rounded-lg m-3 cursor-pointer"
>
Submit
</button>
<button
type="button"
class="bg-black text-yellow-500 py-3 px-5 rounded-lg m-3 cursor-progress"
>
Loading...
</button>
<button
type="button"
disabled
class="bg-black text-red-200 py-3 px-5 rounded-lg m-3 cursor-not-allowed"
>
Confirm
</button>
<br />
<!-- Resize -->
<textarea class="border border-black rounded resize"></textarea>
<!-- User Select -->
<div class="select-none">Lorem ipsum dolor sit amet.</div>
<div class="select-text">Lorem ipsum dolor sit amet.</div>
<div class="select-all">Lorem ipsum dolor sit amet.</div>
<div class="select-auto">Lorem ipsum dolor sit amet.</div>
<div id="item">Item</div>
</body>
</html>
<!-- Cursor
cursor-auto cursor: auto;
cursor-default cursor: default;
cursor-pointer cursor: pointer;
cursor-wait cursor: wait;
cursor-text cursor: text;
cursor-move cursor: move;
cursor-help cursor: help;
cursor-not-allowed cursor: not-allowed;
cursor-none cursor: none;
cursor-context-menu cursor: context-menu;
cursor-progress cursor: progress;
cursor-cell cursor: cell;
cursor-crosshair cursor: crosshair;
cursor-vertical-text cursor: vertical-text;
cursor-alias cursor: alias;
cursor-copy cursor: copy;
cursor-no-drop cursor: no-drop;
cursor-grab cursor: grab;
cursor-grabbing cursor: grabbing;
cursor-all-scroll cursor: all-scroll;
cursor-col-resize cursor: col-resize;
cursor-row-resize cursor: row-resize;
cursor-n-resize cursor: n-resize;
cursor-e-resize cursor: e-resize;
cursor-s-resize cursor: s-resize;
cursor-w-resize cursor: w-resize;
cursor-ne-resize cursor: ne-resize;
cursor-nw-resize cursor: nw-resize;
cursor-se-resize cursor: se-resize;
cursor-sw-resize cursor: sw-resize;
cursor-ew-resize cursor: ew-resize;
cursor-ns-resize cursor: ns-resize;
cursor-nesw-resize cursor: nesw-resize;
cursor-nwse-resize cursor: nwse-resize;
cursor-zoom-in cursor: zoom-in;
cursor-zoom-out cursor: zoom-out;
-->
2. Tailwind CSS의 브레이크포인트 ( Breakpoint Classes & Media Queries)
Tailwind CSS는 화면 크기에 따라 스타일을 조정할 수 있는 네 가지 기본 브레이크포인트를 제공합니다. 이 브레이크포인트는 미디어 쿼리를 직접 작성하지 않고도 다양한 화면 크기에 맞춰 스타일을 적용할 수 있게 해줍니다.
기본 브레이크포인트
- sm: 640px 이상
- md: 768px 이상
- lg: 1024px 이상
- xl: 1280px 이상
- 2xl: 1536px 이상
자바스크립트를 사용한 브라우저 너비 표시
브라우저의 너비를 실시간으로 표시하는 간단한 자바스크립트 코드를 작성할 수 있습니다. 아래는 그 예제입니다:
HTML에 H1 추가
<h1 id="browser-width">브라우저 너비</h1>
2.자바스크립트 코드 작성
<script>
function showBrowserWidth() {
const width = window.innerWidth;
document.querySelector('#browser-width').innerText = `너비: ${width}px`;
}
window.addEventListener('load', showBrowserWidth);
window.addEventListener('resize', showBrowserWidth);
</script>
Tailwind CSS로 배경색 변경하기
Tailwind CSS를 사용하여 화면 크기에 따라 배경색을 변경할 수 있습니다. 예를 들어, 다음과 같은 클래스를 사용하여 배경색을 다르게 설정할 수 있습니다:
- 기본 배경색: bg-black
- 작은 화면: sm:bg-green-800
- 중간 화면: md:bg-blue-800
- 큰 화면: lg:bg-yellow-800
- 엑스트라 큰 화면: xl:bg-purple-800
- 2엑스트라 큰 화면: 2xl:bg-red-800
예제
<body class="bg-black text-white text-4xl">
<h1 id="browser-width">브라우저 너비</h1>
</body>
<style>
@media (min-width: 640px) { body { background-color: #4caf50; } }
@media (min-width: 768px) { body { background-color: #2196f3; } }
@media (min-width: 1024px) { body { background-color: #ffeb3b; } }
@media (min-width: 1280px) { body { background-color: #9c27b0; } }
@media (min-width: 1536px) { body { background-color: #f44336; } }
</style>
요약
Tailwind CSS는 화면 크기에 맞춰 스타일을 쉽게 조정할 수 있는 유용한 브레이크포인트를 제공합니다.
자바스크립트를 사용해 브라우저의 너비를 실시간으로 표시하거나, Tailwind의 유틸리티 클래스를 사용해 다양한 화면 크기에서 스타일을 동적으로 변경할 수 있습니다.
이를 통해 반응형 디자인을 더 효율적으로 구현할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Breakpoints & Media Queries</title>
</head>
<!-- Tailwind is mobile-first -->
<body
class="
bg-black
sm:bg-green-800
md:bg-blue-800
lg:bg-yellow-800
xl:bg-purple-800
2xl:bg-orange-800
"
>
<h1 class="text-white text-xl md:text-3xl xl:text-5xl">
Tailwind is awesome
</h1>
<script>
function showBrowserWidth() {
const width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
document.querySelector('h1').innerHTML = `Width: ${width}`
}
window.onload = showBrowserWidth
window.onresize = showBrowserWidth
</script>
</body>
</html>
<!-- Breakpoint Classes
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
-->
3.Columns
Flexbox와 Grid: 주로 사용되는 레이아웃 도구로, Tailwind에서도 자주 쓰입니다.
CSS Columns: CSS에서 여러 개의 컬럼을 정의할 수 있는 방법으로, columns라는 속성을 사용합니다. column-count, column-width 같은 속성도 있고, Tailwind에서는 이를 위한 클래스를 제공합니다.
예제 코드:
- columns-2 클래스를 사용해 2개의 컬럼을 만들었습니다.
- columns-4처럼 컬럼의 개수를 조정할 수 있고, 이미지가 자동으로 해당 컬럼 수에 맞게 배치됩니다.
- 만약 이미지보다 많은 컬럼을 설정하면 빈 공간이 생깁니다.
Gap 조정: 컬럼 간의 간격은 gap 클래스를 사용해 조절할 수 있습니다. 예를 들어, gap-0은 간격을 없애고, gap-2는 약간의 간격을 줍니다.
반응형 레이아웃: 모바일 화면에서 여러 개의 컬럼을 유지하기는 어려우므로, columns-xs처럼 반응형 클래스를 사용해 작은 화면에서는 이미지가 쌓이도록 설정할 수 있습니다.
Aspect Ratio: 이미지의 비율을 유지하기 위한 클래스로 aspect-video, aspect-square 등을 사용할 수 있습니다. aspect-video는 영상 비율을, aspect-square는 정사각형 비율을 만듭니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Columns</title>
</head>
<body>
<div class="columns-2 gap-8">
<img class="w-full" src="../assets/img/img1.jpg" />
<img class="w-full" src="../assets/img/img2.jpg" />
<img class="w-full break-after-column" src="../assets/img/img3.jpg" />
<img class="w-full" src="../assets/img/img4.jpg" />
</div>
<div class="columns-3 gap-24">
<img class="w-full" src="../assets/img/img3.jpg" />
<img class="w-full break-before-column" src="../assets/img/img4.jpg" />
<img class="w-full" src="../assets/img/img5.jpg" />
<img class="w-full" src="../assets/img/img6.jpg" />
<img class="w-full" src="../assets/img/img7.jpg" />
</div>
<div class="columns-3xs">
<!-- Video Aspect Ratio -->
<img class="w-full aspect-video" src="../assets/img/img8.jpg" />
<!-- Square Aspect Ratio -->
<img class="w-full aspect-square" src="../assets/img/img9.jpg" />
<img class="w-full break" src="../assets/img/img1.jpg" />
<img class="w-full" src="../assets/img/img2.jpg" />
</div>
</body>
</html>
<!-- Column Classes
columns-1 columns: 1;
columns-2 columns: 2;
columns-3 columns: 3;
columns-4 columns: 4;
columns-5 columns: 5;
columns-6 columns: 6;
columns-7 columns: 7;
columns-8 columns: 8;
columns-9 columns: 9;
columns-10 columns: 10;
columns-11 columns: 11;
columns-12 columns: 12;
columns-auto columns: auto;
columns-3xs columns: 16rem; /* 256px */
columns-2xs columns: 18rem; /* 288px */
columns-xs columns: 20rem; /* 320px */
columns-sm columns: 24rem; /* 384px */
columns-md columns: 28rem; /* 448px */
columns-lg columns: 32rem; /* 512px */
columns-xl columns: 36rem; /* 576px */
columns-2xl columns: 42rem; /* 672px */
columns-3xl columns: 48rem; /* 768px */
columns-4xl columns: 56rem; /* 896px */
columns-5xl columns: 64rem; /* 1024px */
columns-6xl columns: 72rem; /* 1152px */
columns-7xl columns: 80rem; /* 1280px */
-->
<!-- Break After
break-after-auto break-after: auto;
break-after-avoid break-after: avoid;
break-after-all break-after: all;
break-after-avoid-page break-after: avoid-page;
break-after-page break-after: page;
break-after-left break-after: left;
break-after-right break-after: right;
break-after-column break-after: column;
-->
<!-- Break Before
reak-before-auto break-before: auto;
break-before-avoid break-before: avoid;
break-before-all break-before: all;
break-before-avoid-page break-before: avoid-page;
break-before-page break-before: page;
break-before-left break-before: left;
break-before-right break-before: right;
break-before-column break-before: column;
-->
4.Flexbox
Flexbox 설정:
기본적으로 flex 클래스를 사용하여 Flexbox를 활성화하면 요소들이 가로로 배치됩니다. 만약 세로로 배치하고 싶다면 flex-col 클래스를 사용합니다. 예를 들어, 작은 화면에서는 세로로 배치되고, 중간 크기 이상의 화면에서는 가로로 배치되도록 할 수 있습니다.정렬 클래스:
- items-center: 수직 중앙 정렬
- items-start: 수직 상단 정렬
- items-end: 수직 하단 정렬
이 클래스들은 Flexbox의 방향에 따라 가로 또는 세로 방향으로 적용됩니다.
정렬 및 간격:
- justify-center: 가로 중앙 정렬
- justify-between: 양쪽에 간격 없이 요소들을 가운데에 배치
- gap-x 및 gap-y: 요소 간 간격 설정
Flexbox 랩핑:
많은 요소를 처리할 때, flex-wrap 클래스를 사용하면 화면 크기에 맞춰 자동으로 줄바꿈이 이루어집니다.Flex 아이템의 순서 및 크기 제어:
- order-1, order-2 등으로 요소의 순서를 변경할 수 있습니다.
- flex-none, flex-auto, flex-1 등으로 아이템의 크기 제어 가능:
- flex-none: 아이템이 크기를 조정하지 않음.
- flex-auto: 초기 크기를 유지하면서 필요에 따라 크기가 조정됨.
- flex-1: 초기 크기를 무시하고 남은 공간을 차지하도록 크기 조정.
위에서 설명한 내용이 Flexbox의 80% 이상을 차지하며, 이 기본 개념을 활용하여 프로젝트에서 다양한 레이아웃을 구현할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Flex</title>
</head>
<body>
<!-- Flex and alignment -->
<div
class="flex flex-wrap h-72 w-100 bg-gray-100 justify-around items-center"
>
<div class="p-10 border border-blue-600 bg-blue-100">01</div>
<div class="p-10 border border-blue-600 bg-blue-100">02</div>
<div class="self-start p-10 border border-blue-600 bg-blue-100">03</div>
<div class="self-end p-10 border border-blue-600 bg-blue-100">04</div>
</div>
<!-- Flex Column, Gap and Order -->
<div
class="flex flex-col gap-4 w-100 bg-gray-200 justify-around items-center"
>
<div class="order-4 p-10 border border-blue-600 bg-blue-100">01</div>
<div class="order-1 p-10 border border-blue-600 bg-blue-100">02</div>
<div class="p-10 border border-blue-600 bg-blue-100">03</div>
<div class="p-10 border border-blue-600 bg-blue-100">04</div>
</div>
<!-- Grow and shrink -->
<div class="flex w-100 bg-gray-300">
<!-- flex-none: Prevent item from growing or shrinking -->
<div class="w-64 flex-none p-10 border border-blue-600 bg-blue-100">
01
</div>
<!-- flex-initial: Allow item to shrink but not grow, taking into account its initial size -->
<div class="w-64 flex-initial p-10 border border-blue-600 bg-blue-100">
02
</div>
<!-- flex-auto: Allow item to grow and shrink, taking into account its initial size -->
<div class="w-64 flex-auto p-10 border border-blue-600 bg-blue-100">
03
</div>
<!-- flex-1: Allow item to grow and shrink as needed, ignoring its initial size -->
<div class="w-64 flex-1 p-10 border border-blue-600 bg-blue-100 ">04</div>
<div class="p-10 border border-blue-600 bg-blue-100">05</div>
<div class="p-10 border border-blue-600 bg-blue-100">06</div>
<div class="p-10 border border-blue-600 bg-blue-100">07</div>
</div>
</body>
</html>
<!-- Justify Content
justify-start justify-content: flex-start;
justify-end justify-content: flex-end;
justify-center justify-content: center;
justify-between justify-content: space-between;
justify-around justify-content: space-around;
justify-evenly justify-content: space-evenly;
-->
<!--
items-start align-items: flex-start;
items-end align-items: flex-end;
items-center align-items: center;
items-baseline align-items: baseline;
items-stretch align-items: stretch;
-->
<!-- Flex Direction
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;
-->
<!--
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;
-->
<!-- Flex Properties
flex-none flex: none;
Prevent item from growing or shrinking
flex-initial flex: 0 1 auto;
Allow item to shrink but not grow, taking into account its initial size
flex-auto flex: 1 1 auto;
Allow item to grow and shrink, taking into account its initial size
flex-1 flex: 1 1 0%;
Allow item to grow and shrink as needed, ignoring its initial size
-->
5.Grid 설정:
기본 Grid 설정:
- grid 클래스를 사용하여 display: grid를 적용합니다.
- Grid 내부에 여러 개의 div를 배치하고, 각각에 padding, border, 배경색 등을 설정할 수 있습니다.
- 예를 들어, 9개의 항목을 다음과 같이 생성할 수 있습니다
<div class="grid"> <div class="p-10 border border-blue-600 bg-blue-100">Item 1</div> <div class="p-10 border border-blue-600 bg-blue-100">Item 2</div> <!-- 나머지 항목들 --> </div>
열과 행의 설정:
- 열의 개수를 지정할 때는 grid-cols-3와 같은 클래스를 사용합니다. 이 경우 3개의 열이 동일한 너비로 생성됩니다.
- 행의 개수도 grid-rows-6과 같은 클래스로 지정할 수 있지만, 기본적으로 내용이 채워지지 않으면 변화가 없습니다.
간격(Gap) 설정:
- gap-2, gap-4 등의 클래스를 사용하여 항목들 간의 간격을 설정할 수 있습니다. 이는 행과 열 모두에 적용됩니다.
열 및 행의 병합(Span):
- 특정 항목이 두 개 이상의 열 또는 행을 차지하도록 하려면 col-span-2 또는 row-span-2와 같은 클래스를 사용합니다.
예를 들어, 첫 번째 항목이 두 개의 열을 차지하도록 하려면:
<div class="p-10 border border-blue-600 bg-blue-100 col-span-2">Item 1</div>
반응형 디자인:
- 작은 화면에서는 열이 하나로만 표시되고, 큰 화면에서는 여러 개의 열이 표시되도록 하려면 grid-cols-1 md:grid-cols-3와 같은 반응형 클래스를 사용할 수 있습니다.
- 항목별로도 반응형 설정을 추가하여 작은 화면에서는 단순히 쌓이고, 큰 화면에서는 지정된 레이아웃을 유지하도록 설정할 수 있습니다.
실전에서의 사용:
- 프로젝트에서 Grid를 사용하겠지만, Flexbox가 더 간편하게 사용할 수 있는 경우가 많아 Flexbox를 주로 사용하는 편입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Grid</title>
</head>
<body>
<!-- Grid cols and rows -->
<div class="grid grid-cols-3 grid-rows-4 gap-4 w-100 bg-gray-100">
<div class="p-10 border border-blue-600 bg-blue-100">01</div>
<div class="p-10 border border-blue-600 bg-blue-100">02</div>
<div class="p-10 border border-blue-600 bg-blue-100">03</div>
<div class="p-10 border border-blue-600 bg-blue-100">04</div>
<div class="p-10 border border-blue-600 bg-blue-100">05</div>
<div class="p-10 border border-blue-600 bg-blue-100">06</div>
<div class="p-10 border border-blue-600 bg-blue-100">07</div>
<div class="p-10 border border-blue-600 bg-blue-100">08</div>
<div class="p-10 border border-blue-600 bg-blue-100">09</div>
</div>
<!-- Col and row span -->
<div class="grid grid-cols-3 gap-4 w-100 bg-gray-100">
<div
class="col-span-2 row-span-2 p-10 border border-blue-600 bg-blue-100"
>
01
</div>
<div class="p-10 border border-blue-600 bg-blue-100">02</div>
<div class="p-10 border border-blue-600 bg-blue-100">03</div>
<div class="p-10 border border-blue-600 bg-blue-100">04</div>
<div class="p-10 border border-blue-600 bg-blue-100">05</div>
<div class="p-10 border border-blue-600 bg-blue-100">06</div>
<div class="col-span-3 p-10 border border-blue-600 bg-blue-100">07</div>
<div class="p-10 border border-blue-600 bg-blue-100">08</div>
<div class="col-span-2 p-10 border border-blue-600 bg-blue-100">09</div>
</div>
</body>
</html>
<!--
Grid Template Columns
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none grid-template-columns: none;
-->
<!-- Grid Template Rows
grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4 grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5 grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6 grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-none grid-template-rows: none;
-->
6. transform-transition
Tailwind CSS에서 제공하는 transition과 transform 클래스를 사용하여 요소에 애니메이션 효과를 줄 수 있습니다. 다음은 주요 내용입니다:
1. Transition 클래스:
- Tailwind에는 다양한 transition 클래스가 있습니다. 기본적으로 transition-all, transition-colors, transition-opacity, transition-shadow, transition-transform 등을 사용할 수 있습니다.
- 기본 transition 시간은 150ms이며, duration-1000처럼 시간을 변경할 수 있습니다. 예를 들어, duration-1000은 1초(1000ms) 동안 효과가 적용됩니다.
- 특정 속성에만 transition을 적용하고 싶다면 transition-colors처럼 원하는 속성을 지정할 수 있습니다.
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-1000"> Hover Me </button>
이 코드는 버튼이 호버될 때 배경색이 천천히 변하는 효과를 줍니다.
2. Transform 클래스:
- Tailwind에서 transform 클래스를 사용하면 요소를 회전, 크기 조정, 이동, 기울임 등 다양한 변형을 할 수 있습니다.
- 예를 들어, rotate-12는 요소를 12도 회전시키고, scale-75는 요소 크기를 75%로 줄입니다.
- 또한 hover와 함께 사용하여 특정 조건에서 변형을 적용할 수 있습니다.
<button class="transform hover:rotate-180 hover:scale-75 transition-transform duration-1000"> Rotate & Scale </button>
이 코드는 버튼을 호버할 때 180도 회전하고 크기를 줄이는 효과를 줍니다.
3. 이미지에 Transform 및 Transition 적용:
- 이미지에도 동일하게 transform과 transition을 적용할 수 있습니다. 예를 들어, 호버 시 이미지가 180도 회전하고 기울어지도록 설정할 수 있습니다.
<img src="image1.jpg" class="w-48 hover:rotate-180 hover:skew-x-12 hover:scale-75 transition-transform duration-1000" />
이 코드는 이미지를 호버할 때 180도 회전하고, X축으로 기울어지며, 크기가 줄어드는 효과를 줍니다.
4. Tailwind 설정 확장:
- Tailwind의 기본 설정 외에도 커스텀 값을 설정할 수 있습니다. 예를 들어, tailwind.config.js 파일에서 transition 시간을 2000ms로 설정하여 사용할 수 있습니다.
tailwind.config = {
theme: {
extend: {
transitionDuration: {
'2000': '2000ms',
},
},
},
};
설정한 후에는 duration-2000 클래스를 사용하여 2초 동안 transition을 적용할 수 있습니다.
5. 결론:
Tailwind는 매우 유연하게 transition과 transform을 설정할 수 있으며, 기본 제공되는 클래스 외에도 사용자 정의 설정을 통해 더욱 복잡한 애니메이션 효과를 구현할 수 있습니다. 다음 비디오에서는 Tailwind의 애니메이션 기능을 다룰 예정입니다.
7.animation Classes & Keyframes
1. 기본 애니메이션 클래스
Tailwind는 몇 가지 기본 애니메이션을 제공합니다:
- animate-none: 애니메이션 없음.
- animate-spin: 요소를 0도에서 360도까지 회전시키는 애니메이션(무한 반복).
- animate-ping: 확산하는 듯한 효과를 줍니다.
- animate-pulse: 점점 밝아졌다 어두워지는 효과를 반복합니다.
- animate-bounce: 요소가 위아래로 튀는 효과를 줍니다.
예를 들어, 다음과 같이 animate-spin 클래스를 추가하면 SVG가 회전하게 됩니다:
<svg class="animate-spin"> <!-- SVG 내용 --> </svg>
2. Tailwind 설정에서 커스텀 애니메이션 추가
Tailwind의 설정 파일을 이용해 사용자 정의 애니메이션을 추가할 수 있습니다. 예를 들어, spin-slow라는 느린 회전 애니메이션을 만들려면 다음과 같이 설정합니다:
tailwind.config = {
theme: {
extend: {
animation: {
'spin-slow': 'spin 3s linear infinite',
},
},
},
};
그런 다음, HTML에서 animate-spin-slow 클래스를 추가하여 애니메이션을 사용할 수 있습니다:
<svg class="animate-spin-slow"> <!-- SVG 내용 --> </svg>
3. 커스텀 키프레임 애니메이션 생성
완전히 새로운 애니메이션을 만들고 싶다면, 키프레임을 정의할 수 있습니다. 예를 들어, wiggle이라는 애니메이션을 정의하고 적용하는 과정은 다음과 같습니다:
tailwind.config = {
theme: {
extend: {
animation: {
'wiggle': 'wiggle 1s ease-in-out infinite',
},
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-12deg)' },
'50%': { transform: 'rotate(12deg)' },
},
},
},
},
};
이렇게 설정한 후, animate-wiggle 클래스를 사용하면 해당 애니메이션이 적용됩니다:
<svg class="animate-wiggle"> <!-- SVG 내용 --> </svg>
8.커스터마이징
1. Tailwind 설정 방법
Tailwind 설정은 사용하는 방식에 따라 다릅니다. 현재는 CDN을 사용 중이므로 Tailwind 설정을 <script> 태그 내에서 tailwind.config 객체에 추가합니다. 나중에 Tailwind CLI를 사용할 때는 tailwind.config.js 파일을 통해 설정을 관리하게 됩니다.
CDN을 사용할 때는 다음과 같이 설정합니다:
<script>
tailwind.config = {
// 설정 내용
}
</script>
CLI를 사용할 때는 module.exports로 설정을 내보내는 방식으로 진행됩니다:
module.exports = {
// 설정 내용
}
2. 반응형 화면의 Breakpoints 커스터마이징
Tailwind는 기본적으로 small, medium, large 등 반응형 화면 크기 기준점을 제공합니다. 이를 변경하려면 screens 설정을 업데이트하면 됩니다:
tailwind.config = {
theme: {
screens: {
sm: '550px',
md: '800px',
lg: '1200px',
xl: '1440px',
},
},
};
위 설정을 적용하면 각 화면 크기에 따라 색상이 변경되거나 요소의 스타일이 달라지는 식으로 화면이 반응합니다.
3. 폰트 설정
폰트 패밀리도 Tailwind에서 설정 가능합니다:
tailwind.config = {
theme: {
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
},
};
4. 컬러 확장
커스텀 컬러를 추가하려면 extend를 사용해 확장할 수 있습니다:
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#f5733a',
secondary: '#ffc233',
},
},
},
};
이제 text-primary 또는 bg-secondary 클래스를 사용해 해당 색상을 텍스트 또는 배경에 적용할 수 있습니다.
5. 간격(spacing) 확장
기본적으로 제공되는 간격 이외에도 커스텀 간격을 추가할 수 있습니다:
tailwind.config = {
theme: {
extend: {
spacing: {
128: '32rem',
},
},
},
};
이렇게 하면 m-128과 같은 클래스를 사용해 32rem 간격을 적용할 수 있습니다.
6. 테두리 반경(border radius) 확장
기본 제공되는 반경 외에 추가로 확장할 수 있습니다:
tailwind.config = {
theme: {
extend: {
borderRadius: {
'4xl': '2rem',
},
},
},
};
이제 rounded-4xl 클래스를 사용해 2rem의 둥근 모서리를 적용할 수 있습니다.
7. CDN 사용의 한계
CDN을 통해 Tailwind를 사용하는 경우 일부 기능이 제한되며, 개발 환경을 설정할 때는 CLI를 사용하는 것이 좋습니다. CLI는 추가 기능과 더 많은 설정을 제공하며, Tailwind의 최종 프로젝트에서는 CLI 기반 환경을 추천합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
screens: {
sm: '550px',
md: '800px',
lg: '1200px',
xl: '1440px',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
colors: {
primary: '#ff5733',
secondary: '#fffc33',
},
spacing: {
6: '2.5rem',
128: '32rem',
},
borderRadius: {
'4xl': '2rem',
},
},
},
}
</script>
<title>Customization</title>
</head>
<body
class="bg-black sm:bg-green-800 md:bg-blue-800 lg:bg-yellow-800 xl:bg-purple-800 2xl:bg-orange-800"
>
<div
class="border-secondary border p-6 mb-128 max-w-sm mx-auto rounded-4xl"
>
<h1 class="text-primary text-xl bg-">dsssd</h1>
</div>
<script>
function showBrowserWidth() {
const width = window.innerWidth
document.querySelector('h1').innerHTML = `Width: ${width}`
}
window.onload = showBrowserWidth
window.onresize = showBrowserWidth
</script>
</body>
</html>
<!-- Breakpoint Classes
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
-->
9.다크모드
Tailwind의 다크 모드 기능에 대해 설명드리겠습니다. 이 기능은 사용자의 운영체제(OS)가 다크 모드일 때 특정 스타일을 적용할 수 있도록 해줍니다. 다크 모드 스타일을 적용하려면 dark:라는 접두사를 사용합니다. 이 접두사는 운영체제가 다크 모드인 경우에만 적용됩니다. 예를 들어, dark:bg-slate-900처럼 사용할 수 있습니다.
운영체제의 다크 모드에 따라 자동으로 스타일을 변경하는 것뿐만 아니라, 클래스 기반으로 다크 모드를 제어할 수도 있습니다. HTML 요소에 dark 클래스를 추가하면 해당 요소에 다크 모드 스타일이 적용됩니다.
다크 모드 설정 방법
운영체제 기반 다크 모드 적용:
- 운영체제가 다크 모드일 때 자동으로 스타일을 변경하려면 Tailwind에서 dark: 접두사를 사용합니다. 예를 들어:
<div class="bg-white dark:bg-slate-900">...</div>
- 이 설정은 운영체제가 다크 모드일 때만 dark:bg-slate-900이 적용됩니다.
클래스 기반 다크 모드 적용:
- HTML의 class 속성에 dark 클래스를 추가해 다크 모드를 제어할 수 있습니다.
- Tailwind 설정 파일에서 darkMode: 'class'로 설정해야 합니다
tailwind.config = {
darkMode: 'class',
}
이후 HTML에 dark 클래스를 추가하면, 다크 모드 스타일이 적용됩니다
<html class="dark">...</html>
다크 모드 토글 기능 구현:
- 다크 모드를 토글하는 버튼을 만들고, JavaScript를 이용해 dark 클래스를 동적으로 추가하거나 제거할 수 있습니다:
const toggleSwitch = document.getElementById('toggle');
toggleSwitch.addEventListener('change', function () {
if (this.checked) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
Tailwind Components에서 다크 모드 토글 버튼 사용:
- Tailwind Components 사이트에서 미리 제작된 다크 모드 토글 버튼을 가져와 활용할 수 있습니다. CSS 및 JavaScript를 약간 수정해 사용 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
}
</script>
<!-- <style>
.toggle-checkbox:checked {
right: 0;
border-color: #68d391;
}
.toggle-checkbox:checked + .toggle-label {
background: #68d391;
}
</style> -->
<title>Dark Mode</title>
</head>
<body>
<div
class="container mx-auto mt-10 bg-white
dark:bg-slate-900 rounded-xl px-6 py-8 shadow xl"
>
<h3 class="text-slate-900 dark:text-white font-medium tracking-tight">
Lorem ipsum dolor sit.
</h3>
<p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
placeat earum a exercitationem? Minima corrupti ad magni aut suscipit
nulla voluptatem atque vitae fugit at.
</p>
</div>
<div
class="relative inline-block w-10 mr-2 ml-6 mt-6 align-middle
select-none transition duration-200 ease-in"
>
<input
type="checkbox"
name="toggle"
id="toggle"
class="toggle-checkbox absolute block w-6
h-6 rounded-full bg-white border-4 appearance-none
cursor-pointer checked:right-0 checked:border-green-400 "
/>
<label
for="toggle"
class="toggle-label block overflow-hidden h-6
rounded-full bg-gray-300 cursor-pointer checked:bg-green-400"
></label>
</div>
<script>
document.getElementById('toggle').addEventListener('change', function () {
if (this.checked) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
})
</script>
</body>
</html>
<!-- Credit for toggle button style
https://tailwindcomponents.com/component/toggle-switch
-->
댓글 ( 0)
댓글 남기기