뷰포트
요즘처럼 스마트폰까지 고려한 반응형 웹을 제작할 때는 미디어 쿼리를 주로 사용합니다.
화면의 크기나 기기의 방향의 조건을 체크하여 사용하는 것이 뷰포트(viewport)입니다.
데스크탑에서의 1픽셀과 스마트폰의 1픽셀은 실제 크기가 다름에도
데스크탑 화면에서 사용하는 너비값을 스마트폰에도 그대로 적용해서 생기는 현상입니다.
스마트폰 화면을 웹 문서 너비에 맞추는 것이 아니라 문서의 콘텐츠를 스마트폰 화면의 너비에 맞춰 표시해야 합니다.
이때 사용하는 것이 <meta>태그 입니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
- width-deviec-width : 현재 기기의 px 크기에 맞추도록 브라우저에게 알려주고 웹 문서를 불러와 보여줍니다.
- initial-scale=1 : 문서를 불러와 화면에 표시할때 화면 너비에 맞추도록 기본 배율을 1로 지정합니다.