Viewport

뷰포트(Viewport)는 사용자가 보는 웹페이지 화면 영역을 의미합니다.

Viewport는 HTML <meta> 태그를 사용해 HTML head 요소 내에 설정합니다.

meta 태그 사용 예시

HTML head 태그 내에 meta 태그 추가
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

예시로 소개된 meta 태그는 웹 페이지를 모바일 및 다양한 화면 크기의 디바이스에서 어떻게 표시할지 웹 브라우저에 알려줍니다.

코드는 웹페이지의 너비(width)를 기기의 폭(device-width)에 맞추고, 확대/축소 줌 비율(initial-scale) 초기값을 1로 설정하라는 의미입니다.

name="viewport": 이 meta 태그가 뷰포트 설정과 관련
content 속성:
- width=device-width: 페이지의 폭을 현재 기기의 화면 폭에 맞추도록 지시합니다. 즉, 화면의 가로 크기가 디바이스의 실제 폭과 일치하도록 만듭니다.
- initial-scale=1.0: 페이지가 처음 로딩될 때의 줌 레벨을 설정합니다. 1.0은 100%로, 웹페이지를 화면의 폭에 맞게 정확히 표시한다는 의미입니다.

vw와 vh는 뷰포트의 너비와 높이를 기준으로 하는 단위입니다.

vw와 vh 단위를 사용하면 화면 크기에 따라 요소의 크기를 유연하게 조절할 수 있습니다.

1vw는 뷰포트(화면) 너비의 1%를 의미합니다.

화면의 너비를 100개의 같은 크기의 조각으로 나누었을 때, 조각의 하나의 너비가 1vw입니다.

화면의 전체 너비가 1000px일 때, 요소의 너비를 50vw로 설정하면, 그 요소의 너비는 500px이 됩니다.

CSS
.box {
  width: 50vw; /* 화면 너비의 50% */
}

1vh는 뷰포트(화면) 높이의 1%를 의미합니다.

화면의 높이를 100개의 같은 크기의 조각으로 나누었을 때, 조각 하나의 높이가 1vh에 해당됩니다.

화면의 전체 높이가 800px일 때, 요소의 높이를 25vh로 설정하면, 그 요소의 높이는 200px이 됩니다.

CSS
.box {
  height: 25vh; /* 화면 높이의 25% */
}

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