html : 반응형웹 / 뷰포트(viewport)란? 메타 뷰포트태그 작성법

html : 반응형웹 / 뷰포트(viewport)란? 메타 뷰포트태그 작성법

 

반응형 웹 (responsive web)이란?

하나의 웹사이트로 데스크탑 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지를 말합니다.

(왼쪽부터) 모바일 > 태블릿 > PC 순서로 보이는 하나의 웹사이트 예시

 

 

*네이버같은 경우는 모바일과 데스크탑PC 환경에서 보이는 사이트를 앱/웹으로 나눠서 배치했는데

이런 경우는 반응형 웹이 아닙니다.

네이버 모바일 앱 실행 화면

네이버 데스크탑PC/태블릿PC 웹사이트 실행화면 

 

 

* 반응형웹 모음 사이트 추천(아래)

http://rwdb.kr/

RWDB

 

 

---

 

 

viewport란? 화면 Display상의 표시 영역

* 이 표시 영역을 모바일에서 보느냐, 데스크탑PC에서 보느냐에 따라 해당 디바이스 최적의 화면을 보여주기 위해 

웹 사이트 설계 시 meta 태그에 viewport 설정이 반드시 필요합니다.

 

 

뷰포트 설정 유무에 따른 웹 결과 차이

* 아래 URL은 모바일로 접속해야 결과를 올바르게 확인할 수 있습니다.

뷰포트 O http://yuna1222.dothome.co.kr/project/view_o.html	뷰포트X http://yuna1222.dothome.co.kr/project/view_x.html

 

 

 

---

 

 

meta태그에 작성하는 viewport 사용법

* content 속성 값은 쉼표로 구분하여 다양하게 연결지을 수 있습니다.

 

 

1. viewport 너비 설정

px단위로 숫자를 작성하며 단위표시는 생략합니다. ex) 300

<meta name="viewport" content="width:너비값">

 

 

2. 디바이스 너비 기준 추천

<meta name="viewport" content="width=device-width">

 

 

3. 디바이스 높이 기준

<meta name="viewport" content="height=device-height">

 

 

4. 초기 화면 배율 설정 (100%) 추천

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

5. 최소 / 최대 화면 배율 설정

* 사용자가 극단적으로 화면을 축소하는 것을 방지합니다.

<meta name="viewport" content="minimum-scale=1.0">

<meta name="viewport" content="maximum-scale=1.0">

 

 

6. 사용자의 크기 조절 막기

<meta name="viewport" content="user-scaleble=no">

 

 

 

 

* 뷰포트 참고 URL

benfrain.com/understanding-the-viewport-meta-tag-and-css-viewport/

www.quirksmode.org/mobile/metaviewport/