HTML meta viewport 반응형 웹페이지를 위한 필수 속성

지난번에 meta 태그에 대해 포스트를 작성한 적이 있었는데요.

공부를 하다보니 name="viewport'가 계속 나옵니다.

지난번 학습하면서는 몰랐던 내용이라 추가로 배운 내용을 정리해보려구요.

 

meta name="viewport"란?

반응형 웹 디자인에서 사용되는 속성입니다. 유저들의 브라우저 창 크기가 다르고, 모바일 기기에서도 접속할 수 있기 때문에 다양한 화면 크기에 맞게 웹페이지를 조정하기 위한 목적입니다.

 

예시

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

가장 많이 쓰는 문장인 것 같아요. freecodecamp 연습할 때 항상 넣었던 것 같습니다.

• name 속성에 viewport를 입력합니다
• content 속성에 세부사항을 넣는데요
  • width=device-width : 유저가 보는 창의 화면 너비에 맞게 웹 페이지를 조정하라는 뜻입니다. 만약 width=500이라고 쓴다면 500px에 맞춰서 보일 거에요.
  • initial-scale=1.0 : 웹 페이지의 초기 확대/축소 비율을 지정합니다. 값을 1.0으로 썼다는건 기본 100% 비율을 말합니다

 

다른 속성들

content에 들어가는 다른 속성들도 알아보겠습니다.

 

height=device-width

유저가 보는 창의 화면 높이에 맞춰서 웹 페이지를 조정합니다. 마찬가지로 height=500 도 가능합니다.

 

user-scalable=yes

사용자가 화면을 확대하거나 축소할 수 있는 기능을 제어합니다. yes라고 하면 기능을 열어주는 것이고, no라고 하면 확대를 못하게 막습니다.

 

maximum-scale=5.0

사용자가 화면을 최대 5배까지 확대할 수 있다는 뜻입니다. 범위는 0에서 10까지 입니다.

 

minimum-scale=0.25

사용자가 화면을 최소 0.25배까지 축소할 수 있다는 뜻입니다. 범위는 0.25에서 10까지 입니다

 

 

참고할만한 사이트는 아래와 같습니다.

https://www.quirksmode.org/mobile/metaviewport/

Meta viewport