시작하며...지금까지 다양한 CSS 라이브러리를 사용해 보았다. 그중에서 가장 많이 사용해 본 라이브러리는 Tailwind CSS와 Emotion이다. 이 두 라이브러리를 성격이 많이 다른 라이브러리이다. 그래서 각 라이브러리의 특징을 알아보고 비교해 보면 좋을 거 같아 글을 작성하게 되었다. 1. Tailwind CSS🥇 마음속 1위우선 Tailwind CSS가 나에게는 1위이다.Tailwind CSS를 사용한 프로젝트의 회고록을 보았더니 정말 찬양할 정도를 Tailwind CSS를 좋아했다...ㅋㅋㅋㅋ 그래서 해당 라이브러리를 사용하면서 느낀 장점과 단점을 정리해 보았다. Tailwind CSS 장점1. 빠르고 간편한 반응형 디자인Tailwind는 미디어쿼리를 사용하지 않고 sm: md: lg: 이..

시작하며...카드 영역을 hover 했을 때, title 에 글자에 밑줄이 쳐지고 색상이 적용되는 것을 만들고 싶었다. 카드를 클릭하면 해당 게시물로 가는데 사용자 경험성 측면에서 이걸 클릭해야 게시물을 갈 수 있다는 걸 명확하게 알 수 없다고 생각이 들었다. 그래서 카드 영역을 hover 했을 때, title 에 밑줄과 색상을 적용해 보기로 했다! 적용하기참고로 Next.js + Tailwind CSS 이다. group, group-hover 클래스 작성부모 요소를 hover 했을 때, 자식 요소에 스타일을 지정해야 한다. 그러면 이를 아래 코드처럼 작성을 한다. group 은 부모 요소로 적용하고, group-hover 는 자식 요소에 적용하여 hover 를 했을 때 자식 요소에 특정 스타일을 적용할..