recursal/MDN huggingface dataset:
AudioDestinationNode
====================

`AudioDestinationNode` 은 주어진 컨택스트의 음원의 종착점을 나타냅니다. 보통 스피커를 가리킵니다. 이는 또한 `OfflineAudioContext` 를 사용해 데이터가 녹음되는 노드가 되기도 합니다.

`AudioDestinationNode` has no output (as it *is* the output, no more `AudioNode` can be linked after it in the audio graph) and one input. 입력받은 음원의 채널의 총 갯수는 반드시 0과 `maxChannelCount값의 사이에 있거나 예외(an exception is raised)가 발생한다.`

주어진 `AudioContext` 의 `AudioDestinationNode` 는 `AudioContext.destination` (en-US)프로퍼티를 통해 검색이 된다.

| Number of inputs | `1` |
| --- | --- |
| Number of outputs | `0` |
| Channel count mode | `"explicit"` |
| Channel count | `2` |
| Channel interpretation | `"speakers"` |

Properties
----------

*Inherits properties from its parent,* *`AudioNode`*.

`AudioDestinationNode.maxChannelCount` (en-US)

`unsigned long 형의 물리적인 디바이스로 다룰수 있는 최대 채널의 갯수.`

Methods
-------

*No specific method; inherits methods from its parent,* *`AudioNode`*.

Example
-------

`AudioDestinationNode를 사용하면 복잡한 세팅없이 몇줄의 코드로 오디오 그래프를 확인할 수 있습니다.`


```js
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
```


To see a more complete implementation, check out one of our MDN Web Audio examples, such as Voice-change-o-matic or Violent Theremin.

명세서
---

| Specification |
| --- |
| Web Audio API # AudioDestinationNode |

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

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

See also
--------

* Using the Web Audio API
AnimationEvent
==============

**`AnimationEvent`** 인터페이스는 애니메이션과 관련된 정보를 제공하는 이벤트를 나타냅니다.

Event

AnimationEvent생성자
---

`AnimationEvent()`

주어진 매개변수로 `AnimationEvent`를 생성합니다.

속성
--

`Event` 인터페이스의 속성을 상속합니다.

`AnimationEvent.animationName` 읽기 전용

애니메이션을 생성한 `animation-name` (en-US)의 값을 담은 문자열입니다.

`AnimationEvent.elapsedTime` 읽기 전용

이 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시정지됐던 시간은 제외합니다. `animationstart` 이벤트의 `elapsedTime`은 `animation-delay`의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다.

`AnimationEvent.pseudoElement` 읽기 전용

애니메이션이 재생 중인 의사 요소의 이름을 담은, `'::'`으로 시작하는 문자열입니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다.

메서드
---

