← 전체 목록으로

Session 2: 인터랙션과 애니메이션 ✨

hover, transition, group으로 생동감 있는 UI 만들기

⏱️ 2시간 🎯 hover, transition, transform, group

🎯 학습 목표

📚 단계별 학습

Step 1

hover 기초

hover:bg-, hover:text-로 마우스 오버 효과 만들기

⏱️ 30분 | 🎯 버튼, 링크, 카드 hover
Step 2

transition과 transform

부드러운 애니메이션과 확대/이동 효과

⏱️ 40분 | 🎯 scale, rotate, translate
Step 3

group으로 연동 효과

부모 hover 시 자식 요소들 함께 애니메이션

⏱️ 30분 | 🎯 카드 전체 인터랙션
연습문제

실습하기

배운 내용으로 다양한 인터랙티브 UI 만들기

⏱️ 20분 | 🎯 6개 문제

💡 핵심 개념

1. hover: 마우스 오버 효과

hover:bg-blue-600
hover:text-white
hover:shadow-lg

마우스를 올렸을 때만 스타일 변경

2. transition: 부드러운 전환

transition-colors
transition-all
duration-300

스타일 변화를 부드럽게 애니메이션

3. transform: 변형 효과

hover:scale-105 (확대)
hover:-translate-y-1 (위로)
hover:rotate-6 (회전)

크기, 위치, 각도 변경

4. group: 연동 효과

class="group"
group-hover:text-blue-600
group-hover:scale-110

부모 hover 시 자식들도 반응

🚀 실무 팁

1. transition은 필수: hover 효과에는 항상 transition을 함께 사용하세요

2. 속도는 적당히: duration-300이 가장 자연스러움

3. scale은 미묘하게: scale-105 정도가 적당 (너무 크면 어색)

4. group은 카드에 필수: 카드 전체 hover 시 내부도 반응하게

📖 참고 자료