2025.1.31 금요일의 공부기록
Tailwind CSS에서는 다양한 Modifiers(수정자)를 사용하여 반응형 디자인, 상태 기반 스타일링, 형제 요소 간 상호작용 등을 쉽게 구현할 수 있다.
이번 정리에서는 Ring, Responsive Modifiers, Gradient, Invalid Modifier, Peer Modifier를 학습하고 활용하는 방법을 다룬다.
Ring 효과 적용 (Ring 연습)
ring-{size}, ring-{color}, ring-offset-{size} 등을 활용하여 요소 주위에 테두리 효과를 추가할 수 있다.
✅ 기본 Ring 예제
<button class="ring-4 ring-blue-500 px-4 py-2 rounded-md">
클릭하면 강조됨
</button>📌 설명:
ring-4→ 테두리 크기 4pxring-blue-500→ 테두리 색상 파랑rounded-md→ 모서리 둥글게 처리
✅ Focus 상태에서 Ring 추가
<input type="text" class="ring-2 ring-gray-400 focus:ring-4 focus:ring-blue-500 p-2 border rounded-md">📌 설명:
- 기본 상태:
ring-2 ring-gray-400 - 포커스되면(
focus:)ring-4및ring-blue-500적용됨
반응형 Modifiers (Responsive Modifiers)
Tailwind CSS에서는 sm, md, lg, xl 등의 반응형 접두어(Responsive Modifiers)를 제공하여, 화면 크기에 따라 다른 스타일을 적용할 수 있다.
✅ 반응형 글꼴 크기 조절
<p class="text-sm md:text-lg lg:text-xl xl:text-2xl">
화면 크기에 따라 크기가 변경됨
</p>📌 설명:
text-sm→ 기본적으로 작은 글꼴md:text-lg→ 중간 크기 화면에서 글꼴 크기 증가lg:text-xl,xl:text-2xl→ 더 큰 화면에서 글꼴 크기 증가
✅ 반응형 배경색 변경
<div class="bg-gray-200 sm:bg-blue-300 md:bg-green-400 lg:bg-red-500 p-4">
화면 크기에 따라 배경색이 변경됨
</div>📌 설명:
- 기본 배경색:
bg-gray-200 sm:bg-blue-300→ 작은 화면에서 파란색md:bg-green-400,lg:bg-red-500→ 더 큰 화면에서 다른 색상 적용
Gradient 배경 적용
Tailwind CSS에서는 그라디언트(Gradient) 효과를 쉽게 추가할 수 있다.
✅ 기본 그라디언트
<div class="bg-gradient-to-r from-blue-500 to-green-500 p-4 text-white">
왼쪽에서 오른쪽으로 그라디언트 적용됨
</div>📌 설명:
bg-gradient-to-r→ 오른쪽 방향(to-r)으로 그라디언트 적용from-blue-500→ 시작 색상to-green-500→ 종료 색상
✅ 다중 그라디언트 색상 적용
<div class="bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 p-4 text-white">
보라 → 핑크 → 빨강 그라디언트 적용됨
</div>📌 설명:
bg-gradient-to-br→ 오른쪽 아래(to-br) 방향으로 그라디언트 적용from-purple-500,via-pink-500,to-red-500→ 3단계 색상 변화
Invalid Modifier 사용
invalid: 접두어를 사용하면 입력 값이 잘못되었을 때 스타일을 변경할 수 있다.
✅ 잘못된 입력 시 테두리 강조
<input type="email" class="border border-gray-300 p-2 rounded-md invalid:border-red-500">📌 설명:
- 기본 상태:
border-gray-300 - 유효하지 않은 값 입력 시(
invalid:) 테두리가border-red-500으로 변경됨
✅ Invalid + Focus 조합 (중첩 가능)
<input type="email" class="border border-gray-300 p-2 rounded-md invalid:border-red-500 invalid:focus:ring-2 invalid:focus:ring-red-500">📌 설명:
invalid:border-red-500→ 잘못된 값 입력 시 테두리 빨강invalid:focus:ring-2 invalid:focus:ring-red-500→ 잘못된 값 입력 후 포커스되면 추가 강조
Peer Modifier (형제 요소 상태에 따라 스타일 적용)
peer 클래스를 사용하면 형제 요소의 상태를 기반으로 스타일을 변경할 수 있다.
다만, peer는 항상 이전 형제 요소에만 적용 가능하므로 HTML 구조를 주의해야 한다.
✅ 예제: 잘못된 입력 시 라벨 색상 변경
<label class="block">
<input type="email" class="peer border border-gray-300 p-2 rounded-md invalid:border-red-500">
<span class="peer-invalid:text-red-500">유효한 이메일을 입력하세요.</span>
</label>📌 설명:
peer클래스가 적용된input이invalid:상태가 되면peer-invalid:text-red-500이 적용되어 라벨 색상이 빨간색으로 변경됨.
❌ 잘못된 구조 (작동하지 않음)
<label>
<span class="peer-invalid:text-red-500">Email</span>
<input type="email" class="peer border border-gray-300 p-2 rounded-md invalid:border-red-500">
</label>📌 설명:
- peer는 항상 이전 형제 요소에서만 동작하므로,
span이input보다 먼저 나오면 적용되지 않는다.
중첩 Modifier 활용
Tailwind의 Modifiers는 중첩 가능하다.
예를 들어 invalid:와 focus:를 함께 사용할 수 있다.
✅ Invalid + Focus + Disabled 조합
<input type="email" class="border border-gray-300 p-2 rounded-md
invalid:border-red-500 focus:invalid:ring-2 focus:invalid:ring-red-500
disabled:bg-gray-200 disabled:text-gray-500">📌 설명:
invalid:border-red-500→ 잘못된 값 입력 시 테두리 빨강focus:invalid:ring-2 focus:invalid:ring-red-500→ 포커스 상태에서도 invalid 강조disabled:bg-gray-200 disabled:text-gray-500→ 비활성화 상태일 때 회색 배경과 흐린 텍스트 적용
정리
-
Ring 효과(
ring-{size}&ring-{color})- 요소의 테두리를 강조하는 효과로,
focus:와 조합하면 입력 필드에 유용하게 사용할 수 있다.
- 요소의 테두리를 강조하는 효과로,
-
반응형 Modifiers (
sm,md,lg등)- 화면 크기에 따라 유연하게 스타일을 변경할 수 있다.
-
Gradient 배경 (
bg-gradient-to-{direction})- 다채로운 배경 효과를 손쉽게 적용 가능하다.
-
Invalid Modifier (
invalid:)- 유효성 검사 결과에 따라 입력 필드의 스타일을 변경할 수 있다.
-
Peer Modifier (
peer-{modifier})- 형제 요소의 상태에 따라 스타일을 변경할 수 있으며, 항상 이전 형제 요소에만 적용 가능하므로 HTML 구조를 잘 설계해야 한다.
Tailwind CSS의 다양한 Modifiers를 활용하면, 스타일 유지보수를 최소화하면서도 강력한 동적 스타일링을 적용할 수 있다!
자세한 내용은 Tailwind 공식 문서를 참고하자.
