미디어 컨테이너 포맷 (파일 타입) - 웹 미디어 기술

미디어 컨테이너 포맷 (파일 타입)
===================

오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. 이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.

WebRTC 는 컨테이너를 사용하지 않습니다. 대신에 각 트랙을 나타내는`MediaStreamTrack` 객체를 통해 인코딩 된 오디오/비디오 트랙을 한 곳에서 다른 곳으로 직접 스트리밍합니다. WebRTC에서 일반적으로 사용하는 코덱이나 브라우저 호환성을 알아보려면 Codecs used by WebRTC (en-US) 문서를 참고하세요.

일반적인 컨테이너 포맷
------------

미디어 컨테이너 포맷에는 여러 종류가 있지만 여러분들은 보통 아래 나열된 목록의 포맷을 주로 만나게 될 겁니다. 일부는 오디오만 지원하는 것도 있고 오디오와 비디오 모두를 지원하는 포맷도 있죠. MIME 타입과 확장자도 나열되어 있습니다. 웹상에서 가장 많이 쓰이는 컨테이너 포맷은 아마도 MPEG-4 (MP4), Quicktime Movie (MOV), Wavefile Audio File Format (WAV)일겁니다. 또한 MP3, Ogg, WebM, AVI 등의 포맷도 볼 수 있지요. 하지만 모든 브라우저가 이 다양한 포맷들을 지원하는 것은 아닙니다. 사용하기 편하고 다른 조합과의 구분을 위해 특정한 컨테이너와 코덱의 조합은 독자적인 MIME type과 확장자를 가지기도 합니다. 예를들어 Opus 오디오 트랙만을 가진 Ogg파일은 가끔 Opus 파일이라 불리며 `.opus` 확장자를 가지는 경우도 있습니다. 하지만 실제로는 단순한 Ogg 파일일 뿐이죠.

반대 케이스로 특정 코덱이 특정 컨테이너에 담긴 형태가 매우 보편적일 경우 독자적인 형식으로 취급하는 경우도 있습니다. MP3 오디오 파일이 대표적인 경우로, MPEG-1 컨테이너에 MPEG-1 Audio Layer III 코덱으로 인코딩 된 오디오 트랙 하나만이 담긴 케이스입니다. 컨테이너는 일반적인 MPEG지만 이 형식은 `audio/mp3` MIME 타입과 `.mp3` 확장자를 사용합니다.

컨테이너 포맷(파일 타입) 인덱스
------------------

특정 컨테이너 포맷에 대해 더 알아보려면 아래 목록에서 찾아 클릭하세요. 컨테이너 사용법과 지원하는 코덱, 지원하는 브라우저 등을 알 수 있습니다.

* 일반적인 컨테이너 포맷
* 컨테이너 포맷(파일 타입) 인덱스
    + 3GP
    + ADTS
    + FLAC
    + MPEG/MPEG-2
    + MPEG-4 (MP4)
    + Ogg
    + QuickTime
    + WAVE (WAV)
    + WebM
* 알맞은 컨테이너 선택하기
    + 가이드라인
    + 컨테이너 선택 가이드
        - 오디오 전용 파일
        - 비디오 파일
* 다양한 컨테이너간 호환성 극대화
* 명세서
* 브라우저 호환성
* 더 보기
### 3GP

**3GP** 또는 **3GPP** 컨테이너는 셀룰러 네트워크를 통해 전송하고 모바일 장치에서 사용하기 위해 고안되었습니다. 원래 3G 모바일 폰을 위해 디자인하였지만 현대의 모바일 폰과 네트워크에서도 사용하고 있습니다. 하지만 네트워크 처리량이 늘어나면서 3GP 포맷의 필요성은 점차 줄어들고 있죠. 그러나 여전히 느린 네트워크나 저사양 폰에서는 유용한 컨테이너이기도 합니다.

이 컨테이너는 ISO Base Media File Format과 MPEG-4 기반이지만 저대역폭 케이스에 최적화되어 있습니다.

| Audio | Video |
| --- | --- |
| `audio/3gpp` | `video/3gpp` |
| `audio/3gpp2` | `video/3gpp2` |
| `audio/3gp2` | `video/3gp2` |

위는 3GP 컨테이너의 기본 MIME 타입입니다; 사용하는 코덱에 따라 다른 타입을 사용할 수도 있습니다; 또한 MIME 타입 문자열에 `codecs` 파라미터를 추가하여 어떠한 오디오/비디오 코덱을 사용했는지 표시할 수 있으며 profile, level, 코덱 설정 값도 추가하여 전달할 수 있습니다.

3GP가 지원하는 비디오 코덱.| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  | Yes1,2 |  |
| H.263 |  |  | Yes1 |  |
| MPEG-4 Part 2 (MP4v-es) |  |  | Yes1 |  |
| VP8 |  |  | Yes1 |  |

[1] FIrefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

3GP가 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AMR-NB |  |  | Yes1 |  |
| AMR-WB |  |  | Yes1 |  |
| AMR-WB+ |  |  | Yes1 |  |
| AAC-LC |  |  | Yes1,2 |  |
| HE-AAC v1 |  |  | Yes1,2 |  |
| HE-AAC v2 |  |  | Yes1,2 |  |
| MP3 |  |  | Yes1 |  |

[1] FIrefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

[2] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

### ADTS

**Audio Data Transport Stream** (**ADTS**) 는 인터넷 라디오 같은 오디오 스트림을 사용하기 위해 MPEG-4 Part 3로 규정된 컨테이너 포맷입니다. 근본적으로 ACC 오디오 데이터에서 스트림만 깐 것과 거의 동일하며 최소한의 헤더만 담긴 ADTS 프레임으로 구성되어 있습니다.

| Audio |
| --- |
| `audio/aac`[1] |
| `audio/mpeg`[1] |

[1] The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the `audio/aac` MIME type should be used. If the audio frames are in MPEG-1/MPEG-2 Audio Layer I, II, or III format, the MIME type should be `audio/mpeg`.

ADTS가 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | Yes1 |  |
| MP3 |  |  | Yes |  |

[1] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

### FLAC

**Free Lossless Audio Codec** (**FLAC**)은 무손실 오디오 코덱입니다; 이 코덱을 담을 수 있는 컨테이너 역시 FLAC이라 부릅니다. 이 포맷은 어느 특허에도 묶여있지 않아 자유롭게 사용할 수 있습니다. FLAC 파일은 FLAC 오디오 데이터만 담을 수 있습니다.

| Audio |
| --- |
| `audio/flac` |

FLAC이 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| FLAC |  |  | Yes |  |

### MPEG/MPEG-2

**MPEG-1**과 **MPEG-2**은 근본적으로 동일합니다. the Moving Picture Experts Group (MPEG)에서 만들었으며 DVD 등의 물리적 매체에서 널리 쓰이고 있습니다.

인터넷에서 아마 가장 많이 사용되는 MPEG 파일 포맷은 Layer\_III/MP3 일 겁니다; MP3 파일은 전 세계의 디지털 오디오 장치에서 널리 재생되고 있습니다. 반대로 MPEG-1, MPEG-2는 웹에서 별로 사용하고 있지 않죠.

MPEG-1과 MPEG-2 간의 차이점은 컨테이너 포맷이 아니라 미디어 데이터 포맷에 있습니다. MPEG-1은 1992년 소개되었으며; MPEG-2는 1996년에 소개되었습니다.

| Audio | Video |
| --- | --- |
| `audio/mpeg` | `video/mpeg` |

MPEG-1과 MPEG-2가 지원하는 비디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| MPEG-1 Part 2 |  |  | No |  |
| MPEG-2 Part 2 |  |  | No |  |

MPEG-1과 MPEG-2가 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| MPEG-1 Audio Layer I |  |  | No |  |
| MPEG-1 Audio Layer II |  |  | No |  |
| MPEG-1 Audio Layer III (MP3) |  |  | Yes |  |

### MPEG-4 (MP4)

**MPEG-4** (**MP4**) 는 최신 MPEG 파일 포맷입니다. 파트 1과 14 스펙에서 정의된 두 가지 버전의 포맷이 있습니다. MP4는 오늘날 유명한 컨테이너 포맷으로 많이 쓰이는 코덱을 지원하며 널리 사용되고 있습니다.

최초의 MPEG-4 Part 1 포맷은 1999년 발표되었습니다; Part 14에서 정의된 버전 2 포맷은 2003년 추가되었습니다. MP4 파일 포맷은 Apple이 개발한 QuickTime file format에서 파생된 ISO base media file format에서 다시 파생되었습니다.

MPEG-4 미디어 타입을 표기할 때 (`audio/mp4` or `video/mp4`), MIME 타입에 `codecs` 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

| Audio | Video |
| --- | --- |
| `audio/mp4` | `video/mp4` |

위는 MPEG-4 미디어 컨테이너의 기본 타입입니다; 어떤 코덱을 쓰느냐에 따라 MIME 타입도 달라질 수 있습니다. 또한 MIME 타입에 `codecs` 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

MPEG-4가 지원하는 비디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  | Yes1 |  |
| AV1 |  |  | Yes1 |  |
| H.263 |  |  | No |  |
| MPEG-4 Part 2 Visual |  |  | No |  |
| VP9 |  |  | Yes |  |

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

[2] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference `media.av1.enabled` to `true`.

MPEG-4가 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | Yes1 |  |
| FLAC |  |  | Yes |  |
| MPEG-1 Audio Layer III (MP3) |  |  | Yes |  |
| Opus |  |  | Yes |  |

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

### Ogg

**Ogg는** Xiph.org Foundation이 운영하는 자유 오픈 컨테이너 포맷입니다. Theora, Vorbis, and Opus등의 Ogg 프레임워크는 특허에 얽매이지 않게 정의되었습니다. 재단 웹사이트에서 Xiph.org documents about the Ogg format를 확인할 수 있습니다.

| Audio | Video |
| --- | --- |
| `audio/ogg` | `video/ogg` |

MIME 타입에 `codecs` 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 트랙의 미디어 포맷에 대한 추가 정보도 기입할 수 있습니다.

Ogg가 지원하는 비디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| Theora |  |  | Yes |  |
| VP8 |  |  | Yes |  |
| VP9 |  |  | Yes |  |

Ogg가 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| FLAC |  |  | Yes |  |
| Opus |  |  | Yes |  |
| Vorbis |  |  | Yes |  |

### QuickTime

**QuickTime** 파일 포맷(**QTFF**, **QT**, **MOV**) 는 동일한 이름의 미디어 프레임워크에서 사용하기 위해 애플이 개발했습니다. 확장자 `.mov`는 최초 영화에서 쓰이기 위해 개발되었다는 의미에서 지어졌으며 보통 "QuickTime movie" 포맷이라 불립니다. QTFF가 MPEG-4 파일 포맷에 기반하였지만 두 포맷에는 분명한 차이점이 있으며 상호 호환되지 않습니다.

QuickTime 파일은 오디오, 비디오 텍스트 트랙 등 시간축을 가지는 다수의 데이터 타입을 지원합니다. QuickTime 파일은 원래 macOS에서 사용하기 위해 개발되었지만 수 년이 지나면서 윈도우즈 환경에서는 QuickTime for Windows를 통해 사용할 수 있게 되었습니다. 그러나 2016년 초부터 애플은 더 이상 QuickTime for Windows를 유지 보수하지 않으며 알려진 보안 취약점으로 인해 *사용해선 안됩니다*. 하지만 Windows Media Player 가 현재 QuickTime version 2.0 및 이전 버전을 지원하며; 이후 버전의 QuickTime은 서드파티 플러그인을 통해 지원합니다.

Mac OS에서 QuickTime 프레임워크는 QuickTime 포맷의 영상 파일 및 코덱 뿐만아니라 널리 쓰이는 오디오/비디오 코덱 상당 수를 지원합니다. 정지 화상 이미지 포맷도 포함해서요. (QuickTime 플러그인이 설치되었거나 QuickTime과 바로 연동된 브라우저를 포함 한)맥 애플리케이션은 QuickTime을 통해서 ACC, AIFF, MP#, PCM, Qualcomm PureVoice 등의 오디오 포맷과 AVI, DV, Pixlet, ProRes, FLAC, Cinepak, 3GP, H.261 through H.265, MJPEG, MPEG-1, MPEG-4 Part 2, Sorenson 등 수 많은 비디오 포맷을 읽고 쓸 수 있습니다.

추가적인 코덱을 지원하기 위해 QuickTime에 다수의 서드파티 컴포넌트를 설치할 수도 있습니다.

QuickTime은 처음부터 지금까지 근본적으로 애플 디바이스에서 사용하기 위해 만들어졌기 때문에 인터넷 환경에서 널리 쓰이고 있지는 않습니다. 애플 스스로도 현재는 MP4 비디오를 사용하고 있구요. 게다가 QuickTime 프레임워크마저 deprecated되면서 macOS 10.15 Catalina부터는 사용이 불가능해졌습니다.

| Video |
| --- |
| `video/quicktime` |

`video/quicktime` 은 QuickTime 미디어 컨테이너의 기본 MIME 타입입니다. QuickTime (Mac OS의 미디어 프레임워크)이 다양한 컨테이너와 코덱을 지원하므로 다른 많은 MIME 타입 역시 지원합니다.

MIME 타입에 `codecs` 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

QuickTime이 지원하는 비디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  | No |  |
| Cinepak |  |  | No |  |
| Component Video |  |  | No |  |
| DV |  |  | No |  |
| H.261 |  |  | No |  |
| H.263 |  |  | No |  |
| MPEG-2 |  |  | No |  |
| MPEG-4 Part 2 Visual |  |  | No |  |
| Motion JPEG |  |  | No |  |
| Sorenson Video 2 |  |  | No |  |
| Sorenson Video 3 |  |  | No |  |

QuickTime이 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | No |  |
| ALaw 2:1 |  |  | No |  |
| Apple Lossless (ALAC) |  |  | No |  |
| HE-AAC |  |  | No |  |
| MPEG-1 Audio Layer III (MP3) |  |  | No |  |
| Microsoft ADPCM |  |  | No |  |
| µ-Law 2:1 (u-Law) |  |  | No |  |

### WAVE (WAV)

Waveform Audio File Format (WAVE)는 보통 줄여서 WAV라 불리며 `.wav` 확장자를 갖습니다. 오디오 비트스트림 데이터를 담기 위해 Microsoft와 IBM이 개발했습니다. 대부분의 WAV 파일은 linear PCM 포맷의 오디오 데이터를 담고 있습니다.

이 파일 포맷은 Resource Interchange File Format (RIFF)에서 파생되었으며 애플의 AIFF 같은 다른 파생 형식와 유사합니다..

WAVE 포맷은 1991년 처음 발표되었습니다.

| Audio |
| --- |
| `audio/wave` |
| `audio/wav` |
| `audio/x-wav` |
| `audio/x-pn-wav` |

WAVE가 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| ADPCM (Adaptive Differential Pulse Code Modulation) |  |  | No |  |
| GSM 06.10 |  |  | No |  |
| LPCM (Linear Pulse Code Modulation) |  |  | Yes |  |
| MPEG-1 Audio Layer III (MP3) |  |  | No |  |
| µ-Law (u-Law) |  |  | No |  |

### WebM

**WebM** (Web Media)는 Matroska에 기반하여 현대 웹 환경에서 사용하기 위해 디자인되었습니다. 특정 제품들은 WebM 컨테이너에 다른 코덱을 사용하기도 하지만 기본적으로는 무료 오픈 코덱을 사용하여 완전한 자유-오픈 기술을 지향하고 있습니다.

WebM은 2010년 처음 소개되었습니다..

| Audio | Video |
| --- | --- |
| `audio/webm` | `video/webm` |

WebM이 지원하는 비디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AV1 |  |  | Yes1 |  |
| AVC (H.264) |  |  | Yes2 |  |
| VP8 |  |  | Yes |  |
| VP:9 |  |  | Yes |  |

[1] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference `media.av1.enabled` to `true`.

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

WebM이 지원하는 오디오 코덱| Codec | Browser support |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| Opus |  |  | Yes |  |
| Vorbis |  |  | Yes |  |

알맞은 컨테이너 선택하기
-------------

여러분의 미디어 데이터에 알맞은 컨테이너를 선택하고 사용하기 위해서 몇 가지 고려해야 할 점들이 있습니다. 상대적으로 어떤 점이 더 중요한지는 요구사항이나 라이선스, 호환성, 타겟 고객 등에 따라 달라질 수 있습니다.

### 가이드라인

최선책 역시 미디어 데이터로 무엇을 하느냐에 달렸습니다. 미디어를 녹화/편집하는 것은 재생과 전혀 다른 이야기입니다. 최소한 노이즈 축적이라도 방지하려고 무손실 압축을 사용하면 매번 재 압축할 때 마다 압축 데이터가 누적되므로 미디어 데이터를 처리할때는 압축하지 않은 데이터를 사용하는게 퍼포먼스가 좋습니다.

* 저사양 단말 또는 저속 네트워크를 사용하는 고객을 대상으로 하고 있다면 3GP 컨테이너와 적절한 압축 코덱을 고려해 볼 수 있습니다.
* 인코딩시 필수 사항이 있다면 컨테이너 선택 시 적절한 코덱을 지원하는 지 확인해야 합니다.
* 미디어가 상용이 아니며 오픈 포맷일 경우 FLAC(오디오), WebM(비디오) 등의 오픈 컨테이너 포맷을 고려해 보세요.
* 어떠한 이유로 미디어를 한가지 포맷으로 제공해야 한다면 많은 디바이스와 브라우저에 널리 쓰여지는 MP3(오디오), MP4(비디오, 오디오)등의 포맷을 선택하세요.
* 미디어가 오디오만 있다면 오디오 전용 컨테이너를 사용하는게 합당합니다. 현재는 특허가 모두 만료되어 널리 쓰여지는 MP3가 좋은 선택입니다. WAVE도 좋지만 비압축이므로 대용량 오디오 샘플의 경우에는 사용을 주의하세요. 모든 타겟 브라우저가 지원한다면 무손실 압축을 지원하는 FLAC이 최선입니다.

슬픈 일이지만 주요 무손실 압축 포맷 (FLAC, ALAC) 모두 폭넓게 지원되고 있지 않습니다. 둘 중에 FLAC이 그나마 낫지만 macOS에서는 추가적인 소프트웨어 설치 없이는 지원을 안합니다. iOS에서는 아예 불가능하구요. 무손실 오디오를 플랫폼에 무관하게 제공하려면 FLAC과 ALAC 둘 다 지원해야 합니다.

### 컨테이너 선택 가이드

아래의 테이블은 다양한 시나리오에서 사용할 컨테이너에 대한 권고안입니다. 이는 추천일 뿐이며 컨테이너 포맷을 선택할 때에는 여러분의 제품이나 기관의 상황을 고려하여 선택하세요.

#### 오디오 전용 파일

| 만약에... | 추천 컨테이너 포맷 |
| --- | --- |
| 일반 재생 목적으로 압축 파일 사용 | MP3 (MPEG-1 Audio Layer III) |
| 무손실 압축 파일 | FLAC with ALAC fallback |
| 무압축 파일 | WAV |

이제는 MP3 특허가 모두 만료되었으므로 오디오 파일 선택은 별로 어려운 문제가 아닙니다. 폭넓게 쓰이는 MP3를 사용하면서 특허료를 내야 하느냐에 대한 고민을 할 필요가 없죠.

#### 비디오 파일