`Event` 인터페이스의 메서드를 상속합니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # interface-animationevent |

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

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

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`, `animation-composition` (en-US), `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count` (en-US), `animation-name` (en-US), `animation-play-state` (en-US), `animation-timing-function` (en-US), `@keyframes`
HTMLTitleElement
================

**`HTMLTitleElement`** 인터페이스는 문서의 제목을 담습니다. `HTMLElement` 인터페이스의 속성과 메서드를 상속합니다,

Properties
----------

*부모인 `HTMLElement`로부터 상속합니다.*

`HTMLTitleElement.text` (en-US)

문서의 제목을 나타내는 `DOMString`입니다.

메서드
---

*부모인 `HTMLElement`로부터 상속합니다.*

명세
--

| Specification |
| --- |
| HTML Standard # htmltitleelement |

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

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

같이 보기
-----

* 인터페이스를 구현하는 HTML 요소 `<title>`.
AudioWorklet
============

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Web Audio API의 **`AudioWorklet`** 인터페이스는 아주 낮은 레이턴시의 오디오 프로세싱을 제공하기 위해 별도의 스레드에서 실행되는 사용자 정의 오디오 프로세싱 스크립트를 제공하려는 목적으로 사용됩니다.

worklet의 코드는 worklet과 다른 오디오 노드에 의해 공유되는 별도의 Web Audio 스레드를 사용하며 `AudioWorkletGlobalScope` 전역 실행 컨텍스트에서 실행됩니다.

오디오 컨텍스트의 `AudioWorklet` 인스턴스에 `BaseAudioContext.audioWorklet` (en-US) 속성을 통해 접근합니다.

속성
--

*`AudioWorklet` 인터페이스는 자신이 소유하는 어떠한 속성도 정의하지 않으나, `Worklet` (en-US)의 속성을 상속받습니다.*

메서드
---

*이 인터페이스는 `Worklet` (en-US)으로부터 메서드를 상속받습니다. `AudioWorklet` 인터페이스는 자신이 소유하는 어떠한 메서드도 정의하지 않습니다.*

이벤트
---

*`AudioWorklet`은 응답하는 이벤트를 가지고 있지 않습니다.*

예제
--

`AudioWorkletNode`에서 사용자 정의 오디오 노드 생성에 대한 완전한 예제를 참고해 보세요.

명세
--

| Specification |
| --- |
| Web Audio API # AudioWorklet |

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

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

같이 보기
-----

* `AudioWorkletGlobalScope` — `AudioWorklet`의 전역 실행 컨텍스트
* Web Audio API
* Web Audio API 사용하기
HTMLVideoElement
================

**`HTMLVideoElement`** 인터페이스는 Video object를 조작하는데 필요한 프로퍼티와 메소드를 제공합니다. `HTMLMediaElement`와 `HTMLElement`를 상속합니다.

지원하는 미디어 포맷 (en-US) 목록은 브라우저마다 다릅니다. 여러분은 적절한 범위의 브라우저에서 지원하는 한가지 비디어 포맷을 제공하던가, 지원할 모든 브라우저를 위한 여러 종류의 미디어 포맷을 제공해야 합니다.

속성(Properties)
--------------

*`HTMLMediaElement`와* *`HTMLElement`의 속성들도 상속 받습니다.*

`HTMLVideoElement.height` (en-US)

표시 영역의 높이를 나타내는 HTML Attribute `height`의 값을 `DOMString`으로 반환합니다. 단위는 pixel입니다.

`HTMLVideoElement.poster`

비디오 데이터가 없을 때 보여줄 이미지를 지정하는 HTML Attribute `poster`의 값을 `DOMString`로 반환합니다.

`HTMLVideoElement.videoHeight` (en-US) 읽기 전용

비디오의 height를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.

`HTMLVideoElement.videoWidth` (en-US) 읽기 전용

비디오의 width를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.

`HTMLVideoElement.width` (en-US)

표시 영역의 높이를 나타내는 HTML Attribute `width`의 값을 `DOMString`으로 반환합니다. 단위는 pixel입니다.

### Gecko 전용 속성

`HTMLVideoElement.mozParsedFrames` 
비표준
읽기 전용

미디어 소스에서 파싱된 비디오 프레임 수를 `unsigned long` 값으로 반환합니다.

`HTMLVideoElement.mozDecodedFrames` 
비표준
읽기 전용

화상으로 디코딩 된 비디오 프레임 수를 `unsigned long` 값으로 반환합니다.

`HTMLVideoElement.mozPresentedFrames` 
비표준
읽기 전용

렌더링 파이프 라인을 통해 출력된 디코드 프레임 수를 `unsigned long` 값으로 반환합니다.

`HTMLVideoElement.mozPaintedFrames` 
비표준
읽기 전용

화면에 그려진 프레임 수를 `unsigned long` 값으로 반환합니다.

`HTMLVideoElement.mozFrameDelay` 
비표준
읽기 전용

지연 출력된 비디오 프레임을 초 단위로 `double` 값으로 반환한다.

`HTMLVideoElement.mozHasAudio` 
비표준
읽기 전용

비디오와 연관된 오디오 존재 여부를 `boolean` 값으로 반환한다.

### Microsoft 확장 속성

`HTMLVideoElement.msFrameStep()` (en-US) 
비표준

프레임 단위로 앞/뒤로 이동합니다.

`HTMLVideoElement.msHorizontalMirror` (en-US) 
비표준

비디오의 좌/우 반전 시키거나 반전된 상태를 반환합니다.

`HTMLVideoElement.msInsertVideoEffect()` (en-US) 
비표준

미디어 파이프라인에 특정 비디오 효과를 추가합니다.

`HTMLVideoElement.msIsLayoutOptimalForPlayback` (en-US) 
비표준
읽기 전용

더 효과적인 비디오 렌더링이 가능하면 true를 반환합니다.

`HTMLVideoElement.msIsStereo3D` (en-US) 
비표준
읽기 전용

시스템이 비디오를 stereo 3-D로 판단하였는지 여부를 반환합니다. 값을 true로 지정한다면 video를 stereo 3-D로 인식합니다..

`HTMLVideoElement.msZoom` (en-US) 
비표준

비디오 프레임을 출력부에 딱 맞게 트림합니다.

메소드
---

*`HTMLMediaElement`와 `HTMLElement`의 메소드도 상속 받습니다.*

`HTMLVideoElement.getVideoPlaybackQuality()` (en-US) 
Experimental

현재 재생 결과를 담고 있는 `VideoPlaybackQuality` (en-US) 객체를 반환합니다. 전체 프레임 중 drop 되거나 손실된 프레임 등 재생 정보를 포함합니다.

Events
------

*`HTMLMediaElement`와 `HTMLElement`의 이벤트를 상속합니다.* `addEventListener()` 메소드 또는 `oneventname` 프로퍼티에 리스너를 전달하여 이벤트를 수신합니다.

명세
--

| Specification |
| --- |
| HTML Standard # htmlvideoelement |

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

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

더 보기
----

* HTML 엘리먼트 구현체: `<video>`.
* Demo of video paint statistics(링크 소멸)
* 지원하는 미디어 포맷 (en-US)
Media Capture and Streams API (미디어 스트림)
=======================================

**Media Streams API**, 짧게는 **MediaStream API**라고 불리는 **Media Capture and Streams API**는 오디오와 비디오 데이터 스트리밍을 지원하는 WebRTC 관련 API 입니다. 이 API는 미디어 스트림과 스트림을 구성하는 트랙, 데이터 형식과 관련된 제한인자, 데이터를 비동기적으로 사용할 때의 성공과 오류 콜백, 그리고 이 과정에서 발생하는 이벤트에 대한 인터페이스 및 메서드를 제공합니다.

개념 및 사용법
--------

이 API는 오디오 혹은 비디오와 관련된 데이터를 나타내는 `MediaStream` (en-US) 객체 조작에 기반합니다.

`MediaStream`은 0개 이상의 `MediaStreamTrack` 객체로 구성되며, 각자 다양한 오디오와 비디오 **트랙**을 나타냅니다. 각각의 `MediaStreamTrack`은 하나 이상의 **채널**을 가질 수 있습니다. 채널은, 오디오로 예를 들면 스테레오 오디오 트랙에서의 "왼쪽"과 "오른쪽"처럼, 미디어 스트림의 제일 작은 단위를 나타냅니다.

`MediaStream` 객체는 하나의 **입력**과 하나의 **출력**을 가집니다. `getUserMedia()` (en-US)로 생성한 `MediaStream` 객체는 "로컬" 미디어 스트림이라고 부르며, 사용자의 카메라와 마이크 중 하나를 입력 출처로 사용합니다. 반면 `<video>`, `<audio>` (en-US)와 같은 미디어 요소, 네트워크에서 들어오는 스트림, WebRTC `RTCPeerConnection` (en-US) API로 획득한 스트림, Web Audio API `MediaStreamAudioSourceNode` (en-US)로 생성한 스트림 등은 비 로컬 `MediaStream`이라고 합니다.

`MediaStream` 객체의 출력은 **소비자**(컨슈머)로 연결됩니다. 소비자는 `<video>`, `<audio>` (en-US)와 같은 미디어 요소, WebRTC `RTCPeerConnection` (en-US) API, Web Audio API `MediaStreamAudioSourceNode` (en-US)가 가능합니다.

인터페이스
-----

아래의 참고 문서에서는 Media Capture and Streams API를 구성하는 인터페이스에 대한 기초적인 지식을 찾을 수 있습니다.

* `CanvasCaptureMediaStreamTrack` (en-US)
* `InputDeviceInfo` (en-US)
* `MediaDeviceKind`
* `MediaDeviceInfo` (en-US)
* `MediaDevices`
* `MediaStream` (en-US)
* `MediaStreamEvent` (en-US)
* `MediaStreamTrack`
* `MediaStreamTrackEvent` (en-US)
* `MediaTrackCapabilities`
* `MediaTrackConstraints` (en-US)
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints` (en-US)
* `NavigatorUserMedia`
* `NavigatorUserMediaError`
* `OverconstrainedError` (en-US)
* `URL`

