lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

# 뷰포트(Viewport)

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

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

 

## `<meta>` 태그

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

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

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

### name 속성

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

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

 

### content 속성

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

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

 

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

 

## 뷰포트 설정하기

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

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

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

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

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

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

 

## 뷰포트는 왜 중요할까요?

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

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

뷰포트의 `initial-scale` 속성은 웹페이지가 로드될 때 초기 확대 비율을 설정합니다. `1.0`은 100% 확대를 의미하며, 기기의 너비와 동일한 크기로 화면을 표시합니다.

뷰포트(Viewport)

<meta> 태그

name 속성

content 속성

뷰포트 설정하기

뷰포트는 왜 중요할까요?

뷰포트(Viewport)에서 initial-scale=1.0은 무엇을 의미하나요?

`<meta>` 태그

뷰포트(Viewport)에서 `initial-scale=1.0`은 무엇을 의미하나요?