웹디자인 그리드 시스템의 모든 것?!

- pc&mobile 해상도의 차이

- 데스크탑 해상도는 정답이 없다
수많은 모니터와 수많은 스타일 사이트가 존재하기 때문
반응형 웹이기 때문

사용자 폭이 넓을 수록 작은 해상도에 맞추는 게 좋음
ex) 네이버 가로폭 : 1080px

- breakpoint

테블릿, 모바일 등 사이즈에 따라 디자인 스타일이 크게 변해야 하는 구간

- 반응형 웹
디바이스 넓이에 따라 최적화된 디자인을 위해 특정 구간에 분기(breackpoint)를 설정해야 함
단을 너무 많이 쪼개면 반응형에 취약할 수 있음

- 그리드 시스템 기본 4요소

- 고정

- container 컨텐츠 폭 : 콘텐츠 영역의 가장 큰 폭의 기준

- columns 단의 수

- margin 마진값

- gutter 커터, 단과 단 사이 간격

-가변

- column 단의 넓이 (다양한 해상도에 맞게 달라짐)

ex) <적당한 값>
container : 1200px
columns : 12개
offset : center
gutter : 30px
column : 72px

댓글