반응형 웹 넓게 viewport 잡기

반응형 웹 넓게 viewport 잡기

Layout 에 비해 넓은 viewport

• 일반적인 웹 Layout

  컨텐츠 가로 중앙 정렬

  양 옆은 여백

  컨텐츠 컨테이너는 고정된 width, padding, margin 을 가지게 됨

• 넓게 viewport 잡기

  양 옆의 여백을 더욱 가져감

  컨텐츠는 중앙 정렬 하돼 viewport 보다 훨씬 좁은 width 값을 가짐

• 장점

  스크린이 작아져도 여백만 좁아지고 내부의 컨텐츠는 건드리지 않기에 Layout 유지 가능

  넓은 여백으로 인하여 하나의 viewport 의 커버리지가 넓어지기 때문에 여러 viewport 를 만들지 않아도 돼서 디자인/개발 의 공수가 줄어듦

• 단점

  좌우 여백이 넓어지기 때문에 디자인/개발에 따라 공백의 존재감이 커져 이질감이 느껴질 수 있음

  컨텐츠의 레이아웃이 단조로워질 수 있음

  주 고객층에 맞는 viewport를 설정하지 못 하면 원하는 Layout 를 보여주기 힘들 수 있음