html : 반응형웹 / 뷰포트(viewport)란? 메타 뷰포트태그 작성법
반응형 웹 (responsive web)이란?
하나의 웹사이트로 데스크탑 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지를 말합니다.
*네이버같은 경우는 모바일과 데스크탑PC 환경에서 보이는 사이트를 앱/웹으로 나눠서 배치했는데
이런 경우는 반응형 웹이 아닙니다.
* 반응형웹 모음 사이트 추천(아래)
RWDB
RWDB Responsive Web Design dB Web awards, 우수 하이브리드웹·반응형웹 모음 사이트
rwdb.kr
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/
Comments, Trackbacks