뷰포트란 무엇인가?
뷰포트(Viewport)는 웹 페이지가 사용자에게 표시되는 화면 영역을 의미합니다. 특히 모바일 기기에서 웹 페이지가 의도한 대로 깔끔하게 렌더링되도록 하려면 뷰포트 설정이 필수적입니다.
뷰포트 설정 방법
뷰포트는 HTML 문서의 <head> 영역 안에 <meta> 태그를 추가하여 설정할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
주요 속성 설명
- name="viewport": 브라우저에게 웹 페이지의 크기와 배율을 제어하도록 지시합니다.
- width=device-width: 화면 너비를 기기의 실제 화면 폭에 맞춰 설정합니다.
- initial-scale=1.0: 페이지가 처음 로드될 때의 초기 확대·축소 배율을 100%로 지정합니다.
왜 뷰포트 설정이 중요한가?
뷰포트 메타 태그가 없으면 모바일 브라우저는 데스크톱용 화면 크기를 기준으로 페이지를 렌더링한 뒤 축소하여 표시하기 때문에 글자가 작고 가독성이 떨어질 수 있습니다. 반응형 웹 디자인을 구현할 때 이 설정은 기본 중의 기본이므로, 모든 웹 페이지에 반드시 포함하는 것이 좋습니다.