반응형 웹의 Grid 구성

해상도

사용자가 다양할 수록

작은 모니터로 접속해도 문제가 없도록 작은 해상도(ex.1080... )에 맞추는 것이 좋다.

실제로 네이버 사이트의 넓이는 1080px, daum은 990px이다. 

※ statcounter을 통해 global 해상도 통계 확인 가능

https://gs.statcounter.com/

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

 

그리드(Grid)

 

용어	설명	수치
Container	전체 콘텐츠 넓이	px
Columns	Container 내의 단의 수	12개
Column	Column의 넓이	% (가변)
Margin	Container 밖의 공간 넓이	px
Gutter	Column 사이 간격	px

 

대부분 UI 라이브러리를 사용하면 column은 12개로 구성되어있다.

2, 3, 4, 6단으로 나눠도 정수로 깔끔하게 떨어지기 때문에 편하다.

※ 모바일일 경우, 웹 Column 12를 6으로 반영하여 제작한다. 

 

주의할 점은 Column을 너무 나누면 나눌수록 반응형 웹에 취약해진다. 

 

Gutter는 

Container가 1200px인 경우 30px를, 모바일인 경우 10px을 추천한다. 

 

 

 

 

 

 

출처 : https://www.youtube.com/watch?v=Q_gcAAKfGKw