| 만약에... | 추천 컨테이너 포맷 |
| --- | --- |
| 가능한 오픈 포맷을 사용한 일반 비디오 | WebM (MP4 호환 추가) |
| 일반 비디오 | MP4 (WebM, Ogg 호환 추가) |
| 저속 네트워크상의 고효율 압축 | 3GP (MP4 호환 추가) |
| 구형 단말/브라우저 지원 | QuickTime (AVI, MPEG-2 호환 추가) |

몇 가지 가정 하의 권고입니다. 최종 결정 전에 여러가지를 따져보아야 하며 인코딩 해야 할 미디어가 많은 경우 특히나 심사숙고해야 합니다.

다양한 컨테이너간 호환성 극대화
-----------------

호환성을 높이려면 한가지 버전 이상의 미디어 파일 제공을 고려해 볼 수 있습니다. `<audio>` (en-US), `<video>` 엘리먼트 아래에 `<source>` (en-US) 엘리먼트를 추가하여 구현할 수 있죠. 예를 들어 Ogg, WebM 비디오를 우선하되 호환성을 위해 MP4 포맷을 추가할 수 있습니다. 레트로하게 QuickTime이나 AVI 호환을 추가하는 것도 좋은 방법입니다.

구현하려면 우선 `src` 어트리뷰트 없이 `<video>` (또는 `<audio>`) 엘리먼트를 생성합니다. 그 후 `<video>` 엘리먼트 아래에 `<source>` (en-US) 엘리먼트를 제공하려는 미디어 포맷별로 추가합니다. 이 방식은 대역폭 상황에 따라 소스를 선택하는 방식으로도 사용할 수 있지만 여기서는 포맷 옵션을 제공하기로 하죠.

아래 예제에서는 두 포맷 타입의 비디오를 제공합니다: WebM and MP4.

시도해보기
-----

첫번째 비디오는 WebM 포맷입니다(`type` 어트리뷰트가 `video/webm`). user agent는 재생이 불가능 한 경우 `type` 이 `video/mp4` 인 다음 옵션으로넘어갑니다. 둘 다 재생이 불가능 할 경우 "This browser does not support the HTML5 video element." 문구가 표시됩니다.

명세서
---

| 명세서 | 설명 |
| --- | --- |
| ETSI 3GPP | 컨테이너 포멧을 정의 |
| ISO/IEC 14496-3 (MPEG-4 Part 3 오디오) | ADTS를 포함한 MP4 오디오를 정의 |
| FLAC Format | FLAC 포멧 명세서 |
| ISO/IEC 11172-1 (MPEG-1 Part 1 시스템) | MPEG-1 컨테이너 포멧을 정의 |
| ISO/IEC 13818-1 (MPEG-2 Part 1 시스템) | MPEG-2 컨테이너 포멧을 정의 |
| ISO/IEC 14496-14 (MPEG-4 Part 14: MP4 파일 포멧) | MPEG-4 (MP4) version 2 컨테이너 포멧을 정의 |
| ISO/IEC 14496-1 (MPEG-4 Part 1 시스템) | original MPEG-4 (MP4) 컨테이너 포멧을 정의 |
| RFC 3533 | Ogg 컨테이너 포멧 |
| RFC 5334 | Ogg 미디어 형식과 파일 확장자 |
| QuickTime File Format Specification | QuickTime movie (MOV) 포멧 |
| Multimedia Programming Interface and Data Specifications 1.0 | 공식 WAVE 사양에 가장 가까운 것 |
| Resource Interchange File Format (WAV가 씀) | RIFF 포멧을 정의. WAVE 파일은 RIFF의 형식 |
| WebM Container Guidelines | WebM을 위한 Matroska 적용 안내서 |
| Matroska Specifications | WebM을 기반으로 하는 Matroska 컨테이너 포멧에 대한 명세서 |
| WebM Byte Stream Format | 미디어 소스 확장자 (en-US)와 함께 사용하기 위한 WebM 바이트 스트림 포멧 |

브라우저 호환성
--------

| 컨테이너 형식 이름 | 오디오 | 비디오 |
| --- | --- | --- |
| MIME 형식 | 확장자 | 브라우저 지원 | MIME 형식 | 확장자 | 브라우저 지원 |
| 3GP | `audio/3gpp` | `.3gp` | Firefox | `video/3gpp` | `.3gp` | Firefox |
| ADTS (Audio Data Transport Stream) | `audio/aac` | `.aac` | Firefox | — | — | — |
| FLAC | `audio/flac` | `.flac` | Firefox | — | — | — |
| MPEG-1 / MPEG-2 (MPG or MPEG) | `audio/mpeg` | `.mpg``.mpeg` | Firefox | `video/mpeg` | `.mpg``.mpeg` | Firefox |
| `audio/mp3` | `.mp3` | Firefox |
| MPEG-4 (MP4) | `audio/mp4` | `.mp4``.m4a` | Firefox | `video/mp4` | `.mp4``.m4v``.m4p` | Firefox |
| Ogg | `audio/ogg` | `.oga``.ogg` | Firefox | `video/ogg` | `.ogv``.ogg` | Firefox |
| QuickTime Movie (MOV) | — | — | — | `video/quicktime` | `.mov` | Safari |
| WAV (Waveform Audiofile) | `audio/wav` | `.wav` | Firefox | — | — | — |
| WebM | `audio/webm` | `.webm` | Firefox | `video/webm` | `.webm` | Firefox |

더 보기
----

* WebRTC API
* MediaStream Recording API (en-US)
* `<audio>` (en-US) and `<video>` elements


웹 비디오 코덱 가이드 - 웹 미디어 기술

웹 비디오 코덱 가이드
============

압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:

* HD(1920x1080) 풀 컬러(픽셀 당 4바이트) 비디오의 한 프레임은 8,294,400 입니다.
* 보통 초당 30프레임이므로 HD 비디오 1초는 248,832,000바이트 (~249 MB)를 잡아 먹습니다.
* HD 1분은 1.39 GB가 필요합니다.
* 일반적인 30분짜리 비디오 컨퍼런스의 경우 47.1 GB가 필요하며, 2시간짜리 영화는 무려 *166 GB*입니다.

비압축된 비디오 데이터는 스토리지 공간이 많이 필요할 뿐만 아니라 네트워크로 전송할 경우에도 어마어마한 대역폭이 필요합니다. 오디오와 오버헤드를 제외하고도 초당 249 MB가 필요하죠. 여기서 비디오 코덱이 등장합니다. 오디오 코덱이 사운드 데이터를 처리하듯이 비디오 코덱도 비디오 데이터를 압축하고 적절한 포맷으로 인코딩하여, 이후에 디코딩하여 재생 또는 편집할 수 있도록 합니다.

대부분의 비디오 코덱은 손실 압축입니다. 디코딩해도 원본과 완전히 동일하지 않죠. 디테일한 부분이 사라질 수 있는데; 얼마나 사라지는지는 코덱와 설정에 달렸습니다만 압축율을 높일수록 디테일과 정확도는 감소합니다. 무손실 코덱도 있긴 합니다만, 보통 기록 보존 및 로컬 재생에만 염두에 두고 있는 경우가 많습니다.

이 문서는 웹에서 흔히 볼 수 있는 비디오 코덱을 소개하고 각각의 기능과 호환성, 사용성에 대해 설명하고 여러분에게 필요한 적절한 코덱을 찾는 법을 안내합니다.

일반 코덱
-----

웹에서 널리 쓰이는 비디오 코덱은 아래와 같습니다. 각 코덱마다 해당 코덱을 지원하는 컨테이너(파일 타입)도 나열되어 있습니다. 각 코덱의 링크를 클릭하면 해당 코덱에 대해 세부정보, 기능, 호환성 등 필요한 내용이 추가된 하단 섹션으로 이동합니다.

| 코덱 이름 (축약어) | 전체 코덱 이름 | 지원하는 컨테이너 |
| --- | --- | --- |
| AV1 | AOMedia Video 1 | MP4, WebM |
| AVC (H.264) | Advanced Video Coding | 3GP, MP4, WebM |
| H.263 | H.263 Video | 3GP |
| HEVC (H.265) | High Efficiency Video Coding | MP4 |
| MP4V-ES | MPEG-4 Video Elemental Stream | 3GP, MP4 |
| MPEG-1 | MPEG-1 Part 2 Visual | MPEG, QuickTime |
| MPEG-2 | MPEG-2 Part 2 Visual | MP4, MPEG, QuickTime |
| Theora | Theora | Ogg |
| VP8 | Video Processor 8 | 3GP, Ogg, WebM |
| VP9 | Video Processor 9 | MP4, Ogg, WebM |

인코딩 관여 요소
---------

어떤 인코더를 사용하든지간에 인코딩된 비디오의 크기와 퀄리티를 결정하는 두 개의 기본적인 요소 그룹이 있습니다: 하나는 소스 비디오의 포맷와 콘텐츠이며 나머지는 인코딩 시 코덱의 특징 및 설정입니다.

요약하자면 이겁니다:인코딩 된 비디오가 원본에 가까울수록, 압축율은 적고 비디오 파일 크기는 커집니다. 그러므로 사이즈와 퀄리티는 항상 트레이드 오프가 있습니다. 특별한 경우에는 퀄리티 손실을 크게 감수하고서라도 사이즈를 많이 줄여야 할 필요가 있을 수도 있으며;반대로 고용량의 파일을 생성하더라도 퀄리티를 최대한 유지해야 하는 경우도 있습니다.

### 인코딩 된 비디오에 영향을 끼치는 소스 포맷

소스 비디오의 형식이 출력에 영향을 미치는 정도는 코덱과 작동 방식에 따라 다릅니다. 코덱이 미디어를 내장 픽셀 포맷으로 변환하거나 심플 픽셀 이외의 방식으로 이미지를 표현하는 경우에는 원본 포맷에 따른 차이는 거의 없습니다. 하지만 프레임 레이트나 해상도는 반드시 출력 미디어 크기에 영향을 미치게 되죠.

또한 모든 코덱은 각각 장단점이 있습니다. 어떤 코덱은 특정한 형태와 패턴에 약하거나 엣지 선명도가 약하거나, 암부의 디테일이 떨어지거나 등의 여러가지 문제가 있을 수 있죠. 모든 건 기저의 알고리즘과 수학 공식에 달렸습니다.

| 기능 | 품질에 영향 | 크기에 영향 |
| --- | --- | --- |
| Color depth (bit depth) | 색 깊이가 높을수록 비디오의 색상 정확도가 높아집니다. Additionally, 이미지의 강렬한 부분 (빛이나 순수한 빨강 [`rgba(255, 0, 0, 1)`] 등 매우 원색적인 색상), 컴포넌트당 10bit (10-bit color) 이하의 색 깊이에서는 그라데이션 부분이 마치 계단처럼 색상이 분리되는 현상인 컬러 밴딩이 발생할 수 밖에 없습니다. | 코덱에 따라 다르지만 색 깊이가 높을 수록 압축된 파일 사이즈가 커지게 됩니다. 압축 데이터의 내장 스토리지 포맷에 따라 결정됩니다. |
| 프레임 레이트 | 이미지 상에 보여지는 움직임이 얼마나 부드러운지에 크게 영향을 끼칩니다. 프레임 레이트가 높을 수록 움직임이 더 부드럽고 현실에 가까워 집니다. 계속 높이다보면 압축의 의미가 없어지는 지점에 도달하게 되죠. 아래의 Frame rate 절을 참조하세요. | 인코딩 도중 프레임 레이트를 감소시키지 않는 다면 높을 수록 압축된 결과물이 커집니다. |
| 움직임(Motion) | 비디오 압축은 일반적으로 프레임을 비교하면서 수행합니다. 두 프레임이 어디가 다른지 찾아낸 후 이전 프레임에서 다음 프레임을 예측하기 위핸 최소한의 정보만을 기록하는 방식입니다. 연속된 프레임이 다른 것들과 다를 수록 차이점도 많아지고 the less effective the compression is at avoiding the introduction of artifacts into the compressed video. | 움직임이 복잡할 수록 프레임간의 차이점이 많아 지므로 인터프레임이 커지게 됩니다. 이를 비롯한 여러가지 이유로 인해 일반적으로 움직임이 많은 영상일수록 사이즈가 큽니다. |
| 잡음(Noise) | 픽쳐 노이즈(필름 그레인 효과, 먼지 등 이미지의 불규칙한 점들)는 픽셀간 변화폭을 늘립니다. 증가된 변화폭은 압축을 어렵게 하고 동일한 압축 레벨일 때 디테일을 떨어뜨리는 원흉이 되죠. | 이미지에 -노이즈 같이- 변화폭이 큰 부분이 많을수록 압축 알고리즘이 비슷한 수준으로 이미지를 압축하기 어렵습니다. 노이즈로 인한 변화폭을 무시하도록 인코더를 세팅하지 않는 한 노이즈가 많을 수록 압축된 비디오 파일 크기도 커질겁니다. |
| 해상도(width, height) | 압축하는 과정에 특이사항이 발생하지 않는 한 동일한 크기의 스크린에 더 높은 해상도의 비디오가 출력될 수록 원본에 가까운 영상을 볼 수 있습니다. | 해상도가 높을수록 비디오 크기도 커집니다. 최종 사이즈에 결정적인 요소죠. |

위 요소들이 인코딩 된 비디오에 미치는 정도는 선택한 인코더와 설정 등 정확한 상황에 따라 굉장히 다양합니다. 인코딩 중에 코덱의 일반 옵션에 더해서 프레임 레이트를 줄이거나 노이즈 제거, 비디오 해상도를 줄이는 등 인코더 설정을 추가할 수 있습니다.

### 인코딩 결과물에 영향을 끼치는 코덱 설정

비디오 인코딩에 쓰이는 알고리즘은 보통 여러가지의 기술들로 구성되어 있습니다. 일반적으로 최종 결과물의 크기를 줄이기 위한 설정 옵션은 비디오 퀄리티 하락이나 특정 이슈를 발생시킵니다. 최종 결과물이 매우 커지지만 오리지널 소스를 완벽하게 재생하기 위해 무손실 인코딩을 택할 수도 있습니다.

또한 각 인코더는 결과물의 품질과 크기에 영향을 끼치는 다양한 바리에이션을 가지고 있기도 합니다.

| 기능 | 품질에 영향 | 크기에 영향 |
| --- | --- | --- |
| 무손실 압축 | 품질 손실 없음 | 손실 압축에 비해 무손실 압축은 전체 비디오 크기를 많이 줄일 수 없습니다; 결과물 파일은 일반적으로 사용하기엔 여전히 매우 거대합니다. |
| 손실 압축 | 특정 코덱과 압축을 어떻게 하느냐에 따라 퀄리티 저하에 영향을 끼치는 인자나 기타 요소가 어느 정도 발생하게 됩니다. | 원본 비디오와 많이 달라져도 된다면 높은 압축률을 달성하는 것은 어렵지 않습니다. |
| 품질 세팅 | 품질 설정을 높게 세팅할수록 인코딩 된 비디오도 원본에 가깝게 보일겁니다. | 보통은 높은 품질로 설정할 수록 인코딩 된 비디오 파일도 커집니다;그 정도는 코덱에 따라 다르겠지만요. |
| 비트레이트 | 품질을 높이면 보통 비트레이트도 높아집니다. | 비트레이트가 높으면 결과물 파일도 커지죠. |

인코딩 시 설정 가능한 항목과 값은 코덱마다 다를 뿐만 아니라 사용하는 인코더 소프트웨어에 따라서도 다양합니다. 여러분이 사용하는 인코더 소프트웨어의 가이드 문서에 인코딩 시 영향을 끼치는 옵션에 대해 설명하고 있을겁니다.

압축 아티팩트
-------

**아티팩트**는 는 손실 압축에서 발생할 수 있는 부작용으로 시각적인 데이터의 손실 또는 변경입니다. 비디오 출력 방식 때문에 아티팩트가 한 번 발생하면 생각보다 오래 남습니다. 비디오의 각 프레임은 현재 보여지는 프레임에서 변경된 부분만 적용하는 방식으로 표현됩니다. 이 말은 즉 에러나 아티팩트는 시간이 지날수록 복잡해지고 이미지상의 결함이나 이상한 점, 깨진 부분 등이 한동안 지속된다는 걸 의미하죠.

이 문제도 해결하고 또 비디오 데이터의 탐색 시간을 개선하기 위해 주기적으로 **키 프레임**(**인트라-프레임** 또는 **i-프레임**)을 비디오 파일에 삽입합니다. 키 프레임은 통짜 프레임으로 현재 보이는 이미지 손상이나 아티팩트를 수정하기 위해 존재합니다.

### 위신호(Aliasing)

위신호는 인코딩 된 데이터가 압축하기 전과 다르게 보이는 현상 전반에 대한 일반 용어입니다. 여러가지 종류의 위신호가 있으며;흔히 보이는 것들은 아래와 같습니다:

|  |  |
| --- | --- |
| 모아레 현상(Moiré patterns)

**모아레 현상-Moiré pattern**는 소스 이미지의 패턴과 인코더의 동작 방식이 공간적으로 약간 정렬되어
 있지 않을 때 발생하는 대규모 공간 간섭 패턴입니다. 인코딩 시 발생한
 아티팩트를 디코딩 하면 소스 이미지에 이상한 회오리 무늬가 생깁니다.
  |  |
| 계단 현상

**계단 현상**은 공간적 아티팩트의 하나로 부드러워야 할
 대각선이나 곡선 경계면이 마치 계단처럼 들쭉날쭉하게 보이는 현상을
 의미합니다. "안티-앨리어싱"필터를 사용하면 줄일 수 있습니다.
  |  |
| 마차 바퀴 현상

**마차 바퀴 현상** (또는
 **스트로보 효과**)은 필름에서 흔히 볼 수 있는 시각적 효과로 프레임 레이트와 압축
 알고리즘에 의해 회전하는 바퀴가 느리거나 빠르게 혹은 아예 반대
 방향으로 보이는 것을 의미합니다. 이는 철도 노선의 침목이나 도로변의
 기둥 등 일정한 패턴으로 움직이는 것이라면 어디서든 볼 수 있습니다.
 이는 시간적 위신호 이슈로;압축 또는 인코딩 시 샘플링 레이트가 회선
 속도에 간섭하여 발생합니다.
  |  |

### 컬러 엣징(Color edging)

**컬러 엣징**은 시각적 아티팩트 중 하나로 화면상의 색상을 가진 오브젝트들의 경계면에 잘못된 색상이 나타나는 현상입니다. 나타나는 색상은 프레임의 콘텐츠간에 아무 연관도 없습니다.

### 선명도 손실

비디오 인코딩 중 일부 데이터를 제거하면 필연적으로 디테일 손실이 발생합니다. 충분히 압축하고 나면 일부 또는 전체 이미지에 약간 불분명하거나 흐릿한 부분이 보일 수 있습니다.

선명도가 떨어지면 이미지 상의 글자를 읽기 어렵습니다. 특히나 작은 글씨들은 디테일에 민감한 콘텐츠로 작은 변화로도 매우 읽기 어려워집니다.

### 링잉 효과(Ringing)

손실 압축 알고리즘은 링잉 효과 **ringing artifacts**를 일으킬 수 있습니다. 링잉 효과는 압축 알고리즘에 의해 오브젝트의 경계면에 픽셀이 오염되는 현상을 의미합니다. 압축 알고리즘이 오브젝트와 배경의 경계면이 포함된 블럭을 사용했을 때 발생할 수 있습니다. 보통 압축율이 높을 때 주로 발생합니다.

