Step 2 - 카드에 내용 채우기

🎯 학습 목표

flex-col과 gap을 활용하여 카드 내부 요소를 세로로 정렬할 수 있다

❌ Flex 없이 (요소들이 붙어있음)

제품 제목

이것은 제품 설명입니다

문제점: 요소들이 한 줄에 붙어있고 간격이 없어요

bg-white p-4 rounded shadow

✅ Flex-col 추가 (세로 배치)

제품 제목

이것은 제품 설명입니다

개선: 세로로 배치되었지만 간격이 여전히 없어요

bg-white p-4 rounded shadow flex flex-col

🎉 Gap 추가 (완벽!)

제품 제목

이것은 제품 설명입니다

완성: 깔끔한 간격으로 정리되었어요!

bg-white p-4 rounded shadow flex flex-col gap-2

💡 Gap 크기 비교

gap-2

작은 간격

gap-4

기본 간격

gap-6

큰 간격

🎨 텍스트 스타일링

큰 제목 (text-xl font-bold)

중간 제목 (text-lg font-bold)

일반 텍스트 (text-sm text-gray-600)

작은 텍스트 (text-xs text-gray-500)

텍스트 크기와 색상으로 정보 위계를 만들어요

🛍️ 실전 예제: 제품 카드

무선 이어폰

고음질 블루투스 이어폰으로 편안한 착용감을 제공합니다

49,000원 69,000원

🎨 직접 만들어보기

📝 미션

아래 조건을 만족하는 블로그 카드를 만들어보세요:

  • 흰색 배경, 패딩 6, 둥근 모서리, 그림자
  • 세로 배치, gap-3
  • 제목: "나의 첫 블로그 포스트" (크고 굵게)
  • 날짜: "2025년 1월 6일" (작고 회색)
  • 내용: "오늘은 Tailwind를 배웠어요" (일반 크기)
  • 읽기 버튼 (파란 배경, 흰 글자)

✅ 핵심 정리

세로 배치의 마법:
  • flex flex-col - 요소를 세로로 나란히
  • gap-2, gap-4 - 요소 사이 간격
텍스트 스타일:
  • text-lg - 크기
  • font-bold - 굵기
  • text-gray-600 - 색상

💡 기억하세요: flex가 있어야 gap이 작동해요!

🚀 다음 단계

Step 3에서는 이미지와 텍스트를 가로로 배치하는 법을 배워볼게요!