부모 hover 시 자식 요소들도 함께 반응하게 만들기
카드 전체에 마우스를 올렸을 때, 내부의 버튼이나 텍스트도 반응하게 하려면?
❌ group 없음 (버튼에만 마우스 올려야 반응)
카드에 마우스를 올려도 버튼이 반응 안 함
✅ group 있음 (카드 전체에 마우스만 올려도 반응)
카드에 마우스를 올려보세요!
<!-- 부모에 group 클래스 추가 -->
<div class="group">
<h3>제목</h3>
<!-- 자식은 group-hover: 사용 -->
<button class="bg-blue-500 group-hover:bg-blue-600">
버튼
</button>
</div>카드 hover 시 제목, 설명, 링크가 모두 반응합니다.
카드에 마우스를 올려보세요
자세히 보기 →여러 요소가 함께 반응
자세히 보기 →<div class="group">
<h3 class="text-gray-800 group-hover:text-blue-600">제목</h3>
<p class="text-gray-600 group-hover:text-gray-800">설명</p>
<span class="text-blue-600 group-hover:underline">링크</span>
</div>카드 hover 시 아이콘이나 이미지에 효과를 줄 수 있습니다.
카드 hover 시 아이콘이 커집니다
카드 hover 시 아이콘이 돌아갑니다
카드 hover 시 아이콘이 올라갑니다
<div class="group">
<div class="text-5xl group-hover:scale-110 transition-transform">
🚀
</div>
<h3>제목</h3>
</div>지금까지 배운 모든 것을 조합한 실무급 카드입니다.
고성능 개발자 노트북
노이즈 캔슬링 헤드폰
건강 관리 스마트워치
<div class="group hover:shadow-2xl hover:-translate-y-2 transition-all">
<!-- 이미지 -->
<div class="group-hover:from-blue-200 transition-colors">
<span class="group-hover:scale-110 transition-transform">💻</span>
</div>
<!-- 내용 -->
<h3 class="group-hover:text-blue-600 transition-colors">제목</h3>
<button class="group-hover:bg-blue-600 group-hover:scale-105">버튼</button>
</div>아래 카드를 group을 사용해서 인터랙티브하게 만들어보세요:
전문가를 위한 디자인 소프트웨어
추가할 효과:
1. 부모에 group: 연동 효과의 시작점
2. 자식에 group-hover: 부모 hover 시 반응
3. transition 잊지 말기: 부드러운 애니메이션 필수
4. 실무 활용: 상품 카드, 블로그 카드, 프로필 카드
5. 조합 추천: scale + 색상 변경 + shadow
hover, transition, transform, group을 마스터했습니다.
이제 연습문제로 실력을 다져보세요!