뷰포트

접속한 기기의 정보를 브라우저에게 전달합니다.

뷰포트(View cwport)는 화면에 보이는 영역을 제어하는 기술 데스크톱은 사용자가 지정한 해상도에 따라보이는 영역이 결정 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어 쿼리가기기의 화면 크기를 정확하게 갑지할수 있도록하기 위해 뷰포트라는 기술을 이용합니다.

뷰포트를 사용해야 하는 이유?

사이트에 접속하는 방법은 매우 다양합니다. PC및 모바일 기기등 다양한 장치로 사이트에 접속을 합니다. 하지만, 접속 기기들 마다 화면의 사이즈는 매우 다양합니다.

휴대폰의 제조사 및 종류마다 화면의 해상도와 크기가 다릅니다. 또한, 타블릿의 등장으로 10인치, 11인치, 12인치등 수많은 종류의 사이즈가 존재합니다. PC 또한 연결된 모니터의 크기와 해상도에 따라 보여지는 방법이 틀립니다.

반응형 웹은 뷰포트라는 메타 테그를 이용하여 접속한 기기의 화면 정보를 읽어 올 수 있습니다.

뷰포트 지정 방법

뷰포트는 HTML의 meta테그를 이용하여 설정합니다. 메타 테그는 HTML 페이지가 브라우저에게 전달되는 정보중의 하나로 head영역안에 작성을 합니다.

메타 테그를 작성하는 방법은 다음과 같습니다:

<meta name="viewport" content="속성1=값1, 속성2=값2, ...">

뷰포트 태그 속성

다양한 뷰포트 동작 방법을 설정합니다.

• width=divice-width : 디바이스의 크기로 가로 사이지를 지정합니다.
• height
• user-scaleable : 사용자가 학대/축소 가능 여부(no, yes)

• initial-scale=1.0

• maximum-scale
• minimun-scale

화면의 보이는 영역을 다루는 기술, 뷰포트

데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 였는 값이 뷰포트 영역이 됩니다. 뷰포트 메타 태그를 이용해서 화면의 크기나배율을 조절해야합니다

<meta name= "viewport" content="width =device-width , initial-scale=1, minimum-scale=1, 
maximum-scale=1, user-scalable=no">

뷰포트속성

• width : devi ce - width. 앙수

• height : devi ce height. ~상수

• initial-scale : 뷰포트의 초기 배율을 지성합니다 기본값은 1 입니다. 1 보다 작은 값을 사용하면 축소된 패이지를 표시 하고. 1 보다 큰 값을 사용하면 확대된 1I1IO IXI 를 표시합니다

• user-scalable 뷰포트의 확대/축소 여부를 지정합니다.

• minimum-scale 뷰포트의 최소 축소 비율을 지정합니다.

• maximum-scale 뷰포트의 최대 확대 비율을 지정합니다.

뷰포트 테스트

뷰포트를 테스트하기 위하여 다양한 화면의 기기 장비들로 접속을 해봐야 합니다. 하지만, 이런한 실제 접속 테스트는 불가능합니다.

우리가 설치한 크롬 브라우저는 개발자 도구를 통하여 접속기기의 화면 사이즈를 변경해 볼 수 있습니다.

뷰포트 단위

뷰포트가 적용되면, 다음과 같은 단위를 CSS에서 사용이 가능합니다.

• vw : view port 너비
• vh : view port 높이
• vmin : 뷰포트 너비와 높이 중에서 작은값
• vmax : 뷰포트 너비와 높이 중에서 큰값