Layout
Layout은 반응형 디자인을 구현하기 위한 가장 기본 규칙으로, 화면의 컨테이너 폭·여백·최소 화면 높이 등을 정의합니다. 이를 통해 PC·Tablet·Mobile 환경에 맞춰 레이아웃이 유연하게 동작하도록 합니다.
Layout
Layout은 반응형 디자인을 구현하기 위한 가장 기본 규칙으로, 화면의 컨테이너 폭·여백·최소 화면 높이 등을 정의합니다. 이를 통해 PC·Tablet·Mobile 환경에 맞춰 레이아웃이 유연하게 동작하도록 합니다.
Breakpoint
PC | Tablet | Mobile |
|---|---|---|
≥1200px | 768px - 1199px | <768px |
Breakpoint
PC | Tablet | Mobile |
|---|---|---|
≥1200px | 768px - 1199px | <768px |
Semantic Tokens
페이지 좌우 여백은 반드시 container-padding 토큰을 사용합니다.
내부 요소는 가능한 fill(100%)로 채우고, 외부 컨테이너의 min/max 값으로 전체 폭을 제어합니다.
한 화면에 콘텐츠를 모두 노출해야 하는 경우, screensizeH-min 토큰을 기준으로 화면 레이아웃을 설계합니다.
Token | Description | PC | Tablet | Mobile |
|---|---|---|---|---|
| 페이지 좌·우 기본 여백 | 40 | 32 | 16 |
| 컨테이너 최소 너비 | 1200 | 768 | 375 |
| 컨테이너 최대 너비 | 1200 | 1200 | 768 |
| 최소 화면 높이 | 800 | 1024 | 812 |
Semantic Tokens
페이지 좌우 여백은 반드시 container-padding 토큰을 사용합니다.
내부 요소는 가능한 fill(100%)로 채우고, 외부 컨테이너의 min/max 값으로 전체 폭을 제어합니다.
한 화면에 콘텐츠를 모두 노출해야 하는 경우, screensizeH-min 토큰을 기준으로 화면 레이아웃을 설계합니다.
Token | Description | PC | Tablet | Mobile |
|---|---|---|---|---|
| 페이지 좌·우 기본 여백 | 40 | 32 | 16 |
| 컨테이너 최소 너비 | 1200 | 768 | 375 |
| 컨테이너 최대 너비 | 1200 | 1200 | 768 |
| 최소 화면 높이 | 800 | 1024 | 812 |
Guidelines
PC
Tablet
Mobile
Layout
Layout