lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter2Title

webIntroHtmlChapter1Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!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>video 태그 예시</title>
  </head>

  <body>
    
    <video width="320" height="240" controls>
      <source
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4"
      />
    </video>
  </body>
</html>

# video 태그

video 태그는 웹 페이지에 비디오를 재생하는 영역을 만듭니다.

예를 들어 아래와 같이 웹페이지에 비디오를 넣을 수 있습니다.

```html title="video 태그 사용법"
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  사용하시는 브라우저가 비디오를 지원하지 않습니다.
</video>
```

- `width`와 `height`: 비디오 플레이어의 크기를 지정

- `controls`: 재생/일시정지 버튼 같은 비디오 컨트롤러를 표시

- `<source>`: 비디오 파일의 경로와 파일 타입 지정

<br />

## `<video>` 태그 사용 유의사항

1. `파일 포맷`: 웹에서 재생되는 비디오 파일 포맷이 모든 브라우저에서 동일하게 지원되지 않습니다. 따라서 여러 포맷의 동영상 파일을 준비해서 호환성을 높이는 것이 좋습니다.

2. `대체 텍스트`: video 태그 안에 작성한 텍스트는 비디오가 지원되지 않는 브라우저에서 보여질 내용을 정의합니다. 이곳에 동영상 설명을 기재하는 것이 좋습니다.

3. `데이터 사용`: 비디오 파일은 크기가 크기 때문에, 페이지 로딩 속도에 영향을 줄 수 있습니다. 따라서 꼭 필요한 곳에서만 사용하고 파일 크기를 가능한 작게 압축하는 것도 중요합니다.

video 태그는 웹 페이지에 비디오를 삽입하고 재생할 수 있게 해줍니다. 이 태그를 통해 사용자는 다양한 포맷의 동영상을 웹에서 쉽게 감상할 수 있습니다.

### video 태그에 대한 설명 중 빈칸을 채우세요.

video 태그

<video> 태그 사용 유의사항

video 태그에 대한 설명 중 빈칸을 채우세요.

`<video>` 태그 사용 유의사항