Media Capture and Streams API의 초기 명세는 `MediaStreamTrack`에 기반한 별도의 `AudioStreamTrack`과 `VideoStreamTrack` 인터페이스를 포함했으며, 각자 오디오와 비디오 스트림을 따로 나타냈었습니다. 그러나 이런 구분은 더 이상 존재하지 않으며, 두 인터페이스를 사용하는 코드는 `MediaStreamTrack`을 직접 사용하도록 업데이트해야 합니다.

이벤트
---

* `addtrack` (en-US)
* `ended` (en-US)
* `mute` (en-US)
* `overconstrained` (en-US)
* `removetrack` (en-US)
* `unmute` (en-US)
브라우저 호환성
--------

### api.MediaStream

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

### api.MediaStreamTrack

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

### api.MediaDevices

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

### api.MediaDeviceInfo

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

### api.InputDeviceInfo

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

### api.CanvasCaptureMediaStreamTrack

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

같이 보기
-----

* WebRTC
* `mediaDevices.getUserMedia()` (en-US)
IdleDeadline
============

`IdleDeadline` 인터페이스는 `Window.requestIdleCallback()`을 호출하여 설정된 유휴 콜백(idle callback)에 대한 입력 매개변수(parameter)의 데이터 타입으로 사용됩니다. `timeRemaining()` (en-US) 메서드를 제공하여 사용자 에이전트가 유휴 상태로있을 것으로 추정하는 시간과 속성(property)인 `didTimeout`을 결정할 수있게하여, timeout 기간이 만료되어 콜백이 실행 중인지 여부를 결정할 수 있습니다.

