[HTML5&CSS3] 뷰포트(viewport)

웹페이지에서 클라이언트에 특정 정보를 전달하기 위한 목적으로 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등의 값을 지정합니다.