Viewport   뷰포트

1. 뷰포트 (Viewport)

  ㅇ 웹브라우저 상에 사용자에게 실제 보여지는 화면 영역

  ㅇ 데스크톱,테블릿,스마트폰 비교
     - 데스크톱 PC의 경우
        . 웹페이지 내용을 고정 크기 위주로 보여줌 
        . (화면 크기 조정 가능) 웹브라우저 크기 조정을 통해서, 뷰포트의 크기 마저도 바꿀 수 있음
        . (해상도 조정 가능) 디스플레이 해상도 설정 조정을 통해서, 가로 x 세로 픽셀 조정도 가능함
     - 스마트폰,태블릿 등 모바일의 경우
        . 웹페이지 내용을 가변 크기 위주로 보여줌
        . 기본적으로, 웹브라우저에서 보여주는 크기를 바꿀 수 없을 뿐 만 아니라, 
        . 또한, 고정 크기의 큰 화면(통상, 데스크톱에 맞춰짐)을 다 보려면 스크롤해야 만 되므로.
        . 따라서, 모바일 기기는, 의도적으로 화면을 아주 작게 줄여서 보여주게 됨
        . 다만, 글자와 달리, 이미지는 고정 크기이므로, 대부분 잘려서 보여짐
        . 추가적으로, 데스크톱과는 달리, 모바일은 디스플레이 해상도 설정 조정 기능도 없음

  ㅇ 뷰포트 용도
     - 웹문서 시작부의 meta 태그 요소에, 뷰포트 속성을 미리 지정하면,
     - 웹브라우저 상의 사용자에게 보여지는 화면 영역을,
     - 장치(스마트폰,테블릿 등 디스플레이) 크기에 맞게, 적절히 조절하여 보여줄 수 있게 됨
     - 특히, 반응형 웹 디자인에 이를 활용함


2. 뷰포트 속성

  ㅇ 뷰포트 내 주요 속성들
     - width : 화면 폭, height : 화면 높이
        . 例) width=device-device : 화면 너비 크기를 장치 스크린 너비 크기에 맞춤
     - initial-scale : 초기 줌 레벨 조절 비율 (0 ~ 10 : 기본 1.0)
        . 모바일 기기는, 컨텐츠가 큰 화면일 경우, 기본적으로 컨텐츠 크기를 아주 작게 줄여서 보여줌
        . 例) initial-scale=0.5 : 1/2로 화면 축소해서 보여줌
     - user-scalable : 사용자가 화면 크기 조절 가능 여부 (yes, no : 기본 yes)
     - minimum-scale : 최소 축소 가능 비율 (0 ~ 10 : 기본 0.25)
     - maximum-scale : 최대 확대 가능 비율 (0 ~ 10 : 기본 5.0)
     * 한편, minimum-scale,maximum-scale 모두 1 로 하면, user-scalable은 no와 같음
     - target-densitydpi : DPI(Dots Per Inch) 지정

  ㅇ 뷰포트 단위
     - (vm, wh, wmin, wmax, ...)

  ㅇ 例) <meta name="viewport" content="width=device-width, initial-scale=1.0">
     - width=device-width : 페이지 너비를 장치의 스크린 너비로 설정
        . 즉, 렌더링 영역을 장치 너비 크기와 같게 함
     - initial-scale=1.0 : 페이지 로딩시, 줌(확대/축소) 없이 원래 크기를 사용

  ㅇ 例) <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1">
     - initial-scale=1 : 장치 스크린 너비 크기에 맞게 (줌 없음)
     - user-scalable=no : 사용자가 화면 크기 조절 못하게 함
     - maximum-scale=1 : 최대 확대 가능 비율을 가장 작게 적용