Group Hover 그룹 호버 적용하기 (feat. Tailwind CSS)

시작하며...

카드 영역을 hover 했을 때, title 에 글자에 밑줄이 쳐지고 색상이 적용되는 것을 만들고 싶었다. 카드를 클릭하면 해당 게시물로 가는데 사용자 경험성 측면에서 이걸 클릭해야 게시물을 갈 수 있다는 걸 명확하게 알 수 없다고 생각이 들었다. 

약간 밋밋

그래서 카드 영역을 hover 했을 때, title 에 밑줄과 색상을 적용해 보기로 했다!

 

적용하기

참고로 Next.js + Tailwind CSS 이다.

 

group, group-hover 클래스 작성

부모 요소를 hover 했을 때, 자식 요소에 스타일을 지정해야 한다.

 

그러면 이를 아래 코드처럼 작성을 한다. group 은 부모 요소로 적용하고, group-hover 는 자식 요소에 적용하여 hover 를 했을 때 자식 요소에 특정 스타일을 적용할 수 있게 된다.

 

나는 부모를 호버 했을 때, title 이 될 자식인 group-hover 에 색상과 언더라인을 적용시켰다.

.group:hover .group-hover {
  color: #00bfa5;
  text-decoration: underline;
}

 

클래스 적용하기

이제 위에서 만든 클래스를 적용시켜 주면 된다.

적용하는 방법은 부모 요소에는 group 을, 스타일을 적용시킬 요소에는 group-hover 를 추가한다.

적용하기

 

결과

그러면 부모 요소인 카드를 호버 했을 때, title 에 색상과 언더라인이 적용된 것을 확인할 수 있다. 확실히 전보다는 이걸 클릭해야 해당 게시물을 갈 수 있다는 것을 명확하게 알 수 있게 되어 사용자의 경험성이 향상되었다.

결과

 

마치며...

이러한 부분이 피그마와 요구사항에 나와있는 건 아니지만 프론트엔드 개발자로서 개발을 잘하는 것도 중요하지만 사용자 입장에서 어떤 식으로 하면 사용자 경험성이 좋아질지 고려하는 것도 중요한 역량이라고 생각한다!