웹프로그래밍 Viewport 설정 태그 <meta>

🔥오늘의 목표🔥

뷰포트를 설정하는 방법에 대해서 알아보자.

📕 반응형 웹

• 하나의 웹사이트로 데스크탑, pc, 태블릿 pc등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지다.
• 대부분의 모바일기기의 웹브라우저 렌더링 영역은 뷰포트 영역보다 크기 때문에 스크롤기능이 필요하다.

이때 실제 렌더링되는 영역을 뷰포트와 동일하게 만들어 주는 <meta>태그를 사용하여 조정할 수 있다.

📕 <meta>태그의 Viewport 설정

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

📒 content의 설정 값들

• width(height)
  뷰포트의 가로(세로) 크기를 지정합니다. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 "device-width(height)"를 사용합니다.
  (뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정한다는 의미입니다.)

• initial-scale
  페이지가 처음 나타날 때 초기 줌 레벨 값을 설정합니다.(소수값)

• user-scalable
  사용자의 확대/축소 기능을 설정할 수 있습니다.