viewport : 모바일웹 제작시 화면의 표시 영역을 설정

요즘 모바일웹 제작은 스마트폰의 사양이 많이 좋아졌기 때문에 일반 PC웹을 제작하는것과 별반 차이가 없다. 단지 모바일웹에서 아직 지원되지 않는 기능을 없애거나, 적용가능한 방법을 찾아서 제작하는 것 밖에는 다른점이 없다. 그리고 모바일웹제작시 꼭 필요한 설정이 있는데, 바로 viewport 이다. 

viewport 는 스마트폰의 웹화면영역을 확대/축소 해주는 기능을 한다. 물론 웹이 모바일크기에 맞게 제작되어야 한다. 보통 모바일웹을 제작할땐 레이아웃의 크기를 % 로 맞추기 때문에, viewport 를 설정하면 확대된 화면으로 볼 수가 있다. 일반적인 설정법은 아래와 같다.

 viewport 의 기본 사용 법

---

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

위의 소스코드는 html 에서 head 요소 안에 넣어야한다. meta 요소의 name 속성을 사용하면 문서의 정보를 나타낼 수 있다. 여기서는 name 속성값으로 viewport 를 설정하였다. 

아래는 viewport 설정시 content 속성에 지정 할 수 있는 값들의 정보이다. 값이 여러개일경우 ,(콤마) 로 분류해 주면된다.

 viewport 설정시 content 속성에 지정할 수 있는 값들의 정보

---

width  기기의 가로크기

• 범위 : 200~10000px
• device-width : 기기의 가로폭에 맞춤
• 기본값 : 980px

---

height  기기의 세로크기

• 범위 : 223~10000px
• device-height : 기기의 세로폭에 맞춤
• 기본값 : auto

---

initial-scale  처음 페이지를 읽을때 확대 배율

• 범위 : 0~10
• 기본값 : 1.0

---

minimum-scale  축소 배율 값 

• 범위 : 0~10
• 기본값 : 0.25

---

maximum-scale  확대 배율 값

• 범위 : 0~10
• 기본값 : 1.0

---

user-scalable  사용자의 의한 확대/축소 설정 사용유무

• 범위 : yes 또는 no
• yes : 사용한다.
• no : 사용하지 않는다.
• 기본값 : yes