디자인 기초

레이아웃

너비를 제한한 래퍼, 간격 토큰, 열 그리드, 명시적 트랙으로 페이지를 구성하세요.

이 페이지의 내용

페이지는 너비를 제한하는 래퍼, 거터와 바깥 여백을 위한 간격 토큰, 영역을 배치할 열 그리드라는 세 가지 결정으로 구성합니다. 네이티브 Grid와 Flexbox가 레이아웃을 처리하고, Master CSS는 값에 이름을 붙입니다.

슬라이더나 화살표 키로 뷰포트를 조절해 조밀한 세로 배치가 8열 구성으로 바뀌는 모습을 확인하세요.

작업 공간 레이아웃

뷰포트

iframe 뷰포트를 조절하세요. 전체 콘텐츠를 보려면 미리보기 안에서 스크롤하세요.

<main class="w-full max-w-3xl mx-auto p-md">  <section class="grid-cols(4) gap-sm grid-cols(8)@2xs gap-md@2xs">    <header class="grid-col-span(4) grid-col-span(8)@2xs"><h1>Project overview</h1></header>    <article class="grid-col-span(4)"><h2>Revenue</h2><p>$128.4k</p></article>    <article class="grid-col-span(4)"><h2>Activation</h2><p>64.2%</p></article>    <article class="grid-col-span(4) grid-col-span(5)@2xs"><h2>Weekly demand</h2></article>    <aside class="grid-col-span(4) grid-col-span(3)@2xs"><h2>Launch tasks</h2></aside>  </section></main>

생성된 CSS

@layer theme {  :root,  :host {    --spacing-md: 1rem;    --container-3xl: 48rem  }}@layer utilities {  .grid-cols\(4\) {    display: grid;    grid-template-columns: repeat(4, minmax(0, 1fr))  }  .max-w-3xl {    max-width: var(--container-3xl)  }  .p-md {    padding: var(--spacing-md)  }  @media (width >= 37.5rem) {    .grid-cols\(8\)\@2xs {      display: grid;      grid-template-columns: repeat(8, minmax(0, 1fr))    }  }  @media (width >= 37.5rem) {    .gap-md\@2xs {      gap: var(--spacing-md)    }  }  @media (width >= 37.5rem) {    .grid-col-span\(5\)\@2xs {      grid-column: span 5/span 5    }  }}

2xs 미만에서는 각 영역이 4열 전체를 차지합니다. 2xs부터 헤더는 8열을 차지하고 두 지표는 한 행을 공유하며, 수요와 작업 영역은 다음 행을 5대3으로 나눕니다.

#간격 값 선택

p-, m-, gap- 같은 간격 클래스는 세 가지 형태를 받습니다.

형태	클래스	생성 결과
간격 토큰	`p-md`	`padding: var(--spacing-md)`
직접 값	`p(1)`	`padding: calc(1 * 1px)`
네이티브 길이	`(padding:0.5rem)`	`padding: 0.5rem`

생성된 CSS

@layer theme {  :root,  :host {    --spacing-md: 1rem  }}@layer utilities {  .p-md {    padding: var(--spacing-md)  }  .p\(1\) {    padding: calc(1 * 1px)  }  .\(padding\:0\.5rem\) {    padding: 0.5rem  }}

거터, 안쪽 여백, 섹션 간격처럼 페이지가 공유하는 리듬에는 토큰을 사용하세요. 직접 값 길이의 단위는 픽셀이므로 p(1)은 크기 체계의 한 단계가 아닌 1픽셀 패딩입니다. 가는 선이나 m(0) 같은 초기화에 사용하세요. 다른 단위는 네이티브 선언으로 작성하세요. 크기 체계는 간격, 모든 함수는 직접 값을 참고하세요.

같은 거리를 반복해서 사용하게 되면 역할에 따라 이름을 붙이세요. --spacing-1 같은 숫자 키는 직접 값 p(1)처럼 읽힐 수 있습니다.

index.css

@theme {  --spacing-section: 6rem;}

<section class="py-section">…</section>

px-*와 py-*는 논리적 인라인 및 블록 패딩을 설정합니다. 실제 방향은 요소의 쓰기 모드를 따릅니다.

p-*는 네 면을 모두 설정합니다. 한쪽 안쪽 여백만 달라야 한다면 해당 면의 클래스를 추가하세요.

#컨테이너 크기로 너비 제한

w-, max-w-, h-, min-w-, basis-는 --container-* 토큰을 읽으므로 max-w-5xl은 max-width: var(--container-5xl)입니다. 전체 및 고유 크기는 고정 유틸리티입니다. w-full, w-fit, w-max, w-min은 항상 각각 100%, fit-content, max-content, min-content를 설정하며 프로젝트의 --container-full 토큰으로 바뀌지 않습니다.

생성된 CSS

