최근 웹사이트 기반의 서비스를 모바일 또는 태블릿 화면에서 접속하는 경우가 많다.
기존에는 부트스트랩 이라는 프레임워크 기반으로 반응형 웹을 자동 구현하거나, 웹퍼블리셔가 관련 처리를 하는 경우가 많다.
적응형 웹 VS 반응형 웹
- 적응형 웹: 사용자가 모바일 환경인지, PC 환경인지에 따라 다른 페이지를 보여준다
- 반응형 웹: 동일한 웹페이지를 보여주되, 웹페이지를 보여주는 디바이스 화면 사이즈에 따라, 다르게 보여준다.
viewport 개념
1)픽셀이란
- pixel 이란 Picture Element의 줄임말로, 화소라고 부른다.
- 컴퓨터 디스플레이를 구성하는 최소 단위로, 각 픽셀에 색상을 표현해서, 디스플레이가 화면을 보여주는 것이다.
- 예를 들어 19201080이면 총화소수는 19201080개 이다.
2)뷰포트 개념 등장
- 문제는 모바일 기기가 발전하면서 다양한 디바이스가 나오게 되었고,디바이스마다 해상도가 다르게 되었다.
- 따라서 디바이스에 대한 해상도 기준이 필요했고,여기서 나온 개념이 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">
- 각 기기의 알맞은 너비값은 디스플레이 해상도 너비가 아니라 pixel density로 계산 된다.
viewport meta 태그 설정
- 위에서 언급한 대로 viewport meta 태그를 사용해서, 스마트폰에서도 웹페이지를 적절한 크기로 표시할 수 있으므로, 반응형 웹페이지의 첫 출발은 viewport meta 태그를 설정하는 것이다.
<meta name="viewport" content="여러 프로퍼티 설정을 콤마(,)로표시 가능">
<!-- 가장 많이 사용되는 예 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">