Step 1: hover 기초 🖱️

마우스를 올렸을 때 색상, 그림자 등을 변경하는 방법

1. 버튼 hover 효과

가장 기본적인 hover 효과입니다. 마우스를 올리면 색상이 변합니다.

<!-- hover:bg-로 배경색 변경 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded">
  hover 버튼
</button>

<!-- hover:text-로 글자색도 변경 -->
<button class="bg-green-500 hover:bg-green-600 text-white hover:text-yellow-200">
  색상 2개 변경
</button>

2. 링크 hover 효과

링크는 보통 색상 변경과 밑줄을 함께 사용합니다.

색상만 변경

밑줄 추가

색상 + 밑줄

밑줄 제거

<a href="#" class="text-blue-600 hover:text-blue-800 hover:underline">
  색상 + 밑줄
</a>

3. 그림자 hover 효과

그림자를 변경해서 입체감을 줄 수 있습니다.

그림자 추가

마우스를 올려보세요

그림자 확대

더 크게!

색상 그림자

파란 그림자

<!-- 그림자 추가 -->
<div class="hover:shadow-lg">...</div>

<!-- 그림자 확대 -->
<div class="shadow-md hover:shadow-xl">...</div>

4. 카드 hover 종합

여러 hover 효과를 조합해서 멋진 카드를 만들어봅시다.

📱

모바일 앱

배경, 그림자, 테두리 변경

💻

웹 개발

마우스를 올려보세요

🎨

디자인

여러 효과 조합

<div class="bg-white shadow-md hover:shadow-xl hover:bg-blue-50 border-2 border-transparent hover:border-blue-300">
  <!-- 여러 hover 효과 조합 -->
</div>

✏️ 직접 해보기

아래 버튼에 hover 효과를 추가해보세요:

힌트:

첫 번째: hover:bg-red-600 추가
두 번째: hover:bg-gray-800 hover:text-white 추가

💡 핵심 정리

1. hover: 마우스를 올렸을 때 스타일 변경

2. 자주 쓰는 조합: hover:bg-, hover:text-, hover:shadow-

3. 여러 효과 동시 사용 가능: 배경 + 글자 + 그림자

4. 실무 팁: 버튼과 카드에는 항상 hover 효과 추가

Step 2: transition과 transform →