← 목록으로

문제 6: 가격 표 ⭐⭐

⏱️ 20-25분 🎯 flex-1 동일 너비 분배, 복잡한 카드 레이아웃

Basic

$9/월
  • ✓ 기능 1
  • ✓ 기능 2
추천

Pro

$29/월
  • ✓ 기능 1
  • ✓ 기능 2
  • ✓ 기능 3

Enterprise

$99/월
  • ✓ 모든 기능
  • ✓ 우선 지원
📝 코드 보기
<div class="flex gap-4">
  <!-- Basic -->
  <div class="bg-white rounded-lg shadow-lg p-8 flex-1">
    <div class="flex flex-col items-center gap-4">
      <h3 class="text-2xl font-bold">Basic</h3>
      <div class="text-4xl font-bold text-blue-600">$9</div>
      <button class="bg-blue-500 text-white w-full">선택</button>
    </div>
  </div>
  <!-- Pro (강조) -->
  <div class="bg-blue-500 text-white shadow-xl">...</div>
  <!-- Enterprise -->
  <div class="bg-white">...</div>
</div>
💡 핵심 포인트
  • flex gap-4 - 가로로 나란히 + 간격
  • flex-1 - 각 카드 동일 너비
  • • 중앙 카드는 배경색 반전으로 강조
← 이전 다음 →