Tailwind CSS · 레이아웃, 플렉스, 그리드
화면의 뼈대를 잡는 단계입니다. 요소를 가로로 줄 세울지(flex), 바둑판처럼 칸을 나눌지(grid),
어디에 얼마만큼 띄울지(여백·크기·위치)를 전부 클래스로 지정합니다.
색이나 글꼴보다 먼저, 이 레이아웃 유틸이 화면의 90%를 결정합니다.
flex는 소파를 한 줄로 늘어놓는 것, grid는 방을 격자로 나눠 칸칸이 가구를 넣는 것, 여백(p-/m-)은 가구 사이 간격, 위치(absolute)는 "벽에 못 박아 고정"하는 것이죠.Tailwind의 숫자는 0.25rem(=4px) 단위입니다. p-1=4px, p-2=8px, p-4=16px, p-8=32px.
즉 숫자 × 4 = px로 외우면 됩니다. 이 규칙은 padding·margin·gap·width·height 등 크기를 다루는 거의 모든 유틸에 똑같이 적용돼요.
1. display — 요소를 어떻게 배치할 상자로 볼까
무엇: 모든 레이아웃의 출발점. 이 요소가 줄을 차지하는 블록인지, 글자처럼 흐르는 인라인인지, 플렉스/그리드 컨테이너인지를 정합니다.
| 클래스 | CSS | 한 줄 설명 |
|---|---|---|
block | display: block | 한 줄을 통째로 차지(폭 100%) |
inline-block | display: inline-block | 글자처럼 흐르되 폭·높이 지정 가능 |
inline | display: inline | 글자처럼 흐름(폭·높이 무시) |
flex | display: flex | 자식을 한 축으로 줄 세우는 컨테이너 |
inline-flex | display: inline-flex | flex이되 자기 자신은 글자처럼 흐름 |
grid | display: grid | 자식을 격자(행·열)로 배치 |
hidden | display: none | 화면에서 완전히 숨김(자리도 없앰) |
팁: 단순히 안 보이게만 하고 자리는 남기려면 hidden(자리 제거) 말고 invisible(자리 유지)을 씁니다.
2. Flexbox — 한 줄로 줄 세우고 정렬
무엇: 자식들을 가로 또는 세로 한 줄로 늘어놓고, 남는 공간을 어떻게 나눌지 정합니다. 가장 자주 쓰는 레이아웃 도구예요.
컨테이너에 flex를 주면, 그 안에서 방향·정렬·간격을 잡습니다.
방향과 줄바꿈
| 클래스 | 의미 |
|---|---|
flex-row | 가로 배치(기본값) |
flex-row-reverse | 가로, 순서 반대 |
flex-col | 세로 배치 |
flex-col-reverse | 세로, 순서 반대 |
flex-wrap | 넘치면 다음 줄로 줄바꿈 |
flex-nowrap | 줄바꿈 없음(기본값) |
주축 정렬 — justify-* (배치 방향 기준 가로)
| 클래스 | CSS(justify-content) | 설명 |
|---|---|---|
justify-start | flex-start | 앞쪽으로 몰기(기본) |
justify-center | center | 가운데 모으기 |
justify-end | flex-end | 뒤쪽으로 몰기 |
justify-between | space-between | 양끝 붙이고 사이 균등 |
justify-around | space-around | 각 항목 둘레에 균등 여백 |
justify-evenly | space-evenly | 모든 간격을 완전히 동일하게 |
교차축 정렬 — items-* (반대 방향 기준 세로)
| 클래스 | CSS(align-items) | 설명 |
|---|---|---|
items-start | flex-start | 위쪽 정렬 |
items-center | center | 세로 가운데(가장 많이 씀) |
items-end | flex-end | 아래쪽 정렬 |
items-stretch | stretch | 높이를 꽉 채워 늘림(기본) |
items-baseline | baseline | 글자 밑줄 기준 정렬 |
가로·세로 모두 가운데로 보내고 싶으면 flex justify-center items-center 세 개면 끝납니다. 가장 많이 쓰는 조합이라 통째로 외워두세요.
줄 전체 정렬 · 개별 정렬 · 간격
| 클래스 | 의미 |
|---|---|
content-center / content-between / content-start … | align-content — 여러 줄일 때 줄 묶음 전체의 세로 정렬(flex-wrap과 함께) |
self-start / self-center / self-end / self-stretch | align-self — 이 자식 하나만 따로 정렬(컨테이너 설정 덮어쓰기) |
gap-4 | 자식 사이 간격 16px(가로·세로 모두) |
gap-x-4 / gap-y-2 | 가로 간격 / 세로 간격을 따로 |
자식의 늘어남 — flex-1 / grow / shrink / order
| 클래스 | CSS | 설명 |
|---|---|---|
flex-1 | flex: 1 1 0% | 남는 공간을 균등하게 차지(가장 흔함) |
flex-auto | flex: 1 1 auto | 내용 크기 + 남는 공간 차지 |
flex-none | flex: none | 늘지도 줄지도 않음(고정) |
grow / grow-0 | flex-grow | 남는 공간을 채우게/안 채우게 |
shrink / shrink-0 | flex-shrink | 좁아질 때 줄어들게/안 줄게 |
order-1 … order-12 / order-first / order-last | order | 화면에 보이는 순서를 바꿈(HTML 순서는 그대로) |
shrink-0은 "이 가구는 절대 찌그러뜨리지 마"라는 표시예요. 아이콘처럼 줄어들면 안 되는 요소에 자주 붙입니다.아래에서 justify-*와 items-* 값을 직접 바꿔 정렬이 어떻게 달라지는지 보세요.
3. Grid — 행과 열로 칸 나누기
무엇: 화면을 바둑판(격자)으로 나눠 칸마다 요소를 배치합니다. 카드 목록, 대시보드처럼 2차원 정렬이 필요할 때 flex보다 깔끔해요.
컨테이너에 grid를 주고 열 개수를 정한 뒤, 각 칸이 몇 칸을 차지할지 지정합니다.
| 클래스 | 의미 |
|---|---|
grid-cols-1 … grid-cols-12 | 열을 N개의 동일 너비로 나눔 |
col-span-2 … col-span-N / col-span-full | 이 칸이 가로로 N칸 차지 / 전체 차지 |
col-start-2 / col-end-4 | 특정 열 선에서 시작/끝(위치 지정) |
grid-rows-1 … grid-rows-6 | 행을 N개로 나눔 |
row-span-2 / row-start-1 / row-end-3 | 세로로 N칸 차지 / 행 위치 지정 |
gap-4 / gap-x-4 / gap-y-2 | 칸 사이 간격(flex와 동일) |
auto-cols-fr / auto-rows-min | 자동 생성되는 열·행의 크기 규칙 |
place-items-center | 모든 칸 안 내용을 가로·세로 가운데(justify-items+align-items 한 번에) |
place-content-center | 격자 전체를 컨테이너 안에서 가운데 |
한 줄(가로 또는 세로) 배치는 flex, 행과 열이 동시에 있는 2차원 배치는 grid가 편합니다.
"카드 3열로 깔기"는 grid grid-cols-3 gap-4 한 줄이면 끝나요.
아래에서 grid-cols-3의 숫자와 gap, col-span을 직접 바꿔보세요.
4. Spacing — 안쪽 여백(padding) · 바깥 여백(margin)
무엇: 요소 안쪽(테두리와 내용 사이, padding)과 바깥쪽(다른 요소와의 거리, margin) 간격입니다. 숫자는 앞서 본 0.25rem 단위.
| 접두 | 방향 | 예 |
|---|---|---|
p- | 안쪽 사방 | p-4 = padding 16px |
px- / py- | 안쪽 좌우 / 위아래 | px-2 py-1 |
pt- pr- pb- pl- | 안쪽 위/오른/아래/왼 각각 | pt-6 |
m- / mx- / my- | 바깥 사방 / 좌우 / 위아래 | mx-auto(가로 중앙) |
mt- mr- mb- ml- | 바깥 위/오른/아래/왼 각각 | mt-3 |
-m-4 / -mt-2 | 음수 margin(앞에 -) | 겹치게 당길 때 |
space-x-4 / space-y-2 | 자식들 사이 간격(첫째 빼고 모두에 margin) | 버튼 줄 간격 |
둘 다 자식 사이를 띄우지만, gap-*는 flex/grid 컨테이너에서만 동작하고 더 깔끔합니다.
space-x-*/space-y-*는 flex가 아니어도 쓸 수 있지만 자식에 margin을 거는 방식이라 가장자리 처리가 까다로워요. 요즘은 대부분 gap을 권장합니다.
5. Sizing — 너비(w) · 높이(h) · 크기(size)
무엇: 요소의 크기. 숫자(0.25rem 단위)뿐 아니라 비율·화면·내용 맞춤 같은 키워드도 씁니다.
| 클래스 | 의미 |
|---|---|
w-4 / h-8 | 너비 16px / 높이 32px(숫자 × 4) |
w-full / h-full | 부모의 100% |
w-screen / h-screen | 화면 가로/세로 전체(100vw / 100vh) |
w-1/2 / w-1/3 / w-2/3 | 부모의 50% / 33% / 66%(비율) |
w-auto | 내용에 맞춰 자동 |
w-fit / w-min / w-max | fit-content / min-content / max-content |
min-w-0 / max-w-md | 최소 너비 / 최대 너비(md=28rem) |
min-h-screen / max-h-96 | 최소 높이 화면만큼 / 최대 높이 제한 |
size-10 | 너비·높이 동시 지정(40px×40px, 아이콘·아바타에 편함) |
긴 글이 화면 끝까지 늘어지면 읽기 힘듭니다. max-w-md(28rem)·max-w-2xl·max-w-prose처럼 최대 너비를 걸고 mx-auto로 가운데 두는 패턴을 카드·본문에 자주 씁니다.
6. Position — 흐름 밖으로 빼서 고정·겹치기
무엇: 요소를 평범한 흐름에서 빼내 특정 위치에 못 박거나 스크롤해도 따라오게 만듭니다. 배지·툴팁·고정 헤더에 필수.
| 클래스 | 의미 |
|---|---|
static | 기본(흐름대로). top/left 무시 |
relative | 제자리 기준으로 살짝 이동 + 자식 absolute의 기준점이 됨 |
absolute | 흐름에서 빠져, 가장 가까운 relative 조상 기준으로 위치 |
fixed | 화면(뷰포트) 기준으로 고정, 스크롤해도 안 움직임 |
sticky | 스크롤하다 정해진 위치에 닿으면 그때부터 고정 |
top-0 right-0 bottom-0 left-0 | 각 방향에서의 거리(숫자·full·비율) |
inset-0 / inset-x-0 / inset-y-0 | 사방 0 / 좌우 0 / 위아래 0(덮개 만들 때) |
z-0 z-10 … z-50 / z-auto | 겹칠 때 누가 위로 올지(쌓임 순서) |
absolute는 "가장 가까운 위치 지정 조상"을 기준으로 자리를 잡습니다. 그래서 보통 부모에 relative를 주고 그 안 자식에 absolute top-0 right-0을 붙여 배지를 모서리에 고정해요. 부모에 relative가 없으면 엉뚱하게 페이지 전체 기준으로 튑니다.
7. overflow와 container
overflow: 내용이 상자보다 클 때 넘치는 부분을 어떻게 할지 정합니다.
| 클래스 | 의미 |
|---|---|
overflow-auto | 넘칠 때만 스크롤바 표시(가장 흔함) |
overflow-hidden | 넘치는 부분 잘라 숨김 |
overflow-scroll | 항상 스크롤바 표시 |
overflow-visible | 넘쳐도 그대로 보임(기본) |
overflow-x-auto / overflow-y-hidden | 가로만 / 세로만 따로 |
container: 현재 화면 폭(브레이크포인트)에 맞춰 최대 너비를 단계적으로 잡아주는 유틸입니다. 한 가운데 정렬된 본문 영역을 만들 때 씁니다.
Tailwind Tailwind? v4에서 container는 최대 너비만 정하고 자동 중앙 정렬·좌우 패딩이 없습니다.
그래서 보통 container mx-auto px-4처럼 직접 mx-auto(가운데)와 px-*(좌우 여백)을 함께 붙여 씁니다.
<!-- 화면이 커져도 본문이 너무 넓어지지 않게, 가운데 정렬 --> <div class="container mx-auto px-4"> <!-- 페이지 내용 --> </div>
한눈에 — 레이아웃 유틸 카탈로그
| 분류 | 대표 클래스 | 한 줄 |
|---|---|---|
| display | block inline-block inline flex inline-flex grid hidden | 배치 상자의 종류 |
| flex 방향 | flex-row flex-col flex-wrap | 줄 세우는 방향·줄바꿈 |
| flex 정렬 | justify-* items-* content-* self-* | 주축·교차축·줄·개별 정렬 |
| flex 자식 | flex-1 flex-auto flex-none grow shrink order-* | 늘어남·줄어듦·순서 |
| grid | grid-cols-* col-span-* grid-rows-* row-span-* | 격자 칸 나눔·차지 |
| grid 정렬 | place-items-* place-content-* | 칸 안·격자 전체 정렬 |
| 간격 | gap-* gap-x-* gap-y-* space-x-* space-y-* | 자식 사이 거리 |
| 여백 | p-* px-* py-* m-* mx-auto -m-* | 안쪽·바깥쪽 여백 |
| 크기 | w-* h-* size-* min-w-* max-w-md | 너비·높이·최소·최대 |
| 위치 | relative absolute fixed sticky top-* inset-0 z-* | 고정·겹치기·쌓임 |
| 넘침·폭 | overflow-auto overflow-hidden container | 스크롤·본문 폭 |
이 프로젝트 프론트엔드의 거의 모든 화면 뼈대가 여기 유틸로 짜여 있습니다.
좌측 사이드바 + 본문 2단 구성은 flex, 계약·목록 카드 격자는 grid grid-cols-*,
상단 고정 헤더는 sticky top-0 z-*, 본문 폭 제한은 container mx-auto 식이죠.
실전 화면 조립은 웹앱 07. UI 구성과 06. 페이지 패턴에서 이어서 다룹니다.
다음 단계
- 뼈대를 잡았으니 이제 옷을 입힐 차례 → 3. 타이포 · 색 · 효과
- 화면 크기·상태별로 다르게 → 4. 반응형 · 상태 · 다크모드
- 되짚기 → 1. 구성 · v4 변화 · Tailwind 개요