스페이싱 & 레이아웃
기본 스케일 (4px 기반)
모든 여백과 크기는 4px 단위를 기준으로 한다.
| Token |
px |
rem |
Tailwind |
용도 |
| space-0 |
0 |
0 |
p-0, m-0 |
초기화 |
| space-1 |
4px |
0.25rem |
p-1, m-1 |
아이콘 내부 간격 |
| space-2 |
8px |
0.5rem |
p-2, m-2 |
배지 내부 패딩 |
| space-3 |
12px |
0.75rem |
p-3, m-3 |
버튼 수직 패딩 |
| space-4 |
16px |
1rem |
p-4, m-4 |
카드 내부 패딩 (sm) |
| space-5 |
20px |
1.25rem |
p-5, m-5 |
인풋 내부 패딩 |
| space-6 |
24px |
1.5rem |
p-6, m-6 |
카드 내부 패딩 (md) |
| space-8 |
32px |
2rem |
p-8, m-8 |
섹션 내부 패딩 |
| space-10 |
40px |
2.5rem |
p-10, m-10 |
섹션 상하 여백 |
| space-12 |
48px |
3rem |
p-12, m-12 |
페이지 상하 패딩 |
| space-16 |
64px |
4rem |
p-16, m-16 |
섹션 간 여백 |
| space-20 |
80px |
5rem |
p-20, m-20 |
페이지 섹션 간격 |
| space-24 |
96px |
6rem |
p-24, m-24 |
히어로 여백 |
컴포넌트별 내부 여백
Button
| 사이즈 |
padding |
font-size |
height |
| sm |
px-3 py-1.5 |
text-sm |
32px |
| md |
px-4 py-2 |
text-base |
40px |
| lg |
px-6 py-3 |
text-lg |
48px |
Input
| 사이즈 |
padding |
font-size |
height |
| sm |
px-3 py-1.5 |
text-sm |
32px |
| md |
px-3 py-2 |
text-base |
40px |
| lg |
px-4 py-3 |
text-lg |
48px |
Card
| 패딩 |
클래스 |
용도 |
| compact |
p-4 |
데이터 테이블 행 |
| default |
p-6 |
일반 카드 |
| spacious |
p-8 |
주요 콘텐츠 카드 |
Badge
패딩: px-2 py-0.5 / 폰트: text-xs font-medium
Modal
| 사이즈 |
width |
padding |
| sm |
max-w-sm |
p-6 |
| md |
max-w-md |
p-6 |
| lg |
max-w-lg |
p-8 |
| xl |
max-w-xl |
p-8 |
반응형 브레이크포인트
Tailwind CSS 4 기본 브레이크포인트 사용.
| 이름 |
최소 너비 |
용도 |
| xs |
— |
기본 (모바일 우선) |
| sm |
640px |
큰 모바일, 세로 태블릿 |
| md |
768px |
태블릿 |
| lg |
1024px |
데스크톱 |
| xl |
1280px |
와이드 데스크톱 |
| 2xl |
1536px |
울트라 와이드 |
12컬럼 그리드
<!-- 페이지 컨테이너 -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- 12컬럼 그리드 -->
<div class="grid grid-cols-12 gap-4 lg:gap-6">
<!-- 사이드바 (3컬럼) -->
<aside class="col-span-12 lg:col-span-3">...</aside>
<!-- 메인 콘텐츠 (9컬럼) -->
<main class="col-span-12 lg:col-span-9">...</main>
</div>
</div>
자주 쓰는 레이아웃 패턴
| 패턴 |
클래스 |
| 전체 너비 |
col-span-12 |
| 절반 |
col-span-12 md:col-span-6 |
| 1/3 |
col-span-12 md:col-span-4 |
| 2/3 |
col-span-12 md:col-span-8 |
| 사이드바 |
col-span-12 lg:col-span-3 |
| 콘텐츠 |
col-span-12 lg:col-span-9 |
Gap (간격)
| 컨텍스트 |
클래스 |
| 인라인 아이템 (버튼 그룹) |
gap-2 |
| 폼 필드 |
gap-4 |
| 카드 그리드 |
gap-4 lg:gap-6 |
| 섹션 간 |
gap-8 lg:gap-12 |
스택 레이아웃
<!-- 수직 스택 -->
<div class="flex flex-col gap-4">...</div>
<!-- 수평 스택 -->
<div class="flex items-center gap-2">...</div>
<!-- 정렬 포함 -->
<div class="flex items-center justify-between gap-4">...</div>
HYOJIN
c2a71c1b77