🌿 모바일 감지(viewport)

뷰포트(viewport)는 웹 페이지가 사용자에게 어떻게 표시되는지를 결정하는 영역을 말합니다. 웹 디자인에서 뷰포트는 특히 반응형 웹 디자인을 구현할 때 중요한 개념입니다. 이 개념을 이해하면 다양한 장치에서 웹 페이지가 어떻게 보일지 더 잘 조정할 수 있습니다.

<meta> 란?

<meta> 태그는 HTML 문서의 메타데이터를 정의하는 데 사용됩니다. 메타데이터는 문서에 대한 정보를 제공하며, 검색 엔진, 브라우저, 웹 크롤러 등에 유용한 정보를 전달합니다. <meta> 태그는 <head> 요소 안에 위치하며, 여러 가지 속성으로 다양한 정보를 설정할 수 있습니다. 이번 시간에는 아래 속성들을 이런 것들이 있다는 것 정도만 알고 넘어가도록 해요.

뷰포트(Viewport)란?

뷰포트는 웹 브라우저에서 웹 페이지의 표시 영역을 의미합니다. 사용자가 웹 페이지를 볼 때 실제로 브라우저 창에서 보이는 부분이 바로 뷰포트입니다.

데스크톱에서는 브라우저 창의 크기, 모바일에서는 화면의 크기와 해상도가 뷰포트의 크기를 결정합니다.

메타 태그 viewport

HTML 문서의 <head> 태그 안에 포함된 <meta name="viewport" content="..."> 태그를 사용하여 뷰포트의 크기와 스케일을 설정할 수 있습니다.

예를 들어, <meta name="viewport" content="width=device-width, initial-scale=1.0">는 뷰포트의 너비를 장치의 너비에 맞추고, 페이지의 초기 확대 비율을 1로 설정합니다. 이는 대부분의 모바일 기기에서 웹 페이지가 적절하게 표시되도록 합니다.

뷰포트 설정 방법

width=device-width: 이 설정은 뷰포트의 너비를 장치의 화면 너비에 맞추도록 합니다. 즉, 웹 페이지가 장치의 너비에 맞게 자동으로 조정됩니다.

initial-scale=1.0: 페이지가 로드될 때의 초기 확대 비율을 설정합니다. 1.0은 확대되지 않음을 의미합니다.

뷰포트의 중요성