![Example of the ringing effect](/ko/docs/Web/Media/Formats/Video_codecs/ringing-effects.png)

위 별 모양의 경계 부분에 파랑 및 분홍 부분을 보세요 (계단 현상 등 다른 압축 아티팩트도 나타남). 저 부분이 링잉 효과입니다. 링잉은 어떤 면에서는 mosquito noise와 비슷합니다, 다만 모기 효과는 일렁거리거나 움직이는데 반해 링잉 효과는 정지한 채로 변하지 않습니다.

링잉 효과 역시 이미지 상의 글자를 읽기 어렵게 하는 아티팩트입니다.

### 포스터라이징(Posterizing)

**포스터리제이션**은 압축된 결과물이 그라디언트 부분에서 색상 디테일을 잃는 현상을 의미합니다. 그라디언트 영역이 부드럽게 색상이 변하지 않고 원본과 비슷한 색상의 블록 형태로 얼룩이 묻은 듯한 이미지로 표현 됩니다.

![](/ko/docs/Web/Media/Formats/Video_codecs/posterize-effect.jpg)

위 이미지상 흰머리 수리의 깃털 부분의 색상이 블록처럼 보이는 것을 보세요(배경의 흰색 올빼미도요). 포스터리제이션 효과로 인해 깃털의 디테일을 상당 부분 잃었습니다.

### 컨투어링(Contouring)

**컨투어링** 또는 **컬러 밴딩**은 포스터리제이션의 특별한 형태로 이미지에서 색상 블록이 줄무늬 형태로 나타나는 현상을 의미합니다. 이는 비디오 인코딩 시 양자화 설정이 제대로 이뤄지지 않은 경우 발생할 수 있습니다. 결과적으로 부드럽게 변해야 할 그라디언트 부분에 "층"이 생긴 것처럼 줄무늬가 보입니다.

![Example of an image whose compression has introduced contouring](/ko/docs/Web/Media/Formats/Video_codecs/contouring-effect.jpg)

위 이미지를 보시면 하늘에서 지평선으로 부드럽게 변해야 하는데 파란색이 층층이 져 있는 것을 볼 수 있습니다. 이 것이 컨투어링 효과입니다.

### 모스키토 노이즈(Mosquito noise)

**모스키토 노이즈**는 시간적 아티팩트 중 하나로 배경과 물체의 경계면의 차이가 큰 부분에서 노이즈나 **edge busyness**가 흐릿하게 일렁거리는 현상을 의미합니다. 시각적으로는 ringing 효과와 유사합니다.

![](/ko/docs/Web/Media/Formats/Video_codecs/mosquito-effect-sm.png)

위 이미지상 다리 여러군데의 주변 하늘에서 모스키토 노이즈를 볼 수 있습니다. 우측 상단에 모스키토 노이즈가 발생한 부분을 확대해 놓았습니다.

모스키토 노이즈는 MPEG 비디오에서 흔히 발견할 수 있지만 이산 코사인 변환(DCT)를 사용한 로직이라면 어디든지 발생할 수 있습니다;JPEG 정지 화상에서도요.

### 움직임 보상 블록 경계면 아티팩트

일반적인 비디오 압축은 두 프레임을 비교한 뒤 프레임간 차이점을 마지막 프레임까지 저장하는 방식으로 진행됩니다. 고정된 카메라에 촬영되는 물체들도 정지해 있다면 이 압축 방식은 매우 잘 동작하겠지만 프레임마다 움직임이 커지면 압축률을 높이기가 쉽지 않습니다.

**움직임 보상**은 물체가 각각의 방향으로 얼마만큼 많은 픽셀이 이동했는지 움직임(카메라 자체의 이동 또는 프레임 상의 물체의 이동)을 추적하는 기술입니다. 그리고 단순 움직임 만으로는 설명할 수 없는 픽셀의 추가 정보와 함께 움직임을 저장합니다. 요약하자면 인코더가 움직이는 물체를 찾아낸 후 원본과 동일해 보이지만 새로운 위치로 이동한 인터널 프레임을 생성하는 방식입니다. 이론적으로는 새로운 프레임이 나타난 것과 거의 동일합니다. 새 프레임에 남아있는 다른 차이점이 발견된다면 물체의 움직임과 픽셀 차이점을 저장하여 작업을 마무리 합니다. 이렇게 움직임과 픽셀 차이점이 기록된 물체를 **residual frame**이라 부릅니다.

| 원본 프레임 | 인터-프레임 차이점 | 움직임 보상 이후 차이점 |
| --- | --- | --- |
| Original frame of video |  | Differences between the frames after shifting two pixels right |
| 시청자에게 보이는 최초 전체 프레임 |
 이건 첫번째 프레임과 두번째 프레임간의 차이점만 나타낸 화면입니다.
 나머지는 모두 검정이죠. 가까이서 보면 이 움직임들은 단지 카메라가
 수평으로 이동했기 때문에 발생한 것을 알 수 있습니다. 움직임 보상을
 써먹기에 아주 좋은 후보죠.
  |
 차이점을 가지는 픽셀 수를 최소화 하기 위해 첫번째 프레임에서 카메라가
 오른쪽으로 2픽셀 이동하였다고 가정한 뒤 픽셀 차이점을 계산합니다. 이는
 카메라의 움직임을 추적하여 두 프레임간 겹치는 부분이 더 많아지게 합니다.
  |
|
 Images from
 Wikipedia |

움직임 보상에는 두 가지 형태가 있습니다: **전역 움직임 보상** 과 **블록 움직임 보상**입니다. 전역 움직임 보상은 달리, 트래킹, 선회, 기울이기 및 회전 등의 카메라 변화를 감지합니다. 블록 움직임 보상은 추적 대상이 될만한 움직임의 작은 부분들을 찾아 처리합니다. 블록들은 보통 고정된 크기를 가지고 격자 형태로 배열되어 있지만 다양한 크기의 블록 및 블록이 겹치는 경우도 처리할 수 있도록 여러 형태의 움직임 보상을 지원합니다.

하지만 움직임 보상에서도 아티팩트가 발생할 수 있습니다. 링잉 효과 등의 현상이 발생할 만큼 선명한 경계면에서 주로 발생합니다. 이는 residual frame을 코딩하는 도중 수학 계산의 결과물로 인해 발생하는 것으로 다음 키프레임에 의해 수정되기 전에 쉽게 발견할 수 있습니다.

### 프레임 크기 감소

특정 상황에서는 비디오 면적을 감소시키는 것이 비디오 파일 최종 사이즈를 줄이는데 도움이 되기도 합니다. 재생 도중 당장의 크기나 부드러움이 줄어드는 건 안 좋은 게 사실이지만 세심하게 조절하면 최종 결과물은 더 좋아질 수 있습니다. 1080p 비디오를 인코딩 전 720p 비디오로 축소한다면 화질을 더 높게 유지한 채로 크기를 훨씬 줄일 수 있습니다; 재생 할 때 스케일업 하더라도 필요한 파일 크기에 맞추어 품질을 조정한 채 전체 크기로 인코딩한 경우보다 화질이 좋습니다.

### 프레임 레이트 감소

비슷하게 전체 비디오에서 프레임을 제거하고 프레임 레이트를 감소시킬 수도 있습니다. 두 가지 장점이 있는데: 전체 비디오를 작게 만들고 움직임 보상 처리가 더 쉬워집니다. 예를 들어 2 픽셀이 차이나는 두 인터 프레임 간의 움직임 차이점을 계산하는 대신에, 프레임을 스킵하여 두 프레임 간 4 픽셀 차이점을 계산하도록 할 수 있습니다. 이러면 전체 카메라 이동을 더 적은 residual frame으로 표현할 수 있습니다.

사람 눈의 움직이는 것처럼 인식되는 최소한의 프레임 레이트는 약 12입니다. 그보다 적으면 비디오가 아니라 연속된 정지 화상으로 보입니다. 영화 필름은 보통 초당 24 프레임이며 표준 화질 TV(SDTV)는 대략 30 fps(약간 적지만 비슷합니다, 29.97), 고화질 TV(HDTV)는 24-60fps입니다. 24fps이상이면 일반적으로 충분히 부드러워 보입니다;여러분의 필요에 따라 다르지만 30/60fps가 이상적인 목표치죠.

결론적으로 어떤걸 희생할 지 정하는 것은 여러분의 디자인 팀에 달렸습니다.

코덱 세부사항
-------

### AV1

**AOMedia Video 1** (**AV1**) 코덱은 Alliance for Open Media 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. VP9, H.265/HEVC 보다 압축율이 높으며, AVC보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 `<video>` 엘리먼트와 WebRTC에서 사용하기 위해 설계하였습니다.

AV1은 현재 세 프로파일을 제공하며:**main**, **high**, **professional** 다양한 색 깊이와 크로마 서브샘플링을 지원합니다. 또한 **레벨** 역시 정의하여 각 레벨은 비디오 속성의 범위를 제한하고 있습니다. 비디오 속성에는 프레임 면적, 픽셀간 이미지 영역, 출력 및 디코딩 속도, 평균/최대 비트 레이트, 인코딩/디코딩 시 사용하는 타일 개수와 항목 등이 있습니다.

예를들어 AV1 level 2.0의 최대 프레임 크기는 가로 2048 세로 1152 픽셀이지만 프레임 당 최대 픽셀 개수는 147,456(<= 2048x1152 = 2,359,296)이므로 실제 2048x1152 크기의 프레임을 사용할 수는 없습니다. 하지만 인지해야 할 점은 적어도 Firefox와 크롬의 소프트웨어 디코더는 현 시점에서 사실상 레벨은 무시하고 주어진 설정에 맞추어 비디오를 디코딩하는데 최선을 다합니다. 하지만 향후 호한성을 위해 여러분은 선택한 레벨에 맞추어 유지해야 합니다.

현시점의 AV1의 주요 문제점은 새로운 포맷이며 브라우저에 연동이 아직 진행중에 있다는 것입니다. 또한 인/디코더도 최적화해야 하며 하드웨어 인/디코더는 제품화되지 않아 아직 개발중입니다. 이러한 문제점들이 소프트웨어적으로 해결되기 전까지는 비디오 인코딩을 AV1 포맷으로 전환하는데 시간이 소요될 것입니다.

위와 같은 이유로 당분간 최우선 비디오 코덱으로 AV1를 사용하기에는 이르지만 미래에는 반드시 선택을 고려해야 합니다.

|  |  |
| --- | --- |
| 지원 비트레이트 | 비디오 레벨에 따라 다름;이론적으로 level 6.3에서 최대 800Mbps[2] |
| 지원 프레임 레이트 |
 레벨에 따라 다름;예를 들어 level 2.0은 최대 30fps, level 6.3은 최대
 120fps
  |
| 압축 |
 손실
 DCT 기반 알고리즘 |
| 지원 프레임 크기 | 8 x 8 픽셀 에서 65,535 x 65535 픽셀 사이 값 |
| 지원 컬러 모드 |

| 프로필 | 색 깊이 | 크로마 서브샘플링 |
| --- | --- | --- |
| Main | 8 or 10 | 4:0:0 (그레이스케일) or 4:2:0 |
| High | 8 or 10 | 4:0:0 (그레이스케일), 4:2:0, or 4:4:4 |
| Professional | 8, 10, or 12 | 4:0:0 (그레이스케일), 4:2:0, 4:2:2, or 4:4:4 |

 |
| HDR 지원 | 예 |
| 가변 프레임 레이트 (VFR) 지원 | 예 |
| 브라우저 호환성 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| AV1 지원 | 70 | 75 | 67 | No | 57 | No |

 |
| 지원 컨테이너 |
 ISOBMFF[1], MPEG-TS,
 MP4,
 WebM |
| RTP /
 WebRTC 호환성
  | 예 |
| 유지 보수 기관 | Alliance for Open Media |
| 스펙 | https://aomediacodec.github.io/av1-spec/av1-spec.pdf |
| 라이선스 | 로열티 프리, 공개 포맷 |

[1] ISO Base Media File Format

[2] See the AV1 specification's tables of levels, which describe the maximum resolutions and rates at each level.

### AVC (H.264)

MPEG-4 스펙 집합 중 **Advanced Video Coding** (**AVC**) 표준은 ITU H.264 스펙 및 MPEG-4 Part 10 스펙과 동일한 것입니다. TV 방송, 영상회의, 블루레이 디스크 미디어를 포함한 모든 종류의 미디어에 사용되는 움직임 보상에 기반한 코덱이죠.

AVC는 높은 호환성을 지원하는 여러 프로파일 덕분에 매우 유연합니다; 예를들어 Constrained Baseline Profile은 영상회의와 모바일 환경을 고려하였고 MainProfile(몇몇 지역에서 SDTV로 사용)나 High Profile(블루레이 디스크에서 사용)보다 대역폭을 적게 사용합니다. 대부분의 프로파일은 8-bit 컬러 컴포넌트와 4:2:0 크로마 서브샘플링을 사용합니다; High 10 Profile은 10-bit 컬러를 지원하며 High 10 Advanced form은 4:2:2, 4:4:4 크로마 서브샘플링을 지원합니다.

AVC에 동일한 장면의 여러 시점을 지원하는 기능도 있습니다.(Multiview Video Coding), 이는 양안 영상 등을 가능하게끔 합니다.

AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에 소유권이 나뉘어져있습니다. 상용 목적일때는 AVC 미디어 라이선스가 필요하지만 인터넷 환경에서 최종 사용자에게 비디오가 무료로 스트리밍하는 경우에는 MPEG LA 특허권자가 라이선스를 요구하지 않습니다.

웹이 아닌 환경에서 WebRTC를 구현한 브라우저(JavaScript API가 없는 제품이라도)는 WebRTC 콜을 위해 AVC를 지원해야합니다. 웹 브라우저는 꼭 그럴필요는 없지만 몇몇은 지원하고 있습니다.

많은 플랫폼이 웹브라우저의 HTML 콘텐츠 형태로 AVC의 하드웨어 인코딩/디코딩을 지원하고 있습니다. 하지만 AVC를 프로젝트에서 사용하기 전에 라이선스 요구사항을 꼭 읽어보세요!

|  |  |
| --- | --- |
| 지원 비트레이트 | 레벨에 따라 다름 |
| 지원 프레임레이트 | 레벨에 따라 다름; 300 fps까지 가능 |
| 압축 |
 손실
 DCT 기반 알고리즘, 이미지안에 무손실 매크로 블록 생성 가능
  |
| 지원 프레임 크기 | 최대 8,192 x 4,320 픽셀 |
| 지원 컬러 모드 | 일반적이고 유효한 프로필:

| 프로필 | 색 깊이 | 크로마 서브샘플링 |
| --- | --- | --- |
| Constrained Baseline (CBP) | 8 | 4:2:0 |
| Baseline (BP) | 8 | 4:2:0 |
| Extended (XP) | 8 | 4:2:0 |
| Main (MP) | 8 | 4:2:0 |
| High (HiP) | 8 | 4:0:0 (그레이스케일) and 4:2:0 |
| Progressive High (ProHiP) | 8 | 4:0:0 (그레이스케일) and 4:2:0 |
| High 10 (Hi10P) | 8 to 10 | 4:0:0 (그레이스케일) and 4:2:0 |
| High 4:2:2 (Hi422P) | 8 to 10 | 4:0:0 (그레이스케일), 4:2:0, and 4:2:2 |
| High 4:4:4 Predictive | 8 to 14 | 4:0:0 (그레이스케일), 4:2:0, 4:2:2, and 4:4:4 |

 |
| HDR 지원 |
 예;
 Hybrid Log-Gamma
 또는 Advanced HDR/SL-HDR; 모두 ATSC의 파트
  |
| 가변 프레임 레이트 (VFR) 지원 | 예 |
| 브라우저 호환성 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| AVC / H.264 지원 | 4 | 12 | 35[1] | 9 | 25 | 3.2 |

 |
| 지원 컨테이너 | 3GP,
 MP4,
 WebM |
| RTP /
 WebRTC 호환
  | 예 |
| 유지 보수 기관 | MPEG /
 ITU |
| 스펙 | https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-codinghttps://www.itu.int/rec/T-REC-H.264 |
| 라이선스 |
 상용 특허 다수. 상용 사용 시
 라이선스 필요.
 여러 특허 풀에 영향 가능
  |

[1] Firefox support for AVC is dependent upon the operating system's built-in or preinstalled codecs for AVC and its container in order to avoid patent concerns.

### H.263

ITU의 H.263 코덱은 저대역폭 환경에서 쓰기 위해 설계하였습니다. 특히 PSTN (Public Switched Telephone Networks), RTSP, SIP (IP-based videoconferencing) 시스템에서의 영상 회의에 초점을 맞추었습니다. 저대역폭 네트워크 환경에 최적화되었음에도 CPU에 영향이 크며 저사양 컴퓨터에서 원할하게 동작하지 않습니다. 데이터 포맷은 MPEG-4 Part2와 유사합니다.

H.263은 웹에서 널리 쓰인 적이 없습니다. H.263의 변형 포맷이 Flash 비디오나 Sorenson 코덱 같은 상용 소프트웨어에서 사용된 적은 있습니다. 하지만 주요 브라우저 중 H.263를 기본으로 지원하는 제품은 없습니다. 특정 플러그인이 H.263을 지원하고는 있습니다.

대부분의 코덱과 다르게 H.263은 인코딩 된 비디오의 프레임별 최대 **비트레이트**(**BPPmaxKb**)의 기본값을 정의하고 있습니다. 인코딩시에 BPPmaxKb값을 지정하면 각 프레임은 해당 수치를 넘어설 수 없습니다. 최종 프레임은 이 값과 프레임 레이트, 압축, 선택한 해상도와 블록 포맷에 따라 결정됩니다.

H.263은 H.264로 대체되었으며 가능한한 이전의 미디어 포맷은 사용하지 않아야 합니다. H.263이 최선일 정도로 오래된 장치를 지원해야 하는 프로젝트일 경우에만 H.263을 지원할테죠.

H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수 많은 기관들이 소유하고 있는 특허에 기반한 상용 포맷입니다. H.263을 사용하려면 필요한 라이선스를 반드시 취득해야합니다.

|  |  |
| --- | --- |
| 지원 비트레이트 | 무제한, 단 보통 64kbps 미만 |
| 지원 프레임 레이트 | 자유 |
| 압축 |
 손실
 DCT 기반 알고리즘 |
| 지원 프레임 크기 | 최대 1408 x 1152 픽셀[2] |
| 지원 컬러 모드 |
 YCbCr; 각 픽쳐 포맷 (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF)은 프레임
 크기를 픽셀 및 휘도와 색차 샘플의 라인수로 정의하고 있음
  |
| HDR 지원 | 아니오 |
| 가변 비트레이트 (VFR) 지원 | 아니오 |
| 브라우저 호환성 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| H.263 지원 | No | No | No[1] | No | No | No |

 |
| 컨테이너 지원 | 3GP,
 MP4,
 QuickTime |
| RTP /
 WebRTC 호환
  | 아니오 |
| 유지 보수 기관 | ITU |
| 스펙 | https://www.itu.int/rec/T-REC-H.263/ |
| 라이선스 | 상용;적절한 라이선스가 필요함. 특허 풀이 여러 곳일 수 있음. |

