Ch.17 Tailwind CSS — 클래스만으로 디자인

실전 UI 조립 — 카드, 버튼, 네비게이션

Tailwind으로 버튼 컴포넌트를 만들 수 있다카드 UI를 flex/grid로 조립할 수 있다반응형 네비게이션 바를 구성할 수 있다

AI가 만든 코드 읽을 줄 알아야 한다

AI에게 "Tailwind으로 카드 만들어줘"라고 하면 코드가 쏟아집니다. 각 클래스가 뭘 하는지 읽어야 수정할 수 있습니다.

AI의 Tailwind 코드를 이해하고 커스터마이즈할 수 있을까?

실전 조립 — 버튼, 카드, 네비게이션을 직접 만들며 클래스 조합법을 익힙니다.

article

핵심 내용

버튼 하나에 담긴 7가지 클래스를 해부합니다

<!-- 기본 버튼 -->
<button class="bg-blue-500 text-white
     px-6 py-2 rounded-lg
     hover:bg-blue-600
     transition duration-200">
  시작하기
</button>

bg-blue-500: 배경색 = 파랑 500

text-white: 글자색 = 흰색

px-6 py-2: 좌우 24px, 상하 8px 패딩

rounded-lg: 둥근 모서리 8px

hover:bg-blue-600: 호버 시 더 진한 파랑

transition duration-200: 0.2초 부드러운 전환

<!-- 버튼 변형들 -->

<!-- 아웃라인 버튼 -->
<button class="border-2 border-blue-500
     text-blue-500 px-6 py-2 rounded-lg
     hover:bg-blue-500 hover:text-white
     transition">
  더 알아보기
</button>

<!-- 위험 버튼 -->
<button class="bg-red-500 text-white
     px-6 py-2 rounded-lg
     hover:bg-red-600 transition">
  삭제하기
</button>

카드 = 컨테이너 + 내용물 shadow + rounded + overflow

<!-- 이미지 카드 -->
<div class="bg-white rounded-xl shadow-md
     overflow-hidden max-w-sm">
  <img src="photo.jpg" class="w-full h-48
     object-cover" />
  <div class="p-4">
    <h3 class="font-bold text-lg">제목</h3>
    <p class="text-gray-600 mt-2">
      카드 설명 텍스트
    </p>
    <button class="mt-4 bg-blue-500 text-white
       px-4 py-2 rounded hover:bg-blue-600
       transition w-full">
      자세히 보기
    </button>
  </div>
</div>

<!-- 카드 그리드 (반응형) -->
<div class="grid grid-cols-1 md:grid-cols-2
     lg:grid-cols-3 gap-6 p-4">
  <div class="bg-white rounded-xl shadow p-4">
    카드 1
  </div>
  <div class="bg-white rounded-xl shadow p-4">
    카드 2
  </div>
  <div class="bg-white rounded-xl shadow p-4">
    카드 3
  </div>
</div>

네비게이션 = flex + justify-between + items-center

<!-- 반응형 네비게이션 바 -->
<nav class="bg-white shadow px-6 py-4
     flex justify-between items-center">
  <!-- 로고 -->
  <a class="text-xl font-bold text-blue-600">
    MyApp
  </a>

  <!-- 데스크탑 메뉴 (모바일에서 숨김) -->
  <div class="hidden md:flex gap-6">
    <a class="text-gray-600
       hover:text-blue-500 transition">
      홈
    </a>
    <a class="text-gray-600
       hover:text-blue-500 transition">
      서비스
    </a>
    <a class="text-gray-600
       hover:text-blue-500 transition">
      문의
    </a>
  </div>

  <!-- 모바일 햄버거 (데스크탑에서 숨김) -->
  <button class="md:hidden text-gray-600">
    ☰
  </button>
</nav>

flex: 가로 배치 활성화

justify-between: 양 끝으로 밀어냄 (로고↔메뉴)

items-center: 세로 가운데 정렬

hidden md:flex: 모바일 숨김, 태블릿+ 표시

gap-6: 메뉴 항목 간 간격 24px

AI 활용 팁 AI에게 "반응형 네비게이션 바 Tailwind으로 만들어줘"라고 하면 위와 비슷한 코드가 나옵니다. hidden md:flex 패턴을 알면 모바일/데스크탑 메뉴 전환 로직을 바로 이해할 수 있습니다.

카드 이미지가 둥근 모서리 밖으로 잘리지 않게 하는 클래스는?

네비게이션에서 로고를 왼쪽, 메뉴를 오른쪽에 배치하는 클래스 조합은?

hidden md:flex는 모바일에서 숨기고 태블릿 이상에서 표시한다.

key

핵심 용어

✂️

overflow-hidden

이미지가 둥근 모서리 밖으로 삐져나오지 않게

🖼️

object-cover

이미지 비율 유지하며 영역 채움

📐

max-w-sm

카드 최대 너비 384px로 제한

↔️

w-full

버튼을 카드 너비에 꽉 차게

edit_note

정리 노트

실전 UI 조립 — 카드, 버튼, 네비게이션

핵심 패턴

버튼: px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700
카드: p-6 bg-white rounded-xl shadow-md — 여백 + 배경 + 그림자
네비게이션: flex justify-between items-center — 수평 정렬의 기본
반응형 메뉴: hidden md:flex로 모바일에서 숨기고 데스크톱에서 표시

★

자주 쓰는 UI 패턴을 외우면 AI 코드를 빠르게 검토할 수 있습니다.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작