02 레이아웃과 구조

2장: 레이아웃과 구조

v4 설치 및 기본 설정

v4 변경사항 — tailwind.config.js + @tailwind 지시어 방식이 CSS 기반 설정으로 전환됐다.

1
# Vite 기반 프로젝트 (권장)
2
npm install tailwindcss @tailwindcss/vite

1
// vite.config.js
2
import { defineConfig } from 'vite'
3
import tailwindcss from '@tailwindcss/vite'
4

5
export default defineConfig({
6
  plugins: [tailwindcss()],
7
})

1
/* src/index.css — 단 한 줄로 전체 임포트 */
2
@import "tailwindcss";

v3에서 쓰던 @tailwind base; @tailwind components; @tailwind utilities; 세 줄은 더 이상 필요 없다.

2-1. Flexbox로 레이아웃 구축하기

Flexbox는 1차원 레이아웃(가로 또는 세로 한 방향)을 다루는 CSS 모델이다. Tailwind v4에서 Flexbox 유틸리티 자체는 v3와 거의 동일하지만, 새로운 논리 속성(logical properties) 유틸리티가 추가됐다.

플렉스 컨테이너 활성화

1
<!-- flex: display: flex -->
2
<div class="flex">...</div>
3

4
<!-- inline-flex: display: inline-flex -->
5
<div class="inline-flex">...</div>

플렉스 방향 (flex-direction)

클래스	CSS 값
`flex-row`	`flex-direction: row` (기본)
`flex-row-reverse`	`flex-direction: row-reverse`
`flex-col`	`flex-direction: column`
`flex-col-reverse`	`flex-direction: column-reverse`

1
<!-- 가로 정렬 (기본) -->
2
<div class="flex flex-row gap-4">
3
  <div>A</div>
4
  <div>B</div>
5
  <div>C</div>
6
</div>
7

8
<!-- 세로 정렬 -->
9
<div class="flex flex-col gap-4">
10
  <div>A</div>
11
  <div>B</div>
12
</div>

플렉스 줄바꿈 (flex-wrap)

1
<!-- 줄바꿈 허용 -->
2
<div class="flex flex-wrap gap-2">
3
  <div class="w-32">item 1</div>
4
  <div class="w-32">item 2</div>
5
  <div class="w-32">item 3</div>
6
</div>
7

8
<!-- 줄바꿈 방지 (기본값) -->
9
<div class="flex flex-nowrap">...</div>

주축 정렬 (justify-content)

클래스	정렬 방식
`justify-start`	시작점
`justify-end`	끝점
`justify-center`	중앙
`justify-between`	양 끝 분산, 아이템 사이 공간
`justify-around`	아이템 양측 동일 공간
`justify-evenly`	모든 공간 균등

1
<!-- 네비게이션 바: 로고 왼쪽, 메뉴 오른쪽 -->
2
<nav class="flex justify-between items-center px-6 py-4">
3
  <span class="font-bold">Logo</span>
4
  <ul class="flex gap-6">
5
    <li>Home</li>
6
    <li>About</li>
7
    <li>Contact</li>
8
  </ul>
9
</nav>

교차축 정렬 (align-items)

클래스	CSS 값
`items-start`	`align-items: flex-start`
`items-end`	`align-items: flex-end`
`items-center`	`align-items: center`
`items-baseline`	`align-items: baseline`
`items-stretch`	`align-items: stretch` (기본)

1
<!-- 아이콘 + 텍스트 수직 중앙 정렬 -->
2
<div class="flex items-center gap-2">
3
  <svg class="size-5">...</svg>
4
  <span>텍스트</span>
5
</div>

v4 신규 — size-5 는 w-5 h-5 를 동시에 적용하는 축약 유틸리티다. v4에서 추가됐다.

개별 아이템 정렬 (align-self)

1
<div class="flex items-start h-32">
2
  <div>기본(start)</div>
3
  <div class="self-center">나만 가운데</div>
4
  <div class="self-end">나만 끝</div>
5
</div>

플렉스 확장·축소

1
<!-- flex-1: 빈 공간을 모두 차지 -->
2
<div class="flex">
3
  <div class="w-32">고정</div>
4
  <div class="flex-1">나머지 공간 전부</div>
5
  <div class="w-32">고정</div>
6
</div>
7

8
<!-- grow / shrink 개별 제어 -->
9
<div class="flex">
10
  <div class="grow">확장됨</div>
11
  <div class="shrink-0">축소 안 됨</div>
12
</div>

실전 패턴

카드 그리드 (Flex wrap)

