lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>VW, VH 예시</title>
  </head>
  <body>
    <div class="box-width">화면 너비의 50% (50vw)</div>
    <br />
    <div class="box-height">화면 높이의 25%( 25vh)</div>
  </body>
</html>

# Viewport

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

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

<br />

## meta 태그 사용 예시

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

<br />

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

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

- `name="viewport"`: 이 `meta` 태그가 뷰포트 설정과 관련

- **`content` 속성**:

  - `width=device-width`: 페이지의 폭을 현재 기기의 화면 폭에 맞추도록 지시합니다. 즉, 화면의 가로 크기가 디바이스의 실제 폭과 일치하도록 만듭니다.

  - `initial-scale=1.0`: 페이지가 처음 로딩될 때의 줌 레벨을 설정합니다. `1.0`은 100%로, 웹페이지를 화면의 폭에 맞게 정확히 표시한다는 의미입니다.

<br />

## vw와 vh

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

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

<br />

### vw (Viewport Width)

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

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

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

```css title="CSS"
.box {
  width: 50vw; /* 화면 너비의 50% */
}
```

<br />

### vh (Viewport Height)

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

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

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

```css title="CSS"
.box {
  height: 25vh; /* 화면 높이의 25% */
}
```