@layer theme {  :root,  :host {    --container-5xl: 64rem  }}@layer utilities {  .max-w-5xl {    max-width: var(--container-5xl)  }  .w-full {    width: 100%  }  .w-fit {    width: fit-content  }}

컨테이너 토큰은 길이만 설정하며 컨테이너 쿼리 임계값을 바꾸지 않습니다. 크기 체계는 컨테이너 크기를 참고하세요.

#페이지 래퍼로 시작

래퍼가 부모를 채우게 하고 컨테이너 크기로 상한을 설정한 뒤 가운데 배치하세요. 콘텐츠의 양옆 여백은 간격 체계에서 선택합니다.

<main class="w-full max-w-7xl mx-auto px-md px-xl@md">…</main>

생성된 CSS

@layer theme {  :root,  :host {    --spacing-md: 1rem;    --spacing-xl: 2rem;    --container-7xl: 80rem  }}@layer utilities {  .mx-auto {    margin-inline: auto  }  .max-w-7xl {    max-width: var(--container-7xl)  }  .px-md {    padding-inline: var(--spacing-md)  }  .w-full {    width: 100%  }  @media (width >= 64rem) {    .px-xl\@md {      padding-inline: var(--spacing-xl)    }  }}

페이지 정렬은 래퍼가 담당하고 콘텐츠 간의 관계는 내부 그리드로 정하세요.

#열 그리드 구성

grid-cols(<count>)는 같은 너비의 열 그리드를 만들고 grid-col-span(<count>)는 항목을 여러 열에 걸쳐 배치합니다. 중단점에서 열 수를 바꾸면 같은 중단점에서 차지하는 열 수도 바꾸세요.

그리드는 12열로 늘어나지만 기사는 4열을 유지하여 4열이 비게 됩니다.

<section class="grid-cols(4) gap-lg grid-cols(12)@md">  <article class="grid-col-span(4)">…</article>  <aside class="grid-col-span(4)">…</aside></section>

같은 중단점에서 기사가 8열을 차지합니다.

<section class="grid-cols(4) gap-lg grid-cols(12)@md">  <article class="grid-col-span(4) grid-col-span(8)@md">…</article>  <aside class="grid-col-span(4)">…</aside></section>

생성된 CSS

@layer utilities {  .grid-cols\(4\) {    display: grid;    grid-template-columns: repeat(4, minmax(0, 1fr))  }  @media (width >= 64rem) {    .grid-cols\(12\)\@md {      display: grid;      grid-template-columns: repeat(12, minmax(0, 1fr))    }  }  @media (width >= 64rem) {    .grid-col-span\(8\)\@md {      grid-column: span 8/span 8    }  }}

두 축에 서로 다른 간격 토큰이 필요하면 col-gap-*와 row-gap-*를 사용하세요. 그리드 트랙을 참고하세요.

#명시적 트랙 추가

고정 또는 혼합 트랙에는 네이티브 grid-template-columns 값을 작성하세요. 트랙은 |로 구분하며 생성 CSS에서는 공백으로 변환됩니다.

<section class="grid (grid-template-columns:4.5rem|minmax(0,1fr)) gap-md">  <nav>…</nav>  <main class="min-w(0)">…</main></section>

생성된 CSS

@layer utilities {  .min-w\(0\) {    min-width: calc(0 * 1px)  }  .\(grid-template-columns\:4\.5rem\|minmax\(0\,1fr\)\) {    grid-template-columns: 4.5rem minmax(0, 1fr)  }}

min-w(0)은 주 영역이 콘텐츠 너비보다 작게 줄어들 수 있게 합니다. 일반 콘텐츠에는 같은 너비의 열과 열 병합을 유지하고 앱 셸과 분할 창에는 명시적 트랙을 사용하세요.

#긴 콘텐츠로 레이아웃 검증

각 중단점을 넘나들며 크기를 조절하고 그리드 열 수와 자식의 열 범위를 함께 확인하세요. 긴 제목과 작업 라벨을 사용해 콘텐츠가 세로로 늘어날 수 있는지 점검하세요. 고정 크기는 치수가 필요한 요소나 의도적으로 정한 뷰포트에 사용하세요. 페이지 카드는 보통 패딩과 너비 제한만 있으면 됩니다.

미리보기의 작업 체크박스를 키보드로 조작하고 섹션 링크도 따라가 보세요. 콘텐츠가 줄바꿈되어도 레이아웃은 사용할 수 있어야 합니다. 고정 높이 카드에 맞추려고 글자를 줄이면 근본적인 제약이 가려집니다.

레이아웃

#개요

#간격 값 선택

#컨테이너 크기로 너비 제한

#페이지 래퍼로 시작

#열 그리드 구성

#명시적 트랙 추가

#긴 콘텐츠로 레이아웃 검증