Grid System
그리드 시스템을 사용하여 화면의 요소를 조화롭게 일관되게 배치 합니다.
Responsive Layout (horizontal grid)
콘텐츠와 UI 요소를 정렬 할 가로 그리드를 정의하여 콘텐츠가 포함 된 시각적 구조를 만듭니다.
Desktop Grid @1200px (1024px ≤ screen)
Tablet Grid @768px (768px ≤ screen ＜ 1024px)
Mobile Grid @360px (screen ＜ 768px)
Breakpoint
디스플레이의 크기에 따라 칼럼 수와 권장 마진 및 거터를 결정하여 그에 따른 브레이크 포인트의 범위를 설정합니다.
| Breakpoint | Value (px) | Columns | Size(%) | Margin(%) |
|---|---|---|---|---|
| Small | 320 | 4 | 22.75% | 3% |
| Medium | 768 | 12 | 6.866% | 1.6% |
| Large | 1024 | 12 | 6.866% | 1.6% |