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

유틸리티 퍼스트 CSS

유틸리티 퍼스트 CSS의 개념을 이해한다Tailwind의 핵심 spacing/sizing/color 클래스를 사용할 수 있다타이포그래피와 테두리 클래스를 적용할 수 있다

CSS 파일 왔다갔다 지치지 않았나요?

HTML을 쓰고, CSS 파일로 가서 클래스 만들고, 다시 HTML로 돌아오고… 이 반복을 없앨 방법이 있습니다.

HTML 안에서 바로 디자인할 수는 없을까?

Tailwind CSS — HTML 태그에 유틸리티 클래스를 직접 써서 디자인하는 방식입니다.

article

핵심 내용

CSS 파일 없이 클래스 이름만으로 디자인합니다

바이브 코더 팁 AI에게 "Tailwind으로 로그인 폼 만들어줘"라고 하면 코드를 생성합니다. 결과를 읽고 수정할 줄 알아야 진짜 바이브 코더입니다.

Tailwind의 세 기둥 간격, 크기, 색상을 익힙시다

p-{n}: padding (안쪽 여백). p-4 = 16px, p-8 = 32px

m-{n}: margin (바깥 여백). m-2 = 8px, m-auto = 자동 가운데

px / py: px-4 = 좌우 패딩, py-2 = 상하 패딩

<!-- Spacing 예시 -->
<div class="p-4 m-2">안쪽 16px, 바깥 8px</div>
<div class="px-6 py-3">좌우 24px, 상하 12px</div>

<!-- Sizing 예시 -->
<div class="w-full">가로 100%</div>
<div class="w-1/2">가로 50%</div>
<div class="h-screen">높이 = 화면 전체</div>
<div class="max-w-md">최대 너비 448px</div>

<!-- Colors 예시 -->
<div class="bg-blue-500 text-white">
  파란 배경, 흰 글씨
</div>
<div class="bg-gray-100 text-gray-800">
  연회색 배경, 진한 글씨
</div>

숫자 규칙 — Tailwind의 숫자는 4px 단위입니다. p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px 색상 숫자는 밝기: 50(연한) → 500(보통) → 900(진한)

글자 크기, 굵기, 둥근 모서리 자주 쓰는 클래스를 정리합니다

<!-- 타이포그래피 -->
<h1 class="text-2xl font-bold">큰 제목</h1>
<p class="text-sm text-gray-500">작은 설명문</p>

<!-- 테두리와 그림자 -->
<div class="border border-gray-300 rounded-lg">
  둥근 테두리
</div>
<div class="shadow-md rounded-xl">
  그림자 + 더 둥근 모서리
</div>

<!-- 조합 예시 -->
<div class="p-4 bg-white rounded-lg shadow
     border border-gray-200">
  <h2 class="text-lg font-semibold">카드 제목</h2>
  <p class="text-gray-600 mt-2">설명 텍스트</p>
</div>

Tailwind에서 p-4는 padding 16px을 의미한다.

배경을 파란색(500)으로, 글자를 흰색으로 만드는 클래스 조합은?

둥근 모서리 + 그림자를 가진 카드를 만들려면?

key

핵심 용어

⚡

파일 왔다갔다 없음

HTML에서 바로 스타일 적용

🎯

클래스 이름 고민 없음

card-wrapper-inner 같은 작명 불필요

🤖

AI와 궁합 최고

AI가 생성한 Tailwind 코드를 바로 읽고 수정 가능

📐

일관된 디자인

미리 정의된 간격·색상 시스템으로 통일감 유지

🔤

text-sm / text-lg / text-2xl

글자 크기 (작은 → 큰)

✏️

font-bold / font-semibold

글자 굵기

📄

text-center / text-right

텍스트 정렬

📏

leading-relaxed

줄 간격 넓힘 (가독성 향상)

border

1px 테두리 추가

rounded-lg / rounded-xl

둥근 모서리 (lg=8px, xl=12px)

shadow / shadow-md

그림자 (md가 더 진함)

ring-2 ring-blue-500

포커스 링 (입력 필드에 유용)

edit_note

정리 노트

Tailwind CSS — 유틸리티 퍼스트 CSS

핵심 개념

유틸리티 퍼스트: CSS 파일 없이 클래스 이름만으로 스타일 적용
Spacing: p-4(padding), m-2(margin) — 숫자는 0.25rem 단위
Color 시스템: bg-blue-500, text-gray-700 — 색상명 + 밝기(50~950)
AI 궁합: AI가 생성한 Tailwind 코드를 읽고 수정할 수 있어야 함

★

Tailwind 클래스를 읽을 줄 알면 AI가 만든 UI를 바로 수정할 수 있습니다.

image

시각 자료

다이어그램: wd-scene-tailwind

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

play_circle인터랙티브 레슨 시작