반응형
목차
1. 반응형 웹의 특징
-W3C에서 웹 표준으로 인정한 HTML과 CSS로 이루어져 있으므로, 모든 스마트 기기에서 접속 가능
-가로 모드에 맞추어 레이아웃 자동으로 변경
-사이트 유지, 관리 용이
2. 뷰포트(viewport)
뷰포트의 정의
'뷰포트'는 스마트폰 화면에서 실제 내용이 표시되는 영역을 말합니다.
PC 화면과 모바일 화면의 픽셀 표현 방법이 다르기 때문에 두 화면에서 내용이 다르게 보이는데, 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대/축소해 표시가 가능합니다. 웹킷(webkit) 기반인 모바일 브라우저들의 기본 뷰포트의 너비는 980px이고, 화면 크기를 고려하여 320px로 맞추어 웹사이트를 제작하더라도 글씨와 그림은 작아집니다. 이를 해결하기 위해 뷰포트를 지정해줍니다.
뷰포트의 지정
<meta name="viewport" content="[속성1=값], [속성2=값], ...">
ex)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
반응형