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

 

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

 

- pc&mobile 해상도의 차이

 

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

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

 

- breakpoint

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

 

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

 

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

  - 고정  

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

    - columns 단의 수

    - margin 마진값

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

  -가변

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

  

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