lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# Viewport

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

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

 

## meta 태그 사용 예시

```html title="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`는 뷰포트의 너비와 높이를 기준으로 하는 단위입니다.

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

 

### vw (Viewport Width)

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

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

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

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

 

### vh (Viewport Height)

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

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

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

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

vw 단위는 화면 너비를 기준으로 하기 때문에, 전체 화면 너비의 30%를 계산하면 됩니다. 1200px의 30%는 360px입니다.

### 다음 중 빈칸에 들어갈 가장 적절한 것은 무엇일까요?