[HTML5&CSS3] 뷰포트(viewport)

728x90

웹페이지에서 클라이언트에 특정 정보를 전달하기 위한 목적으로 meta태그를 사용합니다. 이때 만약 모바일에서 웹페이지에 접근하는 경우 모바일 화면에 대한 적절한 대응을 위해 meta태그에 뷰포트(viewport)를 사용합니다.

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

viewport에는 다음과 같은 속성을 입력해 모바일 화면에 대응될 수 있도록 합니다.

width	화면의 너비를 의미하며 200, 300등의 값을 지정하거나 device-width로 장치의 화면에 맞출 수 있습니다.
height	화면의 높이를 의미하며 200, 300등의 값을 지정하거나 device-height로 장치의 화면에 맞출 수 있습니다.
initial-scale	화면확대비율로 1.0, 2.0등의 값을 지정합니다.
user-scalable	yes, no등의 값을 지정하여 임의의 화면확대가 가능한지여부를 설정합니다.
minimum-scale	최소축소비율로 1.0, 2.0등의 값을 지정합니다.
maximum-scale	최대축소비율로 1.0, 2.0등의 값을 지정합니다.

728x90

저작자표시비영리변경금지

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] 변형 속성  (0)	2019.12.19
[HTML5&CSS3] 스프라이트(Sprite) 이미지  (0)	2019.12.18
[HTML5&CSS3] 뷰포트(viewport)  (0)	2019.12.17
[HTML5&CSS3] 벤더 프리픽스(vendor prefix)  (0)	2019.12.05
[HTML5&CSS3] 선형 그레디언트(linear-gradient)  (0)	2019.11.25
[HTML5&CSS3] 그림자 효과  (0)	2019.11.19