반응형을 지원사격하는 미디어쿼리, meta태그 (feat. 뷰포트)

요즘은 하나의 웹 사이트가 기기 화면 특성(PC,  폰, 태블릿)에 맞춰 화면의 크기가 자동으로 변하게 됩니다. 이는 반응형 웹으로 구현이 되어있기 때문입니다

이는 CSS3부터 지원되는 미디어 쿼리 그리고 HTML5의 meta 태그가 있기에 가능합니다.

미디어 쿼리는 기기타입, 화면 크기에 맞춰 다른 스타일 시트를 적용시킵니다. (꾸미기를 달리 할수 있다는 얘기 , 관련 문서 링크 : www.w3schools.com/css/css3_mediaqueries.asp / www.w3schools.com/css/css_rwd_mediaqueries.asp)

HTML5 <meta> tag는 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있습니다. (랜더링 영역과 뷰포트란, 1024 * 768 사이즈의 그림을 320* 568 핸드폰에서 본다면 랜더링 영역이 1024 * 768이고, 뷰포트는 320 * 568 입니다. 이는 랜더링 영역은 큰데 사용자 영역인 뷰포트는 작아서 모두 보려면 스크롤이 필요합니다. 이러한 문제를 해결하기 위해 뷰포트에 맞춰서 사이즈를 재조정하는 것입니다. 관련 문서 링크 : www.w3schools.com/css/css_rwd_viewport.asp )

아래는 실제 meta태그 사용 예입니다.

width=device-width : 페이지의 너비를 기기의 화면너비로 설정, 즉 랜더링 영역을 기기의 뷰포트 크기와 같게 만드는 것

initial-scale=1.0 : 첫 페이지 로딩시 화면이 확대나 축소가 되지 않은 원래 크기를 사용. (값 범위 0~ 10 , 0.5 입력시, 50% 축소됨.)