tailwind group-hover

agnusdei·2023년 8월 3일
0
post-custom-banner

Tailwind CSS의 group 클래스는 자식 요소를 감싸는 부모 요소에 적용하여, 부모 요소가 특정 상태일 때 자식 요소의 스타일을 변경하거나 특정 요소를 숨기거나 보여줄 수 있는 방법을 제공합니다. 일반적으로 이를 사용하여 상호 작용 요소를 디자인할 때 유용하게 활용할 수 있습니다.

예를 들어, group-hover를 사용하여 해당 값이 hidden 또는 invisible에서 block으로 변경되는 버튼을 만들어 보겠습니다.

HTML:

<div class="group">
  <button class="hidden group-hover:block">Click me</button>
</div>

이 코드에서 hidden 클래스는 버튼을 초기에 숨깁니다. 그리고 group-hover:block은 버튼이 부모 요소가 호버 상태일 때 보이도록 하는 클래스입니다. 따라서 마우스가 부모 요소 위에 있을 때, 버튼이 보이게 됩니다.

invisible 클래스를 사용하여 숨기는 예제도 살펴보겠습니다.

HTML:

<div class="group">
  <button class="invisible group-hover:visible">Hover over me</button>
</div>

이 코드에서 invisible 클래스는 버튼을 숨깁니다. 그리고 group-hover:visible은 버튼이 부모 요소가 호버 상태일 때 visible 클래스를 적용하여 버튼을 보이도록 합니다.

이러한 group 클래스와 group-hover 클래스를 활용하면 요소들 간의 인터랙션을 더 흥미롭게 만들 수 있습니다. 이를 통해 간단한 상호 작용을 구현하거나 사용자에게 시각적인 피드백을 제공하는 데 유용하게 활용할 수 있습니다.

post-custom-banner

0개의 댓글