[1] While Firefox does not generally support H.263, the OpenMax platform implementation (used for the Boot to Gecko project upon which Firefox OS was based) did support H.263 in 3GP files.

[2] Version 1 of H.263 specifies a set of picture sizes which are supported. Later versions may support additional resolutions.

### HEVC (H.265)

**High Efficiency Video Coding** (**HEVC**) 코덱은 ITU의 **H.265** 및 MPEG-H Part 2 (MPEG-4 후속 작업으로 개발 진행 중). HEVC는 현대 프로세서의 특정점을 십분 활용하여 소프트웨어가 (8K 비디오를 포함한) 초고해상도 비디오 인코딩/디코딩을 효율적으로 할 수 있도록 설계하였습니다. 이론적으로 HEVC는 AVC와 유사한 품질을 유지하면서 절반 크기로 압축할 수 있습니다.

예를들어 각 코딩 트리 유닛(CTU, 이전 세대 코덱의 매크로블록과 유사) 샘플의 휘도 값 트리와 색차 값 트리, 필요한 문법 요소로 구성되어 있습니다. 이는 멀티 코어 환경을 쉽게 활용할 수 있게 합니다.

메인 프로파일이 컴포넌트당 8비트 컬러와 4:2:0 크로마 서브샘플링을 지원하는 점은 흥미로운 부분입니다. 또한 4:4:4 비디오는 특별 취급합니다. 휘도 샘플(이미지 픽셀을 그레이스케일로 표현)과 Cb Cr 샘플(회색을 색상으로 어떻게 변경할지 표시)을 가지는 대신, 세 채널은 3개의 모노크롬 이미지로 취급하며 렌더링시에 풀컬러 이미지를 만들어 내도록 결합합니다.

HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. MPEG LA하에 라이선스가 관리되고 있으며; 컨텐츠 제작자나 제공자가 아닌 개발자에 청구됩니다. 여러분의 앱/웹사이트에서 HEVC 사용 여부를 결정하기 전에 최신 라이선스와 요구 사항을 점검하는 걸 잊지마세요!

|  |  |
| --- | --- |
| 지원 비트레이트 | 최대 800,000 Kbps |
| 지원 프레임 레이트 | 레벨마다 다름; 최대 300 FPS 가능 |
| 압축 |
 손실
 DCT 기반 알고리즘 |
| 지원 프레임 크기 | 128 x 96 에서 8,192 x 4,320 픽셀; 프로파일과 레벨마다 다름 |
| 지원 컬러 모드 |
 아래 표는 주요 프로파일에 한해서입니다. 여기에 포함하지 않는
 프로파일도 있습니다.

| 프로파일 | 색 깊이 | 크로마 서브샘플링 |
| --- | --- | --- |
| Main | 8 | 4:2:0 |
| Main 10 | 8 to 10 | 4:2:0 |
| Main 12 | 8 to 12 | 4:0:0 and 4:2:0 |
| Main 4:2:2 10 | 8 to 10 | 4:0:0, 4:2:0, and 4:2:2 |
| Main 4:2:2 12 | 8 to 12 | 4:0:0, 4:2:0, and 4:2:2 |
| Main 4:4:4 | 8 | 4:0:0, 4:2:0, 4:2:2, and 4:4:4 |
| Main 4:4:4 10 | 8 to 10 | 4:0:0, 4:2:0, 4:2:2, and 4:4:4 |
| Main 4:4:4 12 | 8 to 12 | 4:0:0, 4:2:0, 4:2:2, and 4:4:4 |
| Main 4:4:4 16 Intra | 8 to 16 | 4:0:0, 4:2:0, 4:2:2, and 4:4:4 |

 |
| HDR 지원 | 예 |
| 가변 프레임 레이트 (VFR) 지원 | 예 |
| 브라우저 호환성 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| HEVC / H.265 지원 | 107 | 18 | No | 11 | 94 | 11 |

Chrome은 macOS Big Sur 11+ 및 Android 5.0+의 모든 장치에 대해 Windows 8+, Linux 및 ChromeOS에서 하드웨어를 지원하는 장치에 대해 HEVC를 지원합니다.
Edge(Chromium)는 Microsoft Store의 HEVC 비디오 확장 프로그램이 설치된 경우 Windows 10 1709+에서 하드웨어 지원 장치에 대해 HEVC를 지원하며 다른 플랫폼의 Chrome과 동일한 지원 상태를 갖습니다. Edge(레거시)는 하드웨어 디코더가 있는 장치에 대해서만 HEVC를 지원합니다.
Mozilla는 HEVC가 특허에 의해 방해받는 동안 지원하지 않을 것입니다.
Internet Explorer는 하드웨어 디코더가 있는 장치에 대해서만 HEVC를 지원합니다.
Opera 및 기타 Chromium 기반 브라우저는 Chrome과 동일한 방식으로 지원됩니다.
Safari는 macOS High Sierra 및 이후 버전의 모든 기기에서 HEVC를 지원합니다. |
| 지원 컨테이너 | ISOBMFF、MPEG-TS、MP4、QuickTime |
| RTP /
 WebRTC 호환
  | 아니오 |
| 유지/보수 기관 | ITU /
 MPEG |
| 스펙 | http://www.itu.int/rec/T-REC-H.265https://www.iso.org/standard/69668.html |
| 라이선스 | 상용;라이선스 요구사항에서 컴플라이언스 확인 다수의 특허 풀이 적용될 수 있음에 유의 |

### MP4V-ES

**MPEG-4 Video Elemental Stream** (**MP4V-ES**) 포맷은 MPEG-4 Part 2 시각 표준 중 하나입니다. 일반적으로 MPEG-4 part 2 비디오는 더 이상 사용하지 않는데 다른 코덱에 비해 특장점이 없어 모바일에서도 쓰임새가 없습니다. MP4V 는 MPEG-4 컨테이너의 H.263 인코딩과 본질적으로 동일합니다.

원래 목적은 RTP 세션에서 MPEG-4 오디오 및 비디오 스트림을 사용하기 위해서였습니다. 하지만 3GP를 통한 모바일 통신에서도 쓰이고 있습니다.

지원하는 주요 브라우저가 없으며 사실상 폐기된 포맷이라 왠만하면 사용할 일이 없을겁니다. 이 컨테이너 파일의 확장자는`.mp4v`지만 `.mp4`로 잘못 표기된 경우도 있습니다.

|  |  |
| --- | --- |
| 지원 비트레이트 | 5 Kbps 에서 1 Gbps 이상 |
| 지원 프레임 레이트 | 명시적 제한 없음; 데이터 전송율에 의해 제한 |
| 압축 |
 손실
 DCT 기반 알고리즘 |
| 지원 프레임 크기 | 최대 4,096 x 4,096 픽셀 |
| 지원 컬러 모드 |
 YCrCb 크로마 서브샘플링(4:2:0, 4:2:2, and 4:4:4); 컴포넌트당 12bits 색
 깊이
  |
| HDR 지원 | 아니오 |
| 가변 프레임 레이트 (VFR) 지원 | Yes |
| 브라우저 호환성 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MP4V-ES 지원 | No[2] | No | Yes[1] | No | No | No |

 |
| 지원 컨테이너 | 3GP,
 MP4 |
| RTP /
 WebRTC 호환
  | 아니오 |
| Supporting/Maintaining 유지/보수 기관 | MPEG |
| 스펙 | RFC 6416 |
| 라이선스 |
 상용; MPEG LA and/or
 AT&T에서 필수
 라이선스 취득 필요
  |

[1] Firefox supports MP4V-ES in 3GP containers only.

[2] Chrome does not support MP4V-ES; however, ChromeOS does.

### MPEG-1 Part 2 Video

**MPEG-1 Part 2 Video**는 1990년대 초에 베일을 벗었습니다. 이후 MPEG 비디오 표준과는 다르게 MPEG-1은 ITU's의 개입 없이 순수히 MPEG가 만들었습니다.

모든 MPEG-2 디코더는 MPEG-1 비디오를 재생할 수 있기 때문에 다양한 소프트웨어와 하드웨어 장치에서 호환 가능합니다. MPEG-1 비디오 특허는 모두 만료되었으며, 라이선스에 대한 걱정에서 자유롭습니다. 하지만 소수의 브라우저만이 플러그인 없이 MPEG-1을 지원하며 플러그인은 deprecated된 경우가 많으므로 일반적으로는 더 이상 사용할 수 없습니다. 때문에 웹사이트/어플리케이션에서 MPEG-1는 좋은 선택이 아닙니다.

|  |  |
| --- | --- |
| 지원 비트레이트 | 최대 1.5 Mbps |
| 지원 프레임 레이트 | 23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, 60 FPS |
| 압축 |
 손실
 DCT 기반 알고리즘 |
| 지원 프레임 크기 | 최대 4,095 x 4,095 픽셀 |
| 지원 컬러 모드 | Y'CbCr 4:2:0 크로마 서브샘플링 with up to 12 bits per component |
| HDR 지원 | 아니오 |
| 가변 프레임 레이트 (VFR) 지원 | 아니오 |
| 브라우저 호환 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MPEG-1 지원 | No | No | No | No | No | Yes |

 |
| 지원 컨테이너 | MPEG |
| RTP /
 WebRTC 호환
  | 아니오 |
| 유지/보수 기관 | MPEG |
| 스펙 | https://www.iso.org/standard/22411.html |
| 라이선스 |
 Proprietary; however, all patents have expired, so MPEG-1 may be used
 freely
  |

### MPEG-2 Part 2 Video

**MPEG-2 Part 2** ITU가 설계한 H.262를 참조하여 MPEG-2 스펙에서 정의한 비디오 포맷이며입니다. MPEg-1 비디오와 매우 유사하며 사실 MPEG-2 플레이어는 높은 비트레이트 및 특수 인코딩 옵션 지원을 위한 확장 스펙이 아닌 한 특별한 작업 없이 MPEG-1 비디오를 재생할 수 있습니다.

MPEG-2의 목적은 표준 TV로 압축하는 것이므로 인터레이스 비디오도 지원합니다. 표준 비디오 결과물의 압축 비율과 품질은 DVD 비디오 미디어의 요구사항도 충족하여 메인 비디오 코덱으로 MPEG-2가 선정되기에 충분하였습니다.

MPEG-2는 서로 다른 스펙을 가진 여러 프로파일이 있습니다. 각 프로파일은 4개의 레벨을 가지고 있으며 프레임 레이트, 해상도, 비트레이트등의 비디오 속성 값을 증가시킬 수 있습니다. 대부분의 프로파일은 Y'CbCr 4:2:0 크로마 서브샘플링을 쓰지만 더 상위의 프로파일은 4:2:2를 지원한다든가 말입니다. 추가로 대형 프레임 크기 및 비트레이트 지원을 위한 4개의 레벨이 있습니다. 예를 들어 북미 지역의 ATSC standards TV 스펙은 Main Profile at high Level을 통해 1920 x 1080 (30 FPS) 및 1280 x 720 (60 FPS)의 고화질을 최대 80 Mbps 비트레이트로 지원합니다.

그러나 소수의 브라우저만 MPEG-2를 네이티브로 지원하며 플러그인은 대부분 deprecated 되어 더 이상 사용 가능하지 않습니다. 때문에 웹 사이트나 웹앱에서 MPEG-2는 좋은 선택이 아닙니다.

|  |  |
| --- | --- |
| 지원 비트레이트 | 최대 100 Mbps; 레벨과 프로파일에 따라 다름 |
| 지원 프레임 레이트 |

| 축약어 | 레벨 이름 | 지원 프레임 레이트 |
| --- | --- | --- |
| LL | Low Level | 23.9, 24, 25, 29.97, 30 |
| ML | Main Level | 23.976, 24, 25, 29.97, 30 |
| H-14 | High 1440 | 23.976, 24, 26, 29.97, 30, 50, 59.94, 60 |
| HL | High Level | 23.976, 24, 26, 29.97, 30, 50, 59.94, 60 |

 |
| 압축 |
 손실
 DCT 기반 알고리즘 |
| 지원 프레임 크기 |

| 축약어 | 레벨 이름 | 최대 프레임 크기 |
| --- | --- | --- |
| LL | Low Level | 352 x 288 pixels |
| ML | Main Level | 720 x 576 pixels |
| H-14 | High 1440 | 1440 x 1152 pixels |
| HL | High Level | 1920 x 1152 pixels |

 |
| 지원 컬러 모드 |
 대다수 프로파일에서 Y'CbCr 4:2:0 크로마 서브샘플링; "High", "4:2:2"
 프로파일에서 4:2:2 크로마 서브샘플링 지원.
  |
| HDR 지원 | 아니오 |
| 가변 프레임 레이트(VFR) 지원 | 아니오 |
| 브라우저 호환성 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MPEG-2 지원 | No | No | No | No | No | Yes |

 |
| 지원 컨테이너 | MPEG,
 MPEG-TS (MPEG Transport Stream),
 MP4,
 QuickTime |
| RTP /
 WebRTC 호환
  | 아니오 |
| 유지/보수 기관 | MPEG /
 ITU |
| 스펙 | https://www.itu.int/rec/T-REC-H.262https://www.iso.org/standard/61152.html |
| 라이선스 |
 상용; 2019년 4월 1일자로 말레이지아와 필리핀을 제외한 모든 지역에서 모든
 특허 만료됨, 두 국가 외에서는 자유롭게 사용 가능.
 MPEG LA에 의해
 특허 관리
  |

### Theora

Xiph.org가 **Theora**는 로열티와 라이선스 없이 사용 가능한 오픈소스 자유 비디오 코덱입니다. Theora의 품질과 압축율은 MPEG-4 Part 2 Visual과 AVC에 견줄만하며, 비디오 인코딩 시 반드시 최고를 고수해야 하는 경우가 아니라면 매우 좋은 선택이 될 수 있습니다. 하지만 라이선스-프리로 특허 문제가 없으며 상대적으로 저사양 CPU에서도 충분히 돌아가는 스펙 덕분에 최근 많은 소프트웨어와 웹프로젝트에서 선택하고 있습니다. 현재로써는 Theroa를 위한 하드웨어 디코더가 없기 때문에 저사양 CPU에서도 원할하다는 점은 아주 중요합니다.

Theora는 원래 On2 Technologies의 VC3 코덱을 베이스로 하고 있습니다. VC3 코덱과 사양은 Xiph.org 관리 하에 LGPL 라이선스로 등재되어 있으며 이후 Theora 표준으로 인입하였습니다.

Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬러 밴딩을 피하기 위해 10 이상의 컬러 모드를 선택하는 옵션이 없다는 겁니다. 따지자면 현 시점에서 8 bit 컬러가 대부분이기 때문에 큰 문제는 되지 않습니다. 단지 불편할 뿐이죠. 또 Theora는 Ogg 컨테이너에서만 사용할 수 있습니다. 가장 큰 문제는 Safari에서 사용할 수 없다는 것입니다. macOs 뿐만 아니라 수억대의 iPhone과 iPad에서도 사용할 수 없다는 걸 의미합니다.

|  |  |
| --- | --- |
| 지원 비트레이트 | 최대 2 Gbps |
| 지원 프레임 레이트 |
 임의의 0 이상 값 지원. 유리수 프레임 레이트를 지원하기 위해 32-bit
 분자와 분모로 구성되어 있음
  |
| 압축 |
 손실
 DCT-기반 알고리즘 |
| 지원 프레임 크기 | 최대 1,048,560 x 1,048,560 픽셀 이하 어떠한 가로, 세로 조합이라도 가능 |
| 지원 컬러 모드 | Y'CbCr 4:2:0, 4:2:2, 4:4:4 크로마 서브샘플링, 8 bit 컬러 |
| HDR 지원 | 아니오 |
| 가변 프레임 레이트 (VFR) 지원 | 예[1] |
| 브라우저 호환성 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| Theora 지원 | 3 | Yes[2] | 3.5 | No | 10.5 | No |

 |
| 지원 컨테이너 | Ogg |
| RTP /
 WebRTC 호환
  | 아니오 |
| 유지/보수 기관 | Xiph.org |
| 스펙 | https://www.theora.org/doc/ |
| 라이선스 | 오픈 프리-로열티 |

[1] While Theora doesn't support Variable Frame Rate (VFR) within a single stream, multiple streams can be chained together within a single file, and each of those can have its own frame rate, thus allowing what is essentially VFR. However, this is impractical if the frame rate needs to change frequently.

[2] Edge supports Theora with the optional Web Media Extensions add-on.

### VP8

**Video Processor 8** (**VP8**) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 AVC에 견줄만 합니다.

브라우저가 지원한다면 V8에서 알파 채널을 쓸 수 있으며 비디오 뒤의 백그라운드 이미지를 알파 채널 픽셀과 겹쳐 볼 수도 있습니다.

HTML 콘텐츠로써 특히 WebM 파일에 포함된 VP8을 지원하는 좋은 브라우저가 많습니다. 이는 VP8이 여러분의 콘텐츠로 좋은 선택이 될 수 있으며 가능하다면 더 좋은 VP9를 선택할 수도 있습니다. 웹브라우저는 WebRTC를 위해 VP8을 *반드시* 지원해야 합니다. 하지만 HTML Audio video 엘리먼츠에는 꼭 VP8을 지원할 필요는 없습니다.

|  |  |
| --- | --- |
| 지원 비트레이트 | level별 제한이 없는 한 무제한 임의의 값 |
| 지원 프레임 레이트 | 임의 값 |
| 압축 |
 손실
 DCT-기반 일고리즘 |
| 지원 프레임 크기 | 최대 16,384 x 16,384 픽셀 |
| 지원 컬러 모드 | Y'CbCr 4:2:0 크로마 서브샘플링, 8 bit 색 깊이 |
| HDR 지원 | 아니오 |
| 가변 프레임 레이트 (VFR) 지원 | 예 |
| 지원 브라우저 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| VP8 지원 | 25 | 14[1] | 4 | 9 | 16 | 12.1[2] |

 |
| 지원 컨테이너 | 3GP,
 Ogg,
 WebM |
| RTP /
 WebRTC 호환
  | 예; VP8은 WebRTC의 필수 코덱 중 하나 |
| 유지/보수 기관 | Google |
| 스펙 | RFC 6386 |
| 라이선스 | 라이선스 및 로열티로부터 자유로운 오픈 소스 |

[1] Edge support for VP8 requires the use of Media Source Extensions (en-US).

[2] Safari only supports VP8 in WebRTC connections.

### VP9

**Video Processor 9** (**VP9**)는 구글이 VP8 표준의 후속으로 개발하였습니다. VP8과 마찬가지로 VP9는 완전한 로열티-프리 오픈 소스입니다. 인코딩/디코딩 퍼포먼스는 AVC에 비해 더 높은 품질을 유지하면서도 약간 더 빠릅니다. VP9로 인코딩한 비디오의 품질은 비슷한 수준의 비트레이트에서 HEVC에 견줄만합니다.

VP9의 main profile은 4:2:0 크로마 서브 샘플링에서 8-bit 색 깊이 모드만을 지원합니다. 하지만 더 깊은 색상 모드와 전체 범위의 크로마 서브샘플링을 지원하는 프로파일도 가지고 있습니다. HDR 기능도 있으며 프레임 레이트, 영상 비율, 프레임 사이즈를 자유롭게 선택할 수 있는 오셥도 제공합니다.

