뷰포트(viewport)란? 반응형 웹(responsive web)에서 사용하기

 

 

- 반응형 웹 (responsive web) 이란?

한개의 웹사이트로 데스크탑 pc와 태블릿 pc, 모바일 스마트폰등 모든 디스플레이의 종류에 따라서 화면크기가 자동으로 변하게 만든 웹사이트를 말함.  모바일과 pc버전 각각의 다른 웹사이트를 만들수도 있지만, 한개의 웹사이트로 모든 기기에 적용이 되게 만든웹이 반응형웹이라고 생각하면 이해가 쉬움.

반응형웹(responsive web)을 만들경우, 뷰포트(viewport)라는 것을 알아야함.

 

- 뷰포트 (viewport) 란?

웹페이지를 사용자가 보는 영역을 말함. PC에서 보던 웹페이지 브라우저의 크기를 줄이면 웹페이지 내용이 일부 가려지거나 스크롤을 해야하는 경우가 있음. 여기서도 브라우저 영역에서 보이는 부분이 뷰포트임. 브라우저의 크기를 줄여도 웹페이지 내용이 사용자들에게 잘보이도록 브라우저의 크기마다 뷰포트의 크기를 지정해서 바꿈.

모바일 휴대폰과 태블릿, 데스크탑PC 등의 기기가 다양해서 뷰포트의 크기도 많음.

 

- width

뷰포트 너비

device-weight

 

- height

뷰포트 높이

device-height

 

- user-scalable

확대/축소 가능여부 

yes(기본값) / no

 

- initial-scale

초기 확대/축소 값

 1(기본값) ~ 10

 

- minimum-sacle

최소 확대/축소 값 , 줄일수 있는 최소 크기

(기본값 0.25)      0~10   

 

- maximum-scale

최대 확대/축소 값, 늘릴수있는 최대크기

(기본값 1.6)     0~10    

 

 

<meta name="viewport"

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

 

 

 

 

반응형웹과 PC용/모바일용 각각의 웹으로 만들경우는 각 장단점이 있으니 만드는이에 선택에 따라 만드시오.