1
<div class="flex flex-wrap gap-4">
2
  <div class="w-64 rounded-xl bg-white shadow p-4">카드 1</div>
3
  <div class="w-64 rounded-xl bg-white shadow p-4">카드 2</div>
4
  <div class="w-64 rounded-xl bg-white shadow p-4">카드 3</div>
5
</div>

화면 전체 높이 레이아웃 (sticky footer)

1
<div class="flex flex-col min-h-screen">
2
  <header class="bg-gray-900 text-white p-4">헤더</header>
3
  <main class="flex-1 p-6">컨텐츠</main>
4
  <footer class="bg-gray-100 p-4 text-center">푸터</footer>
5
</div>

수평·수직 중앙 정렬

1
<div class="flex items-center justify-center min-h-screen">
2
  <div class="bg-white rounded-2xl shadow-xl p-8">
3
    가운데 정렬된 카드
4
  </div>
5
</div>

2-2. Grid 시스템

CSS Grid는 2차원 레이아웃(가로 + 세로 동시)을 다룬다. Tailwind v4에서 Grid 유틸리티는 v3와 동일하고, 임의 값(arbitrary value) 지원이 더 자연스러워졌다.

기본 그리드

1
<!-- 3열 그리드 -->
2
<div class="grid grid-cols-3 gap-4">
3
  <div>1</div>
4
  <div>2</div>
5
  <div>3</div>
6
  <div>4</div>
7
  <div>5</div>
8
  <div>6</div>
9
</div>

열·행 병합 (span)

1
<div class="grid grid-cols-4 gap-4">
2
  <!-- 2열 차지 -->
3
  <div class="col-span-2 bg-blue-100">넓은 아이템</div>
4
  <div>보통</div>
5
  <div>보통</div>
6

7
  <!-- 특정 위치 지정 -->
8
  <div class="col-start-2 col-end-4">2열에서 4열까지</div>
9
</div>

행 제어

1
<div class="grid grid-rows-3 grid-flow-col gap-4 h-48">
2
  <div>A</div>
3
  <div>B</div>
4
  <div>C</div>
5
  <div>D</div>
6
</div>

반응형 그리드

1
<!-- 모바일: 1열 → 태블릿: 2열 → 데스크톱: 3열 -->
2
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
3
  <div class="bg-white rounded-xl shadow p-4">카드 A</div>
4
  <div class="bg-white rounded-xl shadow p-4">카드 B</div>
5
  <div class="bg-white rounded-xl shadow p-4">카드 C</div>
6
  <div class="bg-white rounded-xl shadow p-4">카드 D</div>
7
  <div class="bg-white rounded-xl shadow p-4">카드 E</div>
8
  <div class="bg-white rounded-xl shadow p-4">카드 F</div>
9
</div>

auto-fit / auto-fill (임의 값)

grid-cols-[repeat(auto-fit,minmax(200px,1fr))] 패턴으로 열 수를 자동 계산할 수 있다.

1
<!-- 화면 너비에 따라 열 수 자동 조정, 각 열 최소 200px -->
2
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
3
  <div class="bg-slate-100 p-4 rounded">아이템</div>
4
  <div class="bg-slate-100 p-4 rounded">아이템</div>
5
  <div class="bg-slate-100 p-4 rounded">아이템</div>
6
</div>

복잡한 레이아웃 (named areas)

1
<!-- grid-template-areas를 임의 값으로 지정 -->
2
<div class="grid gap-4
3
  [grid-template-areas:'header_header''sidebar_main''footer_footer']
4
  grid-cols-[200px_1fr]">
5
  <header class="[grid-area:header] bg-gray-800 text-white p-4">헤더</header>
6
  <aside class="[grid-area:sidebar] bg-gray-100 p-4">사이드바</aside>
7
  <main class="[grid-area:main] p-4">메인 콘텐츠</main>
8
  <footer class="[grid-area:footer] bg-gray-200 p-4">푸터</footer>
9
</div>

2-3. 간격과 정렬

여백(margin)과 패딩(padding)

패턴: {속성}{방향}-{크기}

속성	방향	예시
`m` (margin)	없음(전체), `t` `r` `b` `l` `x` `y`	`m-4`, `mt-2`, `mx-auto`
`p` (padding)	없음(전체), `t` `r` `b` `l` `x` `y`	`p-6`, `py-3`, `px-4`

크기 척도: 기본 단위는 0.25rem (= 4px). 4 = 1rem = 16px.

