뷰포트

뷰포트(viewport)는 브라우저가 웹 페이지를 렌더링하는 가상의 윈도우이다. 스마트폰 등의 모바일 기기는 컴퓨터와 픽셀을 표현하는 방법에 차이가 있어 모바일 기기에서 웹 페이지를 로드할 경우 글자나 요소의 크기가 의도치 않게 변형될 수 있다. 이는 반응형 디자인을 적용할 때에도 문제가 되는데, 따라서 페이지를 로드할 때 참고해야 할 특징들을 일종의 메타 데이터로 제공해야 한다.

뷰포트 정보를 브라우저에 전달하기 위해서는 HTML의 head 안에 <meta> 태그를 추가한다. 일반적으로 인코딩을 설정하는 <meta> 태그와 title 사이에 위치시킨다. 보통은 아래와 같은 뷰포트를 사용한다.

<meta name="viewport" content="width=device-width, initial-scale=1">

뷰포트의 content 속성에 전달할 수 있는 뷰포트 속성은 다음과 같다. 예전에는 scalable이라는 이름이 들어간 것으로 알려진 뷰포트 속성들을 현재 표준에서는 zoom이라는 단어로 바꾸어 사용한다.

  • min-width, max-width: 뷰포트의 최소/최대 너비를 나타낸다. 기본값은 auto이며, 크기를 수치나 퍼센티지로 입력할 수도 있고, device-width를 값으로 사용할 수도 있다.
  • width: min-widthmax-width를 모두 지정하는 단축 속성이다.
  • min-height, max-height: 뷰포트의 최소/최대 높이를 나타낸다. 기본값은 auto이며, 크기를 퍼센티지로 입력할 수도 있고, device-height를 값으로 사용할 수도 있다.
  • height: min-heightmax-height를 모두 지정하는 단축 속성이다.
  • zoom: 화면이 확대/축소되는 초기값을 설정한다. 값은 양수 또는 양의 퍼센티지를 사용하며 기본값은 auto이다.
  • min-zoom, max-zoom: 사용자가 화면을 확대/축소할 수 있는 최소/최대값을 설정한다. 값은 양수 또는 양의 퍼센티지를 사용하며 기본값은 auto이다.
  • user-zoom: 사용자가 직접 화면을 확대/축소할 수 있는지를 지정한다. zoomfixed를 값으로 사용하며, 기본값은 zoom이다.
  • orientation: 뷰포트의 방향을 설정한다. portrait, landscape를 값으로 사용하며, 기본값은 auto이다.

results matching ""

    No results matching ""