Foundations
Spacing
4px을 기준으로 하는 간격 스케일입니다. 컴포넌트 내부 여백과 레이아웃 사이 간격 모두 이 값에서 고릅니다.
스케일은 0부터 96px까지 4px 배수로 이어집니다. 같은 계층의 요소에는 같은 단계를 쓰고, 인접한 두 단계를 섞어 미세 조정하지 않습니다.
스케일
0 0px
1 4px
2 8px
3 12px
4 16px
5 20px
6 24px
7 28px
8 32px
9 36px
10 40px
11 44px
12 48px
14 56px
16 64px
20 80px
24 96px
0.5 2px
1.5 6px
2.5 10px
3.5 14px
쓰는 곳
- 2 · 3 — 아이콘과 라벨 사이, 배지 내부
- 4 · 5 — 버튼 좌우 여백, 인풋 내부
- 6 · 8 — 카드 내부 여백, 폼 필드 사이
- 10 · 12 · 16 — 섹션 사이, 페이지 여백
- 20 · 24 — 큰 섹션 구분, 랜딩 블록
레이아웃 폭
문서 본문은 최대 768px, 문서 셸은 1400px입니다. 데스크톱에서 사이드바는
216px 고정이고 본문이 남은 폭을 가져갑니다. 모바일에서는 사이드바가 접히고 본문이
전체 폭을 씁니다.