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 에 색상과 언더라인이 적용된 것을 확인할 수 있다. 확실히 전보다는 이걸 클릭해야 해당 게시물을 갈 수 있다는 것을 명확하게 알 수 있게 되어 사용자의 경험성이 향상되었다.
마치며...
이러한 부분이 피그마와 요구사항에 나와있는 건 아니지만 프론트엔드 개발자로서 개발을 잘하는 것도 중요하지만 사용자 입장에서 어떤 식으로 하면 사용자 경험성이 좋아질지 고려하는 것도 중요한 역량이라고 생각한다!
