본문으로 건너뛰기
실습하기

뷰포트(Viewport)

뷰포트(viewport)는 웹 페이지가 표시되는 화면 영역을 의미합니다.

뷰포트는 특히 모바일 환경과 반응형 웹디자인에 중요한 개념으로, 다양한 크기와 해상도의 디바이스에서 웹 페이지가 올바르게 보이도록 조절합니다.


<meta> 태그​

뷰포트는 meta 태그로 정의합니다. meta 태그는 HTML 문서의 메타데이터를 지정하는 태그입니다.

메타데이터는 페이지에 실제로 보이지는 않지만, 브라우저와 검색 엔진에 페이지에 대한 추가 정보를 제공합니다.

meta 태그는 name과 content 속성으로 메타데이터를 정의합니다.

1. name 속성:

  • 메타데이터의 유형을 정의합니다.

  • 예를 들어 뷰포트(viewport), 페이지의 설명(description), 키워드(keywords) 등을 지정할 수 있습니다.


2. content 속성:

  • 해당 메타데이터의 내용 또는 값을 지정합니다.

  • name 속성에서 정의한 유형에 따라 이 값이 해석됩니다.


meta 태그 사용 예시
<meta name="description" content="Welcome to CodeFriends" />

Viewport 설정​

viewport는 HTML <head> 태그 안에 <meta> 태그로 정의합니다.

viewport 설정 예시
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

위의 코드에서 viewport 메타 태그의 content는 다음을 의미합니다.

  • width=device-width: 기기의 화면 너비에 맞춰서 웹페이지의 너비를 설정

  • initial-scale=1.0: 웹페이지의 초기 확대 비율을 1로 설정 (100% 확대)

이렇게 설정하면 웹페이지가 모바일 기기의 화면 크기에 맞게 적절하게 보이게 됩니다.


Viewport의 중요성​

  1. 사용자 경험: 모바일 환경에서 화면을 확대/축소할 필요 없이, 웹페이지의 가독성을 높일 수 있습니다.

  2. 디자인: 웹페이지의 디자인을 다양한 기기에 최적화합니다.

  3. 검색 엔진 최적화: 모바일에 최적화된 웹페이지는 검색 엔진에 더 높은 점수를 받을 수 있습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!