request callback이 작동하는 방식에 대해 자세히알아 보려면, Collaborative Scheduling of Background Tasks 문서를 읽어보세요.

Properties
----------

`IdleDeadline.didTimeout` 읽기 전용
유휴 콜백을 구현할 때 지정한 timeout이 만료되었음에도 콜백이 실행중인 경우, 값이 true인 Boolean 입니다.
Methods
-------

`IdleDeadline.timeRemaining()` (en-US)
현재 유휴 기간(idle period)에 남아있는 밀리초 수를 예측하는 부동 소수점 값인 `DOMHighResTimeStamp` (en-US)를 반환합니다. 유휴 기간이 끝나면 값은 0 입니다. 우리의 콜백은 이것을 반복적으로 호출하여, 반환하기 전에 더 많은 작업을 할 수 있는 충분한 시간이 있는지 확인할 수 있습니다.

Example
-------

Cooperative Scheduling of Background Tasks API의 complete example를 참조하세요.

명세서
---

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-idledeadline-interface |

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

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

See also
--------

* Cooperative Scheduling of Background Tasks API
* `Window.requestIdleCallback()`
* `Window.cancelIdleCallback()` (en-US)
MutationRecord
==============

`MutationRecord` 읽기 전용 인터페이스는 `MutationObserver`에 의해 감지된 각각의 변화를 나타냅니다. `MutationObserver`의 콜백 매개변수로 전달되는 배열의 요소로 사용됩니다.

인스턴스 속성
-------

`MutationRecord.addedNodes` (en-US) 읽기 전용

변경으로 인해 추가된 노드들입니다. 추가된 노드가 없으면 빈 `NodeList`입니다.

`MutationRecord.attributeName` (en-US) 읽기 전용

바뀐 특성의 이름을 나타내는 문자열 또는 `null`입니다.

`MutationRecord.attributeNamespace` (en-US) 읽기 전용

바뀐 특성의 네임스페이스를 나타내는 문자열 또는 `null`입니다.

`MutationRecord.nextSibling` (en-US) 읽기 전용

추가됐거나 제거된 노드의 다음 형제 또는 `null`입니다.

`MutationRecord.oldValue` (en-US) 읽기 전용

