2025.2.2 일요일의 공부기록
Tailwind CSS는 상태 기반 스타일링을 강력하게 지원하는 유틸리티 퍼스트 CSS 프레임워크다.
이번에는 자식 요소에 일괄 적용하는 *: Modifier와 부모 요소가 자식 상태에 따라 스타일을 변경할 수 있는 :has() Variant를 다루겠다.
자식 요소에 상태 일괄 적용 (*: Modifier)
*: Modifier는 부모 요소의 모든 자식 요소에 동일한 스타일을 적용할 때 사용된다.
이 기능을 통해 별도의 CSS 없이도 간단하게 스타일을 일괄 적용할 수 있다.
✅ 기본 사용법
<div class="hover:*:text-red-500">
<p>첫 번째 문장</p>
<p>두 번째 문장</p>
<p>세 번째 문장</p>
</div>📌 설명:
- 부모 요소(
div)에 마우스를 올리면(hover:) 모든 자식 요소(p)의 텍스트 색상이 빨간색(text-red-500)으로 변경된다.
✅ 자식 요소에 Hover & Focus 효과 일괄 적용
<div class="focus:*:underline hover:*:italic">
<input type="text" placeholder="포커스를 주면 밑줄이 생깁니다." />
<input type="text" placeholder="마우스를 올리면 기울임꼴이 됩니다." />
</div>📌 설명:
focus:*:underline→ 부모 요소에 포커스를 주면 모든 자식 요소에 밑줄이 적용된다.hover:*:italic→ 부모 요소에 마우스를 올리면 모든 자식 요소의 텍스트가 기울어짐.
:has() Variant: 부모 요소가 자식 상태에 따라 스타일 적용
:has()는 CSS에서 부모 요소가 자식 요소의 상태에 따라 스타일을 변경할 수 있는 기능이다.
이전에는 JavaScript를 사용해야 했던 로직을 CSS로 간편하게 처리할 수 있다.
📌 주요 특징
- 부모 기준 스타일링
- 부모 요소가 특정 자식 요소를 포함하고 있는 경우에 스타일을 적용할 수 있다.
- 복잡한 상태 관리 가능
:has()를 사용하면 중첩된 자식 요소 상태에 따라 부모 요소의 스타일을 유연하게 제어할 수 있다.
✅ 기본 사용법: 체크박스 선택 시 부모 배경 변경
<label class="p-4 border border-gray-300 has-[:checked]:bg-green-200">
<input type="checkbox" class="mr-2" />
체크박스를 선택하면 배경이 초록색으로 변합니다.
</label>📌 설명:
has-[:checked]:bg-green-200→ 체크박스(input[type="checkbox"])가 체크된 경우 부모(label)의 배경색이bg-green-200으로 변경됨.
✅ 예제: 입력 필드가 비어있으면 경고 표시
<form class="p-4 border has-[input:invalid]:border-red-500">
<input type="email" required class="border p-2" placeholder="이메일을 입력하세요" />
</form>📌 설명:
has-[input:invalid]:border-red-500→ 자식 요소인input이 유효하지 않은 값을 입력받으면 부모 요소(form)의 테두리가 빨간색으로 변경됨.
✅ 예제: 선택된 옵션에 따라 부모 스타일 변경
<div class="p-4 border has-[option:checked]:bg-blue-200">
<select>
<option value="">선택하세요</option>
<option value="1">옵션 1</option>
<option value="2">옵션 2</option>
</select>
</div>📌 설명:
has-[option:checked]:bg-blue-200→ 드롭다운에서 옵션이 선택되었을 때 부모div의 배경색이bg-blue-200으로 변경됨.
*:와 :has() 중첩 사용
Tailwind CSS에서는 Modifiers를 중첩해서 사용할 수 있다.
이를 통해 더욱 세밀한 스타일링이 가능하다.
✅ 예제: 자식 요소가 포커스를 받으면 부모와 형제 스타일 변경
<div class="p-4 border has-[:focus]:bg-yellow-100 hover:*:text-blue-500">
<input type="text" placeholder="여기에 포커스를 주면 부모 배경이 노란색으로 변합니다." />
<p>마우스를 올리면 이 텍스트가 파란색으로 변합니다.</p>
</div>📌 설명:
has-[:focus]:bg-yellow-100→ 자식 요소(input)에 포커스를 주면 부모 요소의 배경색이 노란색으로 변경됨.hover:*:text-blue-500→ 부모 요소에 마우스를 올리면 모든 자식 요소의 텍스트가 파란색으로 변경됨.
주의사항
-
브라우저 지원
:has()는 최신 브라우저(Chrome, Edge, Safari 등)에서만 지원된다. Internet Explorer에서는 지원되지 않음.- 브라우저 호환성을 고려해 사용할 것.
-
퍼포먼스
:has()는 강력한 기능이지만, 너무 많은 요소에 적용하면 성능 저하가 발생할 수 있다.- 필요한 곳에만 신중하게 사용하는 것이 좋다.
-
Tailwind 버전 확인
:has()Variant는 Tailwind CSS v3.4 이상에서 지원된다.- 프로젝트에 적용하기 전에 Tailwind 버전을 확인할 것.
Tailwind CSS의 State Modifiers를 활용하면, 더 적은 코드로 복잡한 인터랙티브 UI를 구현할 수 있다.
자세한 내용은 Tailwind CSS 공식 문서를 참고하자!
