Step 2: transition과 transform 🎬

부드러운 애니메이션과 변형 효과 만들기

1. transition: 부드러운 전환

Step 1의 hover는 변화가 즉시 일어났습니다. transition을 추가하면 부드럽게 변합니다.

❌ transition 없음 (뚝뚝 끊김)

✅ transition 있음 (부드러움)

<!-- transition-colors: 색상 변화만 부드럽게 -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors">
  버튼
</button>

transition 종류 (어떤 걸 부드럽게 할까?)

<!-- 자주 쓰는 transition들 -->
transition-colors  <!-- 색상 변화 -->
transition-shadow  <!-- 그림자 변화 -->
transition-all     <!-- 모든 변화 (편하지만 성능은 조금 느림) -->

2. duration: 애니메이션 속도

얼마나 천천히 변할지 조절할 수 있습니다.

💡 실무 팁: duration-300이 가장 자연스럽습니다. 너무 빠르면 못 느끼고, 너무 느리면 답답해요.

3. transform: scale (확대/축소)

요소를 확대하거나 축소할 수 있습니다.

📦

scale-90 (축소)

📦

scale-100 (기본)

📦

scale-105 ⭐ 추천

📦

scale-110

<div class="hover:scale-105 transition-transform duration-300">
  <!-- 마우스 오버 시 5% 확대 -->
</div>

💡 실무 팁: scale-105 정도가 적당합니다. 너무 크면 주변 요소와 겹쳐서 어색해요.

4. transform: translate (이동)

요소를 위, 아래, 좌, 우로 이동시킬 수 있습니다.

<!-- 위로 올리기 (카드에 자주 사용) -->
<div class="hover:-translate-y-2 transition-transform">
  카드
</div>

<!-- -는 반대 방향 (위, 왼쪽) -->
-translate-y-2  (위로)
translate-y-2   (아래로)

5. 종합: 멋진 카드 만들기

배운 것들을 조합하면 정말 멋진 효과를 만들 수 있습니다.

🚀

확대 + 그림자

scale + shadow 조합

💎

위로 + 그림자

translate + shadow 조합

✨

모든 효과

최고의 조합!

<!-- 실무에서 가장 많이 쓰는 카드 효과 -->
<div class="shadow-md hover:shadow-xl hover:-translate-y-2 transition-all duration-300">
  카드 내용
</div>

✏️ 직접 해보기

아래 카드에 다음 효과를 추가해보세요:

연습 카드

1. hover 시 5% 확대
2. 위로 살짝 이동
3. 그림자 크게
4. 부드럽게 애니메이션

정답:


              hover:scale-105 hover:-translate-y-2 hover:shadow-xl
              transition-all duration-300

💡 핵심 정리

1. transition: 변화를 부드럽게 (항상 함께 사용!)

2. duration-300: 가장 자연스러운 속도

3. hover:scale-105: 살짝 확대 (카드에 적합)

4. hover:-translate-y-2: 위로 올라오는 효과

5. 실무 조합: shadow + translate + transition-all

Step 3: group으로 연동 효과 →