`MutationRecord.type` (en-US)에 따라 다른 값입니다.

* `attributes`라면 변경 전 특성의 값입니다.
* `characterData`라면 변경 전 노드의 텍스트 데이터입니다.
* `childList`라면 `null`입니다.

`MutationRecord.previousSibling` (en-US) 읽기 전용

추가됐거나 제거된 노드의 이전 형제 또는 `null`입니다.

`MutationRecord.removedNodes` (en-US) 읽기 전용

변경으로 인해 제거된 노드들입니다. 제거된 노드가 없으면 빈 `NodeList`입니다.

`MutationRecord.target` (en-US) 읽기 전용

변경된 노드입니다. `MutationRecord.type`에 따라 다른 값입니다.

* `attributes`라면 특성이 변경된 노드입니다.
* `characterData`라면 `CharacterData` 노드입니다.
* `childList`라면 자식이 변경된 노드입니다.

`MutationRecord.type` (en-US) 읽기 전용

변경 유형을 나타내는 문자열입니다. 특성 변경이면 `attributes`, `CharacterData` 노드 변경이면 `characterData`, 노드 트리의 변경이면 `childList`입니다.

명세서
---

| Specification |
| --- |
| DOM Standard # interface-mutationrecord |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
인코딩 API
=======

**실험적:** **이 기능은 실험적인 기능입니다.**  
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**인코딩 API**는 character encodings, UTF-8이 아닌 레거시 인코딩을 포함한 다양한 문자열을 제어할 수 있는 매커니즘을 제공한다.

인코딩 API는 4가지 인터페이스를 제공한다. `TextDecoder` (en-US), `TextEncoder` (en-US), `TextDecoderStream` (en-US), `TextEncoderStream` (en-US) 등 이다.

Interfaces
----------

* `TextDecoder` (en-US)
* `TextEncoder` (en-US)
* `TextDecoderStream` (en-US)
* `TextEncoderStream` (en-US)

Tutorials & tools
-----------------

* A shim allowing to use this interface in browsers that don't support it.
* `StringView` – a C-like representation of strings based on typed arrays.
명세서
---

| Specification |
| --- |
| Encoding Standard # interface-textdecoder |
| Encoding Standard # interface-textencoder |
| Encoding Standard # interface-textencoderstream |
| Encoding Standard # interface-textdecoderstream |

Browser compatibility
---------------------

### `TextDecoder`

### api.TextDecoder

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

### api.TextEncoder

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

### api.TextEncoderStream

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

### api.TextDecoderStream

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

### `TextEncoder`

### api.TextDecoder

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

### api.TextEncoder

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

### api.TextEncoderStream

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

### api.TextDecoderStream

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

