Layout
Layout은 반응형 디자인을 구현하기 위한 가장 기본 규칙으로, 화면의 컨테이너 폭·여백·최소 화면 높이 등을 정의합니다. 이를 통해 PC·Tablet·Mobile 환경에 맞춰 레이아웃이 유연하게 동작하도록 합니다.
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 |
Breakpoint
PC | Tablet | Mobile |
|---|---|---|
≥1200px | 768px ~ 1199px | <768px |
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 |
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 |
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
Guidelines
PC
Tablet
Mobile
Guidelines
PC
Tablet
Mobile