최근 웹사이트 기반의 서비스를 모바일 또는 태블릿 화면에서 접속하는 경우가 많다.
기존에는 부트스트랩 이라는 프레임워크 기반으로 반응형 웹을 자동 구현하거나, 웹퍼블리셔가 관련 처리를 하는 경우가 많다.
픽셀
pixel 이란 Picture Element의 줄임말로, 화소라고 부른다.
컴퓨터 디스플레이를 구성하는 최소 단위로, 각 픽셀에 색상을 표현해서, 디스플레이가 화면을 보여주는 것이다.예를 들어 19201080이면 총화소수는 19201080개 이다.
뷰포트 개념 등장
모바일 기기가 발전하면서 다양한 디바이스가 나오게 되었고,디바이스마다 해상도가 다르게 되었다.
따라서 디바이스에 대한 해상도 기준이 필요했고,여기서 나온 개념이 viewport 이다.
이렇게 화면에 표시되는 영역이 viewport이다.
대부분이 사용하고 있는 웹브라우저 실행엔진은 웹킷인데 모바일 기본해상도 즉, viewport의 해상도는 980px이다.
만일 이러한 설정이 없으면 ,대부분의 스마트폰에서 디폴트로 설정해놓은 980px에 맞게 웹페이지가 표시된다(웹키트)
이러한 문제를 해결하기 위해서 meta 태그에서 viewport를 설정할 수 있게 하고 있다.
<meta name="viewport" content="width=320">
meta viewport의 width값이 고정 되어 있으면 다양한 디스플레이 대응이 어렵다.
디바이스마다 가변적으로 대응하기 위해서 기기마다 너비값을 가져오게 하기 위하여 divice-width값을 가져온다.
<meta name="viewport" content="**width=device-width**">
위에서 언급한 대로 viewport meta 태그를 사용해서, 스마트폰에서도 웹페이지를 적절한 크기로 표시할 수 있으므로, 반응형 웹페이지의 첫 출발은 viewport meta 태그를 설정하는 것이다.
<meta name="viewport" content="여러 프로퍼티 설정을 콤마(,)로표시 가능">
<!-- 가장 많이 사용되는 예 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">