lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Viewport 예시</title>

    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
  </head>

  <body>
    <h1>반응형 웹사이트 설정</h1>
    <h3>HTML head 태그를 확인해 보세요</h3>
    <p>다양한 기기에서도 적절하게 보이도록 Viewport 설정</p>
  </body>
</html>

# 뷰포트(Viewport)

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

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

<br />

## `<meta>` 태그

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

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

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

**1. name 속성**:

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

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

<br />

**2. content 속성**:

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

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

<br />

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

<br />

## Viewport 설정

`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% 확대)

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

<br />

## Viewport의 중요성

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

2. 디자인: 웹페이지의 디자인을 다양한 기기에 최적화합니다.

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

뷰포트(Viewport)

<meta> 태그

Viewport 설정

Viewport의 중요성

`<meta>` 태그