뷰포트(viewport)

Jinny·2021년 10월 30일
1

HTML 기초

목록 보기
13/13

뷰포트란?

뷰포트(viewport)란 현재 화면에 보여지고 있는 영역을 의미한다.
기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.

왜 이런 현상이 일어났을까?

태블릿, 스마트폰 등 모바일 기기가 등장하기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계되었다.
컴퓨터 화면에서의 웹 페이지는 웹브라우저라는 소프트웨어를 통해 페이지 크기를 조절해가며 웹을 조회할 수 있지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)로 조회해야 하므로 웹의 모든 콘텐츠를 표시하기 위해서는 배율 조정을 해야만 한다!

때문에 PC용 웹페이지와 모바일 웹페이지를 따로 만드는 경우도 있다.

viewport관련 설정

기기 별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해 meta태그를 통해 뷰포트 관련 설정을 추가할 수 있다.

<!-- 뷰포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1.0으로한다.-->
<meta name="viewport" content="width=device-width, inital-scale=1.0">

내용정리

  • 뷰포트는 현재 화면에 보여지고 있는 영역을 의미한다.
  • 웹 문서는 기본적으로 PC 화면에 맞춰 설계되었기 때문에, 다른 기기에서 배율 조정이 일어난다.
  • 배율 조정 현상에 대응하기 위해 개발자는 메타 태그를 사용해 뷰포트 관련 설정을 추가할 수 있다.
profile
프론트엔드 공부중입니다!

0개의 댓글