뷰포트 (viewport)

웹 브라우저에서 실제 내용이 표시되는 영역을 뜻 합니다. 모바일 viewport와 pc의 viewport는 크기가 다르기 때문에 반응형 웹에서는 viweport에 맞게 화면을 변경해서 보여줘야 합니다. 이럴때 사용하는 메타태그가 뷰포트 메타태그 입니다.

메타 뷰포트 태그를 지정하는 법

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

메타 뷰포트 태그 속성

• width : 뷰포트 가로
• height : 뷰포트 세로
• user-scalable : 사용자 확대, 축소 가능 여부
• initial-scale : 초기 화면 비율
• maximum-scale : 최대 화면 비율
• minimum-scale : 최소 화면 비율

일반적인 뷰포트 사용법

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

뷰포트 단위

아래의 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위 입니다.

• vw : 뷰포트 너비, 1vw는 뷰포트 너비의 1% 입니다.
• vh : 뷰포트 높이, 1vh는 뷰포트 높이의 1% 입니다.
• vmin : 뷰포트의 너비와 높이 중에서 작은 값의 1% 입니다.
• vmax : 뷰포트의 너비와 높이 중에서 큰 값의 1% 입니다.