VP9는 광범위한 브라우저가 지원하고 있으며 하드웨어 구현체로 상당히 퍼져있습니다. VP9는 WebM에서만 사용할 수 있는 두 코덱 중 하나입니다(나머지 하나는 VP8). 하지만 Safari는 WebM 및 VP9 모두 지원하지 않으므로 VP9를 사용할 경우 iPhone, iPad, Mac에서 AVC나 HEVCS등 다른 포맷을 대체할 수 있도록 만들어야 합니다.

Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사용자에게 AVC/HEVC 대체 포맷 제공이 가능하다면 VP9은 좋은 선택입니다. 상용 코덱 대신에 오픈 코덱을 쓰기로 결정했다면 더할 나위 없죠. 호환 포맷을 제공할 수 없지만 Safari 사용자도 잃을 수 없다면 WebM에 VP9는 차선책이 좋을 겁니다. 아니라면 다른 코덱을 고려해 보셔야겠죠.

|  |  |
| --- | --- |
| 지원 비트레이트 | level 제한이 없는 한 무제한 임의의 값 |
| 지원 프레임 레이트 | 임의 값 |
| 압축 |
 손실
 DCT-기반 알고리즘 |
| 지원 프레임 크기 | 최대 65,536 x 65,536 픽셀 |
| 지원 컬러 모드 |

| Profile | 색 깊이 | 크로마 서브샘플링 |
| --- | --- | --- |
| Profile 0 | 8 | 4:2:0 |
| Profile 1 | 8 | 4:2:0, 4:2:2, and 4:4:4 |
| Profile 2 | 10 to 12 | 4:2:0 |
| Profile 3 | 10 to 12 | 4:2:0, 4:2:2, and f:4:4 |

 지원 색 공간:
 Rec. 601,
 Rec. 709,
 Rec. 2020,
 SMPTE C,
 SMPTE-240M (obsolete; replaced by Rec. 709),
 sRGB.
  |
| HDR 지원 |
 예; HDR10+,
 HLG,
 PQ |
| 가변 프레임 레이트 (VFR) 지원 | Yes |
| 브라우저 호환성 |

| 기능 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| VP9 지원 | 29 | 14 | 28 | No | 10.6 | No |

 |
| 지원 컨테이너 | MP4,
 Ogg,
 WebM |
| RTP /
 WebRTC 호환
  | 예 |
| 유지/보수 기관 | Google |
| 스펙 | https://www.webmproject.org/vp9/ |
| 라이선스 | 라이선스 및 로열티-프리 오픈 소스requirements |

코덱 선택하기
-------

어떤 코덱을 사용할지는 스스로 꼬리에 꼬리를 무는 질문을 던진 끝에 답을 얻을 수 있습니다.:

* 오픈 포맷을 사용할건가요? 상용 코덱도 염두에 두고 있나요?
* 한 비디오를 여러 포맷으로 생산할 여력이 되나요? fallback 옵션을 제공할 수 있다면 의사 결정 과정을 단순화 할 수 있습니다.
* 호환성을 포기할 수 있는 브라우저가 있나요?
* 보장하는 커버리지 상 가장 오래된 브라우저는 어떤 것인가요? 예를 들어 지난 5년간 출시된 모든 브라우저를 지원할지, 1년 사이의 브라우저만을 지원할지?

아래 섹션에서는 특정 유즈케이스에서 추천할만한 코덱을 명시합니다. 각 유즈케이스마다 최대 두 개의 추천 코덱을 볼 수 있습니다. 특정 유즈케이스에 베스트인 코덱이 상용이거나 로열티 지불이 필요하다면 생각해 볼 두 가지 옵션이 있습니다: 로열티 프리 오픈 코덱을 선택하거나, 상용 라이선스를 따르거나.

각 비디오당 하나의 포맷만 제공할 수 있다면 필요한 요구사항을 최대한 만족하는 최적의 포맷을 선택해야 합니다. 첫 번째 추천 코덱은 품질과 퍼포먼스, 호환성을 최대한 고려한 것이며 두번째는 품질과 퀄리티, 크기를 조금 희생하더라도 최대한의 호환성을 가지는 옵션입니다.

### Recommendations for everyday videos

우선 블로그나 정보형 사이트, 소규모 기업 웹사이트 등 상품을 설명하기 위한 비디오(비디오 자체가 상품은 아닌)를 위한 옵션을 알아봅시다.

1. **WebM** 컨테이너에 비디오는 **VP8, 오디오는** **Opus (en-US)** 코덱을 사용합니다. 이들은 로열티-프리 오픈 포맷이지만 최근 브라우저에서만 폭넓게 지원하는 경향이 있어 폴백 지원이 필수적입니다.

```js
<video controls src="filename.webm"></video>
```

2. **MP4** 컨테이너에 비디오 코덱은 **AVC** (**H.264**) 오디오 코덱은 **AAC (en-US)** 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.

```html
<video controls>
  <source type="video/webm" src="filename.webm" />
  <source type="video/mp4" src="filename.mp4" />
</video>
```

**참고:** `<<video>>` 엘리먼트는 자식으로 `<source>` (en-US) 엘리먼트 유무에 상관 없이 `</video>` 닫기 태그가 필요하다는 것을 잊지 마세요.

### 고품질 비디오 제공을 위한 추천

여러분의 목표가 최대한 높은 품질의 비디오를 재생하는 것이라면 가능한한 다양한 포맷으로 제공할 수 있는 방법을 모색해야합니다. 최신의 코덱일수록 고품질 비디오를 지원하지만 반대로 브라우저 호환성은 떨어집니다.

1. WebM 컨테이너에 비디오 코덱은 AV1, 오디오 코덱은 Opus. AV1 인코딩 시 6.3 High level 같은 높은 전문 프로파일을 사용할 수 있다면 훌륭한 품질의 비디오를 4K/8K 해상도로 제공할 수 있습니다. 오디오 인코딩 시 Opus Fullband 프로파일로 48 kHz 샘플링 레이트를 사용한다면 사람이 들을 수 있는 거의 모든 주파수를 캡쳐할 수 있죠.

```js
<video controls src="filename.webm"></video>
```

2. MP4 컨테이너에 비디오 코덱으로 HEVC 를 쓰되 프로파일은 Main 4:2:2 10/12 bit 색 깊이, 최대 Main 4:4:4 16 bit 색 깊이 수준의 고급 Main 프로파일을 사용합니다. 비트레이트를 높이면 놀라운 색 재현과 훌륭한 그래픽 퀄리티를 보여줄 것입니다. 또한 하이 다이나믹 레인지 비디오를 위한 HDR 메타데이터도 추가할 수 있습니다. 오디오는 ACC 인코딩 시 높은 샘플링 레이트(최소 48 kHz, 96 kHz 권장)에 fast-encoding이 아닌 complex-encoding을 사용합니다.

```html
<video controls>
  <source type="video/webm" src="filename.webm" />
  <source type="video/mp4" src="filename.mp4" />
</video>
```

### 비디오 보존, 편집, 믹싱을 위한 추천

웹 브라우저에서 사용 가능한 무손실-아니면 거의 무손실-비디오 코덱은 현재 없습니다. 이유는 간단한데:비디오는 거대합니다. 무손실 압축은 손실 압축에 비해 비효율적입니다. 예를 들어 4:2:0 크로마 서브샘플링의 무압축 1080p 비디오(1920\*1080 픽셀)는 최소 비트레이트가 1.5Gbps가 넘죠. FFV1(브라우저 미지원) 같은 무손실 압축 코덱을 사용하면 콘텐츠에 따라 다르지만 600 Mbps 근처로 줄일 수 있습니다. 하지만 네트워크로 보내이겐 여전히 엄청난 크기이며 현실적으로 불가능한 사이즈입니다.

손실 코덱이 무손실 모드를 가지고 있다 하여도 별 반 다르지 않는데;현재 웹 브라우저에서 무손실 모드를 구현하고 있지 않기 때문입니다. 최선은 손실 압축을 사용하는 코덱 중 최대한 고품질 코덱을 선택한 뒤 최소한의 압축만 수행하도록 설정하는 것입니다. 한가지 방법은 코덱을 설정하기를 "fast" 압축을 선택하는 것입니다. 일반적으로 이는 압축을 최소화합니다.

#### 외부에 비디오 보존

여러분의 웹 사이트나 앱 외부 영역에 보존 목적의 비디오라면 무압축 원본 비디오 데이터를 압축하는 유틸리티를 사용하세요. 예를들어 x264 유틸리티는 매우 높은 비트레이트로 AVC 인코딩을 할 수 있습니다:
```

x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile
```

다른 코덱들도 충분한 여유가 있다면 더 나은 최고-품질 압축을 보여줄지도 모릅니다, 단지 그 인코더들은 엄청 느려서 위 압축으로 얻어지는 거의 무손실 비디오가 전체적으로 비슷한 품질을 보여주면서도 상당히 빠를겁니다.

#### 비디오 녹화

무손실에 가까운 비디오를 보여줘야 한다는 제약이 있다면, AVC 또는 AV1를 고려해 볼 필요가 있습니다. 예를들어 비디오를 녹화하기 위해 MediaStream Recording API (en-US)를 사용한다면, `MediaRecorder` (en-US) 객체를 생성하는 코드는 아래와 같습니다:

```js
const kbps = 1024;
const Mbps = kbps \* kbps;

const options = {
  mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"',
  bitsPerSecond: 800 \* Mbps,
};

let recorder = new MediaRecorder(sourceStream, options);
```

위 예제에서 `MediaRecorder`를 생성하여 BT.2100 HDR, 12-bit color 4:4:4 크로마 서브샘플링 설정으로 AV1 비디오 레코딩을, FLAC (en-US)으로 무손실 오디오를 레코딩 하고 있습니다. 결과물 파일은 비디오 오디오 트랙 합쳐 800Mbps를 넘지 않을 겁니다. 하드웨어 성능이나 요구사항, 사용하고자 하는 코덱에 따라 설정 값을 변경할 수 있습니다. 위의 비트 레이트 값은 네트워크 실사용 케이스에선 비현실적인 값이며 로컬 장치에서만 가능하겠죠.

`codecs` 파라미터 값을 '.' 기준으로 나눠서 의미를 분석해 봅시다:

| 값 | 설명 |
| --- | --- |
| `av01` | 4문자 코드 (4CC-4 Character Code) AV1 코덱을 의미합니다. |
| `2` | 프로파일. 2는 Professional profile. 1은 High profile, 0은 Main profile. |
| `19H` | 레벨과 티어. AV 스펙의 A.3의 표에서 설명, Level 6.3의 High tier를 의미합니다 |
| `12` | 색 깊이. 컴포넌트당 12bit를 의미. 8, 10도 가능하나 AV1에서 표현할 수 있는 가장 정확한 색 깊이 값이 12입니다. |
| `0` | 모노크롬 모드 플래그. 1로 지정하면 색차 성분은 녹화되지 않으며 휘도 성분만 축적되어 그레이스케일 이미ㅣ지로 표현됩니다. 색상을 사용할 것이므로 0으로 지정하였습니다. |
| `000` | 크로마 서브샘플링 모드. AV1 스펙의 section 6.4.2에 설명. 모노크롬 모드 값이 0일 때 000 값은 4:4:4 크로마 서브샘플링 또는 색상 손실이 없어야 함을 나태냅니다. |
| `09` | 사용할 색 공간. AV1 스펙의 section 6.4.2에서 설명 9는 HDR을 위한 BT.2020 색역을 의미합니다. |
| `16` | 전송시 사용할 색 공간. 마찬가지로 section 6.4.2에서 설명; 16은 BT.2100 PQ 컬러로 전송하겠다는 의미입니다. |
| `09` | section 6.4.2 에서 설명하는 계수 행렬. 9 값은 유동 휘도 값의 BT.2020 색역을 사용하겠다는 의미입니다. BT.2010 YbCbCr와 동일한 의미입니다. |
| `1` | "full range" 비디오 플래그. 1은 전체 컬러 영역을 녹화하겠다는 의미입니다. |

선택하고자 하는 코덱 문서에 `codecs` 파라미터 값이 받아들이는 설정이 설명되어 있습니다.

더 보기
----

* 웹 오디오 코덱 가이드 (en-US)
* 미디어 컨테이너 포맷(파일 타입)
* 웹 콘텐츠에서 미디어 사용시 이슈 해결 (en-US)
* WebRTC에서 사용하는 코덱 (en-US)
* RFC 6381: The "Codecs" and "Profiles" parameters for "Bucket" media types
* RFC 5334: Ogg Media Types
* RFC 3839: MIME Type Registrations for 3GPP Multimedia Files
* RFC 4381: MIME Type Registrations for 3GPP2 Multimedia Files
* RFC 4337: MIME Type Registrations for MPEG-4


일반 미디어 타입에서 "codecs" 파라미터 사용하기 - 웹 미디어 기술

일반 미디어 타입에서 "codecs" 파라미터 사용하기
==============================

기본적으로, `video/mp4`, `audio/mpeg` 처럼 MIME 타입을 통해 미디어 파일 포맷을 명시할 수 있습니다. 하지만 많은 미디어 타입들이-특히 비디오 트랙을 지원하는 경우-가지고 있는 데이터 포맷에 대해 더 상세하고 정확하게 명시할 수 있습니다. 예를들어 MPEG-4 비디오라고 해서 MIME 타입을 `video/mp4`만 명시한다면 정확히 어떤 미디어를 가지고 있는 지 아무 정보도 알 수 없습니다.

때문에 MIME 타입에 추가로 미디어 콘텐츠를 기술하기 위해 `codecs` 파라미터가 추가되었습니다. 이를 통해 컨테이너 특화된 정보를 제공할 수 있게 되었습니다 이 정보에는 비디오 코덱의 프로파일, 오디오 트랙 타입 등을 추가할 수 있습니다.

이 가이드 문서는 단순히 컨테이너 타입 명시를 넘어 `codecs` 파라미터의 문법과 MIME 타입에 비디오/오디오 콘텐츠에 대한 상세 정보를 기술하는 방법에 대해 설명합니다.

일반 문법
-----

기본적인 MIME 미디어 타입 표현은 미디어 타입(`audio`, `video`, 등)으로 시작하며, 슬래쉬 문자 (`/`) 후 미디어를 포함하고 있는 컨테이너 포맷이름으로 이어집니다:

* `audio/mpeg`
    + : MP3 같은 MPEG 파일 타입의 오디오 파일입니다.
* `video/ogg`
    + : Ogg 파일 타입의 비디오 파일입니다.
* `video/mp4`
    + : MPEG-4 파일 타입을 사용하는 비디오입니다.
* `video/quicktime`
    + : 애플 QuickTime 포맷을 사용하는 비디오입니다. 다른 곳에서 서술되어 있듯이, 한때는 웹에서 널리 쓰여지던 형식이었지만 현재는 플러그인이 필요하여 더 이상 사용하지 않는 타입입니다.

위 MIME 타입은 아직 모호한 표현입니다. 각 파일 타입들은 많은 수의 코덱을 지원하며 코덱은 각기 프로파일, 레벨과 같은 설정 인자들을 가지고 있습니다. 그래서 `codecs` 파라미터를 추가하여 명시할 수 있습니다.

세미콜론 (`;`)을 붙이고 `codecs=` 으로 시작하는 문자열을 덧붙여 콘텐츠의 포맷을 서술할 수 있습니다. 일부 미디어 타입은 사용하는 코덱 이름만 명시 가능할 수 있고 다른 미디어 타입은 코덱에 관한 다양한 인자를 기술할 수 있는 경우도 있습니다. 콤마로 구분하여 여러 코덱을 기술할 수도 있습니다.

* `audio/ogg; codecs=vorbis`
    + : Vorbis (en-US) 오디오 트랙을 포함하는 Ogg 컨테이너 파일입니다.
* `video/webm; codecs="vp8, vorbis"`
    + : VP8 비디오와 Vorbis (en-US) 오디오를 포함하는 WebM 컨테이너 파일입니다.
* `video/mp4; codecs="avc1.4d002a"`
    + : AVC (H.264) 코덱에 Main Profile, Level 4.2을 가지는 MPEG-4 컨테이너 파일입니다.

코덱의 속성 중 하나라도 퍼센트-인코딩이 필요한 특수문자RFC 2231, 섹션 4: MIME Parameter Value and Encoded Word Extensions를 사용하는 경우 MIME 타입을 기술하는 문자열의 `codecs` 파라미터를 `codecs*` (애스터리크(`*`) 추가됨에 유의)로 변경해야 합니다. JavaScript `encodeURI()` function으로 파라미터 목록을 인코딩할 수 있습니다; 반대로 `decodeURI()`를 통해 기인코딩된 파라미터 리스트를 디코딩할 수 있습니다.

**참고:** `codecs` 파라미터를 사용한다면, 파일 콘텐츠가 사용한 모든 코덱을 목록에 명시해야합니다. 목록에 파일이 사용하고 있지 않은 코덱을 명시하는 것도 가능합니다.

컨테이너별 코덱 옵션
-----------

아래 컨테이너들은 `codecs` 파라미터에 확장 옵션을 지원합니다:

* 3GP
* AV1
* ISO BMFF
* MPEG-4
* QuickTime
* WebM

링크를 클릭하면 동일한 섹션으로 이동할텐데요; 위 미디어 타입들은 모두 ISO Base Media File Format (ISO BMFF)를 기반하고 있어, 동일한 문법을 공유하기 때문입니다.

### AV1

AV1의 `codecs` 문법은AV1 Codec ISO Media File Format Binding 스펙 문서의, 섹션 5: Codecs Parameter String에 정의되어 있습니다.
```

av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]
```

아래 표에서 코덱 파라미터 문자열 구성요소에 대해 자세히 설명하고 있습니다. 각 요소들은 고정된 개수의 문자로 되어 있으며;고정 길이보다 짧은 경우 앞에 0을 붙여서 맞춰야 합니다..

AV1 코덱 파라미터 문자열 요소| 요소 | 내용 |
| --- | --- |
| `P` | 한자리 숫자 프로파일 번호:

AV1 프로파일 번호| 프로파일 번호 | 설명 |
| --- | --- |
| 0 |
 "Main" 프로파일; YUV 4:2:0/모노크롬 크로마 서브샘플링 및 8/10
 비트 색 깊이 지원.
  |
| 1 | "High" 프로파일 4:4:4 크로마 서브샘플링 추가 지원. |
| 2 |
 "Professional" 프로파일, 4:2:2 크로마 서브샘플링 및 12 비트 색
 깊이 추가 지원
  |

 |
| `LL` |
 두자리 숫자 레벨 번호, X.Y 형태의 레벨 포맷으로 변환 됨,
 `X = 2 + (LL >> 2)`, `Y = LL & 3`. 자세한
 내용은 AV1 스펙 문서의
 Appendix A, section 3
 참조.
  |
| `T` |
 한자리 문자 티어 표시. Main 티어라면 (`seq_tier` equals 0),
 문자는 `M`. High 티어는 (`seq_tier` is 1)
 `H`. High 티어는 4.0 이상 레벨에서만 가능합니다.
  |
| `DD` |
 두자리 숫자 색 깊이. 8, 10, 12 중 하나여야 하며; 프로파일과 다른
 속성에서 지원 가능한 값이여야 합니다.
  |
