Layout
Container · Grid · Section Spacing · Card Spacing — 새 섹션을 만들 때 아래 표에서 가장 가까운 패턴을 그대로 재사용하세요.
Container
site-container (max-w-[var(--container-max)])
| site-container | mx-auto w-full max-w-[var(--container-max)] px-5 sm:px-6 lg:px-10 |
|---|---|
| content-width | max-w-[var(--content-max)] |
| prose-width | max-w-[var(--text-max-prose)] (65ch) |
Grid
Col 1
Col 2
Col 3
| 콘텐츠 카드 (3열) | grid gap-6 sm:grid-cols-2 lg:grid-cols-3 |
|---|---|
| 카테고리 (2열) | grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-6 |
| Feature (3열) | grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 |
| 상세 (12열 분할) | grid gap-10 lg:grid-cols-12 |
| 2열 균등 | grid gap-6 md:grid-cols-2 |
Section Spacing
| 기본 섹션 | py-16 sm:py-24 lg:py-28 (.section-spacing) |
|---|---|
| 서브페이지 섹션 | py-14 sm:py-20 |
| Compact 섹션 | py-12 sm:py-16 |
| 페이지 헤더 | py-10 sm:py-14 |
Card Spacing
| 카드 내부 padding | var(--card-padding) = 2rem / lg 2.5rem |
|---|---|
| Grid gap | var(--grid-gap) = 1.5rem / lg 2rem |
| Section Header 여백 | mb-12 sm:mb-16 (좁게는 mb-8 sm:mb-10) |
Project
HANSUNG
Version
1.0.0
Stack
Tailwind CSS v4 · HTML5 · Vanilla JavaScript
Last Update
2026-07-18
Build
Tailwind CLI (minified) · No bundler · Static Hosting