14-1 모바일 기기와 웹 디자인
반응형 웹 디자인(responsive web design)
기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시할 수 있는 방법이 바로 반응형 웹 디자인(responsive web design)이다.
http://colly.com 사이트에 접속해 브라우저 창의 크기를 조절하면서 화면이 어떻게 바뀌는지 살펴보자.
다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 투자 비용과 시간, 노력을 고려하면 비효율적이다. 이런 점을 고려해 여러 기기에 맞는 사이트를 별도로 제작하지 않고 앞의 사이트처럼 화면 크기를 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인이다.
반응형 웹의 장단점
- 모든 스마트 기기에서 접속 가능
- 가로 모드에 맞추어 레이아웃 변경 가능
- 사이트 유지, 관리 용이
모바일 기기를 위한 기본 다지기, 뷰포트(viewport)
PC화면에서 보이는 내용을 모바일 기기에서 그대로 볼 수 없는 이유는 PC화면과 모바일 화면의 픽셀 표현 방법이 다르기 때문인데 뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대하거나 축소해 표시할 수 있다. 이 때 viewport란 스마트폰 화면에서 실제 내용이 표시되는 영역이다.
뷰포트 지정하기
| 속성 | 설명 | 사용 가능한 값 | 기본 값 |
|---|---|---|---|
| width | 뷰포트 너비 | device-width 또는 크기 | 브라우저 기본 값 |
| height | 뷰포트 높이 | device-height 또는 크기 | 브라우저 기본 값 |
| user-scalable | 확대/축소 가능 여부 | yes 또는 no | yes |
| initial-scale | 초기 확대/축소 값 | 1~10 | 1 |
| minimum-scale | 최소 확대/축소 값 | 0~10 | 0.25 |
| maximum-scale | 최대 확대/축소 값 | 0~10 | 1.6 |
<!-- 기본형 -->
<meta name="viewport" content="속성1=값, 속성2=값2, ... ">
<!-- 예시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">