**실험적:** **이 기능은 실험적인 기능입니다.**  
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCDataChannelEvent()`** 생성자는 `datachannel`을 나타내는 신규 `RTCDataChannelEvent` 객체를 반환합니다. 이 이벤트는 두 피어 사이에서 원격 피어가 `RTCDataChannel` (en-US)을 개통하도록 요청되었을때, `RTCPeerConnection` (en-US) 에 전달됩니다.

WebRTC가 적절한 시기에 생성하고 전달해주기 때문에, `RTCDataChannelEvent`를 직접 생성하는 일은 매우 드물 것입니다. `RTCPeerConnection`에 의해 `datachannel` 이벤트가 받아지는지를 감청하고, 해당 이벤트를 받으면 `RTCDataChannelEvent.channel` 속성을 사용해서 개통된 데이터 채널에 대한 권한을 얻는 것이 일반적입니다.

생성자
---

`RTCDataChannelEvent()`

새로운 `RTCDataChannelEvent`을 생성하는 **`RTCDataChannelEvent()`** 생성자입니다.

속성
--

*`Event`의 속성을 상속합니다.*

`RTCDataChannelEvent.channel` 읽기 전용

읽기 속성인 **`RTCDataChannelEvent.channel`** 는 이벤트와 관련된 RTCDataChannel를 반환합니다.

메소드
---

이 인터페이스에는 메소드가 존재하지 않습니다. 대신, \*`Event`\*의 메소드를 상속합니다.

예시
--

아래의 예제에서는 `datachannel` 이벤트 핸들러를 설정해서 데이터 채널의 참조된 정보를 저장하고, 모니터링 할 이벤트들에 대한 핸들러를 새로 설정합니다. `channel` 속성은 다른 피어와의 연결을 나타내는 `RTCDataChannel` (en-US)을 제공합니다.


```js
pc.ondatachannel = function (event) {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```


데이터 채널을 어떤 방식으로 사용하는지에 대한 더 좋은 예제는 A simple RTCDataChannel sample (en-US)를 확인하십시오.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcdatachannelevent |

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

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

참조
--

* WebRTC (en-US)
* `RTCDataChannel` (en-US)
* `RTCDataChannel.ondatachannel`
* A simple RTCDataChannel sample (en-US)
* `RTCPeerConnection` (en-US) (the target interface for `datachannel` events)
CSS Counter Styles
==================

CSS Counter Styles 모듈은 사용자 정의 카운터 스타일을 정의할 수 있게 해 주며, 이를 CSS 목록 마커 및 생성된 콘텐츠 카운터에 사용할 수 있습니다.

인터페이스
-----

`CSSCounterStyleRule` (en-US)

`@counter-style` (en-US) 규칙을 나타냅니다..

명세서
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-csscounterstylerule-interface |

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

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

같이 보기
-----

* CSS 카운터 사용하기
CSS
===

**`CSS`** 인터페이스는 유용한 CSS 관련 메서드를 가집니다. `CSS` 인터페이스는 정적 속성과 메서드만 가지고 있으며 아무런 객체도 `CSS` 인터페이스를 구현하지 않습니다.

속성
--

*CSS 인터페이스는 유틸리티 인터페이스이며, 이러한 형식의 어떠한 객체도 만들수 없으며 오직 정적 속성으로만 정의할 수 있습니다.*

### 정적 속성

`CSS.paintWorklet` (en-US) 
Experimental
 Secure context

페인팅(painting)에 관련된 모든 클래스를 지닌 워크렛(worklet)에 접근할 수 있습니다.

메서드
---

### 정적 메서드

`CSS.registerProperty()` (en-US)

사용자 지정 CSS 속성 (en-US)을 등록하고 속성 자료형 검사, 기본값, 상속 여부 등을 설정할 수 있습니다.

`CSS.supports()` (en-US)

매개변수로 주어진 속성-값 쌍 또는 조건의 지원 여부를 나타내는 `Boolean`을 반환합니다.

`CSS.escape()` (en-US) 
Experimental

CSS 선택자로 사용할 문자열을 이스케이프해서 반환합니다.

CSS 팩토리 함수 (en-US)

 매개변수로 지정한 값을 담은 새로운 `CSSUnitValue` (en-US)를 생성합니다. 단위는 팩토리 함수의 이름입니다.
 `CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}`

명세
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # namespacedef-css |
| CSS Properties and Values API Level 1  |

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

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

**`MessageEvent`** 는 `WebSocket` 또는 WebRTC `RTCDataChannel` (en-US) 으로 된 타겟으로 부터 전달받은 메시지를 보여주는 interface 입니다.

이 이벤트는 `WebSocket.onmessage` (en-US) 또는 `RTCDataChannel.onmessage` (en-US) 으로 설정된 이벤트 핸들러를 통해 실행이 되게 됩니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

생성자
---

`MessageEvent()` (en-US)

새로운 `MessageEvent를 생성합니다.`

속성
--

*이 interface는 부모 객체인 `Event`의 속성을 상속받습니다.*

`MessageEvent.data` (en-US) 읽기 전용

emitter에 의해 보내진 데이터인 `DOMString`, `Blob` 또는 `ArrayBuffer`를 포함합니다.

`MessageEvent.origin` (en-US)

`DOMString` 입니다.…

`MessageEvent.ports` (en-US)

…

`MessageEvent.source` (en-US)

…

메서드
---

*이 interface는 부모 객체인 `Event`의 메서드를 상속받습니다.*

`MessageEvent.initMessageEvent()` 
지원이 중단되었습니다

 … **더 이상 사용하지 마십시오**
 : `MessageEvent()` (en-US) 생성자를 대신 사용하십시오.


Browser 호환성
-----------

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

See also
--------

* `ExtendableMessageEvent` (en-US), 와 유사한 interface이며, 개발자에게 더 유연성을 제공하기 위해 사용되는 interface 입니다.
* WebSocket API (en-US)
* WebRTC API
HTMLBRElement
=============

**`HTMLBRElement`** 인터페이스는 HTML 줄바꿈 요소(`<br>`)를 나타냅니다. `HTMLElement`를 상속합니다.

속성
--

*부모인 `HTMLElement`로부터 상속합니다.*

`HTMLBRElement.clear` 
지원이 중단되었습니다

떠있는 요소 주변 텍스트의 흐름을 나타내는 `DOMString`입니다.

메서드
---

*부모인 `HTMLElement`로부터 상속합니다.*

명세
--

| Specification |
| --- |
| HTML Standard # htmlbrelement |

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

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

같이 보기
-----

* 인터페이스를 구현하는 HTML 요소 `<br>`.
MediaDevices
============

**`MediaDevices`** 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법입니다.

속성
--

부모 인터페이스인 `EventTarget`의 속성을 상속합니다.

이벤트
---

`devicechange` (en-US)

 사용자 컴퓨터에 미디어 입출력 장치가 추가되거나 제거됐을 때 발생합니다.
 `ondevicechange` (en-US) 속성으로도 사용할 수 있습니다.


메서드
---

부모 인터페이스인 `EventTarget`의 메서드를 상속합니다.

`enumerateDevices()`
시스템에서 사용 가능한 미디어 입출력 장치의 정보를 담은 배열을 가져옵니다.
`getSupportedConstraints()` (en-US)
`MediaStreamTrack` 인터페이스가 지원하는 제약을 나타내는 `MediaTrackSupportedConstraints` (en-US) 호환 객체를 반환합니다.
See [Capabilities and constraints](/ko/docs/Web/API/Media\_Streams\_API#capabilities\_and\_constraints) to learn more about constraints and how to use them.
`getDisplayMedia()` (en-US)
`MediaStream` (en-US)으로 캡처해 공유나 녹화 용도로 사용할 화면 혹은 화면의 일부(창)를 선택하도록 사용자에게 요청합니다. `MediaStream`으로 이행하는 `Promise`를 반환합니다.
`getUserMedia()` (en-US)
사용자에게 권한을 요청한 후, 시스템의 카메라와 오디오 각각 혹은 모두 활성화하여, 장치의 입력 데이터를 비디오/오디오 트랙으로 포함한 `MediaStream` (en-US)을 반환합니다.
예제
--


```js
"use strict";

