UI 레이아웃?
- UI 를 효과적으로 정리하고 배치하는 것
- 컬럼 그리드 시스템(Column Grid System) 을 사용합니다.
컬럼 그리드 시스템의 세 가지 요소
- Margin : 양쪽 여백 - 단위 :
px,vw,%등 - Column : 새로로 나누어진 영역
- 일반적으로 휴대폰 4개, 태블릿 8개, PC 12개 컬럽으로 나눕니다.
- 일반적인 반응형웹 윈도우 넓이
| 0 - 480 | 481 - 768 | 769 - 1279 | 1280 - |
|---|---|---|---|
| 작은 스마트폰 | 큰스마트폰, 태블릿 세로 화면 | 태블릿 가로 화면, 노트북 | 데스크탑 |
- Gutter : Column 사이의 공간
참조
코드스테이츠 프론트엔드 부트캠프
Aim for the TOP, Developer