2025.2.4 화요일의 공부기록
Tailwind CSS는 다양한 상태 기반 스타일링과 애니메이션 기능을 제공하여, 복잡한 인터랙티브 UI를 손쉽게 구현할 수 있다.
이번에는 first, last, odd, even, 애니메이션 효과, :empty 상태, 그리고 group-* Modifier를 활용한 상위 요소 기반 스타일링을 다룬다.
first, last, odd, even Modifiers
Tailwind CSS는 리스트 또는 요소 그룹 내에서 위치에 따라 스타일을 다르게 적용할 수 있는 Modifiers를 제공한다.
✅ 기본 사용법
first:→ 첫 번째 자식 요소에 스타일 적용last:→ 마지막 자식 요소에 스타일 적용odd:→ 홀수 번째 요소에 스타일 적용even:→ 짝수 번째 요소에 스타일 적용
✅ 예제 1: 리스트 항목에 위치 기반 스타일 적용
<ul class="divide-y divide-gray-200">
<li class="p-4 first:bg-green-100 last:bg-blue-100 odd:bg-gray-100 even:bg-white">
첫 번째 항목 (초록색 배경)
</li>
<li class="p-4 odd:bg-gray-100 even:bg-white">두 번째 항목 (흰색 배경)</li>
<li class="p-4 odd:bg-gray-100 even:bg-white">세 번째 항목 (회색 배경)</li>
<li class="p-4 odd:bg-gray-100 even:bg-white">
마지막 항목 (파란색 배경)
</li>
</ul>📌 설명:
first:bg-green-100→ 첫 번째 항목에 초록색 배경 적용last:bg-blue-100→ 마지막 항목에 파란색 배경 적용odd:bg-gray-100,even:bg-white→ 홀수/짝수 항목에 번갈아 색상 적용
✅ 예제 2: 테이블 행에 홀수/짝수 배경 적용
<table class="table-auto w-full border-collapse border border-gray-300">
<tr class="odd:bg-gray-100 even:bg-white">
<td class="p-2 border">행 1</td>
</tr>
<tr class="odd:bg-gray-100 even:bg-white">
<td class="p-2 border">행 2</td>
</tr>
<tr class="odd:bg-gray-100 even:bg-white">
<td class="p-2 border">행 3</td>
</tr>
</table>📌 설명:
odd:bg-gray-100,even:bg-white→ 테이블 행의 배경을 홀수/짝수로 번갈아가며 적용
애니메이션 효과 (Animation)
Tailwind CSS는 기본적으로 다양한 애니메이션 효과를 지원하며, 커스텀 애니메이션도 쉽게 설정할 수 있다.
✅ 기본 제공 애니메이션
| 클래스 | 설명 |
|---|---|
animate-spin | 요소가 계속 회전 |
animate-ping | 요소가 커졌다 작아지면서 펄스 효과 |
animate-pulse | 요소가 천천히 밝아졌다 어두워짐 |
animate-bounce | 요소가 위아래로 튀는 효과 |
✅ 예제 1: 로딩 스피너 (Spin)
<div class="h-12 w-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>📌 설명:
animate-spin→ 요소가 회전하면서 로딩 스피너처럼 보임
✅ 예제 2: 펄스 애니메이션
<button class="bg-blue-500 text-white px-4 py-2 rounded-md animate-pulse">
클릭하세요
</button>📌 설명:
animate-pulse→ 버튼이 서서히 밝아졌다 어두워지는 펄스 효과 적용
✅ 예제 3: 커스텀 애니메이션 추가 (Gradient 이동)
tailwind.config.js 파일을 수정하여 커스텀 애니메이션을 추가할 수 있다.
// tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
'gradient-x': 'gradient-x 3s ease infinite',
},
keyframes: {
'gradient-x': {
'0%, 100%': { backgroundPosition: 'left' },
'50%': { backgroundPosition: 'right' },
},
},
},
},
plugins: [],
};<div class="h-32 w-full bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 bg-[length:200%_200%] animate-gradient-x"></div>📌 설명:
animate-gradient-x→ 그라디언트 배경이 왼쪽에서 오른쪽으로 이동하는 애니메이션 효과 적용
:empty 상태 스타일링
:empty CSS 수도 클래스는 자식 요소가 없는 모든 요소를 대상으로 한다.
공백 문자(스페이스, 줄바꿈 포함)도 자식 요소로 간주되므로 주의해야 한다.
✅ 예제 1: 빈 요소 강조
<div class="border p-4">
<p class="empty:bg-red-100 empty:text-red-500">이 텍스트가 있으면 변경되지 않습니다.</p>
<p class="empty:bg-red-100 empty:text-red-500"></p>
</div>📌 설명:
- 내용이 없는 두 번째
<p>태그에empty:bg-red-100및empty:text-red-500스타일이 적용됨.
✅ 예제 2: 빈 리스트 항목 스타일링
<ul>
<li class="empty:bg-gray-200">항목 1</li>
<li class="empty:bg-gray-200"></li>
<li class="empty:bg-gray-200">항목 3</li>
</ul>📌 설명:
- 두 번째 리스트 항목(
li)은 내용이 없기 때문에empty:bg-gray-200이 적용되어 배경색이 회색으로 변경된다.
상위 요소 상태에 따른 스타일링 (group-* Modifiers)
Tailwind CSS에서는 상위 요소의 상태에 따라 자식 요소의 스타일을 변경할 수 있는 group Modifier를 제공한다.
📌 주요 특징
- 상위 요소에
group클래스 추가- 자식 요소는
group-hover,group-focus등의 Modifiers로 상위 요소의 상태를 참조할 수 있다.
- 자식 요소는
- 상위 요소 기반의 동적 스타일링 가능
- 복잡한 상호작용을 구현할 때 유용하다.
✅ 예제 1: 마우스를 올리면 자식 요소 색상 변경
<div class="group p-4 border border-gray-300 hover:bg-gray-100">
<h1 class="text-xl font-bold group-hover:text-blue-500">
마우스를 올리면 이 텍스트가 파란색으로 변합니다.
</h1>
<p class="group-hover:italic">
이 텍스트는 기울임꼴로 변합니다.
</p>
</div>📌 설명:
- 부모 요소(
div)에group클래스를 추가하고, 자식 요소에group-hover:*Modifiers를 사용해 상위 요소의 Hover 상태에 따라 스타일 변경.
✅ 예제 2: 입력 필드 포커스 시 버튼 활성화
<div class="group">
<input type="text" class="border p-2 group-focus-within:border-blue-500" placeholder="입력하세요..." />
<button class="bg-gray-400 text-white px-4 py-2 rounded-md group-focus-within:bg-blue-500">
포커스 시 파란색으로 변경
</button>
</div>📌 설명:
group-focus-within:*→ 입력 필드에 포커스가 있을 때 버튼의 배경색이 파란색으로 변경됨.
Tailwind CSS의 다양한 Modifiers와 상태 기반 스타일링 기능을 활용하면 적은 코드로도 강력하고 유연한 UI를 만들 수 있다!
자세한 내용은 Tailwind CSS 공식 문서와 애니메이션 문서를 참고하자.
