Viewport

뷰포트(Viewport)는 사용자가 보는 웹페이지 화면 영역을 의미하며, <meta> 태그를 사용해 HTML head 요소 내에 설정합니다.

HTML 수업에서 배운 뷰포트를 간단히 복습해 보겠습니다.

meta 태그 사용 예시

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

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

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이 됩니다.

vw 단위 사용 예시
.box {
  width: 50vw; /* 화면 너비의 50% */
}

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

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

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

vh 단위 사용 예시
.box {
  height: 25vh; /* 화면 높이의 25% */
}

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