모바일 웹 해상도 맞추는 방법, meta viewport 설정하기
- 웹 언어 배우기/HTML
- 2018. 10. 24. 07:00
이 블로그를 포함한 많은 웹사이트, 블로그는 반응형 웹을 지원하고 있습니다. 반응형 웹은 무엇일까 생각해봅시다.
반응형 웹은 위 사진에서 보시는 것과 같이 PC, 모바일 등 다양한 기기에 대해서 화면의 크기에 맞춰서 보여지는 페이지를 말합니다.
meta 태그를 이용한 viewport 설정하기
모바일 웹 해상도는 viewport라는 <meta> 태그를 이용해서 설정할 수 있습니다. meta viewport는 IE10 모바일 브라우저(스냅 모드)를 제외한 나머지(안드로이드, 오페라 등) 브라우저는 적용되고 있습니다. 즉, 이 태그는 W3C의 표준이 아닙니다.
사용자의 기기에 따라서 반응할 수 있는 웹을 설정에 앞서 다양한 요소에 대해 알아보겠습니다.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
maximum-scale=1.0, minimum-scale=1.0"
</head>
<body>
....
</body>
</html>위 소스를 해석하면 사용자가 현재 접속하고 있는 웹페이지의 너비를 기기 화면 너비에 맞추고 사용자가 브라우저의 확대/축소를 불가능하게 하고 처음 웹사이트를 방문했을 때, 초기, 최소, 최대 화면의 배율을 설정하지 못하게 막는 코드입니다. 즉, 사용자가 사용하는 스마트폰에 손가락으로 아무리 작게 하려고 해도 안되는 이유가 이것입니다.
※ content에 여러 속성값을 쓸 때 쉼표로 분리하여 표현할 수 있습니다.
width=device-width
사용자가 접속한 기기 화면의 넓이에 따라 웹사이트의 넓이를 맞추겠다는 것을 의미합니다. 따라서 device-width는 100%의 크기로 화면에 출력됩니다.
user-scalable=no
사용자가 브라우저의 확대/축소를 불가능하게 하는 기능입니다. yes와 no로 설정할 수 있습니다.
initial-scale=1.0
사용자가 처음 접속한 웹사이트에 대해서 화면의 배율을 설정하는 기능입니다. 여기서 1.0은 100%를 의미합니다. 즉, 1보다 큰 값으로 적용하면 확대된 페이지로 표시됩니다.
maximum-scale=1.0
최대 배율을 의미하는 것으로 최대 크기를 설정할 수 있습니다. 1에서 10까지 설정할 수 있습니다.
minimum-scale=1.0
최소 배율을 의미하는 것으로 최소 크기를 설정할 수 있습니다. 이것 또한 1에서 10까지 설정할 수 있습니다.
이런식으로 사용자가 사용하는 기기에 따라 화면을 조절할 수 있습니다. 반응형 웹을 만들기 위해서 꼭 필요한 것으로 잘 알아두면 좋겠습니다!