// Put variables in global scope to make them available to the browser console.
var video = document.querySelector("video");
var constraints = (window.constraints = {
  audio: false,
  video: true,
});
var errorElement = document.querySelector("#errorMsg");

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    var videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log("Using video device: " + videoTracks[0].label);
    stream.onremovetrack = function () {
      console.log("Stream ended");
    };
    window.stream = stream; // make variable available to browser console
    video.srcObject = stream;
  })
  .catch(function (error) {
    if (error.name === "ConstraintNotSatisfiedError") {
      errorMsg(
        "The resolution " +
          constraints.video.width.exact +
          "x" +
          constraints.video.width.exact +
          " px is not supported by your device.",
      );
    } else if (error.name === "PermissionDeniedError") {
      errorMsg(
        "Permissions have not been granted to use your camera and " +
          "microphone, you need to allow the page access to your devices in " +
          "order for the demo to work.",
      );
    }
    errorMsg("getUserMedia error: " + error.name, error);
  });

function errorMsg(msg, error) {
  errorElement.innerHTML += "<p>" + msg + "</p>";
  if (typeof error !== "undefined") {
    console.error(error);
  }
}
```

명세
--

| Specification |
| --- |
| Media Capture and Streams # mediadevices |

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

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

같이 보기
-----

* 인터페이스가 속한 Media Capture and Streams API
* `getDisplayMedia()` (en-US) 메서드를 정의하는 Screen Capture API (en-US)
* WebRTC API
* 장치에 접근할 때 사용할 `MediaDevices` 객체의 참조를 반환하는 `Navigator.mediaDevices`