[HTML] meta 태그 viewport 설정, 문법

728x90

viewport ?

-현재 display에 보여지고 있는 영역

- PC 환경에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다 안 보이고 스크롤 해서 봐야 되는 경우가 있는데,

이때 보여지는 부분이 viewport 영역이다

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

<head> 태그 안에 <meta> 태그 활용하여 작성한다.

meta 태그의 content 값에 설정값들을 추가해 모바일 기기에서 렌더링되는 영역,뷰포트 크기,줌 레벨을 조절할 수 있다.

width=divice-width 하여 전체 웹 페이지의 width 가 기기 너비만큼 설정되고 @media에 선언된 width 범위에 따라 css 적용되어 반응형 웹을 만든다.

1. width

- viewport 가로크기 조정, divice-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미

2. height

- viewport의 세로 크기를 조정

3. initial-scale

- 초기 화면 배율(0~10) 설정

-1.0(100%) -> 모바일 기기의 가로 해상도로 조정

4. user-scalable

- 페이지 축소/확대 가능 여부

728x90