[HTML5] 반응형 웹

1. 모바일 기기를 위한 기본 다지기, 뷰포트

뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.

 

<meta name="viewport" content="<속성1=값>, <속성2=값2>, ... ">

content 안에서 사용하는 뷰포트 속성은 다음과 같습니다.

속성	설명	사용 가능한 값	기본값
width	뷰포트 너비	device-width 또는 크기	브라우저 기본값
height	뷰포트 높이	device-height 또는 크기	브라우저 기본값
user-scalable	확대/축소 가능여부	yes or no	yes
initial-scalable	초기 확대/축소 값	1-10	1
minimum-scale	최소 확대/축소 값	0-10	0.25
maximum-scale	최대 확대/축소 값	0-10	1.6

 

2. 크롬의 디바이스 모드 활용하기

크롬에서 ctrl + shift + I 키를 눌러 개발자 도구 창을 엽니다.

개발자 도구 창의 맨 왼쪽 윗부분에 디바이스 모드 아이콘을 클릭합니다.