Step 1 - 기본 카드 만들기

🎯 학습 목표

카드 UI의 4가지 핵심 요소를 이해하고 기본 카드를 만들 수 있다

1️⃣ 배경색으로 박스 만들기

배경색이 있는 카드

bg-white

2️⃣ 패딩으로 여백 주기

내부 여백이 있는 카드

bg-white p-4

3️⃣ 둥근 모서리 추가

모서리가 둥근 카드

bg-white p-4 rounded

4️⃣ 그림자로 입체감 주기

완성된 기본 카드! 🎉

bg-white p-4 rounded shadow

💡 그림자 크기 비교

shadow

shadow-md

shadow-lg

💡 패딩 크기 비교

p-2 (작은 여백)

p-4 (기본 여백)

p-8 (큰 여백)

💡 모서리 둥글기 비교

rounded

rounded-lg

rounded-xl

🎨 직접 만들어보기

📝 미션

아래 빈 공간에 흰색 배경, 패딩 6, 큰 둥근 모서리, 중간 그림자를 가진 카드를 만들어보세요

힌트: bg-white p-6 rounded-lg shadow-md

✅ 핵심 정리

카드의 4가지 핵심 요소:

  • bg-white - 흰색 배경
  • p-4 - 내부 여백
  • rounded - 둥근 모서리
  • shadow - 그림자 효과

💡 팁: 이 4가지만 있으면 기본 카드 완성!

🚀 다음 단계

Step 2에서는 카드 안에 제목, 설명, 버튼을 넣어볼게요!