| `M` |
 한자리 숫자 모노크롬 플래그; 0인 경우 비디오는 U, V, Y 성분을 모두
 가지고 있습니다. 아닌 경우 전체 비디오 데이터는 Y(휘도) 성분 뿐으로
 모노크롬 이미지를 가집니다. 자세한 내용은
 [YUV](/ko/docs/Web/Media/Formats/Video\_concepts#yuv)를
 참조하여 YUV 컬러 시스템이 어떻게 동작하는지 알아보세요. 기본 값은 0
 (모노크롬 아님)입니다.
  |
| `CCC` |
`CCC` 는 세자리 숫자로 크로마 서브샘플링을 표기합니다.
 첫번째 숫자는 `subsampling_x`, 두 번째 숫자는
 `subsampling_y`. 둘다 1인경우, 세번째 값은
 `chroma_sample_position`; 아닌 경우 세번째 값은 항상
 0입니다. `M` 값과 더불어 크로마 서브샘플링 포맷을 구성하는
 요소입니다:

크로마 서브샘플링 결정 방식| subsampling\_x | subsampling\_y | Monochrome flag | Chroma subsampling format |
| --- | --- | --- | --- |
| 0 | 0 | 0 | YUV 4:4:4 |
| 1 | 0 | 0 | YUV 4:2:2 |
| 1 | 1 | 0 | YUV 4:2:0 |
| 1 | 1 | 1 | YUV 4:0:0 (Monochrome) |

`CCC`의 세번째 값은 크로마 샘플 위치(chroma sample
 position)로, 0은 위치를 알 수 없으며 디코딩 시 개별적으로 제공해야
 함을 의미합니다; 1은 샘플이 (0, 0) 휘도 샘플과 동일한 수평선상에
 있음을 의미합니다; 2는 샘플이 (0, 0) 휘도 샘플과 동일한 위치에 있음을
 의미합니다.

기본 값은 `110` (4:2:0 크로마 서브샘플링)입니다. |
| `cp` |
 두자리 숫자 `color_primaries` 값은 미디어의 색 공간을
 표시합니다. 예를 들어 HDR 비디오에서 사용하는 BT.2020/BT.2100 색 공간은
 `09`입니다. 자세한 정보-그 외의 색 공간 값을 포함하여-는 AV1
 스펙 문서의
 Color config semantics section
 를 참조하세요. 기본값은 `01` (ITU-R BT.709)입니다.
  |
| `tc` |
 두자리 숫자 `transfer_characteristics` 값. 이 값은 소스에서
 디스플레이로 감마를 매핑하는 함수(기술적인 용어로 "opto-electrical
 transfer function"라 표현)를 정의합니다. 예를 들어 10-bit BT.2020는
 `14`입니다. 기본 값은 `01` (ITU-R BT.709)입니다.
  |
| `mc` |
 두자리 숫자 `matrix_coefficients` 상수는 RGB 컬러 채널을
 휘도/색차 신호로 변환 시 사용할 계수 행렬을 선택합니다. 예를 들어
 BT.709의 표준 계수 값은 `01`로 표현합니다. 기본 값은
 `01` (ITU-R BT.709)입니다.
  |
| `F` |
 한자리 숫자로 색상이 가능한 모든 범위를 표현해야 할지(`1`),
 지정한 색 설정에 의해 적합하다고 여겨지는 범위로 제한하여 표현(**studio swing representation**이라 표현)해야 할지를 나타내는 값입니다. 기본 값은 0 (studio swing
 representation 적용)입니다.
  |

`M` (모노크롬 플래그)이후의 요소는 모두 비필수입니다; 어느 곳에서부터나 생략할 수 있습니다 (하지만 임의의 중간 요소를 생략할 수는 없습니다). 기본 값은 위 표에 서술하였습니다. AV1 코덱 문자열 예시는 아래와 같습니다:

`av01.2.15M.10.0.100.09.16.09.0`

AV1 Professional 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이, 4:2:2 크로마 서브샘플링 ITU-R BT.2100 색 공간, 색 전환 YCbCr 색상 행렬. Studio swing representation 적용.

`av01.0.15M.10`

AV1 Main 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이. 나머지 요소는 기본 값 사용: 4:2:0 크로마 서브 샘플링, BT.709 색 공간, 색 전환, 계수 행렬 사용. Studio swing representation.

### ISO Base Media File Format: MP4, QuickTime, and 3GP

모든 미디어 타입은 ISO Base Media File Format (ISO BMFF)를 기반으로 하며 `codecs` 문법을 공유합니다. 이들 미디어 타입은 MPEG-4 (또 사실상 MPEG-4를 기반으로 하고 있으므로 QuickTime도 포함)과 3GP를 포함합니다. MIME 타입의 `codecs` 파라미터를 통해 아래와 같이 비디오/오디오 트랙 둘 다 기술할 수 있습니다.:

| MIME 타입 | 설명 |
| --- | --- |
| `audio/3gpp` | 3GP 오디오 (RFC 3839: MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files) |
| `video/3gpp` | 3GP 비디오 (RFC 3839: MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files) |
| `audio/3gp2` | 3GP2 오디오 (RFC 4393: MIME Type Registrations for 3GPP2 Multimedia files) |
| `video/3gp2` | 3GP2 비디오 (RFC 4393: MIME Type Registrations for 3GPP2 Multimedia files) |
| `audio/mp4` | MP4 오디오 (RFC 4337: MIME Type Registration for MPEG-4) |
| `video/mp4` | MP4 비디오 (RFC 4337: MIME Type Registration for MPEG-4) |
| `application/mp4` | 오디오/비디오가 아닌 MPEG-4 컨테이너 미디어 |

`codecs` 파라미티에는 간단하게 컨테이너 명(`3gp`, `mp4`, `quicktime`, etc.)만 기술할 수도 있으며 컨테이너 명에 코덱 이름 및 설정 값을 함께 기술할 수도 있습니다. 각 코덱 등은 온점(`.`)으로 구분된 요소를 다수 가질 수 있습니다.

`codecs` 값의 문법은 코덱마다 다릅니다; 하지만 항상 4 글자 코덱 구분자와 온점(`.`)으로 시작하며 데이터 포맷을 기술하기 위핸 Object Type Indication (OTI) 형식의 문자열이 뒤따릅니다. 대부분의 코덱에서 OTI는 두자리 16진수로 되어 있지만 AVC (H.264)는 6자리 16진수로 구성되어 있습니다.

따라서 지원하는 코덱 문법은 아래와 유사합니다:

`cccc[.pp]*` (Generic ISO BMFF)

`cccc` 는 4 글자 코덱 ID이며 `pp`는 0~2자리 인코딩 된 문자입니다.

`mp4a.oo[.A]` (MPEG-4 audio)

`oo` 는 미디어 콘텐츠를 더 정확하게 기술하는 Object Type Indication 값이며 `A` 는 한자리 숫자*오디오* OTI입니다. OTI로 가능한 값은 MP4 Registration Authority 웹사이트의 Object Types page 페이지에서 확인할 수 있습니다. 예를들어 MP4 파일의 Opus 오디오는 `mp4a.ad`로 기술합니다. 자세한 내용은 MPEG-4 audio를 참조하세요.

`mp4v.oo[.V]` (MPEG-4 video)

마찬가지로 `oo` 는 미디어 콘텐츠를 명시하는 OTI 값이며, `V` 는 한자리 숫자 *비디오* OTI 값입니다.

`avc1.oo[.PPCCLL]` (AVC video)

`oo` 는 콘텐츠를 명시하는 OTI 값이며, while `PPCCLL` 는 6자리 16진수로써 프로파일 넘버 (`PP`), 제약 플래그 (`CC`), 레벨 (`LL`)을 의미합니다. `PP`로 가능한 값은 AVC profiles를 참조하세요.

제약 플래그는 1 비트 불리언 값이며, MSB는 flag 0(또는 일부에선 `constraint_set0_flag`)로 취급합니다. 그리고 이어지는 비트는 하나씩 번호가 높게 매겨집니다. 현재로썬 0부터 2번째 비트까지만 사용하며;나머지 5개의 비트는 *반드시* 0이어야합니다. 각 플래그의 의미는 사용하는 프로파일에 따라 달라집니다.

레벨 값은 고정 소수점이므로 숫자 `14` (10진법 20) 은 레벨 2.0을 의미하며 `3D` (10진법 61) 은 레벨 6.1을 의미합니다. 일반적으로 레벨 숫자가 높을 수록 스트림 대역폭이 높아 더 큰 크기의 비디오를 지원할 수 있습니다.

#### AVC 프로파일

아래의 AV 프로파일 넘버는 `codecs` 파라미터에서 사용하며 제약 요소 값은 `CC`로 사용할 수 있습니다.

| 프로파일 | 넘버(Hex) | 제약 (byte) |
| --- | --- | --- |
| **Constrained Baseline Profile (CBP)** CBP는 리소스가 제약점이 있거나 재생이 원활하지 못해 발생하는 이상 요소들을 최소화 해야 하는 경우 주요한 해결책입니다. | `42` | `40` |
| **Baseline Profile (BP)** CBP와 유사하나 데이터 손실 방지와 복구 능력을 향상시킨 프로파일입니다. CBP가 도입된 이후에는 이전만큼 널리 사용하고 있지는 않습니다. CBP 스트림은 모두 BP 스트림으로 간주할 수도 있습니다. | `42` | `00` |
| **Extended Profile (XP)** 고효율 압축과 네트워크 전송시의 데이터 안정성, 스트림 스위칭을 고려한 프로파일입니다. | `58` | `00` |
| **Main Profile (MP)** MPEG-4 포맷으로 전송하는 디지털 표준 TV 방송에서 사용하는 프로파일입니다. 고선명 TV(HDV)에서는 *사용하지 않습니다*. 2004년 —HDTV에서 사용하기 위해— High Profile이 추가된 이후 중요도가 감소하였습니다. | `4D` | `00` |
| **High Profile (HiP)** 현재로써는 전파방송과 매체기반 HD 비디오에서 사용하는 주요 프로파일입니다. HD TV 방송과 블루레이 미디어에서 사용하고 있습니다. | `64` | `00` |
| **Progressive High Profile (PHiP)** 필드 코딩 지원을 제거한 High Profile입니다. | `64` | `08` |
| **Constrained High Profile** 양방향 예측 슬라이스("B-slices") 지원을 제거한 PHiP입니다. | `64` | `0C` |
| **High 10 Profile (Hi10P)** 10 비트 컬러 모드 지원을 제거한 High Profile입니다. | `6E` | `00` |
| **High 4:2:2 Profile (Hi422P)** Hi10P에 4:2:2 크로마 서브샘플링과 최대 10비트 컬러 모드 지원을 추가한 프로파일입니다. | `7A` | `00` |
| **High 4:4:4 Predictive Profile (Hi444PP)** Hi422P 및 Hi444PP에 4:4:4 크로마 서브샘플링(색차 샘플링 소거 없음)을 추가 지원한 프로파일입니다. 또한 최대 14비트 컬러 샘플과 효율적인 무손실 지역 코딩을 추가하였습니다. 각 프레임을 3개의 분리된 컬러 평면(각 평면은 모노크롬 프레임형태로 저장됩니다)으로 인코딩할 수 있는 옵션입니다. | `F4` | `00` |
| **High 10 Intra Profile** all-intra-frame에 High 10 제약이 걸린 프로파일입니다. 전문가 용 앱에 주로 쓰입니다. | `6E` | `10` |
| **High 4:2:2 Intra Profile** all-intra-frame에 Hi422를 적용한 프로파일입니다. | `7A` | `10` |
| **High 4:4:4 Intra Profile** all-intra-frame에 High 4:4:4 제약을 건 프로파일입니다. | `F4` | `10` |
| **CAVLC 4:4:4 Intra Profile** all-intra-frame에 High 4:4:4 제약, CAVLC 엔트로피 코딩만 사용하는 프로파일입니다. | `44` | `00` |
| **Scalable Baseline Profile** 화상 회의, 감시 카메라 및 모바일 장치에서 쓰이는 프로파일로, SVC Baseline Profile은 AVC의 Constrained Baseline profile에 기반하고 있습니다. 스트림의 베이스 레이어는 고품질로 제공되면서, 제약이 걸린 환경에서 대안이 될 수 있는 서브스트림을 다수 제공하는 방식입니다. 서브스트림은 해상도 감소, 낮은 프레임레이트, 압축률 저하 등을 조합하여 구성합니다. | `53` | `00` |
| **Scalable Constrained Baseline Profile** 실시간 양방향 대화형 어플리케이션에서 주요 사용하는 프로파일입니다. WebRTC에서 아직 정식으로 지원하지는 않지만, SVC를 활성화하여 WebRTC AP 개발 모드에서 사용해 볼 수 있습니다. | `53` | `04` |
| **Scalable High Profile** 방송 및 스트리밍 어플리케이션에서 주로 사용합니다. 베이스(또는 최고 품질) 레이어에는 AVC High Profile이 반드시 포함되어야 합니다. | `56` | `00` |
| **Scalable Constrained High Profile** 실시간 통신을 위한 Scalable High Profile의 서브셋 프로파일입니다. | `56` | `04` |
| **Scalable High Intra Profile** 비디오 제작 어플리케이션을 위한 all-intra-frame 프로파일입니다. | `56` | `20` |
| **Stereo High Profile** 양안 렌더링을 통한 스테레오스코픽(stereoscopic) 비디오를 지원하는 프로파일입니다. 양안 영상이 아닌 경우 High profile과 동일합니다. | `80` | `00` |
| **Multiview High Profile** 시간 및 MVC inter-view 예측을 통한 2개 이상의 뷰를 지원하는 프로파일입니다. 필드 픽쳐 또는 매크로블록-어댑티브한 frame-field 코딩을 *지원하지 않습니다*. | `76` | `00` |
| **Multiview Depth High Profile** High Profile에 기반하며 메인 서브스트림이 반드시 붙어야 합니다. 나머지 서브스트림들은 Stereo High Profile과 매칭되어야 합니다. | `8A` | `00` |

#### MPEG-4 audio

`codecs` 목록의 값 항목이 `mp4a`로 시작한다면, 문법은 아래와 같아야 합니다:
```

mp4a.oo[.A]
```

`oo` 는 두자리 16진수 Object Type Indication으로 미디어에 사용된 코덱 클래스를 표시합니다. OTI 값은 MP4 Registration Authority에서 규정하고 있으며 list of the possible OTI values에서 가용한 값을 확인할 수 있습니다. 특수한 값인 `40`; 이는 미디어가 MPEG-4 audio(ISO/IEC 14496 Part 3)임을 나타냅니다. 조금 더 자세히 말하자면, 세번째 컴포넌트—Audio Object Type—은 OTI `40` 을 MPEG-4의 특정 하위 타입으로 범위를 좁히기 위해 추가하였습니다.

Audio Object Type는 두자리 *10진수*로 이루어져 있습니다(`codecs` 파라미터의 다른 값은 대부분 16진수). 예를들어 MPEG-4 AAC-LC의 오디오 오브젝트 타입은 숫자 2이므로 AAC-LC의 전체 `codecs` 표현 값은 `mp4a.40.2` 입니다.

그러므로 오디오 오브젝트 타입이 17인 ER AAC LC의 전체 `codecs` 값은 `mp4a.40.17` 입니다. 한자리 숫자는 한자리로 표현하거나(폭넓게 호환되므로 최선) 앞에 0을 붙여 두자리로 표현할 수 있습니다. `mp4a.40.02` 처럼요.

**참고:** 원래 Audio Object Type은 한자리 숫자로 규정되었었습니다. 시간이 지나면서 표준을 확장하였고 현재는 한자리 또는 두자리 숫자입니다. 10 미만의 값 앞에 `0` 을 붙이는건 필수가 아닙니다. 오래된 MPEG-4 코덱 구현체들은 두자리 숫자를 지원하지 못할 수도 있습니다. 따라서 호환성을 높이기 위해선 한자리로 표현해야 합니다.

Audio Object Types는 ISO/IEC 14496-3 subpart 1, section 1.5.1에서 정의하고 있습니다. 아래 표는 Audio Object Type 기본 목록과 지원하는 프로필입니다. MPEG-4 audio type의 내부에 대해서 더 알고 싶다면 레퍼런스를 참조하세요.

| ID | Audio Object Type | Profile support |
| --- | --- | --- |
| `0` | NULL |  |
| `1` | AAC Main | Main |
| `2` | AAC LC (Low Complexity) | Main, Scalable, HQ, LD v2, AAC, HE-AAC, HE-AAC v2 |
| `3` | AAC SSR (Scalable Sampling Rate) | Main |
| `4` | AAC LTP (Long Term Prediction) | Main, Scalable, HQ |
| `5` | SBR (Spectral Band Replication) | HE-AAC, HE-AAC v2 |
| `6` | AAC Scalable | Main, Scalable, HQ |
| `7` | TwinVQ (Coding for ultra-low bit rates) | Main, Scalable |
| `8` | CELP (Code-Excited Linear Prediction) | Main, Scalable, Speech, HQ, LD |
| `9` | HVXC (Harmonic Vector Excitation Coding) | Main, Scalable, Speech, LD |
| `10` – `11` | *Reserved* |  |
| `12` | TTSI (Text to Speech Interface) | Main, Scalable, Speech, Synthetic, LD |
| `13` | Main Synthetic | Main, Synthetic |
| `14` | Wavetable Synthesis |  |
| `15` | General MIDI |  |
| `16` | Algorithmic Synthesis and Audio Effects |  |
| `17` | ER AAC LC (Error Resilient AAC Low-Complexity) | HQ, Mobile Internetworking |
| `18` | *Reserved* |  |
| `19` | ER AAC LTP (Error Resilient AAC Long Term Prediction) | HQ |
| `20` | ER AAC Scalable (Error Resilient AAC Scalable) | Mobile Internetworking |
| `21` | ER TwinVQ (Error Resilient TwinVQ) | Mobile Internetworking |
| `22` | ER BSAC (Error Reslient Bit-Sliced Arithmetic Coding) | Mobile Internetworking |
| `23` | ER AAC LD (Error Resilient AAC Low-Delay; used for two-way communiation) | LD, Mobile Internetworking |
| `24` | ER CELP (Error Resilient Code-Excited Linear Prediction) | HQ, LD |
| `25` | ER HVXC (Error Resilient Harmonic Vector Excitation Coding) | LD |
| `26` | ER HILN (Error Resilient Harmonic and Individual Line plus Noise) |  |
| `27` | ER Parametric (Error Resilient Parametric) |  |
| `28` | SSC (Sinusoidal Coding) |  |
| `29` | PS (Parametric Stereo) | HE-AAC v2 |
| `30` | MPEG Surround |  |
| `31` | *Escape* |  |
| `32` | MPEG-1 Layer-1 |  |
| `33` | MPEG-1 Layer-2 (MP2) |  |
| `34` | MPEG-1 Layer-3 (MP3) |  |
| `35` | DST (Direct Stream Transfer) |  |
| `36` | ALS (Audio Lossless) |  |
| `37` | SLS (Scalable Lossless) |  |
| `38` | SLS Non-core (Scalable Lossless Non-core) |  |
| `39` | ER AAC ELD (Error Resilient AAC Enhanced Low Delay) |  |
| `40` | SMR Simple (Symbolic Music Representation Simple) |  |
| `41` | SMR Main (Symbolic Music Representation Main) |  |
| `42` | *Reserved* |  |
| `43` | SAOC (Spatial Audio Object Coding)[1] |  |
| `44` | LD MPEG Surround (Low Delay MPEG Surround)[1] |  |
| `45` and up | *Reserved* |  |

[1] SAOC and LD MPEG Surround are defined in ISO/IEC 14496-3:2009/Amd.2:2010(E).

### WebM

WebM `codecs` 파라미터의 기본 형은 4개의 WebM 코덱 중 하나 이상의 이름을 콤마로 구분합니다. 아래 표는 예시입니다.:

| MIME 타입 | 설명 |
| --- | --- |
| `video/webm;codecs="vp8"` | VP8 코덱 WebM 비디오; 오디오 미정의. |
| `video/webm;codecs="vp9"` | VP9 코덱 WebM 비디오. |
| `audio/webm;codecs="vorbis"` | Vorbis 오디오 WebM 파일. |
| `audio/webm;codecs="opus"` | Opus 오디오 WebM 파일. |
| `video/webm;codecs="vp8,vorbis"` | VP8 비디오 코덱, Vorbis 오디오 코덱 포함된 WebM 파일. |
| `video/webm;codecs="vp9,opus"` | A WebM container with VP9 video and Opus audio. |

`vp8.0`, `vp9.0` 문자열도 가능하지만, 비추천합니다.

#### ISO Base Media File Format 문법

`codecs` 파라미터를 표준화하고 강력한 포맷으로 발전시키기 위해, WebM은 ISO Base Media File Format 에 정의된 문법에 따라 *비디오* 콘텐츠를 기술하기 시작했습니다. 본 문법은 VP Codec ISO Media File Format Binding의, Codecs Parameter String 섹션에 정의되어 있습니다. 오디오 코덱은 `vorbis` 또는 `opus`로 표시되어 있습니다.

`codecs` 파리미터는 사용한 코덱을 나타내는 4자리 문자로 시작하고 온점(`.`)으로 구분된 2자리 숫자가 반복됩니다.
```

cccc.PP.LL.DD.CC[.cp[.tc[.mc[.FF]]]]
```

처음부터 5개 요소는 필수이며; `cp` (color primaries) 부터는 옵션입니다.; 이후로는 어디서든 끊을 수 있습니다. 각 요소는 아래 표에 설명하고 있으며 예시가 첨부되어 있습니다.

WebM codecs parameter components| Component | Details |
| --- | --- |
| `cccc` |
 4자리 코드로 사용 가능한 코덱을 명시합니다. 가능한 값은 아래와
 같습니다:

Web-M 지원 코덱 4자리 코드| Four-character code | Codec |
| --- | --- |
| `vp08` | VP8 |
| `vp09` | VP9 |
| `vp10` | VP10 |

 |
| `PP` |
 2자리 숫자 프로파일 코드. 필요하다면 두자리를 맞추기 위해 앞에 0을
 추가합니다.

WebM 프로파일 숫자| 프로파일 | 설명 |
| --- | --- |
| `00` |
 크로마 서브샘플링 4:2:0(수직/수평 서브샘플링)만 허용. 색상
 컴포넌트 당 8비트만 허용.
  |
| `01` | 크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8비트만 허용. |
| `02` |
 크로마 서브샘플링 4:2:0만 허용. 색상 컴포넌트 당 8, 10, 12비트
 허용.
  |
| `03` | 크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8, 10, 12비트 허용 |

 |
| `LL` |
 두 자리 숫자 레벨 코드. 레벨 넘버는 고정 소수점 표기로 첫번째 숫자가 1의
 자리, 두번째 숫자가 소수점 미만 첫번째 자리를 의미합니다. 예를 들어 레벨
 3은 `30` 레벨 6.1은 `61`.
  |
| `DD` |
 휘도, 색상 컴포넌트의 비트 심도를 표기합니다. 가능한 값은 8, 10,
 12입니다.
  |
| `CC` |
 크로마 서브샘플링 포맷을 2자리 숫자로 표기합니다. 가능한 값은 아래
 표에 있습니다; 자세한 내용은
 [Chroma subsampling](/ko/docs/Web/Media/Formats/Video\_concepts#chroma\_subsampling)
 를 참조하세요.

WebM 크로마 서브샘플링 구분자| 값 | 크로마 서브샘플링 포맷 |
| --- | --- |
| `00` |
 4:2:0 with the chroma samples sited interstitially between the
 pixels
  |
| `01` |
 4:2:0 chroma subsampling with the samples colocated with luma
 (0, 0)
  |
| `02` |
 4:2:2 chroma subsampling (4 out of each 4 horizontal pixels'
 luminance are used)
  |
| `03` |
 4:4:4 chroma subsampling (every pixel's luminance and
 chrominance are both retained)
  |
| `04` | *Reserved* |

 |
| `cp` |
ISO/IEC 23001-8:2016
 표준 Section 8.1에 명시되어있는 색 공간을 두자리 숫자로 표현합니다. 본
 요소와 이후 요소는 전부 비필수값입니다.

Color primaries 요소에 가능한 값은 아래와 같습니다.:

ISO/IEC Color primary identifiers| Value | Details |
| --- | --- |
| `00` | *ITU과 ISO/IEC*에 의해 예약됨 |
| `01` |
 고선명 화질(HD) TV 표준인 BT.709, sRGB, sYCC. BT.709; sRGB는
 컴퓨터 모니터에서 쓰이는 가장 일반적인 색 공간입니다. Broadcast
 BT.709는 8비트 색 심도를 사용하여 16(Black)부터 235(White)까지
 리갈 레인지를 표현합니다.
  |
| `02` | 알 수 없거나 application에서 활용하기 위해 사용합니다. |
| `03` | *ITU과 ISO/IEC*에 의해 예약됨 |
| `04` | BT.470 System M, NTSC (미국 내 표준 화질 TV 표준) |
| `05` |
 BT.470 System B, G; BT.601; BT.1358 625; BT.1700 625 PAL and 625
 SECAM
  |
| `06` |
 BT.601 525; BT.1358 525 or 625; BT.1700 NTSC; SMPTE 170M.
 *`7`과 동일함.* |
| `70` | SMPTE 240M (historical).
 *Functionally identical to `6`과 동일함.* |
| `08` | 일반 필름 |
| `09` |
 BT.2020; BT.2100. UHD (4K) High Dynamic Range (HDR) 영상에서
 사용 매우 넓은 색 표현력과 10비트 12비트 색상 컴포넌트 지원.
  |
| `10` |
 SMPTE ST 428 (D-Cinema Distribution Master: Image
 characteristics). DCDM을 위한 비압축 형식.
  |
| `11` |
 SMPTE RP 431 (D-Cinema Quality: Reference projector and
 environment). 필름 표현의 지속적 경험을 위한 레퍼런스 프로젝터와
 환경 조건에 대해 기술.
  |
| `12` |
 SMPTE EG 432 (Digital Source Processing: Color Processing for
 D-Cinema). 디지털 영화를 위한 색신호 디코딩의 기술적 가이드라인.
  |
| `13` – `21` | *ITU과 ISO/IEC*에 의해 예약됨 |
| `22` | EBU Tech 3213-E |
| `23` – `255` | *ITU과 ISO/IEC*에 의해 예약됨 |

 |
| `tc` |
 비디오의 `transferCharacteristics` 값을 2자리 숫자로 표현.
 This value is from Section 8.2 of
 ISO/IEC 23001-8:2016
 Section 8.2에 기술되어 있으며 디코딩된 색상을 렌더링 타겟에 맞출 때
 transfer characteristics 을 정의합니다.
  |
| `mc` | `matrixCoefficients` 속성 값을 2자리 숫자로 표현
 ISO/IEC 23001-8:2016
 스펙 Section 8.3 표에서 기술. 이 값은 native red, blue, green 색상을
 휘도, 색차 신호에 매핑하는데 사용합니다. 이 계수들이 방정식에서 어떻게
 사용되는지 같은 섹션에서 확인할 수 있습니다.
  |
| `FF` |
 색상 컴포넌트의 검정 수준과 색상 범위를 리갈 레인지로 제한할지 여부를
 표시합니다. 예를들어 8비트 색상의 경우 리갈 레인지는 16~235입니다. 값이
 `00` 인 경우 강제로 제한하며, `01` 인 경우
 결과물의 색상이 컬러 시스템의 범위를 벗어나더라도 각 컴포넌트 별로
 가능한 풀 레인지 값을 허용합니다.
  |

#### WebM media type 예시

`video/webm;codecs="vp08.00.41.08,vorbis"`

VP8 비디오, 프로파일 0 레벨 4.1, 8-bit YUV 4:2:0 크로마 서브샘플링, BT.709 색 공간, 변환 함수, 행렬 계수, 휘도 색차 값은 ("studio") 리갈 레인지로 인코딩 됨. 오디오는 Vorbis.

`video/webm;codecs="vp09.02.10.10.01.09.16.09.01,opus"`

VP9 비디오, 프로파일 2 레벨?1.0, 10-bit YUV 4:2:0 크로마 서브샘플링, BT.2020 색 공간, ST 2084 EOTF (HDR SMPTE), BT.2020 비상수 휘도 색상 행렬, 풀 레인지 휘도 색차 인코딩non-constant luminance color matrix, and full-range chroma and luma encoding. 오디오는 Opus 포맷.

codecs 파라미터 사용하기
----------------

`codecs` 파라미터를 여러 상황에서 사용할 수 있습니다. 먼저 `<audio>` (en-US) , `<video>` 엘레먼트 생성 시 `<source>` (en-US) 엘레먼트에 사용하여 브라우저로 하여금 사용할 미디어 포맷에 대한 옵션을 제공하는거죠..

`MediaSource.isTypeSupported()` (en-US) 메소드에 MIME 타입을 명시적으로 전달하는데 사용할 수도 있습니다.; 이 메소드는 현재 장치에서 주어진 미디어 포맷을 재생할 수 있는지 여부를 불리언 값으로 반환합니다.

더 보기
----

* Web media technologies
* Guide to media types and formats on the web (en-US)
* Guide to audio codecs used on the web (en-US)
* Guide to video codecs used on the web
* Codecs used by WebRTC (en-US)


SVG element reference - SVG: Scalable Vector Graphics

SVG element reference
=====================

« SVG / SVG Attribute reference (en-US) »

SVG 엘리먼트들
---------

A

* `<a>`
* `<altGlyph>`
* `<altGlyphDef>`
* `<altGlyphItem>`
* `<animate>` (en-US)
* `<animateColor>` (en-US)
* `<animateMotion>` (en-US)
* `<animateTransform>` (en-US)

B C

* `<circle>`
* `<clipPath>` (en-US)
* `<color-profile>`
* `<cursor>` (en-US)

D

* `<defs>` (en-US)
* `<desc>` (en-US)

E

* `<ellipse>`

F

* `<feBlend>` (en-US)
* `<feColorMatrix>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feDistantLight>` (en-US)
* `<feFlood>` (en-US)
* `<feFuncA>` (en-US)
* `<feFuncB>` (en-US)
* `<feFuncG>` (en-US)
* `<feFuncR>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMergeNode>` (en-US)
* `<feMorphology>` (en-US)
* `<feOffset>` (en-US)
* `<fePointLight>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feSpotLight>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>` (en-US)
* `<font>` (en-US)
* `<font-face>` (en-US)
* `<font-face-format>` (en-US)
* `<font-face-name>` (en-US)
* `<font-face-src>` (en-US)
* `<font-face-uri>` (en-US)
* `<foreignObject>` (en-US)

G

* `<g>` (en-US)
* `<glyph>` (en-US)
* `<glyphRef>` (en-US)

H

* `<hkern>` (en-US)

I

* `<image>` (en-US)

J K L

* `<line>` (en-US)
* `<linearGradient>` (en-US)

M

* `<marker>` (en-US)
* `<mask>` (en-US)
* `<metadata>` (en-US)
* `<missing-glyph>` (en-US)
* `<mpath>` (en-US)

N O P

* `<path>` (en-US)
* `<pattern>` (en-US)
* `<polygon>` (en-US)
* `<polyline>` (en-US)

Q R

* `<radialGradient>` (en-US)
* `<rect>`

S

* `<script>` (en-US)
* `<set>` (en-US)
* `<stop>` (en-US)
* `<style>` (en-US)
* `<svg>` (en-US)
* `<switch>` (en-US)
* `<symbol>` (en-US)

T

* `<text>` (en-US)
* `<textPath>` (en-US)
* `<title>` (en-US)
* `<tref>` (en-US)
* `<tspan>` (en-US)

U

* `<use>` (en-US)

V — Z

* `<view>` (en-US)
* `<vkern>` (en-US)
범주들
---

### 애니메이션 엘리먼트들

`<animate>` (en-US), `<animateColor>` (en-US), `<animateMotion>` (en-US), `<animateTransform>` (en-US), `<mpath>` (en-US), `<set>` (en-US)### 기본 모양들

`<circle>`, `<ellipse>`, `<line>` (en-US), `<polygon>` (en-US), `<polyline>` (en-US), `<rect>`### 컨테이너 엘리먼트들

`<a>`, `<defs>` (en-US), `<glyph>` (en-US), `<g>` (en-US), `<marker>` (en-US), `<mask>` (en-US), `<missing-glyph>` (en-US), `<pattern>` (en-US), `<svg>` (en-US), `<switch>` (en-US), `<symbol>` (en-US)### 기술하는 엘리먼트들

`<desc>` (en-US), `<metadata>` (en-US), `<title>` (en-US)### 기본 필터 엘리먼트들

`<feBlend>` (en-US), `<feColorMatrix>` (en-US), `<feComponentTransfer>` (en-US), `<feComposite>` (en-US), `<feConvolveMatrix>` (en-US), `<feDiffuseLighting>` (en-US), `<feDisplacementMap>` (en-US), `<feFlood>` (en-US),`<feFuncA>` (en-US), `<feFuncB>` (en-US), `<feFuncG>` (en-US), `<feFuncR>` (en-US),`<feGaussianBlur>` (en-US), `<feImage>` (en-US), `<feMerge>` (en-US), `<feMergeNode>` (en-US), `<feMorphology>` (en-US), `<feOffset>` (en-US), `<feSpecularLighting>` (en-US), `<feTile>` (en-US), `<feTurbulence>` (en-US)### 폰트 엘리먼트들

`<font>` (en-US), `<font-face>` (en-US), `<font-face-format>` (en-US), `<font-face-name>` (en-US), `<font-face-src>` (en-US), `<font-face-uri>` (en-US), `<hkern>` (en-US), `<vkern>` (en-US)### 구배(경사) 엘리먼트들

`<linearGradient>` (en-US), `<radialGradient>` (en-US), `<stop>` (en-US)### 그래픽 엘리먼트들

`<circle>`, `<ellipse>`, `<image>` (en-US), `<line>` (en-US), `<path>` (en-US), `<polygon>` (en-US), `<polyline>` (en-US), `<rect>`, `<text>` (en-US), `<use>` (en-US)### 가벼운 소스 엘리먼트들

`<feDistantLight>` (en-US), `<fePointLight>` (en-US), `<feSpotLight>` (en-US)### 모양 엘리먼트들

`<circle>`, `<ellipse>`, `<line>` (en-US), `<path>` (en-US), `<polygon>` (en-US), `<polyline>` (en-US), `<rect>`### 구조적인 엘리먼트들

`<defs>` (en-US), `<g>` (en-US), `<svg>` (en-US), `<symbol>` (en-US), `<use>` (en-US)### 텍스트 컨텍스트 엘리먼트들

`<altGlyph>`, `<altGlyphDef>`, `<altGlyphItem>`, `<glyph>` (en-US), `<glyphRef>` (en-US), `<textPath>` (en-US), `<text>` (en-US), `<tref>` (en-US), `<tspan>` (en-US)### 텍스트 컨텍스트 하위 엘리먼트들

`<altGlyph>`, `<textPath>` (en-US), `<tref>` (en-US), `<tspan>` (en-US)### 범주화 되지 않은 엘리먼트들

`<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<foreignObject>` (en-US), `<script>` (en-US), `<style>` (en-US), `<view>` (en-US)


SVG 튜토리얼 - SVG: Scalable Vector Graphics

SVG 튜토리얼
========

확장 가능한 벡터 그래픽(Scalable Vector Graphics), SVG는 그래픽을 마크업하기 위한 W3C XML의 특수언어(dialect)입니다. SVG는 Firefox, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.

본 튜토리얼의 목적은 SVG 내부 구조를 설명하는 데 있으며, 기술적인 세부 사항을 다룹니다. 만약 그저 아름다운 이미지를 그리려고 한다면, Inkscape's documentation page에서 더 많은 유용한 소스들을 찾을 수 있습니다. SVG에 관한 또 다른 소개는 W3C의 SVG Primer에서 제공됩니다.

**참고:** 본 튜토리얼은 개발 초기 단계에 있습니다. 가능하다면, 본 문서 작성에 참여하여, 한 두 단락을 작성하여 도움을 주기 바랍니다. 한 페이지 전체를 작성한다면 더욱 좋습니다!

##### SVG 소개 목록

* 소개
* 시작하기
* 위치
* 기본 형태
* 패스
* 채우기 및 선 그리기 (en-US)
* 그라디언트 (en-US)
* 패턴
* 텍스트 (en-US)
* 기본 변형 (en-US)
* 클리핑 및 마스킹 (en-US)
* SVG 안의 다른 컨텐츠 (en-US)
* 필터 효과 (en-US)
* SVG 폰트 (en-US)
* SVG 이미지 태그
* SVG를 위한 도구들 (en-US)
* SVG와 CSS


<a> - SVG: Scalable Vector Graphics

<a>
===

**<a>** SVG 요소는 다른 웹 페이지, 파일, 같은 페이지의 위치, 이메일 주소 또는 기타 URL에 대한 하이퍼링크를 생성합니다. HTML의 `<a>` 요소와 매우 유사합니다.

SVG의 `<a>` 요소는 컨테이너이므로 HTML과 같은 텍스트 주위에 링크를 만들 수 있고, 모든 모양 주위에도 링크를 만들 수 있습니다.

예제
--
```

@namespace svg url(http://www.w3.org/2000/svg);
html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 모양에 링크 -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- 텍스트에 링크 -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle"><circle></text>
  </a>
</svg>
```

```css
/\* SVG는 링크에 대한 기본 시각적 스타일을 제공하지 않으므로
 몇 가지를 추가하는 것이 가장 좋습니다. \*/

@namespace svg url(http://www.w3.org/2000/svg);
/\* HTML이 아닌 SVG <a> 요소만 선택하는 데 필요합니다.
 아래 경고 참조\*/

svg|a:link,
svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /\* 텍스트의 경우에도 SVG는 채우기 색상을 사용합니다.\*/
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}
```

**경고:** 이 요소는 HTML의 `<a>` 요소와 태그 이름을 공유하므로 CSS 또는 `querySelector`로 `a`를 선택하면 잘못된 요소를 선택할 수 있습니다. 둘을 구분하려면 @namespace 규칙을 사용해 보세요.

속성
--

`download`

URL로 이동하는 대신 URL을 다운로드하도록 브라우저에 지시하여 사용자에게 로컬 파일로 저장하라는 메시지가 표시됩니다.
 값 유형: **<string>** ; 기본 값: 없음; 애니메이션 가능: **아니요**

`href (en-US)`

 하이퍼링크가 가리키는 URL 또는 URL 조각입니다.
 값 유형: **<URL> (en-US)** ; 기본값: 없음; 애니메이션 가능: **예**

`hreflang`

 하이퍼링크가 가리키는 URL 또는 URL 조각의 사람 언어입니다.
 값 유형: **<string>** ; 기본값: 없음; 애니메이션 가능: **예**

`ping`
Experimental

 공백으로 구분된 URL 목록으로, 하이퍼링크를 따라갈 때 `PING` 본문이 포함된 `POST` 요청이 브라우저에서 전송됩니다(백그라운드에서). 일반적으로 추적에 사용됩니다. 동일한 사용 사례를 다루는 보다 광범위하게 지원되는 기능은 `Navigator.sendBeacon()`을 참조하십시오.
 값 유형: **<list-of-URLs> (en-US)** ; 기본값: 없음; 애니메이션 가능: **아니요**

`referrerpolicy`

URL을 가져올 때 보내는 리퍼러입니다.
 값 유형: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; 기본 값: 없음; 애니메이션 가능: **아니요**

`rel`

 이 속성은 타겟 객체와 링크 객체의 관계를 지정합니다.
 값 유형: **<list-of-Link-Types>** ; 기본 값: 없음; 에니메이션 가능: **예**

`target (en-US)`

 연결된 URL을 표시할 위치입니다.
 값 유형: `_self`|`_parent`|`_top`|`_blank`|**<name>** ; 기본 값: `_self`; 에니메이션 가능: **예**

`type`

 연결된 URL의 MIME 유형입니다.
 값 유형: **<string>** ; 기본 값: 없음; 에니메이션 가능: **예**

`xlink:href (en-US)`
지원이 중단되었습니다

 하이퍼링크가 가리키는 URL 또는 URL 조각입니다. 이전 브라우저의 이전 버전과의 호환성을 위해 필요할 수 있습니다.
 값 유형: **<URL> (en-US)** ; 기본값: 없음; 애니메이션 가능: **예**

### 전역 속성

코어 속성 (en-US)

특히: `id (en-US)`, `lang (en-US)`, `tabindex (en-US)`

스타일 속성 (en-US)
`class (en-US)`, `style (en-US)`
조건부 처리 속성 (en-US)

특히: `requiredExtensions`, `systemLanguage (en-US)`

이벤트 속성

전역 이벤트 속성 (en-US), 문서 요소 이벤트 속성 (en-US), 그래픽 이벤트 속성 (en-US)

프레젠테이션 속성 (en-US)

특히: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill (en-US)`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset (en-US)`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

XLink 속성

특히: `xlink:title (en-US)`

ARIA 속성

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

사용 참고 사항
--------

|  |  |
| --- | --- |
| 카테고리 | 컨테이너 요소 |
| 허용된 콘텐츠 | 순서에 상관없는 다음 요소 중 임의의 개수:애니메이션 요소설명 요소모양 요소구조 요소그라데이션 요소`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>` (en-US), `<image>` (en-US), `<marker>` (en-US), `<mask>` (en-US), `<pattern>` (en-US), `<script>` (en-US), `<style>` (en-US), `<switch>` (en-US), `<text>` (en-US), `<view>` (en-US) |

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Links |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<ellipse> - SVG: Scalable Vector Graphics

<ellipse>
=========

**`<ellipse>`** 요소는 중심 좌표와 x 및 y 반경을 기반으로 타원을 만드는 SVG 기본 모양입니다.

**참고:** 타원은 타원의 정확한 방향을 지정할 수 없지만,(예를 들어 45도 각도로 기울어진 타원을 그리려는 경우) `transform (en-US)` 속성을 사용하여 회전할 수 있습니다.

예제
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
```

속성
--

`cx`

 타원 중심의 x좌표.
 값 유형: **<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `0`; 에니메이션 가능: **예**

`cy (en-US)`

 타원 중심의 y좌표
 값 유형: **<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `0`; 에니메이션 가능: **예**

`rx (en-US)`

 x축의 타원 반경.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 에니메이션 가능: **예**

`ry (en-US)`

 y축의 타원 반경.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 에니메이션 가능: **예**

`pathLength (en-US)`

 이 속성을 사용하면 경로의 총 길이를 사용자 단위로 지정할 수 있습니다.
 값 유형: **<number>** (en-US) ; 기본 값: *none*; 에니메이션 가능: **예**

**참고:** SVG2부터 시작하여 `cx`, `cy`, `rx`, 그리고 `ry`는 기하학 속성입니다. 즉, 해당 속성을 해당 요소의 CSS 속성으로도 사용할 수 있습니다.

### 전역 속성

코어 속성 (en-US)

특히: `id (en-US)`, `tabindex (en-US)`

스타일 속성 (en-US)
`class (en-US)`, `style (en-US)`
조건부 처리 속성 (en-US)

특히: `requiredExtensions`, `systemLanguage (en-US)`

이벤트 속성

전역 이벤트 속성 (en-US), 그래픽 이벤트 속성 (en-US)

프레젠테이션 속성 (en-US)

특히: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill (en-US)`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset (en-US)`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

ARIA 속성

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

사용 참고 사항
--------

|  |  |
| --- | --- |
| 카테고리 | 기본 모양 요소, 그래픽 요소, 모양 요소 |
| 허용된 콘텐츠 | 순서에 상관없는 다음 요소 중 임의의 개수:애니메이션 요소설명 요소 |

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # EllipseElement |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 기타 기본 SVG 모양: **`<circle>`**, `<line>` (en-US), `<polygon>` (en-US), `<polyline>` (en-US), `<rect>`


<circle> - SVG: Scalable Vector Graphics

<circle>
========

**`<circle>`** SVG SVG 요소는 중심점과 반지름을 기준으로 원을 그리는 데 사용되는 SVG 기본 모양입니다.

예제
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>
```

속성
--

`cx`

 원 중심의 x축 좌표입니다.
 값 유형: **<length> (en-US)**|**<percentage> (en-US)** ; 기본 값: `0`; 에니메이션 가능: **예**

`cy (en-US)`

 원 중심의 y축 좌표입니다.
 값 유형: **<length> (en-US)**|**<percentage> (en-US)** ; 기본 값: `0`; 에니메이션 가능: **예**

`r (en-US)`

 원의 반지름입니다. 0 이하의 값은 원의 렌더링을 비활성화합니다.
 값 유형: **<length> (en-US)**|**<percentage> (en-US)** ; 기본 값: `0`; 에니메이션 가능: **예**

`pathLength (en-US)`

 원주 전체 길이(사용자 단위).
 값 유형: **<number>** (en-US) ; 기본 값: 없음; 에니메이션 가능: **예**

**참고:** SVG2부터 시작하여 `cx`, `cy`, 그리고 `r`는 기하학 속성입니다. 즉, 해당 속성을 해당 요소의 CSS 속성으로도 사용할 수 있습니다.

### 전역 속성

코어 속성 (en-US)

특히: `id (en-US)`, `tabindex (en-US)`

스타일 속성 (en-US)
`class (en-US)`, `style (en-US)`
조건부 처리 속성 (en-US)

특히: `requiredExtensions`, `systemLanguage (en-US)`

이벤트 속성

전역 이벤트 속성 (en-US), 그래픽 이벤트 속성 (en-US)

프레젠테이션 속성 (en-US)

특히: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill (en-US)`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset (en-US)`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

ARIA 속성

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

사용 참고 사항
--------

|  |  |
| --- | --- |
| 카테고리 | 기본 모양 요소, 그래픽 요소, 모양 요소 |
| 허용된 콘텐츠 | 순서에 상관없는 다음 요소 중 임의의 개수:애니메이션 요소설명 요소 |

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CircleElement |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 기타 기본 SVG 모양: **`<ellipse>`**, `<line>` (en-US), `<polygon>` (en-US), `<polyline>` (en-US), `<rect>`


<rect> - SVG: Scalable Vector Graphics

<rect>
======

**`<rect>`** 요소는 위치, 너비, 그리고 높이로 정의된 사각형을 그리는 기본 SVG 모양입니다. 이 직사각형은 둥근 모서리를 가질 수 있습니다.

예제
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>
```

속성
--

`x (en-US)`

 직사각형의 x 좌표입니다.
 값 유형: **<length>** (en-US)|**<percentage>** (en-US) ; 기본값: `0`; 애니메이션 가능: **예**

`y (en-US)`

 직사각형의 y 좌표입니다.
 값 유형: **<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `0`; 애니메이션 가능: **예**

`width (en-US)`

 직사각형의 너비.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 애니메이션 가능: **예**

`height (en-US)`

 직사각형의 높이.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 애니메이션 가능: **예**

`rx (en-US)`

 직사각형의 가로 모서리 반지름입니다. `ry`가 지정 된 경우 `ry`가 기본값입니다.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 애니메이션 가능: **예**

`ry (en-US)`

 직사각형의 세로 모서리 반지름입니다. `rx`가 지정 된 경우 `rx`가 기본값입니다.
 값 유형: `auto`|**<length>** (en-US)|**<percentage>** (en-US) ; 기본 값: `auto`; 애니메이션 가능: **예**

`pathLength (en-US)`

 직사각형 둘레의 총 길이(사용자 단위).
 값 유형: **<number>** (en-US) ; 기본 값: 없음; 애니메이션 가능: **예**

**참고:** SVG2부터 시작하여 `x`, `y`, `width`, `height`, `rx` 그리고 `ry`는 기하학 속성입니다. 즉, 해당 속성을 해당 요소의 CSS 속성으로도 사용할 수 있습니다.

### 전역 속성

코어 속성 (en-US)

특히: `id (en-US)`, `tabindex (en-US)`

스타일 속성 (en-US)
`class (en-US)`, `style (en-US)`
조건부 처리 속성 (en-US)

특히: `requiredExtensions`, `systemLanguage (en-US)`

이벤트 속성

전역 이벤트 속성 (en-US), 그래픽 이벤트 속성 (en-US)

프레젠테이션 속성 (en-US)

특히: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill (en-US)`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset (en-US)`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

ARIA 속성

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

사용 참고 사항
--------

|  |  |
| --- | --- |
| 카테고리 | 기본 모양 요소, 그래픽 요소, 모양 요소 |
| 허용된 콘텐츠 | 순서에 상관없는 다음 요소 중 임의의 개수:애니메이션 요소설명 요소 |

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RectElement |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 기타 기본 SVG 모양: `<circle>`, `<ellipse>`, `<line>` (en-US), **`<polygon>` (en-US)**, `<polyline>` (en-US)


패턴 - SVG: Scalable Vector Graphics

패턴
==

* « 이전 (en-US)
* 다음 » (en-US)
패턴
--

패턴은 SVG에 사용할 보다 복잡한 채움 형태의 하나다. 또한 강력하다, 그래서 관련해서 얘기하고 적어도 기본을 익히는 것은 가치가 있다. 색퍼짐(gradients)처럼, 이 `<pattern>` (en-US) 요소도 SVG 파일의 `<defs>` 섹션에 놓여야 한다.

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1">
      <stop offset="5%" stop-color="white" />
      <stop offset="95%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="red" />
      <stop offset="95%" stop-color="orange" />
    </linearGradient>

    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
      <rect x="0" y="0" width="50" height="50" fill="skyblue" />
      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
      <circle
 cx="25"
 cy="25"
 r="20"
 fill="url(#Gradient1)"
 fill-opacity="0.5" />
    </pattern>
  </defs>

  <rect fill="url(#Pattern)" stroke="black" width="200" height="200" />
</svg>
```

| Screenshot | Live sample |
| --- | --- |
|  |  |

패턴 요소 안에는 앞서 포함시킨 다른 기본 도형(shape)의 뭐라도 포함시킬 수 있다. 그리고 그것 각각에 앞서 배운 색퍼짐(gradients)이나 투명(opacity) 등으로 스타일을 줄 수 있다. 여기서 우리는 두개의 사각형(둘은 겹쳐 있고, 하나가 다른 것보다 2배 크기다. 이것이 패턴 전체를 채운다)과 하나의 동그라미를 그려 넣었다.

패턴 관련 복잡한 작업이 단위 체계와 그 크기를 정하는 일이다. 위 예제에서, 우리는 패턴의 `폭(width)`과 `높이(height)` 속성을 정의했다. 이것들은 반복되는 패턴들이 서로 얼마나 떨어지는지를 나타내는 값이다. 이 사각형의 시작위치가 도면의 어딘가로부터 원하는 만큼 밀려나도록 하는 `x`와 `y` 속성도 가능한다. 이들이 여기에 사용된 이유는 아래에서 설명한다.

패턴에도 앞서 봤던 `gradientUnits`같은 속성이 있다. `patternUnits`는 단위를 명시한다. 기본값은 마찬가지로 "objectBoundingBox"이다. 그래서 패턴이 적용될 객체의 폭/높이가 1로 표현된다. 그러므로 이 경우, 폭과 높이가 0.25로 설정되었으므로 우리가 원한 것은 수평과 수직으로 패턴이 4번 반복되는 것이다. 그 말은 패턴의 크기는 전체 박스 크기의 단지 0.25만큼이라는 것이다.

 색퍼짐(gradients)과 달리 패턴은 두번째 속성인 `patternContentUnits`을 가진다. 이것은 패턴 요소 내부의 기본 도형에 적용되는 단위 체계다. 기본값은 "userSpaceOnUse"로 `patternUnits` 속성과 반대다. 이 말은 이들 속성들(`patternContentUnits`과 `patternUnits`)을 따로 지정하지 않으면, 우리가 패턴 내부에 그리는 도형들은 패턴 요소가 사용하는 것과 다른 좌표 체계로 그려진다는 것이다. 이것은 직접 작성할 때 살짝 혼란스러울 수 있다는 것이다. 위 예제에서 이 일을 제대로 하려면, 우리의 박스 크기(200픽셀)와 우리가 수평과 수직으로 4번 반복되기를 원한다는 것을 감안해야 한다. 이 말은 각 패턴은 50x50의 정사각형이라는 것이다. 그래서 패턴 안, 두개의 사각형과 하나의 동그라미는 50x50 박스에 맞는 크기로 됐던 것이다. 이 박스 바깥에 그려지는 것들은 그게 뭐든 보이지 않을 것이다. 이 패턴은 또한 10 픽셀 만큼 밀려나야 한다 그래서 이것은 우리의 상자 왼쪽 위에서 시작할 것이다. 그래서 패턴의 x와 y 속성은 10/200 = 0.05로 조정 되어져야 한다.
 (역주: 예제의 x, y는 0인데, 설명은 계속 10인 것처럼 하고 있다. 뭔가 오류가 있는 것 같다)

여기서 주의사항은 객체가 크기를 바꾸면 패턴도 그에 맞게 조정되지만, 그 내부는 그렇지 않다는 거다. 그래서 우리는 여전히 4번 반복된 패턴을 가지겠지만 내부의 객체들은 같은 크기를 유지할 것이고 그들 간에 커다란 빈 공간을 직면할 것이다. `patternContentUnits` 속성을 바꿔서 우리는 모든 요소가 같은 단위 체계에 놓이도록 할 수 있다:

```xml
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
 </pattern>
```

이제 패턴 내용물은 패턴과 같은 단위 체계라, 패턴이 바른 위치에서 시작하게 하려면 시작위치를 밀어내지 않아야 한다. 그리고 객체의 크기가 더 커지면 패턴은 자동적으로 조정되어 같은 수의 객체와 같은 회수로 반복될 것이다. 이것은 객체의 크기가 변했을 때, 패턴의 크기를 그대로 유지하면서 그냥 반복을 더해서 박스를 채우는 "userSpaceOnUse" 체계와 대조적이다.

Gecko에서 반지름이 0.075보다 작은 동그라미를 그리는 데 어려움이 있다(현재 이것이 패턴 요소에서의 버그인지 아닌지는 알 수 없다). 이 문제를 해결하려면 꼭 해야 하는 것이 아니라면 "objectBoundingBox" 단위에서 그리는 것을 피하는 것이 아마 최선일 것이다.

어느 것도 패턴을 생각할 때 일반적으로 생각하는 것이 아닙니다. 패턴은 보통 크기가 정해지고, 객체의 모양과는 독립적으로 반복됩니다. 이런 식으로 만들려면 패턴과 내용 둘다 현재의 사용자 공간에서 그려져야 한다. 객체를 다음처럼 하고, 도형을 바꾸지 않는다.

```xml
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
 </pattern>
```

물론 나중에 개체 크기를 변경해도 패턴의 크기는 조정되지 않는다. 위의 세 가지 예는 아래 높이를 300px로 약간 늘린 직사각형에 보이고 있지만 이게 완벽한 그림이 아니고, 시스템에 따라 가능한 다른 요인이 있음을 밝혀 둔다.

![](/ko/docs/Web/SVG/Tutorial/Patterns/svg_pattern_comparison_of_units.png)

* « 이전 (en-US)
* 다음 » (en-US)


기본 도형 - SVG: Scalable Vector Graphics

기본 도형
=====

* « 이전
* 다음 »

SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.

기본적인 도형들
--------

도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다.

![8개의 다른 도형입니다. 왼쪽 상단에는 검은색 테두리의 사각형이 그 옆에는 검은색 둥근 윤곽선 사각형이 있습니다. 왼쪽 아래에는 빨간색 테두리의 원이 그 뒤에 빨간색 테두리의 타원이 있습니다. 왼쪽 아래에 노란색 선이 있고, 그 옆에는 지그재그로 된 노란선이 있습니다. 노란색 선 아래에는 녹색 테두리의 별이 있고 이미지 끝에는 파란색 물결 모양의 선이 있습니다.](/ko/docs/Web/SVG/Tutorial/Basic_Shapes/shapes.png)

```xml
<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
 stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
 stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
```

**참고:** `stroke`, `stroke-width` 그리고 `fill` 속성들은 튜토리얼 뒤쪽에서 설명한다.

### 사각형

rect 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와 ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.

```xml
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
```

`x`

사각형의 좌측 상단의 `x` 값을 의미한다.

`y`

사각형의 좌측 상단의 `y` 값을 의미한다.

`width`

사각형의 폭을 나타낸다.

`height`

사각형의 높이를 나타낸다.

`rx`

사각형의 둥근 꼭짓점의 `x` 방향으로의 반지름이다.

`ry`

사각형의 둥근 꼭짓점의 `y` 방향으로의 반지름이다.

### 원

당신이 추측한 것 처럼, circle 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.

```html
<circle cx="25" cy="75" r="20" />
```

`r`

원의 반지름을 의미한다.

`cx`

원의 중심 중 `x` 값을 의미한다.

`cy`

원의 중심 중 `y` 값을 의미한다.

### 타원

Ellipse는 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.

```html
<ellipse cx="75" cy="75" rx="20" ry="5" />
```

`rx`

타원의 `x` 방향으로의 반지름의 길이를 의미한다.

`ry`

타원의 `y` 방향으로의 반지름의 길이를 의미한다.

`cx`

타원의 중심 중 `x` 값을 의미한다.

`cy`

타원의 중심 중 `y` 값을 의미한다.

### 선

Lines은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.

```html
<line x1="10" x2="50" y1="110" y2="150" />
```

`x1`

점 1의 `x` 값이다.

`y1`

점 1의 `y` 값이다.

`x2`

점 2의 `x` 값이다.

`y2`

점 2의 `y` 값이다.

### Polyline

Polylines은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.

```html
<polyline
 points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" />
```

points

포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 `x` 좌표와 `y` 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.

### 다각형

Polygons은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.

```html
<polygon
 points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180" />
```

points

포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 `x` 좌표와 `y` 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.

### 패스

패스는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 the next section 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.

```html
<path d="M 20 230 Q 40 205, 50 230 T 90230" />
```

`d`

A list of points and other information about how to draw the path. See the Paths section for more information.

* « 이전
* 다음 »