1
<!-- 카드 컴포넌트 간격 예시 -->
2
<div class="p-6 m-4 rounded-2xl shadow-md bg-white">
3
  <h2 class="mb-2 text-xl font-bold">제목</h2>
4
  <p class="mb-4 text-gray-600">설명 텍스트</p>
5
  <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
6
    버튼
7
  </button>
8
</div>

v4 신규 — 논리 속성 유틸리티가 추가됐다. ms-* (margin-inline-start), me-* (margin-inline-end), ps-*, pe-* — RTL 레이아웃 지원에 활용한다.

1
<!-- RTL 지원 예시: 언어에 따라 자동으로 방향 전환 -->
2
<div dir="rtl">
3
  <div class="ms-4"><!-- 아랍어에서는 오른쪽 여백 --></div>
4
</div>

자식 요소 간 간격 (space-between)

space-x-*, space-y-* 는 자식 요소 사이에 margin을 추가한다.

1
<!-- gap 대신 space-y 사용 시 -->
2
<ul class="space-y-2">
3
  <li class="bg-gray-50 p-3 rounded">항목 1</li>
4
  <li class="bg-gray-50 p-3 rounded">항목 2</li>
5
  <li class="bg-gray-50 p-3 rounded">항목 3</li>
6
</ul>

gap vs space: Grid·Flex 컨테이너에서는 gap-* 사용을 권장한다. space-*는 단순 블록 요소에 유용하다.

텍스트 정렬

1
<p class="text-left">왼쪽 정렬</p>
2
<p class="text-center">가운데 정렬</p>
3
<p class="text-right">오른쪽 정렬</p>
4
<p class="text-justify">양쪽 정렬</p>

위치(position)와 z-index

1
<!-- 절대 위치: 우측 상단 배지 -->
2
<div class="relative w-16 h-16">
3
  <img src="..." class="rounded-full size-16" alt="avatar" />
4
  <span class="absolute -top-1 -right-1 size-5 bg-green-400 rounded-full border-2 border-white"></span>
5
</div>
6

7
<!-- 고정 헤더 -->
8
<header class="fixed top-0 left-0 right-0 z-50 bg-white shadow">
9
  ...
10
</header>
11

12
<!-- sticky 사이드바 -->
13
<aside class="sticky top-4 h-fit">...</aside>

오버플로우

1
<!-- 스크롤 가능한 목록 -->
2
<ul class="h-64 overflow-y-auto border rounded">
3
  <li class="p-2">항목...</li>
4
</ul>
5

6
<!-- 텍스트 말줄임 -->
7
<p class="overflow-hidden text-ellipsis whitespace-nowrap max-w-xs">
8
  아주 긴 텍스트가 여기에 들어갑니다...
9
</p>

2-4. v4 레이아웃 관련 신규 유틸리티

size-* (width + height 동시 설정)

1
<!-- v3: w-10 h-10 두 개 작성 -->
2
<!-- v4: size-10 한 개로 해결 -->
3
<div class="size-10 bg-blue-500 rounded-full"></div>
4
<img class="size-16 rounded-full object-cover" src="..." alt="..." />

inset-* (top/right/bottom/left 동시 설정)

1
<!-- 전체 화면 오버레이 -->
2
<div class="fixed inset-0 bg-black/50"></div>
3

4
<!-- 방향별 -->
5
<div class="absolute inset-x-0 bottom-0">하단 전체 너비 바</div>

field-sizing (v4 신규)

텍스트 입력창이 내용에 따라 자동 크기 조절된다.

1
<textarea class="field-sizing-content border rounded p-2 resize-none">
2
  내용에 맞게 높이 자동 조절
3
</textarea>

2-5. v4 커스텀 스페이싱

v3에서는 tailwind.config.js에서 설정했다. v4에서는 CSS 파일 내 @theme으로 처리한다.

1
@import "tailwindcss";
2

3
@theme {
4
  --spacing-18: 4.5rem;   /* p-18, m-18, w-18 등 자동 생성 */
5
  --spacing-88: 22rem;
6
  --spacing-128: 32rem;
7
}

1
<!-- 커스텀 간격 사용 -->
2
<div class="p-18 w-128">...</div>

핵심 정리

Flex: 1차원(가로 or 세로), flex → flex-row/col → justify/items/gap

Grid: 2차원, grid → grid-cols-N → col-span-N → gap

간격: p-*(내부), m-*(외부), gap-*(자식 사이)

v4 신규: size-*, 논리 속성(ms-*, me-*), field-sizing

v4 설정: tailwind.config.js → CSS 내 @theme