Location - Web API

Location
========

**`Location`** 인터페이스는 객체가 연결된 장소(URL)를 표현합니다. `Location` 인터페이스에 변경을 가하면 연결된 객체에도 반영되는데, `Document`와 `Window` 인터페이스가 이런 `Location`을 가지고 있습니다. 각각 `Document.location`과 `Window.location` (en-US)으로 접근할 수 있습니다.

속성
--

`Location` 인터페이스는 아무 속성도 상속하지 않지만, `URLUtils`의 속성을 구현합니다.

`Location.href` (en-US)

온전한 URL을 값으로 하는 `DOMString`입니다. 바뀔 경우 연결된 문서도 새로운 페이지로 이동합니다. 연결된 문서와 다른 오리진에서도 설정할 수 있습니다.

`Location.protocol` (en-US)

URL의 프로토콜 부분을 값으로 하는 `DOMString`으로, 마지막의 `':'`도 포함합니다.

`Location.host` (en-US)

URL의 호스트 부분을 값으로 하는 `DOMString`으로, 호스트명, `':'`, 포트 번호를 포함합니다.

`Location.hostname` (en-US)

URL의 도메인 부분을 값으로 하는 `DOMString`입니다.

`Location.port` (en-US)

URL의 포트 번호를 값으로 하는 `DOMString`입니다.

`Location.pathname` (en-US)

`'/'` 문자 뒤 URL의 경로를 값으로 하는 `DOMString`입니다.

`Location.search` (en-US)

`'?'` 문자 뒤 URL의 쿼리스트링을 값으로 하는 `DOMString`입니다. 모던 브라우저에서는 `URLSearchParams.get()`과 `URL.searchParams`를 사용해서 인자를 쉽게 추출할 수 있습니다.

`Location.hash` (en-US)

`'#'` 문자 뒤 URL의 프래그먼트 식별자를 값으로 하는 `DOMString`입니다.

`Location.username` (en-US)

도메인 이름 이전에 명시된 사용자명을 값으로 하는 `DOMString`입니다.

`Location.password` (en-US)

도메인 이름 이전에 명시된 비밀번호를 값으로 하는 `DOMString`입니다.

`Location.origin` (en-US) 읽기 전용

지정한 장소 오리진의 표준 형태를 값으로 하는 `DOMString`입니다.

메서드
---

`Location` 인터페이스는 아무 메서드도 상속하지 않지만, `URLUtils`의 메서드를 구현합니다.

`Location.assign()` (en-US)

주어진 URL의 리소스를 불러옵니다.

`Location.reload()`

현재 URL의 리소스를 다시 불러옵니다. 선택적으로 매개변수에 `true`를 제공해 브라우저 캐시를 무시하고 서버에서 새로 불러올 수 있습니다,

`Location.replace()`

Replaces the current resource with the one at the provided URL. The difference from the `assign()` method is that after using `replace()` the current page will not be saved in session `History`, meaning the user won't be able to use the *back* button to navigate to it.

`Location.toString()` (en-US)

Returns a `DOMString` containing the whole URL. It is a synonym for `URLUtils.href`, though it can't be used to modify the value.

예제
--

```js
// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
var url = document.createElement("a");
url.href =
  "https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container";
console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org:8080
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // 8080
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org:8080
```

명세
--

| Specification |
| --- |
| HTML Standard # the-location-interface |

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

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

같이 보기
-----

* Two methods creating such an object: `Window.location` (en-US) and `Document.location`.
* URL related interfaces: `URL`, `URLSearchParams` and `HTMLHyperlinkElementUtils`


Gamepad API - Web API

Gamepad API
===========

**게임패드 API**는 게임패드와 다른 게임 제어장치의 신호에 쉬운 일관된 방식으로 접근하고 응답하는 개발자들을 위한 수단이다. 게임패드 API는 세 가지 인터페이스와연결, 연결 해제되고 게임 패드 자체에 대한 다른 정보에 접근하고 어떤 버튼과 다른 조작 장치들이 현재 눌린 것에 응답하는 두 가지 이벤트 그리고 한 가지 특수 기능이 포함되어 있다.

인터페이스
-----

`Gamepad` (en-US)

컴퓨터에 연결된 게임패드나 조작장치를 표현한다.

`GamepadButton` (en-US)

연결된 조작장치들 중 하나에 있는 버튼을 표현한다.

`GamepadEvent` (en-US)

게임 패드와 연관된 이벤트를 나타내는 이벤트 객체이다.

### 게임패드 확장기능 실험

`GamepadHapticActuator` (en-US)

Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.

`GamepadPose` (en-US)

Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a WebVR (en-US) controller.

다음 정보를엑세스할 수 있는 게임패드 인터페이스 확장기능 (en-US) 더보기

### 다른 인터페이스로 확장

#### Navigator

`Navigator.getGamepads()` (en-US)

An extension to the `Navigator` object that returns an array of `Gamepad` (en-US) objects, one for each connected gamepad.

#### Window events

`Window.ongamepadconnected` (en-US)

Represents an event handler that will run when a gamepad is connected (when the `gamepadconnected (en-US)` event fires).

`Window.ongamepaddisconnected` (en-US)

Represents an event handler that will run when a gamepad is disconnected (when the `gamepaddisconnected (en-US)` event fires).

튜토리얼과 가이드
---------

* Using the Gamepad API (en-US)
* Implementing controls using the Gamepad API (en-US)
명세서
---

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

더보기
---

* The Gamepad API by Ted Mielczarek and Robert Nyman
* Simple API demo page (source)


AudioBuffer - Web API

AudioBuffer
===========

**`AudioBuffer`** 인터페이스는 메모리에 상주하는 짧은 오디오 에셋을 나타내는데, 이는 `AudioContext.decodeAudioData()` (en-US) 메서드를 사용하여 오디오 파일로부터 생성되거나, `AudioContext.createBuffer()` (en-US)를 사용하여 가공되지 않은(raw) 데이터로부터 생성될 수 있습니다. 한 번 AudioBuffer에 입력되고 나면, 이 오디오는 `AudioBufferSourceNode`에 전달됨으로써 재생될 수 있습니다.

이 유형의 객체는 작은 오디오 스니펫을 붙잡기 위해 설계되었고, 보통 45초보다 작습니다. 더 긴 사운드에 대해서는, `MediaElementAudioSourceNode` (en-US)를 구현하는 객체가 더욱 적합합니다. 버퍼는 데이터를 다음의 포맷으로 포함합니다. non-interleaved IEEE754 32비트 선형 PCM이며, 명목상의 범위는 `-1` 과 `+1` 사이입니다. 즉, 32비트 부동 소수점 버퍼이고, 각 샘플은 -1.0과 1.0사이에 있습니다. 만약 `AudioBuffer`가 다수의 채널을 가지고 있다면, 이 채널들은 별도의 버퍼에 저장됩니다.

생성자
---

`AudioBuffer()` (en-US)

새로운 `AudioBuffer` 객체 인스턴스를 생성하고 반환합니다.

속성
--

`AudioBuffer.sampleRate` (en-US) 읽기 전용

버퍼에 저장된 PCM 데이터의 샘플 레이트를 초당 샘플로 나타내는 float을 반환합니다.

`AudioBuffer.length` (en-US) 읽기 전용

버퍼에 저장된 PCM 데이터의 길이를 샘플 프레임으로 나타내는 integer를 반환합니다.

`AudioBuffer.duration` (en-US) 읽기 전용

버퍼 내에 저장된 PCM 데이터의 재생 길이를 초로 나타내는 double을 반환합니다.

`AudioBuffer.numberOfChannels` (en-US) 읽기 전용

버퍼 내에 저장된 PCM 데이터에 의해 기술되는 개별 오디오 채널의 수를 나타내는 integer를 반환합니다.

메서드
---

`AudioBuffer.getChannelData()` (en-US)

채널과 연관된 PCM 데이터를 포함하고 있는 `Float32Array`를 반환하는데, 이 채널은 `channel` 매개변수에 의해 정의됩니다 (`0` 은 첫번째 채널을 나타냅니다).

`AudioBuffer.copyFromChannel()` (en-US)

`AudioBuffer` 의 명시된 채널로부터 `destination` 배열에 샘플을 복제합니다.

`AudioBuffer.copyToChannel()` (en-US)

`source` 배열로부터, `AudioBuffer` 의 명시된 채널에 샘플을 복제합니다.

예제
--

다음의 간단한 예제는 어떻게 `AudioBuffer` 를 생성하고 무작위 백색소음으로 `AudioBuffer` 를 채우는지 보여줍니다. 전체 소스 코드는 webaudio-examples 레포지토리에서 찾을 수 있고, 작동 예제도 볼 수 있습니다.

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// AudioContext의 샘플 레이트를 가지는 빈 3초짜리 스테레오 버퍼를 생성합니다.
var myArrayBuffer = audioCtx.createBuffer(
  2,
  audioCtx.sampleRate \* 3,
  audioCtx.sampleRate,
);

// 버퍼를 백색소음으로 채웁니다
// 단순히 -1.0과 1.0사이의 무작위 값
for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
  // 이는 데이터를 포함하고 있는 실제 배열을 줍니다
  var nowBuffering = myArrayBuffer.getChannelData(channel);
  for (var i = 0; i < myArrayBuffer.length; i++) {
    // Math.random()은 [0, 1.0]에 있습니다
    // 오디오는 [-1.0, 1.0]에 있을 필요가 있습니다
    nowBuffering[i] = Math.random() \* 2 - 1;
  }
}

// AudioBufferSourceNode를 얻습니다.
// 이것이 AudioBuffer를 재생하기를 원할 때 사용할 AudioNode입니다
var source = audioCtx.createBufferSource();

// AudioBufferSourceNode에 버퍼를 설정합니다
source.buffer = myArrayBuffer;

// AudioBufferSourceNode를 목적지에
// 연결해 소리가 나오게 합니다
source.connect(audioCtx.destination);

// 소스 재생을 시작합니다
source.start();
```

명세서
---

| Specification |
| --- |
| Web Audio API # AudioBuffer |

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

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

같이 보기
-----

* Web Audio API 사용하기


SVGRect - Web API

SVGRect
=======

**`SVGRect`** 인터페이스는 직사각형을 나타냅니다. 직사각형은 최소 `x` 값과 최소 `y` 값을 가리키는 좌표쌍, 그리고 양수인 `width`와 `height` 값으로 구성됩니다.

**`SVGRect`** 객체는 읽기 전용으로 지정될 수 있습니다. 읽기 전용일 경우 객체를 수정하려고 시도하면 예외가 발생합니다.

속성
--

`SVGRect.x`

이 좌표의 정확한 효과는 요소에 따라 다릅니다. `x` 특성을 지정하지 않은 경우 `0`을 지정한 것과 동일하게 취급합니다.

`SVGRect.y`

이 좌표의 정확한 효과는 요소에 따라 다릅니다. `y` 특성을 지정하지 않은 경우 `0`을 지정한 것과 동일하게 취급합니다.

`SVGRect.width`

직사각형의 너비를 나타냅니다. 음수로 설정하려고 시도하면 오류가 발생합니다. `0`일 경우 요소를 렌더링하지 않습니다.

`SVGRect.height`

직사각형의 높이를 나타냅니다. 음수로 설정하려고 시도하면 오류가 발생합니다. `0`일 경우 요소를 렌더링하지 않습니다.

메서드
---

없음.

명세
--

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMRect |

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

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


Fetch API - Web API

Fetch API
=========

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, `XMLHttpRequest`보다 강력하고 유연한 대체제입니다.

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

개념과 사용법
-------

Fetch API는 `Request`와 `Response` 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고, CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함하고 있습니다.

요청을 생성하고 리소스를 취득하려면 `fetch` 메서드를 사용하세요. `fetch()`는 `Window`와 `Worker` (en-US) 컨텍스트 양쪽에서 모두 사용할 수 있는 전역 메서드입니다. 그러므로 리소스를 취득할 상황이 생기는 거의 모든 컨텍스트에서 사용할 수 있습니다.

`fetch()` 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받습니다. 반환 값은 해당 요청에 대한 `Response`로 이행하는 `Promise`인데, 서버가 헤더를 포함한 응답을 하는 순간 이행합니다. 이는 **서버가 HTTP 오류 응답 코드로 응답해도 이행한다는 뜻**입니다. 선택 사항으로, 두 번째 매개변수에 `init` 옵션 객체를 제공할 수 있습니다(`Request` 를 참고하세요).

`Response`를 가져온 후에는 본문 콘텐츠의 유형과 처리 방법을 정의할 수 있는 다양한 메서드를 사용할 수 있습니다.

`Request()`와 `Response()` (en-US) 생성자를 직접 호출해서 요청과 응답을 생성할 수 있지만, 이런 사용법은 흔치 않습니다. 보통 이 두 객체는 다른 API(예를 들어, 서비스 워커의 `FetchEvent.respondWith()` (en-US))에 의해 생성됩니다.

Fetch API가 제공하는 기능의 자세한 정보는 Fetch 사용하기에서, 개념 학습은 Fetch 기본 개념에서 확인하세요.

Fetch 인터페이스
-----------

`fetch()`

리소스를 취득하기 위한 `fetch()` 메서드입니다.

`Headers` (en-US)

요청/응답 헤더를 나타냅니다. 헤더를 질의하고 그 결과에 따라 다양한 동작을 취하기 위해 사용할 수 있습니다.

`Request`

리소스 요청을 나타냅니다.

`Response`

요청에 대한 응답을 나타냅니다.

명세서
---

| Specification |
| --- |
| Fetch Standard # fetch-method |

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

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

관련정보
----

* Fetch 사용하기
* Service Worker API
* HTTP 접근 제어 (CORS)
* HTTP
* Fetch 폴리필
* Fetch 기본 개념


ValidityState - Web API

ValidityState
=============

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`ValidityState`** 인터페이스는 제약 유효성 검사에 대해 요소가 가질 수 있는 유효성 상태를 나타내며, 요소의 값이 유효하지 않은 경우 그 이유에 대한 설명을 도와줍니다.

속성
--

각각의 `Boolean` 속성에 대해, `true` 값은 해당 이유로 인해 값의 유효성 검사를 실패했음을 나타냅니다. **`valid`** 속성은 예외로서 `true`는 모든 제약조건을 통과했음을 의미합니다.

`badInput` (en-US) 읽기 전용

사용자가 입력한 값을 브라우저가 변환하지 못했음을 나타내는 `Boolean` 값입니다.

`customError` 읽기 전용

`setCustomValidity()` (en-US) 메서드를 사용해 요소의 사용자 지정 유효성 메시지를 비어있지 않은 문자열로 설정했는지를 나타내는 `Boolean` 값입니다.

`patternMismatch` (en-US) 읽기 전용

값이 주어진 `pattern` (en-US) 특성을 만족하지 못하는지 나타내는 `Boolean` 값입니다 참일 경우, CSS `:invalid` (en-US) 의사 클래스를 만족합니다.

`rangeOverflow` (en-US) 읽기 전용

값이 주어진 `max` (en-US) 특성보다 큰지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`rangeUnderflow` (en-US) 읽기 전용

값이 주어진 `min` (en-US) 특성보다 작은지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`stepMismatch` (en-US) 읽기 전용

값이 주어진 `step` (en-US) 특성의 규칙을 만족하지 않는지 (즉, 값을 스텝 값으로 나눌 수 없는지) 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`tooLong` (en-US) 읽기 전용

값이 `HTMLInputElement` (en-US) 또는 `HTMLTextAreaElement` (en-US) 객체의 `maxlength` 값보다 긴지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`tooShort` (en-US) 읽기 전용

값이 `HTMLInputElement` (en-US) 또는 `HTMLTextAreaElement` (en-US) 객체의 `minLength` 값보다 짧은지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`typeMismatch` (en-US) 읽기 전용

값이 입력 유형에서 요구하는 형식(`type` (en-US)이 `email`이나 `url`인 경우)에 맞지 않는지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US) 의사 클래스를 만족합니다.

`valid` 읽기 전용

요소가 모든 유효성 제약을 만족하여 유효한 상태인지 나타내는 `Boolean` 값입니다. 참일 경우 CSS `:valid` (en-US) 의사 클래스를, 거짓일 경우 `:invalid` (en-US) 의사 클래스를 만족합니다.

`valueMissing` (en-US) 읽기 전용

요소가 `required` (en-US) 특성을 가지고 있지만 값은 없는 경우 참인 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US) 의사 클래스를 만족합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-constraint-validation-api:validitystate-3 |

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

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

같이 보기
-----

* Guide: Constraint validation (en-US)
* Tutorial: Form data validation (en-US)


디바이스 방향 이벤트 - Web API

디바이스 방향 이벤트
===========

디바이스 방향 이벤트는 디바이스의 물리적 방향을 감지 (en-US)할 수 있을 뿐만 아니라, 디바이스의 동작을 감지 (en-US)햘 수 있는 이벤트입니다.

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

모바일 디바이스에는 일반적으로 자이로스코프, 나침반, 가속도계 등의 센서가 탑재되어 있어 디바이스에서 실행 중인 애플리케이션이 디바이스의 방향과 동작을 감지할 수 있습니다.

디바이스 방향 이벤트를 사용하면 사용자 디바이스의 방향에 따라 동작을 변경할 수 있고, 사용자가 디바이스를 움직일 때 반응할 수 있는 웹 애플리케이션을 개발할 수 있습니다.

디바이스 방향 이벤트를 사용할 수 있는 몇 가지 일반적인 기능은 다음과 같습니다.

* 웹 기반 게임에서 사용자가 디바이스를 기울이고 움직여 게임 내 캐릭터나 오브젝트의 동작을 제어할 수 있도록 하는 기능입니다.
* 지도 기반 애플리케이션에서 디바이스의 위치에 따라 지도의 방향을 변경하거나, 사용자의 움직임에 따라 업데이트되는 길 안내를 제공합니다.
* 제스처 인식을 위해 사용되며, 예를 들어 사용자가 기기를 흔들면 '흔들기' 제스처를 인식하고, 이를 사용하여 사용자가 기기를 흔들 때 입력 영역을 지우는 등의 작업을 수행하는 데 활용됩니다.

**참고:** 이 API는 모바일 브라우저에서 광범위하게 지원됩니다. 일부 데스크톱 전용 브라우저에는 하드웨어 차이로 인해 제한이 있을 수 있지만, 센서가 장착된 디바이스에서 API가 주로 사용됨을 고려할 때 이러한 제약은 그다지 중요하지 않습니다.

인터페이스
-----

`DeviceOrientationEvent` (en-US)

디바이스의 물리적 방향 변화를 나타냅니다.

`DeviceMotionEvent` (en-US)

디바이스의 가속도 및 회전 속도의 변화를 나타냅니다.

`DeviceMotionEventAcceleration` (en-US)

디바이스가 모든 세 축을 따라 경험하고 있는 가속도를 나타냅니다.

`DeviceMotionEventRotationRate` (en-US)

디바이스가 세 축을 중심으로 회전하는 속도를 나타냅니다.

이벤트
---

`deviceorientation` (en-US)

지구 좌표 프레임(Earth coordinate frame)과 비교하여 디바이스의 현재 방향에 대한 새로운 데이터를 디바이스에서 사용 가능할 때 발생합니다.

`devicemotion` (en-US)

일정한 간격으로 발생하며, 해당 시점에 디바이스가 받는 물리적 가속도와 디바이스의 회전 속도를 나타냅니다.

`deviceorientationabsolute` (en-US)

절대 디바이스 방향이 변경될 때 발생합니다.

명세서
---

| Specification |
| --- |
| DeviceOrientation Event Specification  |

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

### api.Window.deviceorientation\_event

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

### api.Window.devicemotion\_event

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

### api.Window.deviceorientationabsolute\_event

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

### api.DeviceOrientationEvent

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

### api.DeviceMotionEvent

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

### api.DeviceMotionEventAcceleration

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

### api.DeviceMotionEventRotationRate

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

같이 보기
-----

* web.dev의 디바이스의 방향 & 움직임


DocumentFragment - Web API

DocumentFragment
================

**`DocumentFragment`** 인터페이스는 아주 작고 부모를 갖지 않는 문서 객체를 나타냅니다.

`DocumentFragment`는 일반 문서처럼 노드로 구성된 문서 구조를 저장할 수 있으므로 `Document`의 가벼운 버전으로 사용됩니다. `Document`와의 중요한 차이점으로, `DocumentFragment`는 활성화된 문서 트리 구조의 일부가 아니기 때문에 내부의 트리를 변경해도 문서나 성능에 아무 영향도 주지 않으며 리플로우도 방지할 수 있습니다.

EventTarget

Node

(en-US)

DocumentFragment생성자
---

`DocumentFragment()` (en-US)

새로운 `DocumentFragment` 객체를 생성하여 반환합니다.

속성
--

부모인 `Node` (en-US)의 속성을 상속합니다.

`DocumentFragment.childElementCount` (en-US) 읽기 전용

`DocumentFragment`가 포함한 자식 `Element` (en-US)의 수를 반환합니다.

`DocumentFragment.children` (en-US) 읽기 전용

`DocumentFragment` 객체의 자식 `Element` (en-US)를 전부 포함하는 실시간 `HTMLCollection`을 반환합니다.

`DocumentFragment.firstElementChild` (en-US) 읽기 전용

`DocumentFragment` 객체의 첫번째 자식 `Element` (en-US)를 반환합니다. 자식이 없으면 `null`을 반환합니다.

`DocumentFragment.lastElementChild` (en-US) 읽기 전용

`DocumentFragment` 객체의 마지막 자식 `Element` (en-US)를 반환합니다. 자식이 없으면 `null`을 반환합니다.

메서드
---

부모인 `Node` (en-US)의 메서드를 상속합니다.

`DocumentFragment.append()` (en-US)

`DocumentFragment`의 마지막 자식 뒤에 `Node` (en-US) 객체들이나 문자열 객체들을 추가합니다.

`DocumentFragment.prepend()` (en-US)

`DocumentFragment`의 첫 번째 자식 앞에 `Node` (en-US) 객체들이나 문자열 객체들을 추가합니다.

`DocumentFragment.querySelector()` (en-US)

`DocumentFragment` 내에서, 주어진 선택자와 일치하는 첫 번째 `Element` (en-US) 노드를 반환합니다.

`DocumentFragment.querySelectorAll()` (en-US)

`DocumentFragment` 내에서, 주어진 선택자와 일치하는 모든 `Element` (en-US) 노드를 포함한 `NodeList`를 반환합니다.

`DocumentFragment.replaceChildren()` (en-US)

`DocumentFragment` 내의 자식 하나를 일련의 새로운 자식으로 대체합니다.

`DocumentFragment.getElementById()` (en-US)

`DocumentFragment` 내에서, 주어진 ID와 일치하는 첫 번째 `Element` (en-US) 노드를 반환합니다. `Document.getElementById()`와 기능적으로 동일합니다.

사용 일람
-----

`DocumentFragment`의 일반적인 용도는 그 안에 DOM 하위 트리를 조립한 다음, `Node` (en-US) 인터페이스의 `appendChild()`나 `insertBefore()` (en-US)와 같은 메서드로 DOM에 하위 트리를 삽입하는 것입니다. 이 방법을 사용하면 `DocumentFragment`의 노드들이 모두 DOM으로 이동하고 빈 `DocumentFragment`만 남게 됩니다. 이때 모든 노드가 한 번에 문서에 삽입되기 때문에 리플로우도 한 번만 발생합니다. 반면 노드를 각각 하나씩 삽입했다면, 최악의 경우 매 삽입마다 리플로우가 발생했을 겁니다.

`DocumentFragment`는 웹 컴포넌트에서도 유용하게 쓰입니다. 예컨대 `<template>` 요소의 `HTMLTemplateElement.content` (en-US) 속성이 `DocumentFragment`입니다.

`document.createDocumentFragment()` 메서드나 `DocumentFragment()` (en-US) 생성자를 사용해서 빈 `DocumentFragment`를 만들 수 있습니다.

예제
--

### HTML

```html
<ul id="list"></ul>
```

### JavaScript

```js
const list = document.querySelector("#list");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

fruits.forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);
```

### 결과

명세
--

| Specification |
| --- |
| DOM Standard # interface-documentfragment |

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

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


AnalyserNode - Web API

AnalyserNode
============

**`AnalyserNode`** 인터페이스는 실시간 주파수와 시간 영역 분석 정보를 제공 가능한 노드를 표현합니다. 이것은 변경되지 않은 오디오 스트림을 입력에서 출력으로 전달하지만, 여러분은 생성된 데이터를 얻고, 그것을 처리하고, 오디오 시각화를 생성할 수 있습니다.

`AnalyserNode`는 정확히 하나의 입력과 하나의 출력을 가집니다. 이 노드는 출력이 연결되지 않았더라도 작동합니다.

![오디오 스트림을 수정하지 않고, 이 노드는 FFT를 사용하여 이것에 관련된 주파수와 시간 영역의 데이터를 얻을 수 있게 합니다.](/ko/docs/Web/API/AnalyserNode/fttaudiodata_en.svg)

| 입력의 수 | `1` |
| --- | --- |
| 출력의 수 | `1` (그러나 연결되지 않은 채로 남아있을지도 모릅니다) |
| Channel count mode | `"max"` |
| Channel count | `2` |
| Channel interpretation | `"speakers"` |

상속
--

이 인터페이스는 다음의 부모 인터페이스들로부터 상속받습니다:

EventTarget

AudioNode

AnalyserNode생성자
---

`AnalyserNode()`

`AnalyserNode` 객체의 새로운 인스턴스를 생성합니다.

속성
--

*부모인 `AudioNode`로부터 속성을 상속받습니다*.

`AnalyserNode.fftSize`

주파수 영역을 결정하는 데 사용될 FFT(Fast Fourier Transform)의 사이즈를 나타내는 unsigned long 값입니다.

`AnalyserNode.frequencyBinCount` 읽기 전용

FFT 사이즈 값의 절반인 unsigned long 값입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.

`AnalyserNode.minDecibels`

unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 `getByteFrequencyData()`를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.

`AnalyserNode.maxDecibels`

unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 `getByteFrequencyData()`를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.

`AnalyserNode.smoothingTimeConstant`

마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다 — 기본적으로, 이것은 시간에 대한 값 사이의 전환을 더 매끄럽게 만듭니다.

메서드
---

*부모인 `AudioNode`로부터 메서드를 상속받습니다*.

`AnalyserNode.getFloatFrequencyData()`

전달된 `Float32Array` (en-US) 배열 내로 현재 주파수 데이터를 복사합니다.

`AnalyserNode.getByteFrequencyData()`

전달된 `Uint8Array` (en-US) (unsiged byte array) 내로 현재 주파수 데이터를 복사합니다.

`AnalyserNode.getFloatTimeDomainData()`

전달된 `Float32Array` (en-US) 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.

`AnalyserNode.getByteTimeDomainData()`

전달된 `Uint8Array` (en-US) (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.

예제
--

**참고:** 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 Web Audio API 시각화 가이드를 참고하세요.

### 기본 사용

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// ...

var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;

var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// 분석될 소스에 연결합니다
source.connect(analyser);

// ID "oscilloscope"로 정의된 canvas를 얻습니다
var canvas = document.getElementById("oscilloscope");
var canvasCtx = canvas.getContext("2d");

// 현재 오디오 소스의 오실로스코프를 그립니다

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0, 0, 0)";

  canvasCtx.beginPath();

  var sliceWidth = (canvas.width \* 1.0) / bufferLength;
  var x = 0;

  for (var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] / 128.0;
    var y = (v \* canvas.height) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();
```

명세
--

| Specification |
| --- |
| Web Audio API # AnalyserNode |

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

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

같이 보기
-----

* Web Audio API 사용하기


Window - Web API

Window
======

**`Window`** 인터페이스는 DOM 문서를 담은 창을 나타냅니다. `document` 속성이 창에 불러온 DOM 문서를 가리킵니다.

주어진 문서의 창은 `document.defaultView`를 사용해 접근할 수 있습니다.

현재 스크립트가 작동 중인 창을 나타내는 전역 변수 `window`를 JavaScript 코드에서 접근할 수 있습니다.

`Window` 인터페이스는 다양한 함수, 이름공간, 객체, 생성자가 머무는 장소입니다. 그 중엔 사용자 인터페이스로서의 창 개념과는 직접 관련되지 않은 것도 존재하며, 대신 전역적으로 접근할 수 있어야 하는 항목에 적합합니다. 많은 수의 항목이 JavaScript 참고서와 DOM 참고서에 문서화되어 있습니다.

탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 `Window` 객체로 나타냅니다. 주어진 탭에서 동작 중인 JavaScript 코드의 전역 `window` 객체는 항상 자신의 탭을 나타냅니다. 그렇지만 `resizeTo()`와 `innerHeight`처럼, 일부 속성과 메서드는 탭이 아니라 창에 적용됩니다. 보통 탭과 합리적으로는 연관 지을 수 없는 경우 창에 속합니다.

EventTarget

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

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

`Window.caches` (en-US) 읽기 전용

현재 컨텍스트와 연관된 `CacheStorage` (en-US) 객체를 반환합니다. `CacheStorage`는 오프라인에서의 사용을 위한 자산 저장과, 요청에 대한 사용자 정의 응답을 생성할 때 사용할 수 있습니다.

`Window.clientInformation` 읽기 전용

`Window.navigator`의 별칭입니다.

`Window.closed` 읽기 전용

현재 창이 닫혔는지 나타냅니다.

`Window.console` 읽기 전용

브라우저 디버깅 콘솔에 접근할 수 있는 콘솔 객체를 반환합니다.

`Window.credentialless` (en-US) 읽기 전용
Experimental

비표준

현재 문서가 자격 증명 없는 `<iframe>` (en-US) 내에서 불러와졌는지 나타내는 불리언입니다. IFrame credentialless에서 자세한 정보를 확인하세요.

`Window.crypto` 읽기 전용

브라우저 암호화 객체를 반환합니다.

`Window.customElements` 읽기 전용

새로운 사용자 정의 요소를 등록하거나 이전에 등록한 요소에 대한 정보를 얻을 수 있는, `CustomElementRegistry` 객체의 참조를 반환합니다.

`Window.devicePixelRatio` 읽기 전용

현재 화면에서의 물리적 픽셀과 CSS 픽셀의 비율을 반환합니다.

`Window.document` 읽기 전용

창이 포함하는 문서로의 참조를 반환합니다.

`Window.frameElement` 읽기 전용

이 창을 삽입했을 때 사용한 요소를 반환합니다. 창이 문서 내에 삽입된 것이 아니면 `null`을 반환합니다.

`Window.frames` (en-US) 읽기 전용

현재 창의 하위 프레임을 배열로 반환합니다.

`Window.fullScreen` (en-US)
비표준

현재 창을 전체 화면으로 보여주고 있는지 나타냅니다.

`Window.history` 읽기 전용

`History` 객체 참조를 반환합니다.

`Window.indexedDB` (en-US) 읽기 전용

인덱싱된 데이터베이스로의 비동기적 접근 기능을 제공하는 `IDBFactory` (en-US) 객체를 반환합니다.

`Window.innerHeight` 읽기 전용

브라우저 창의 콘텐츠 영역 높이를 반환합니다. 수평 스크롤바가 존재하면 그 높이도 포함합니다.

`Window.innerWidth` 읽기 전용

브라우저 창의 콘텐츠 영역 너비를 반환합니다. 수직 스크롤바가 존재하면 그 높이도 포함합니다.

`Window.isSecureContext` (en-US) 읽기 전용

현재 컨텍스트가 안전한지 (`true`) 안전하지 않은지 (`false`) 나타내는 불리언을 반환합니다.

`Window.launchQueue` (en-US) 읽기 전용
Experimental

PWA에서, `launch_handler` (en-US) `client_mode`의 값이 `focus-existing`, `navigate-new`, `navigate-existing` 중 하나라면, `launchQueue`는 `LaunchQueue` (en-US) 클래스로의 접근을 제공합니다. `LaunchQueue`를 활용하면 PWA의 실행 탐색 처리를 직접 구현할 수 있습니다.

`Window.length` 읽기 전용

창 내의 프레임 수를 반환합니다. `window.frames` (en-US)도 확인하세요.

`Window.location` (en-US)

창의 위치, 즉 현재 URL을 가져오거나 설정합니다.

`Window.locationbar` (en-US) 읽기 전용

`locationbar` 객체를 반환합니다.

`Window.localStorage` 읽기 전용

현재 출처에서만 접근하여 데이터를 저장할 수 있는 로컬 저장소 객체를 반환합니다.

`Window.menubar` (en-US) 읽기 전용

`menubar` 객체를 반환합니다.

`Window.mozInnerScreenX` (en-US) 읽기 전용
비표준

창의 뷰포트 왼쪽 위 꼭짓점 X축 좌표를 화면 좌표계 기준으로 반환합니다. 이 값은 CSS 픽셀 단위입니다. 화면 픽셀로 변환이 필요하면 `nsIDOMWindowUtils`의 `mozScreenPixelsPerCSSPixel`에서 변환비를 가져올 수 있습니다.

`Window.mozInnerScreenY` (en-US) 읽기 전용
비표준

창의 뷰포트 왼쪽 위 꼭짓점 Y축 좌표를 화면 좌표계 기준으로 반환합니다. 이 값은 CSS 픽셀 단위입니다. 화면 픽셀로 변환이 필요하면 `nsIDOMWindowUtils`의 `mozScreenPixelsPerCSSPixel`에서 변환비를 가져올 수 있습니다.

`Window.name`

창의 이름을 가져오거나 설정합니다.

`Window.navigation` (en-US) 읽기 전용
Experimental

`window`의 `Navigation` (en-US) 객체를 반환합니다. Navigation API (en-US)의 진입점입니다.

`Window.navigator` 읽기 전용

`Navigator` 객체의 참조를 반환합니다.

`Window.opener`

현재 창을 연 창의 참조를 반환합니다.

`Window.origin` (en-US) 읽기 전용

전역 객체의 출처를 문자열로 직렬화해 반환합니다.

`Window.outerHeight` (en-US) 읽기 전용

브라우저 창 외곽 높이를 반환합니다.

`Window.outerWidth` 읽기 전용

브라우저 창 외곽 너비를 반환합니다.

`Window.pageXOffset` 읽기 전용

`window.scrollX`의 별칭입니다.

`Window.pageYOffset` 읽기 전용

`window.scrollY`의 별칭입니다.

`Window.parent` (en-US) 읽기 전용

현재 창 또는 하위 프레임의 부모 참조를 반환합니다.

`Window.performance` (en-US) 읽기 전용

`Performance` (en-US) 객체를 반환합니다. 이 객체의 `timing` (en-US), `navigation` (en-US) 특성 등은 각각 성능 관련 데이터를 제공하는 객체입니다. 탐색 타이밍 사용하기 (en-US)에서 추가 정보와 예제를 확인하세요.

`Window.personalbar` (en-US) 읽기 전용

`personalbar` 객체를 반환합니다.

`Window.scheduler` (en-US) 읽기 전용

현재 컨텍스트와 연관된 `Scheduler` (en-US) 객체를 반환합니다. Prioritized Task Scheduling API (en-US)의 진입점입니다.

`Window.screen` (en-US) 읽기 전용

이 창에 연관된 화면 객체를 반환합니다.

`Window.screenX` (en-US), `Window.screenLeft` (en-US) 읽기 전용

두 속성 모두 사용자의 브라우저 뷰포트의 왼쪽 테두리와 화면 왼쪽 모서리의 거리를 반환합니다.

`Window.screenY` (en-US), `Window.screenTop` (en-US) 읽기 전용

두 속성 모두 사용자의 브라우저 뷰포트의 위쪽 테두리와 화면 위쪽 모서리의 거리를 반환합니다.

`Window.scrollbars` (en-US) 읽기 전용

`scrollbars` 객체를 반환합니다.

`Window.scrollMaxX` (en-US)
비표준
 읽기 전용

창을 수펑으로 스크롤할 수 있는 최대 거리, 즉 문서 너비에서 뷰포트 너비를 뺀 값입니다.

`Window.scrollMaxY` (en-US)
비표준
 읽기 전용

창을 수직으로 스크롤할 수 있는 최대 거리, 즉 문서 높이에서 뷰포트 높이를 뺀 값입니다.

`Window.scrollX` 읽기 전용

문서가 수평으로 스크롤된 픽셀 수를 반환합니다.

`Window.scrollY` 읽기 전용

문서가 수직으로 스크롤된 픽셀 수를 반환합니다.

`Window.self` 읽기 전용

창 객체 스스로를 가리키는 참조를 반환합니다.

`Window.sessionStorage`

현재 출처에서만 접근하여 데이터를 저장할 수 있는 세션 저장소 객체를 반환합니다.

`Window.speechSynthesis` (en-US) 읽기 전용

음성 합성을 위한 `SpeechSynthesis` (en-US) 객체를 반환합니다. Web Speech API의 진입점입니다.

`Window.statusbar` (en-US) 읽기 전용

`statusbar` 객체를 반환합니다.

`Window.toolbar` 읽기 전용

`toolbar` 객체를 반환합니다.

`Window.top` (en-US) 읽기 전용

창 계층 구조에서 최상위인 창을 반환합니다.

`Window.visualViewport` (en-US) 읽기 전용

창의 시각적 뷰포트를 나타내는 `VisualViewport` (en-US) 객체를 반환합니다.

`Window.window` (en-US) 읽기 전용

현재 창으로의 참조를 반환합니다.

`window[0]`, `window[1]`, ...

프레임의 `window` 객체 참조를 반환합니다. 자세한 내용은 `Window.frames` (en-US)에서 확인하세요.

### Deprecated properties

`Window.content` (en-US) and `Window._content`
지원이 중단되었습니다

비표준
 읽기 전용

Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.

`Window.defaultStatus`
지원이 중단되었습니다

Gets/sets the status bar text for the given window.

`Window.event`
지원이 중단되었습니다
 읽기 전용

Returns the **current event**, which is the event currently being handled by the JavaScript code's context, or `undefined` if no event is currently being handled. The `Event` object passed directly to event handlers should be used instead whenever possible.

`Window.external` (en-US)
지원이 중단되었습니다
 읽기 전용

Returns an object with functions for adding external search providers to the browser.

`Window.orientation` (en-US)
지원이 중단되었습니다
 읽기 전용

Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.

`Window.returnValue`
지원이 중단되었습니다

The return value to be returned to the function that called `window.showModalDialog()` (en-US) to display the window as a modal dialog.

`Window.sidebar` (en-US)
지원이 중단되었습니다

비표준
 읽기 전용

Returns a reference to the window object of the sidebar

`Window.status`
지원이 중단되었습니다

Gets/sets the text in the statusbar at the bottom of the browser.

인스턴스 메서드
--------

`EventTarget`의 메서드를 상속합니다.

`Window.addEventListener()`

창의 특정 이벤트에 대한 처리기를 등록합니다.

`Window.atob()`

Base64로 인코딩된 문자열 데이터를 디코딩합니다.

`Window.alert()`

경고 대화 상자를 표시합니다.

`Window.blur()` (en-US)

창의 포커스를 해제합니다.

`Window.btoa()`

이진 데이터 문자열을 Base64로 인코딩한 ASCII 문자열을 생성합니다.

`Window.cancelAnimationFrame()`

`Window.requestAnimationFrame`으로 예약한 콜백을 취소합니다.

`Window.cancelIdleCallback()` (en-US)

`Window.requestIdleCallback`으로 예약한 콜백을 취소합니다.

`Window.clearImmediate()` (en-US)

`setImmediate`로 등록한 반복 실행을 해제합니다.

`Window.clearInterval()` (en-US)

`setInterval()`로 등록한 반복 실행을 해제합니다.

`Window.clearTimeout()`

`setTimeout()`으로 등록한 지연 실행을 해제합니다.

`Window.close()` (en-US)

현재 창을 닫습니다.

`Window.confirm()`

사용자가 응답해야 하는 대화 상자를 표시합니다.

`Window.createImageBitmap()` (en-US)

다양한 종류의 이미지를 받고, `ImageBitmap` (en-US)으로 이행하는 `Promise`를 반환합니다. 선택 사항으로, 원본 이미지를 *(sx, sy)* 의 원점에서 너비 sw, 높이 sh만큼 자를 수 있습니다.

`Window.dispatchEvent()`

이벤트를 발동합니다.

`Window.dump()` (en-US)
비표준

콘솔에 메시지를 기록합니다.

`Window.fetch()`

네트워크에서 리소스를 가져오는 절차를 시작합니다.

`Window.find()` (en-US)
비표준

주어진 문자열을 창 내에서 탐색합니다.

`Window.focus()` (en-US)

현재 창으로 포커스를 이동합니다.

`Window.getComputedStyle()`

지정한 요소의 계산된 스타일, 즉 해당 요소에 적용된 모든 CSS 속성 계산 값들을 반환합니다.

`Window.getDefaultComputedStyle()` (en-US)
비표준

지정한 요소의 계산된 기본 스타일을 가져옵니다. 저작자 스타일시트는 무시합니다.

`Window.getSelection()`

선택된 항목(들)을 나타내는 객체를 반환합니다.

`Window.matchMedia()`

지정한 미디어 쿼리 문자열을 나타내는 `MediaQueryList` (en-US) 객체를 반환합니다.

`Window.moveBy()` (en-US)

현재 창을 지정한 거리만큼 이동합니다.

`Window.moveTo()` (en-US)

현재 창을 지정된 좌표로 이동합니다.

`Window.open()` (en-US)

새 창을 엽니다.

`Window.postMessage()`

창에서 다른 창으로 문자열 데이터를 전송할 수 있는 안전한 방법을 제공합니다. 두 창의 도메인이 같지 않아도 됩니다.

`Window.print()` (en-US)

현재 문서를 출력하는 인쇄 대화 상자를 엽니다.

`Window.prompt()`

사용자가 명령 대화상자에 입력하는 텍스트를 반환합니다.

`Window.queryLocalFonts()` (en-US)
Experimental

`FontData` (en-US) 객체의 배열로 이행하는 `Promise`를 반환합니다. 기기에서 사용 가능한 로컬 글꼴들을 나타냅니다.

`Window.removeEventListener()`

창의 이벤트 수신기를 제거합니다.

`Window.reportError()` (en-US)

처리되지 않은 예외를 흉내낸 오류를 보고합니다.

`Window.requestAnimationFrame()`

브라우저에게 애니메이션이 재생 중임을 알려, 다음 애니메이션 프레임을 위한 리페인트의 예약을 요청합니다.

`Window.requestIdleCallback()`

브라우저 대기 시간에 수행할 작업을 예약합니다.

`Window.resizeBy()` (en-US)

현재 창을 지정한 크기만큼 조절합니다.

`Window.resizeTo()`

현재 창을 지정한 크기로 조절합니다.

`Window.scroll()`

창을 문서 내의 특정 지점으로 스크롤합니다.

`Window.scrollBy()`

창의 문서를 주어진 거리만큼 스크롤합니다.

`Window.scrollByLines()` (en-US)
비표준

창의 문서를 주어진 줄 수만큼 스크롤합니다.

`Window.scrollByPages()` (en-US)
비표준

창의 문서를 주어진 장 수만큼 스크롤합니다.

`Window.scrollTo()`

창을 문서 내의 좌표로 스크롤합니다.

`Window.setImmediate()` (en-US)

브라우저가 무거운 작업들을 마친 후에 함수를 실행하도록 예약합니다.

`Window.setInterval()`

주어진 밀리초가 지날 때마다 실행할 함수를 예약합니다.

`Window.setResizable()` (en-US)
비표준

사용자의 창 크기 조절을 허용하거나 막습니다.

`Window.setTimeout()`

주어진 시간이 지난 후 실행할 함수를 예약합니다.

`Window.sizeToContent()` (en-US)
비표준

창의 크기를 현재 내용에 맞춰 조절합니다.

`Window.showOpenFilePicker()` (en-US)
Experimental

사용자가 파일 또는 파일들을 선택할 수 있는 파일 선택창을 엽니다.

`Window.showSaveFilePicker()` (en-US)
Experimental

사용자가 파일 저장 위치를 선택할 수 있는 파일 선택창을 엽니다.

`Window.showDirectoryPicker()` (en-US)
Experimental

사용자가 디렉토리를 선택할 수 있는 디렉토리 선택창을 엽니다.

`Window.stop()`

창의 불러오기를 중단합니다.

`Window.updateCommands()` (en-US)
비표준

현재 창 크롬(UI)의 명령 상태를 업데이트합니다.

### Deprecated methods

`Window.back()` (en-US)
비표준

지원이 중단되었습니다

Moves back one in the window history. This method is deprecated; you should instead use `window.history.back()`.

`Window.captureEvents()` (en-US)
지원이 중단되었습니다

Registers the window to capture all events of the specified type.

`Window.forward()` (en-US)
비표준

지원이 중단되었습니다

Moves the window one document forward in the history. This method is deprecated; you should instead use `window.history.forward()`.

`Window.releaseEvents()` (en-US)
지원이 중단되었습니다

Releases the window from trapping events of a specific type.

`Window.showModalDialog()` (en-US)
비표준

지원이 중단되었습니다

Displays a modal dialog.

이벤트
---

`addEventListener()`를 사용하거나, `Window` 인터페이스의 `oneventname` 속성을 사용해 이벤트를 수신하세요.

`error` (en-US)

찾을 수 없거나 유효하지 않은 이미지, 실행 오류가 발생하는 스크립트 등, 리소스를 불러오지 못했거나 사용할 수 없을 때 발생합니다.

`languagechange` (en-US)

사용자의 선호 언어가 바뀌면 발생합니다.

`devicemotion` (en-US)

일정 주기로 발생하여 장치가 받고 있는 물리적 가속력의 양을 나타냅니다. 가능한 경우 각속도도 포함합니다.

`deviceorientation` (en-US)

자기계 방향 센서가 제공하는, 지구 좌표계 기준 장치 방향 데이터를 새로 사용할 수 있으면 발생합니다.

`resize`

창 크기가 바뀌면 발생합니다.

`storage`

다른 문서에서 저장소(`localStorage` 또는 `sessionStorage`)를 수정하면 발생합니다.

### 애니메이션 이벤트

`animationcancel` (en-US)

애니메이션이 예상치 못하게 중단되면 발생합니다.

`animationend` (en-US)

애니메이션이 정상적으로 끝나면 발생합니다.

`animationiteration` (en-US)

애니메이션의 1회 반복이 끝나면 발생합니다.

`animationstart` (en-US)

애니메이션이 시작하면 발생합니다.

### 클립보드 이벤트

`copy`

사용자가 브라우저 사용자 인터페이스를 통해 복사 액션을 실행하면 발생합니다. `oncopy` (en-US) 속성으로도 사용할 수 있습니다.

`cut`

사용자가 브라우저 사용자 인터페이스를 통해 잘라내기 액션을 실행하면 발생합니다. `oncut` (en-US) 속성으로도 사용할 수 있습니다.

`paste`

사용자가 브라우저 사용자 인터페이스를 통해 붙여넣기 액션을 실행하면 발생합니다. `onpaste` (en-US) 속성으로도 사용할 수 있습니다.

### 네트워크 연결 이벤트

`offline` (en-US)

브라우저가 네트워크 연결을 상실해 `navigator.onLine`이 `false`로 바뀌면 발생합니다.

`online` (en-US)

브라우저가 네트워크 연결을 획득해 `navigator.onLine`이 `true`로 바뀌면 발생합니다.

### 포커스 이벤트

`blur` (en-US)

요소가 포커스를 잃으면 발생합니다.

`focus` (en-US)

요소가 포커스를 얻으면 발생합니다.

### 게임패드 이벤트

`gamepadconnected` (en-US)

브라우저가 게임패드 연결을 감지하거나, 게임패드의 버튼/축 입력을 처음 감지했을 때 발생합니다.

`gamepaddisconnected` (en-US)

브라우저가 게임패드 연결 해제를 감지하면 발생합니다.

### 방문 기록 이벤트

`hashchange`

URL의 프래그먼트 식별자(`#` 기호로 시작하는 부분)가 바뀌면 발생합니다.

`pagehide` (en-US)

뒤로 가기나 앞으로 가기 버튼으로 방문 기록을 탐색할 때 등, 브라우저가 현재 문서를 숨기고 방문 기록 내의 다른 문서를 보여주려고 할 때 발생합니다.

`pageshow` (en-US)

브라우저 탐색으로 이 페이지가 보여질 때 발생합니다. 페이지 첫 방문이나, 다른 페이지에서 뒤로 가기나 앞으로 가기 버튼으로 다시 돌아올 때 발생합니다.

`popstate`

활성화된 방문 기록 항목이 바뀌면 발생합니다.

### 로드 & 언로드 이벤트

`beforeunload`

창과 문서, 리소스들을 언로드하기 직전에 발생합니다.

`DOMContentLoaded`

문서 파싱이 끝나면 발생합니다. 스타일시트, 이미지, 하위 프레임의 로딩이 끝날 때까지 기다리지 않습니다.

`load`

스타일시트, 이미지 등 리소스까지 포함해서 페이지 로딩이 모두 끝나면 발생합니다.

`unload`

문서나 하위 리소스가 언로딩 중일 때 발생합니다.

### 매니페스트 이벤트

`appinstalled` (en-US)

브라우저가 성공적으로 페이지를 애플리케이션으로서 설치했을 때 발생합니다.

`beforeinstallprompt` (en-US)

사용자에게 웹 애플리케이션 설치를 권유하기 직전에 발생합니다.

### 메시지 이벤트

`message`

다른 탐색 맥락에서의 `Window.postMessage()` 등으로 이 창이 메시지를 수신했을 때 발생합니다.

`messageerror` (en-US)

`Window` 객체가 역직렬화 할 수 없는 메시지를 수신하면 발생합니다.

### 출력 이벤트

`afterprint` (en-US)

연관된 문서의 출력이 시작됐거나, 출력 미리보기 창이 닫히면 발생합니다.

`beforeprint` (en-US)

연관된 문서의 출력이 시작되기 직전이나, 출력 미리보기 창이 열리기 직전에 발생합니다.

### 프로미스 거부 이벤트

`rejectionhandled` (en-US)

JavaScript `Promise`가 거부될 때마다 발생합니다. 잡아낸 거부로 인해서도 발생합니다.

`unhandledrejection` (en-US)

JavaScript `Promise`가 거부됐지만, 거부를 잡아낼 처리기가 없을 때 발생합니다.

### 트랜지션 이벤트

`transitioncancel` (en-US)

CSS 트랜지션이 취소되면 발생합니다.

`transitionend` (en-US)

CSS 트랜지션이 끝나면 발생합니다.

`transitionrun` (en-US)

CSS 트랜지션이 처음으로 생성되면 시작합니다.

`transitionstart` (en-US)

CSS 트랜지션이 시작하면 발생합니다.

### Deprecated events

`orientationchange`
지원이 중단되었습니다

Fired when the orientation of the device has changed.

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

비표준

Fired when a display is able to be presented to.

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

비표준

Fired when a compatible VR device has been connected to the computer.

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

비표준

Fired when a compatible VR device has been disconnected from the computer.

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

비표준

Fired when a display can no longer be presented to.

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

비표준

Fired when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa.

인터페이스
-----

DOM 인터페이스를 참고하세요.

명세서
---

| Specification |
| --- |
| HTML Standard # the-window-object |

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

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


Document - Web API

Document
========

**`Document`** 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. DOM 트리는 `<body>`와 `<table>` (en-US) 및 여러 다른 요소를 포함합니다. `Document`는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공합니다.

EventTarget

Node

(en-US)

Document
`Document` 인터페이스는 모든 종류의 문서에 대한 공통의 속성과 메서드를 묘사합니다. 문서의 유형(HTML, XML, SVG 등)에 따라서 더 다양한 API가 존재합니다. 예컨대 `"text/html"` 콘텐츠 유형으로 제공되는 HTML 문서는 `HTMLDocument` 인터페이스도 구현하는 반면, XML과 SVG 문서는 `XMLDocument` (en-US) 인터페이스를 구현합니다.

생성자
---

`Document()`
비표준

새로운 `Document` 객체를 생성합니다.

속성
--

*`Document`는 `Node` (en-US)와 `EventTarget` 인터페이스도 상속합니다.*

`Document.anchors` 읽기 전용

문서 내 모든 앵커의 목록을 반환합니다.

`Document.body`

현재 문서의 `<body>` 또는 `<frameset>` 노드를 반환합니다.

`Document.characterSet` 읽기 전용

문서에서 사용하는 캐릭터셋을 반환합니다.

`Document.compatMode` 읽기 전용
Experimental

문서의 렌더링 모드가 Quirks와 Strict 중 어떤 것인지 반환합니다.

`Document.contentType` 읽기 전용
Experimental

현재 문서의 MIME 헤더로부터 `Content-Type`을 반환합니다.

`Document.doctype` 읽기 전용

현재 문서의 문서 형식 정의(Document Type Definition, DTD)를 반환합니다.

`Document.documentElement` 읽기 전용

문서의 직속 자식인 `Element` (en-US)를 반환합니다. HTML 문서에서는 보통 `<html>` 요소를 나타내는 `HTMLHtmlElement` (en-US) 객체입니다.

`Document.documentURI` 읽기 전용

문서의 위치를 문자열로 반환합니다.

`Document.embeds` 읽기 전용

현재 문서에 포함된 `<embed>` 요소 목록을 반환합니다.

`Document.fonts` (en-US)

현재 문서의 `FontFaceSet` (en-US) 인터페이스를 반환합니다.

`Document.forms` 읽기 전용

현재 문서의 `<form>` 요소 목록을 반환합니다.

`Document.head` 읽기 전용

현재 문서의 `<head>` 요소를 반환합니다.

`Document.hidden` 읽기 전용

현재 문서의 숨김 여부를 반환합니다.

`Document.images` 읽기 전용

현재 문서의 이미지 목록을 반환합니다.

`Document.implementation` 읽기 전용

현재 문서와 연관된 DOM 구현을 반환합니다.

`Document.lastStyleSheetSet` (en-US) 읽기 전용

마지막에 활성화된 스타일 시트 세트의 이름을 반환합니다. `selectedStyleSheetSet` (en-US) 값을 설정하여 스타일 시트가 변경되기 전에는 `null` 값을 갖습니다.

`Document.links` 읽기 전용

문서의 모든 하이퍼링크 목록을 반환합니다.

`Document.mozSyntheticDocument` (en-US)
비표준

문서가 synthetic, 즉 단일 이미지, 비디오, 오디오 파일이나 이와 비슷한 것인 경우 `Boolean` `true`를 반환합니다.

`Document.plugins` (en-US) 읽기 전용

사용 가능한 플러그인의 목록을 반환합니다.

`Document.policy` 읽기 전용
Experimental

특정 문서에 적용되는 기능 정책을 자성하기 위한 간단한 API 를 제공하는 `Policy` 인터페이스를 반환합니다.

`Document.preferredStyleSheetSet` (en-US) 읽기 전용

페이지 작성자가 지정한 선호 스타일 시트 세트를 반환합니다.

`Document.scripts` (en-US) 읽기 전용

문서의 모든 `<script>` 요소를 반환합니다.

`Document.scrollingElement` (en-US) 읽기 전용

문서를 스크롤 하는 `Element` (en-US)에 대한 참조를 반환합니다.

`Document.selectedStyleSheetSet` (en-US)

현재 사용 중인 스타일 시트 세트를 반환합니다.

`Document.styleSheetSets` 읽기 전용

문서에서 사용 가능한 스타일 시트 세트의 목록을 반환합니다.

`Document.timeline` 읽기 전용

페이지 로드 시 자동으로 생성하는 `DocumentTimeline` (en-US)의 인스턴스를 반환합니다.

`Document.undoManager` 읽기 전용
Experimental

…

`Document.visibilityState` 읽기 전용

문서의 표시 상태를 나타내는 문자열을 반환합니다. 가능한 값은 `visible`, `hidden`, `prerender`, `unloaded`입니다.

### HTMLDocument 확장

HTML 문서를 위한 `Document` 인터페이스는 HTML5 이전엔 `HTMLDocument` 인터페이스를 상속하고, 이후로는 확장합니다.

`Document.cookie` (en-US)

문서의 쿠키 리스트를 세미콜론으로 분리해 반환하거나, 하나의 쿠키를 설정합니다.

`Document.defaultView` 읽기 전용

`Window` 객체의 참조를 반환합니다.

`Document.designMode`

문서 전체의 수정 가능 여부를 설정/반환합니다.

`Document.dir` (en-US)

문서의 쓰기 방향(rtl/ltr)을 설정/반환합니다.

`Document.domain`

현재 문서의 도메인을 설정/반환합니다.

`Document.lastModified` (en-US) 읽기 전용

문서가 마지막으로 수정된 날짜를 반환합니다.

`Document.location` 읽기 전용

현재 문서의 URI를 반환합니다.

`Document.readyState` 읽기 전용

문서의 불러오기 상태를 반환합니다.

`Document.referrer` 읽기 전용

현재 페이지로 연결한 페이지의 URI를 반환합니다.

`Document.title` (en-US)

문서의 제목을 설정하거나 반환합니다.

`Document.URL` 읽기 전용

문서의 위치를 문자열로 반환합니다.

### DocumentOrShadowRoot에서 포함한 속성

`Document` 인터페이스는 `DocumentOrShadowRoot` 믹스인이 정의하는 다음의 속성을 포함합니다. 지금은 Chrome만 `DocumentOrShadowRoot` 믹스인으로 구현한 상태라는 점에 유의하세요. 다른 브라우저는 `Document` 인터페이스에 직접 구현합니다.

`DocumentOrShadowRoot.activeElement` 읽기 전용

섀도 트리 내에서 포커스를 가진 `Element` (en-US) 를 반환합니다.

`Document.fullscreenElement` (en-US) 읽기 전용

현재 문서에서 전체 화면 모드 중인 요소를 반환합니다.

`DocumentOrShadowRoot.pointerLockElement` (en-US) 읽기 전용
Experimental

포인터가 잠긴 동안 마우스 이벤트의 대상으로 설정한 요소를 반환합니다. 잠금 대기 중이거나, 포인터의 잠금이 해제됐거나, 대상이 다른 문서에 존재하는 경우 `null`입니다.

`DocumentOrShadowRoot.styleSheets` 읽기 전용

문서가 포함하거나 명시적으로 연결한 스타일 시트를 나타내는, `CSSStyleSheet` (en-US)의 `StyleSheetList` (en-US) 객체를 반환합니다.

이벤트
---

`addEventListener()`를 사용하거나 이 인터페이스의 `oneventname` 속성에 이벤트 수신기를 할당하여 이러한 이벤트를 수신합니다.

`afterscriptexecute` (en-US)
비표준

정적 `<script>` 요소가 스크립트 실행을 완료하면 발생합니다.

`beforescriptexecute` (en-US)
비표준

정적 `<script>`가 실행을 시작하려고 할 때 발생합니다.

`securitypolicyviolation` (en-US)

콘텐츠 보안 정책을 위반하면 발생합니다.

`scroll`

문서 보기 또는 요소가 스크롤 되었을 때 발생합니다.

`visibilitychange`

탭의 내용이 표시되거나 숨겨지면 발생합니다.

`wheel` (en-US)

사용자가 포인팅 장치(일반적으로 마우스)에서 휠 버튼을 회전할 때 발생합니다.

### 사용하지 않는 속성

`Document.alinkColor` (en-US)
지원이 중단되었습니다

다큐먼트 바디에 있는 활성 링크의 색상을 설정하거나 반환합니다.

`Document.all`
지원이 중단되었습니다

비표준

다큐먼트의 모든 엘리먼트로의 접근을 제공합니다. 레거시이며 비표준 속성이므로 사용되면 안됩니다.

`Document.applets`
지원이 중단되었습니다
 읽기 전용

다큐먼트에 있는 애플릿의 정렬된 리스트를 반환합니다.

`Document.async` (en-US)
지원이 중단되었습니다

`Document.load` 와 사용되어 비동기 요청을 나타냅니다.

`Document.bgColor` (en-US)
지원이 중단되었습니다

현재 다큐먼트의 배경 색상을 설정하거나 반환합니다.

`Document.charset` (en-US) 읽기 전용
지원이 중단되었습니다

`Document.characterSet` 과 동일합니다. `Document.characterSet` 속성을 사용하시기 바랍니다.

`Document.domConfig` (en-US)
지원이 중단되었습니다

`DOMConfiguration` 객체를 반환합니다.

`document.fgColor` (en-US)
지원이 중단되었습니다

현재 다큐먼트의 foreground 색상이나 텍스트 색상을 설정하거나 반환합니다.

`Document.fullscreen` (en-US)
지원이 중단되었습니다

다큐먼트가 `full-screen mode`에 있을 때 `true` 를 반환합니다.

`Document.height` (en-US)
비표준

지원이 중단되었습니다

현재 다큐먼트의 높이를 설정하거나 반환합니다.

`Document.inputEncoding` (en-US) 읽기 전용
지원이 중단되었습니다

`Document.characterSet` 과 동일합니다. `Document.characterSet` 속성을 사용하시기 바랍니다.

`Document.linkColor` (en-US)
지원이 중단되었습니다

다큐먼트내 하이퍼링크의 색상을 설정하거나 반환합니다.

`Document.vlinkColor` (en-US)
지원이 중단되었습니다

방문한 하이퍼링크의 색상을 설정하거나 반환합니다.

`Document.width` (en-US)
비표준

지원이 중단되었습니다

현재 다큐먼트의 너비를 반환합니다.

`Document.xmlEncoding` (en-US)
지원이 중단되었습니다

XML 선언으로 결정된 인코딩을 반환합니다.

`Document.xmlStandalone`
지원이 중단되었습니다

XML 선언이 다큐먼트를 독립되도록 지정하면 `true` 를(*예,* DTD 의 외부가 다큐먼트의 컨텐츠에 영향을 줌), 그렇지 않은 경우 `false` 를 반환합니다.

`Document.xmlVersion` (en-US)
지원이 중단되었습니다

XML 선언에 명시된 버전 넘버를 반환합니다. 선언에 명시되어 있지 않은 경우, `"1.0"` 을 반환합니다.

메서드
---

*`Document`는 `Node` (en-US)와 `EventTarget` 인터페이스도 상속합니다.*

`Document.adoptNode()`

외부 문서로부터 노드를 가져옵니다.

`Document.captureEvents()`
지원이 중단되었습니다

`Window.captureEvents` (en-US)를 확인하세요.

`Document.caretRangeFromPoint()` (en-US)
비표준

지정한 좌표에 위치한 문서 프래그먼트에 대한 `Range` 객체를 반환합니다.

`Document.createAttribute()` (en-US)

새로운 `Attr` 객체를 생성하고 반환합니다.

`Document.createAttributeNS()` (en-US)

주어진 네임스페이스에 새로운 속성 노드를 생성하고 반환합니다.

`Document.createCDATASection()` (en-US)

새로운 CDATA 노드를 생성하고 반환합니다.

`Document.createComment()` (en-US)

새로운 주석 노드를 생성하고 반환합니다.

`Document.createDocumentFragment()`

새로운 문서 조각을 생성합니다.

`Document.createElement()`

주어진 태그명을 사용해 새로운 요소를 생성합니다.

`Document.createElementNS()` (en-US)

주어진 태그명과 네임스페이스 URI를 갖는 새로운 요소를 생성합니다.

`Document.createEntityReference()` (en-US)
지원이 중단되었습니다

새로운 개체 참조를 생성하고 반환합니다.

`Document.createEvent()`

이벤트 객체를 생성합니다.

`Document.createNodeIterator()` (en-US)

`NodeIterator` (en-US) 객체를 생성합니다.

`Document.createProcessingInstruction()` (en-US)

새로운 `ProcessingInstruction` (en-US) 객체를 생성합니다.

`Document.createRange()`

`Range` 객체를 생성합니다.

`Document.createTextNode()`

텍스트 노드를 생성합니다.

`Document.createTouch()` (en-US)
지원이 중단되었습니다

`Touch` (en-US) 객체를 생성합니다.

`Document.createTouchList()` (en-US)

`TouchList` (en-US) 객체를 생성합니다.

`Document.createTreeWalker()`

`TreeWalker` 객체를 생성합니다.

`Document.enableStyleSheetsForSet()` (en-US)

지정한 스타일 시트 세트의 스타일 시트를 활성화합니다.

`Document.exitPointerLock()` (en-US)
Experimental

포인터 잠금을 해제합니다.

`Document.getAnimations()` (en-US)
Experimental

문서의 자손 요소를 대상으로 하고, 현재 실행 중인 모든 `Animation` (en-US) 객체를 배열로 반환합니다.

`Document.getElementsByClassName()` (en-US)

주어진 클래스 이름을 갖는 요소의 목록을 반환합니다.

`Document.getElementsByTagName()`

주어진 태그명을 갖는 요소의 목록을 반환합니다.

`Document.getElementsByTagNameNS()`

주어진 태그명과 네임스페이스를 갖는 요소의 목록을 반환합니다.

`Document.hasStorageAccess()` (en-US)

문서가 퍼스트파티first-party 저장소에 접근할 수 있는지 나타내는 `Boolean`으로 이행하는 `Promise`를 반환합니다.

`Document.importNode()`

외부 문서의 노드 복제본을 반환합니다.

`Document.normalizeDocument()`
지원이 중단되었습니다

개체 대체, 텍스트 노드 정규화 등의 작업을 실행합니다.

`Document.releaseCapture()` (en-US)
비표준

문서의 요소에 현재 마우스 캡쳐가 있다면 이를 해제합니다.

`Document.releaseEvents()`
비표준

지원이 중단되었습니다

`Window.releaseEvents()` (en-US)를 확인하세요.

`Document.requestStorageAccess()` (en-US)

퍼스트파티first-party 저장소로의 접근이 가능한 경우 이행하고 불가능한 경우 거부하는 `Promise`를 반환합니다.

`Document.routeEvent()`
비표준

지원이 중단되었습니다

`Window.routeEvent()`를 확인하세요.

`Document.mozSetImageElement()` (en-US)
비표준

지정한 요소 ID를 위한 배경 이미지로 사용되도록 요소 변경을 허용합니다.

`Document` 인터페이스는 `ParentNode` 인터페이스를 확장합니다.

`document.getElementById()`

주어진 ID를 가진 요소의 참조를 반환합니다.

`document.querySelector()`

문서 내에서 주어진 선택자를 만족하는 첫 번째 `Element`를 반환합니다.

`document.querySelectorAll()`

주어진 선택자를 만족하는 모든 요소의 `NodeList`를 반환합니다.

`Document` 인터페이스는 `XPathEvaluator` (en-US) 인터페이스를 확장합니다.

`document.createExpression()` (en-US)

나중에 (여러 번) 평가할 수 있도록 `XPathExpression` (en-US)을 컴파일합니다.

`document.createNSResolver()` (en-US)

`XPathNSResolver` (en-US) 객체를 생성합니다.

`document.evaluate()` (en-US)

XPath 표현을 평가합니다.

### HTML 문서의 확장

HTML 문서를 위한 `Document` 인터페이스는 HTML5 이전엔 `HTMLDocument` 인터페이스를 상속하고, 이후로는 확장합니다.

`document.clear()` (en-US)
비표준

지원이 중단되었습니다

최근의 Firefox와 Internet Explorer를 포함하는 주요 최신 브라우저에서, 이 메소드는 아무것도 하지 않습니다.

`document.close()` (en-US)

작성을 위한 문서 스트림을 닫습니다.

`document.execCommand()`

수정 가능한 문서에서 서식 명령을 실행합니다.

`document.getElementsByName()` (en-US)

주어진 이름을 갖는 요소의 목록을 반환합니다.

`document.hasFocus()`

포커스가 지정한 문서 내 어느 곳이든 위치한 경우 `true`를 반환합니다.

`document.open()`

작성을 위한 문서 스트림을 엽니다.

`document.queryCommandEnabled()` (en-US)

현재 범위에서 서식 명령을 실행할 수 있다면 `true`를 반환합니다.

`document.queryCommandIndeterm()`

현재 범위에서 서식 명령의 상태를 알 수 없으면 `true`를 반환합니다.

`document.queryCommandState()` (en-US)

현재 범위에서 서식 명령을 실행했다면 `true`를 반환합니다.

`document.queryCommandSupported()` (en-US)

현재 범위에서 서식 명령이 지원된다면 `true`를 반환합니다.

`document.queryCommandValue()`

현재 범위에서 서식 명령을 위한 현재 값을 반환합니다.

`document.write()` (en-US)

문서에 텍스트를 작성합니다.

`document.writeln()` (en-US)

문서에 텍스트 한 줄을 작성합니다.

### DocumentOrShadowRoot로부터 포함된 메소드

`Document` 인터페이스는 `DocumentOrShadowRoot` 믹스인mixin이 정의하는 다음의 메서드를 포함합니다. 지금은 Chrome만 구현한 상태라는 점에 유의하세요. 다른 브라우저는 `Document` 인터페이스에 구현 중입니다.

`DocumentOrShadowRoot.getSelection()`

사용자에의해 선택된 텍스트의 범위 또는 캐럿의 현재 위치를 나타내는 `Selection` (en-US) 객체를 반환합니다.

`DocumentOrShadowRoot.elementFromPoint()` (en-US)

지정한 위치에 있는 최상단 엘리먼트를 반환합니다.

`DocumentOrShadowRoot.elementsFromPoint()` (en-US)

지정한 위치에 있는 모든 엘리먼트의 배열을 반환합니다.

`DocumentOrShadowRoot.caretPositionFromPoint()` (en-US)

캐럿을 포함하는 DOM 노드와 그 노드내 캐첫의 문자 오프셋을 포함하는 `CaretPosition` (en-US) 객체를 반환합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-document |
| HTML Standard # the-document-object |
| CSSOM View Module # extensions-to-the-document-interface |
| Pointer Lock 2.0 # extensions-to-the-document-interface |
| Selection API # extensions-to-document-interface |

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

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


웹 소켓 - Web API

웹 소켓
====

웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.

인터페이스
-----

`WebSocket`

웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스<

`CloseEvent` (en-US)

연결이 종료 되었을 때 웹 소켓 객체에 의해 전달된 이벤트

`MessageEvent`

서버로 부터 메시지가 수신 되었을 때 웹 소켓 객체에 의해 전달된 이벤트

도구
--

* Socket.IO: Node.js를 위한 강력한 크로스 플랫폼 웹 소켓 API
* WebSocket-Node: Node.js를 위한 웹 소켓 서버 API 구현
* 더 많은 프레임워크, 라이브러리 보기
관련 주제
-----

* AJAX (en-US), JavaScript
`같이 보기`
-------

* RFC 6455 - 웹 소켓 프로토콜
* 웹 소켓 API 규격
* 서버로부터의 이벤트 (en-US)
* WebSocket.us - 웹 소켓에 대한 비영리 커뮤니티
브라우저 호환성
--------

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


DocumentType - Web API

DocumentType
============

**`DocumentType`** 인터페이스는 doctype을 포함하는 `Node` (en-US) 를 나타냅니다.

EventTarget

Node

(en-US)

DocumentType프로퍼티
----

*부모 `Node` (en-US) 로부터 프로퍼티를 상속받고 `ChildNode` 인터페이스를 구현합니다.*

`DocumentType.entities` 읽기 전용
지원이 중단되었습니다

DTD에 선언된 엔티티의 `NamedNodeMap` (en-US) 입니다. 이 맵의 모든 노드는 `Entity` 인터페이스를 구현합니다.

`DocumentType.internalSubset` 읽기 전용
지원이 중단되었습니다

내부 하위 집합의 `DOMString` 입니다. 하위 집합이 존재하지 않을 경우 `null`입니다. 예, `"<!ELEMENT foo (bar)>"`.

`DocumentType.name` (en-US) 읽기 전용

`DOMString` 입니다. 예, `<!DOCTYPE HTML>` 의 경우 `"html"`.

`DocumentType.notations` 읽기 전용
지원이 중단되었습니다

DTD에 선언된 노테이션을 포함한 `NamedNodeMap` (en-US) 입니다. 이 맵의 모든 노드는 `Notation` 인터페이스를 구현합니다.

`DocumentType.publicId` (en-US) 읽기 전용

`DOMString` 입니다. 예, `"-//W3C//DTD HTML 4.01//EN"`, HTML5의 경우 빈 문자열.

`DocumentType.systemId` (en-US) 읽기 전용

`DOMString` 입니다. 예, `"http://www.w3.org/TR/html4/strict.dtd"`, HTML5의 경우 빈 문자열.

메소드
---

*부모 `Node` (en-US) 로부터 메소드를 상속받고 `ChildNode` 인터페이스를 구현합니다.*

`ChildNode.remove()` (en-US)
Experimental

부모의 자식 리스트로부터 객체를 제거합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-documenttype |

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

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

함께 보기
-----

* DOM 인터페이스 목차. (en-US)
* `Entity`
* `Notation`


Web NFC API - Web API

Web NFC API
===========

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

Web NFC API를 사용하면, 경량 NFC 데이터 교환 형식(NDEF) 메시지를 통해 NFC 데이터를 교환할 수 있습니다.

**참고:** Web NFC와 함께 사용하기 위해서는 장치와 태그를 NDEF 레코드 형식을 지원하도록 포맷하고 기록해야 합니다. 저수준 작업은 현재 API에서 지원되지 않지만, 이러한 기능을 추가하는 API에 대한 공개 논의가 진행 중입니다.

인터페이스
-----

`NDEFMessage` (en-US)

`NDEFReader` 객체를 통해 호환 태그에서 수신하거나 호환 태그에 보낼 수 있는 NDEF 메시지를 나타내는 인터페이스입니다. 메시지는 메타데이터와 NDEF 레코드로 구성됩니다.

`NDEFReader` (en-US)
Experimental

호환되는 NFC 태그에서 메시지를 읽고 쓸 수 있는 인터페이스입니다. 메시지는 `NDEFMessage` 객체로 표현됩니다.

`NDEFRecord` (en-US)

NDEF 메시지에 포함될 수 있는 NDEF 레코드를 나타내는 인터페이스입니다.

명세서
---

| Specification |
| --- |
| Web NFC API # the-ndefreader-object |

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

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


Plugin - Web API

Plugin
======

플러그 인 인터페이스는 브라우저 플러그 인에 대한 정보를 제공합니다.

**참고:** 플러그 인 개체의 고유 속성은 더 이상 최신 브라우저 버전에서 찾아볼 수 없습니다.

특성
--

| 이름 | 설명 | Return Type | 유용성 |
| --- | --- | --- | --- |
| `Plugin.description` | 플러그 인에 대한 읽기 쉬운 설명입니다. 읽기 전용입니다. | `DOMString` | DOM 0 |
| `Plugin.filename` | 플러그 인 파일의 파일 이름. 읽기 전용입니다. | `DOMString` | DOM 0 |
| `Plugin.name` | 플러그 인의 이름. 읽기 전용입니다. | `DOMString` | DOM 0 |
| `Plugin.version` | 플러그 인의 버전 번호 문자열. 읽기 전용입니다. | `DOMString` | Gecko browsers only (Firefox 4+) |

방법
--

`Plugin.item`

지원되는 유형의 목록에 인덱스 번호를 부여한 경우 지원되는 콘텐츠 유형의 MIME형식을 반환합니다.

`Plugin.namedItem`

지원되는 항목의 MIME유형을 반환합니다.


ClipboardEvent - Web API

ClipboardEvent
==============

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

**`ClipboardEvent`** 인터페이스는 `cut`, `copy`, `paste` 이벤트처럼 클립보드 조작에 대한 정보를 제공하는 이벤트를 나타냅니다.

생성자
---

`ClipboardEvent()` (en-US)

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

속성
--

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

`ClipboardEvent.clipboardData` 읽기 전용

사용자가 실행한 `cut`, `copy`, `paste` 작업에서 영향을 받은 데이터를 담은 `DataTransfer` 객체입니다. 데이터의 MIME 유형도 포함합니다.

메서드
---

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

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-interfaces |

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

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

같이 보기
-----

* 복사 관련 이벤트: `cut`, `copy`, `paste`
* Clipboard API
* Async Clipboard API 데모 (Glitch)
* web.dev의 Async Clipboard API


AbortSignal - Web API

AbortSignal
===========

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

**`AbortSignal`** 인터페이스는 DOM 요청(Fetch와 같은)과 통신하고 필요한 경우 `AbortController` 객체를 통해 취소할 수 있게 해주는 신호 객체를 나타냅니다.

프로퍼티
----

*AbortSignal 인터페이스는 또한 부모 인터페이스 `EventTarget`으로부터 프로퍼티를 상속받습니다.*

`AbortSignal.aborted` 읽기 전용

신호가 통신하는 요청이 취소되었는지(`true`) 그렇지 않은지(`false`)를 나타내는 `Boolean`입니다.

이벤트
---

`addEventListener()`를 사용하거나 이 인터페이스의 `oneventname` 프로퍼티로 이벤트 리스너를 할당하여 이벤트를 리슨합니다.

`abort` (en-US)

신호가 통신하는 요청이 취소되었을 때 호출됩니다. `onabort` (en-US) 프로퍼티를 통해서도 사용이 가능합니다.

메소드
---

*AbortSignal 인터페이스는 부모인 `EventTarget`로부터 메소드를 상속받습니다.*

예제
--

다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 합니다.

먼저 `AbortController()` 생성자를 사용해 컨트롤러를 `AbortController.signal` 프로퍼티를 사용해 `AbortSignal` 객체와 관계된 참조를 얻습니다.

Fetch 요청을 시작할 때, 요청의 옵션 객체 내부에 `AbortSignal` 옵션을 전달합니다(아래의 `{signal}` 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 `AbortController.abort()`를 호출하여 이를 취소할 수 있게 합니다.

```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```

**참고:** `abort()`가 호출되면, `fetch()` promise는 `AbortError`과 함께 reject됩니다.

**경고:** 현재 버전의 Firefox는 `DOMException`으로 promise를 reject합니다.

동작하는 완전한 예제는 GitHub에서 확인 할 수 있습니다 — abort-api 참고(라이브 실행도 확인할 수 있습니다).

명세
--

| Specification |
| --- |
| DOM Standard # interface-AbortSignal |

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

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

함께 보기
-----

* Fetch API
* Abortable Fetch by Jake Archibald


DataTransfer - Web API

DataTransfer
============

**`DateTransfer`** 객체는 드래그 앤 드롭 작업 중에 드래그되고 있는 데이터를 보관하기 위해 사용됩니다. 각각의 데이터 타입들에 해당하는 하나 이상의 데이터 항목을 포함할 수 있습니다. 드래그 앤 드롭에 대한 자세한 정보는 HTML Drag and Drop API을 확인하시길 바랍니다.

이 객체는 모든 `drag events` (en-US)의 `dataTransfer` (en-US) 속성에서 사용할 수 있습니다.

생성자
---

`DataTransfer()`

새로운 `DataTransfer` 객체를 생성하고 반환합니다.

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

### 표준 속성

`DataTransfer.dropEffect` (en-US)

현재 선택된 드래그 앤 드롭 작업의 타입을 가져오거나 작업을 새로운 타입으로 설정합니다. 값은 `none`, `copy`, `link` 또는 `move`이어야 합니다.

`DataTransfer.effectAllowed` (en-US)

가능한 작업의 모든 타입을 제공합니다. `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all` 또는 `uninitialized` 중 하나이어야 합니다.

`DataTransfer.files`

데이터 전송에서 사용할 수 있는 모든 로컬 파일의 목록을 포함합니다. 드래그 작업에 드래그하고 있는 파일이 포함되지 않으면 이 속성은 빈 목록입니다.

`DataTransfer.items` 읽기 전용

모든 드래그 데이터의 목록인 `DataTransferItemList` (en-US) 객체를 받습니다.

`DataTransfer.types` (en-US) 읽기 전용

`dragstart` 이벤트에 설정된 형식을 제공하는 문자열 배열입니다.

### Gecko 속성

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

인스턴스 메서드
--------

### 표준 메서드

`DataTransfer.clearData()` (en-US)

지정된 타입과 연결된 데이터를 제거합니다. 타입 전달인자는 선택 사항입니다. 타입이 비어있거나 지정되지 않은 경우 모든 타입과 연결된 데이터가 제거됩니다. 지정된 타입의 데이터가 없거나 데이터 전송에 데이터가 포함되어 있지 않으면 이 메서드는 아무런 효과가 없습니다.

`DataTransfer.getData()`

지정된 타입의 데이터를 검색합니다. 혹은 해당 타입의 데이터가 없거나 데이터 전송에 데이터가 없는 경우에는 빈 문자열을 검색합니다.

`DataTransfer.setData()` (en-US)

지정된 타입의 데이터를 설정합니다. 타입의 데이터가 없으면 타입 목록의 마지막 항목이 새로운 형식이 되도록 타입이 마지막에 추가됩니다. 타입의 데이터가 이미 존재하면 기존 데이터가 동일한 위치에서 교체됩니다.

`DataTransfer.setDragImage()` (en-US)

사용자 지정 이미지를 원하는 경우 드래그에 사용될 이미지를 설정합니다.

### Gecko 메서드

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

예제
--

문서에 나열된 모든 메서드와 속성은 고유한 참조 페이지가 있으며 각 참조 페이지에는 인터페이스의 예제가 직접 포함되어 있거나 예제에 대한 링크가 있습니다.

명세서
---

| Specification |
| --- |
| HTML Standard # the-datatransfer-interface |

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

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

같이 보기
-----

* HTML 드래그 앤 드롭 API
* Drag Operations (en-US)
* Recommended Drag Types (en-US)
* DataTransfer test - Paste or Drag


BiquadFilterNode - Web API

BiquadFilterNode
================

The `BiquadFilterNode` interface represents a simple low-order filter, and is created using the `AudioContext.createBiquadFilter()` (en-US) method. It is an `AudioNode` that can represent different kinds of filters, tone control devices, and graphic equalizers. A `BiquadFilterNode` always has exactly one input and one output.

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `1` |
| Channel count mode | `"max"` |
| Channel count | `2` (not used in the default count mode) |
| Channel interpretation | `"speakers"` |

Constructor
-----------

`BiquadFilterNode()` (en-US)

Creates a new instance of an `BiquadFilterNode` object.

Properties
----------

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

`BiquadFilterNode.frequency` (en-US)

Is an a-rate `AudioParam`, a double representing a frequency in the current filtering algorithm measured in hertz (Hz).

`BiquadFilterNode.detune` (en-US)

Is an a-rate `AudioParam` representing detuning of the frequency in cents.

`BiquadFilterNode.Q` (en-US)

Is an a-rate `AudioParam`, a double representing a Q factor, or *quality factor*.

`BiquadFilterNode.gain` (en-US) 읽기 전용

Is an a-rate `AudioParam`, a double representing the gain used in the current filtering algorithm.

`BiquadFilterNode.type` (en-US)

Is a string value defining the kind of filtering algorithm the node is implementing.

 The meaning of the different parameters depending of the type of the filter
 (detune has the same meaning regardless, so isn't listed below)
 | `type` | Description | `frequency` | `Q` | `gain` |
| --- | --- | --- | --- | --- |
| `lowpass` |
 12dB/octave의 롤오프를 가진 표준 2차 공진 로우패스 필터입니다. 컷오프
 이하의 주파수는 통과하며 그 이상의 주파수는 감쇠합니다.
  | 컷오프 주파수 |
 컷오프 부근에서 주파수의 피크가 얼마나 큰지 나타냅니다. 값이 클수록
 피크가 커집니다.
  | *Not used* |
| `highpass` |
 12dB/octave의 롤오프를 가진 표준 2차 공진 하이패스 필터입니다. 컷오프
 이하의 주파수는 감쇠하며 그 이상의 주파수는 통과합니다.
  | 컷오프 주파수 |
 컷오프 부근에서 주파수의 피크가 얼마나 큰지 나타냅니다. 값이 클수록
 피크가 커집니다.
  | *Not used* |
| `bandpass` |
 표준 2차 밴드패스 필터입니다. 주어진 주파수 대역 바깥의 주파수는
 감쇠되며, 이내의 주파수는 통과합니다.
  | 주파수 대역의 중앙 | 주파수 대역의 폭을 조정합니다. Q값이 클수록 주파수 대역은 작아집니다. | *Not used* |
| `lowshelf` |
 표준 2차 로우쉘프 필터입니다. 기준 주파수보다 낮은 주파수는 증폭되거나
 감쇠됩니다. 그 이상의 주파수는 변하지 않습니다.
  | 증폭이나 감쇠를 얻는 주파수의 상한값 | *Not used* | 적용할 증폭(단위 : dB), 음수이면 감쇠됩니다. |
| `highshelf` |
 표준 2차 하이쉘프 필터입니다. 기준 주파수보다 큰 주파수는 증폭되거나
 감쇠됩니다. 그 이하의 주파수는 변하지 않습니다.
  | 증폭이나 감쇠를 얻는 주파수의 하한값 | *Not used* | 적용할 증폭(단위 : dB), 음수이면 감쇠됩니다. |
| `peaking` |
 대역 내의 주파수는 증폭되거나 감쇠됩니다. 바깥의 주파수는 변하지
 않습니다.
  | 증폭이나 감쇠를 얻는 주파수 대역의 중앙 | 주파수 대역의 폭을 조정합니다. Q값이 클수록 주파수 대역은 작아집니다. | 적용할 증폭(단위 : dB), 음수이면 감쇠됩니다. |
| `notch` |
 밴드 스톱, 혹은 밴드 리젝션으로 불리는 표준 notch 필터입니다. 이는 밴드패스 필터와 반대입니다. 주어진 대역폭 바깥의
 주파수는 통과하며, 안쪽의 주파수는 감쇠합니다.
  | 주파수 대역의 중앙 | 주파수 대역의 폭을 조정합니다. Q값이 클수록 주파수 대역은 작아집니다. | *Not used* |
| `allpass` |
 표준 2차 allpass 필터입니다. 이는 모든 주파수를 통과시키지만, 가변 주파수 사이의 위상
 관계를 변화시킵니다.
  | 최대 group delay를 갖는 주파수, 즉 위상 전이 발생의 중심에 있는 주파수입니다. |
 중간 주파수에서 전환이 얼마나 선명한가를 제어합니다. 이 매개 변수가
 클수록 더 선명하고 크게 전환됩니다.
  | *Not used* |

Methods
-------

*`AudioNode` 로부터 메서드를 상속받습니다*.

`BiquadFilterNode.getFrequencyResponse()` (en-US)

이 메서드는 현재 필터 파라미터 설정으로부터 제공된 주파수 배열에 지정된 주파수에 대한 주파수 응답을 계산합니다

Example
-------

See `AudioContext.createBiquadFilter` (en-US) for example code that shows how to use an `AudioContext` to create a Biquad filter node.

명세서
---

| Specification |
| --- |
| Web Audio API # BiquadFilterNode |

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

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

See also
--------

* Using the Web Audio API (en-US)


HTMLLIElement - Web API

HTMLLIElement
=============

**`HTMLLIElement`** 인터페이스는 리스트 엘리먼트를 조작하기 위한 특정 프로퍼티와 메소드들을 제공합니다.

( 정규 `HTMLElement` 인터페이스의 상속을통해 사용이 가능합니다. )

Properties
----------

*부모인 `HTMLElement`에서 상속받습니다.*

`HTMLLIElement.type`
지원이 중단되었습니다

 는 `DOMString` 의 `"disc"`, `"square"` 나 `"circle"` 같은 bullets 타입을 대표합니다.
 리스트 유형을 정의하는 표준 정의 방법은 CSS `list-style-type` (en-US) 프로퍼티를 통해서 이므로, 스트립트를 통하여 CSSSOM 메소드를 사용하세요.

`HTMLLIElement.value`

 는 주어진 `<ol>` 리스트 엘리먼트 안에서 서수의 위치를 가르키는 오랜 서수적 포지션입니다. 이것은 HTML의 `<li>`엘리먼트의 `value`속성을 나타냅니다. 그리고 `0` 보다 작을 수도 있습니다.
 만일 `<li>` 엘리먼트가 `<ol>` 엘리먼트의 자식이 아니라면, 프로퍼티는 아무 의미가 없게됩니다.

Methods
-------

*특정 메소드가 없으며, 부모로부터 프로퍼티를 상속 받습니다.`HTMLElement`.*

명세서
---

| Specification |
| --- |
| HTML Standard # htmllielement |

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

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

See also
--------

* The HTML element implementing this interface: `<li>`


ImageData - Web API

ImageData
=========

**`ImageData`** 인터페이스는 `<canvas>` 엘리먼트 영역의 기저의 픽셀데이터를 나타냅니다`ImageData()` (en-US)생성자나 canvas객체에 연결된 `CanvasRenderingContext2D` (en-US)객체의 `createImageData()` (en-US)나 `getImageData()` (en-US)메소드로 생성할 수 있습니다. **ImageData**는 `putImageData()` (en-US)의 인자로 전달할 수 있으며, 이를 통해 canvas의 일부로 반영할 수 있습니다.

Constructors
------------

`ImageData()` (en-US)
Experimental

인자로 주어진 `Uint8ClampedArray`로 부터 해당 크기에 맞는 ImageData객체를 생성합니다. 만약 인자가 주어지지 않으면 검정색 사각형 이미지를 생성합니다. `createImageData()` (en-US)는 worker에서 사용할 수 없기 때문에, ImageData의 생성자를 이용하는 것이 가장 일반적인 방법입니다.

Properties
----------

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

`Uint8ClampedArray`형식이며 1차원 배열로 RGBA순서로 정의된 이미지 데이터를 나타내니다. 각 원소는 정수값으로 0에서 255사이의 값을 갖습니다.

`ImageData.height` (en-US) 읽기 전용

unsigned long형식으로 ImageData의 pixel기준의 실제 높이값입니다.

`ImageData.width` (en-US) 읽기 전용

unsigned long형식으로 ImageData의 pixel기준의 실제 가로값입니다.

명세서
---

| Specification |
| --- |
| HTML Standard # imagedata |

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

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

See also
--------

* `CanvasRenderingContext2D` (en-US)
* The `<canvas>` element and its associated interface, `HTMLCanvasElement`.


Web Storage API - Web API

Web Storage API
===============

**Web Storage API**는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.

Web Storage 개념과 사용법
-------------------

Web Storage의 두 가지 방식은 다음과 같습니다.

* `sessionStorage`는 각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공합니다.
    + 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장합니다.
    + 데이터를 절대 서버로 전송하지 않습니다.
    + 저장 공간이 쿠키보다 큽니다. (최대 5MB)
* `localStorage`도 위와 같지만, 브라우저를 닫았다 열어도 데이터가 남아있습니다.
    + 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라집니다.
    + 저장 공간이 셋 중 제일 큽니다.

위의 방식은 `Window.sessionStorage`와 `Window.localStorage` 속성을 통해 사용할 수 있습니다. (보다 정확히 말하자면, 지원하는 브라우저에서는 `Window` 객체는 `localStorage` 및 `sessionStorage` 속성을 포함한 `WindowLocalStorage`와 `WindowSessionStorage` 객체를 구현합니다) 두 속성 중 하나에 접근하면 `Storage` 객체의 인스턴스를 생성하게 되고, 그걸 사용해 데이터 항목을 추가, 회수, 제거할 수 있습니다. `sessionStorage`와 `localStorage`의 `Storage` 객체는 각각의 출처별로 다른 것을 사용하며 서로 독립적으로 기능합니다.

**참고:** Firefox 45 이후로는, 과도한 Web Storage 사용으로 인한 메모리 문제를 피하기 위해 브라우저가 충돌하거나 재시작할 때의 출처 당 저장 공간이 10MB로 제한됩니다.

**참고:** 사용자가 서드 파티 쿠키를 비활성화한 경우 서드 파티 IFrame에서 Web Storage에 접근할 수 없습니다. Firefox는 43부터 이 동작을 사용합니다.

Web Storage 인터페이스
-----------------

`Storage`

특정 도메인과 저장 유형(세션 또는 로컬)에 대해 데이터를 저장, 회수, 삭제할 수 있습니다.

`Window`

Web Storage API는 `Window` 객체를 확장합니다. `Window.sessionStorage`와 `Window.localStorage` 속성을 추가해 현재 도메인의 세션과 로컬 `Storage` 객체의 접근을 가능케 하고, 새로운 항목을 추가하는 등 저장 공간이 변경될 때 발생하는 `Window.onstorage` (en-US) 이벤트 처리기도 추가합니다.

`StorageEvent`

`storage` 이벤트는 저장 공간이 변경될 때 `Window` 객체에서 발생합니다.

예제
--

일반적인 Web Storage 사용법을 설명하기 위한 데모를 만들었습니다. 창의적이게도 Web Storage Demo라는 이름으로, 랜딩 페이지에서 색, 글꼴, 이미지를 바꿀 수 있습니다. 선택지를 바꾸면 페이지가 실시간으로 변함과 동시에 `localStorage`에도 현재 상태를 저장하게 되므로, 페이지를 떠났다가 다시 방문해도 선택지가 그대로 보존됩니다.

추가로 이벤트 출력 페이지도 제공 중입니다. 이 페이지를 다른 탭에 열고 랜딩 페이지에서 선택지를 바꾸면 `StorageEvent`를 통해 업데이트된 저장 정보를 출력하는 것을 볼 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # dom-localstorage-dev |
| HTML Standard # dom-sessionstorage-dev |

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

### api.Window.localStorage

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

### api.Window.sessionStorage

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

사생활 보호 / 시크릿 모드
---------------

대부분의 최신 브라우저는 탐색 기록과 쿠키를 남기지 않는 "사생활 보호 모드", "시크릿 모드", 또는 비슷한 이름의 기능을 가지고 있습니다. 그리고 정말 분명한 이유로 인해 Web Storage와 호환되지 않습니다. 브라우저 공급자들은 다양한 시나리오에서 이를 해결하기 위해 실험을 진행하고 있습니다.

대부분의 브라우저는 Web Storage API에 접근 가능하며 기능하는 것 처럼 보이지만, 큰 차이점으로서, 브라우저를 닫으면 저장한 데이터를 제거하는 전략을 택하고 있습니다. 이런 브라우저 사이에서도, 일반 브라우징 세션에서 저장한 기존 데이터의 처리법에 대해서는 이견이 존재합니다. 사생활 보호 모드에서도 저 데이터에 접근할 수 있어야 할까요? 그런 반면, 마찬가지로 Web Storage API는 존재하지만 최대 용량을 0바이트 할당하여 어떠한 데이터도 입력할 수 없도록 하는 일부 브라우저도 존재하며, 대표적으로 Safari가 있습니다.

Web Storage API에 의존하는 웹 사이트를 개발할 때, 개발자는 이러한 구현 차이에 대해 고려해야 합니다. 더 많은 정보는 이 주제를 다루는 WHATWG 블로그 글을 참고하세요.

같이 보기
-----

* Web Storage API 사용하기 (en-US)
* 브라우저 저장 공간 제한과 정리 기준 (en-US)


Page Visibility API - Web API

Page Visibility API
===================

Page Visibility API는 문서가 언제 표시되거나 숨겨지는지 알 수 있는 이벤트와 페이지가 현재 보이고 있는지 상태를 살펴볼 수 있는 기능을 제공합니다.

이 기능은 문서가 보이지 않을 때 불필요한 작업을 수행하지 않도록 하여 리소스를 절약하고 성능을 개선하는 데 특히 유용합니다.

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

사용자가 창을 최소화하거나 다른 탭으로 전환하면, API는 `visibilitychange` 이벤트를 전송하여 리스너에게 페이지 상태가 변경되었음을 알립니다. 이벤트를 감지하여 일부 작업을 수행하거나 다르게 동작하도록 할 수 있습니다. 예를 들어 웹 앱에서 동영상을 재생 중인 경우 사용자가 탭을 백그라운드로 이동하면 동영상을 일시 중지하고 사용자가 탭으로 돌아오면 재생을 다시 시작할 수 있습니다. 사용자는 동영상에서 기존 재생 중인 위치를 잃지 않고, 동영상의 오디오가 새 활성화 탭의 오디오를 방해하지 않으며, 그동안 사용자가 동영상을 놓치지 않을 수 있습니다.

`<iframe>` (en-US)의 가시성 상태는 상위 문서와 동일합니다. CSS 속성(예:`display: none;` (en-US))을 사용하면 `<iframe>`을 숨겨도 가시성 이벤트가 발생하거나 프레임에 포함된 문서의 상태가 변경되지 않습니다.

### 사용 사례

Page Visibility API의 몇 가지 사용 사례를 살펴보겠습니다.

* 사용자가 페이지를 보고 있지 않은 한 다음 슬라이드로 넘어가지 않아야 하는 이미지 캐러셀이 있는 사이트
* 특정 정보에 대한 대시보드를 표시하는 애플리케이션이 페이지가 표시되지 않을 때 서버에 업데이트를 요청하고 싶지 않은 사이트
* 페이지가 미리 렌더링 되는 시기를 감지하여 정확한 페이지 조회 수를 유지하려는 사이트
* 디바이스가 대기 상태(사용자가 전원 버튼을 눌러 화면을 끄는 경우)에 있을 때 소리를 끄고 싶어 하는 사이트

개발자는 지금까지 이를 감지하기 위해 불완전한 프록시를 사용해 왔습니다. 예를 들어 창에서 `blur` (en-US) 및 `focus` (en-US) 이벤트를 감시하면 페이지가 활성 페이지가 아닌 경우를 파악하는 데는 도움이 되지만, 페이지가 실제로 사용자에게 숨겨져 있다는 것을 알려주지는 않습니다. Page Visibility API는 이 문제를 해결합니다.

**참고:** `onblur` (en-US) 및 `onfocus` (en-US)는 사용자가 창을 전환했는지 여부를 알려주지만, 반드시 숨겨지는 것은 아닙니다. 사용자가 탭을 전환하거나 탭이 포함된 브라우저 창을 최소화할 때만 페이지가 숨겨집니다.

### 백그라운드 페이지 성능을 지원하는 정책

Page Visibility API와는 별도로 사용자 에이전트는 일반적으로 백그라운드 또는 숨겨진 탭의 성능 영향을 완화하기 위해 여러 가지 정책을 마련하고 있습니다. 여기에는 다음이 포함될 수 있습니다.

* 대부분의 브라우저는 성능과 배터리 수명을 개선하기 위해 백그라운드 탭이나 숨겨진 `<iframe>` (en-US)에 `requestAnimationFrame()` 콜백 전송을 중지합니다.
* 백그라운드/비활성 탭에서는 `setTimeout()`과 같은 타이머가 스로틀링 되어 성능 개선에 도움이 됩니다. 자세한 내용은 setTimeout이 지정된 시간보다 더 오래 지연되는 이유를 참조하세요.
* 브라우저는 예산 기반 백그라운드 시간제한 스로틀링을 구현합니다. 이는 최신 브라우저에서 비슷한 방식으로 작동하며 자세한 내용은 다음과 같습니다.
    + Firefox에서 백그라운드 탭의 창에는 각각 밀리초 단위의 고유한 시간 예산이 있으며, 최댓값과 최솟값은 각각 +50 ms와 -150 ms입니다. Chrome도 예산이 초 단위로 지정된다는 점을 제외하면 매우 유사합니다.
    + Windows는 창 타이머에 지정된 것과 동일한 스로틀링 지연 규칙에 따라 30초 후에 스로틀링이 적용됩니다. (다시 setTimeout이 지정된 시간보다 더 오래 지연되는 이유를 참조하세요) Chrome에서는 이 값이 10초입니다.
    + 타이머 작업은 예산이 음수가 아닌 경우에만 허용됩니다.
    + 타이머의 코드 실행이 완료되면, 실행에 걸린 시간이 해당 창의 시간 초과 예산에서 차감됩니다.
    + 예산은 Firefox와 Chrome 모두에서 초당 10ms의 속도로 재생성됩니다.

일부 프로세스는 이 스로틀링 동작에서 제외됩니다. 이러한 경우 Page Visibility API를 사용하여 탭이 숨겨져 있는 동안 탭의 성능 영향을 줄일 수 있습니다.

* 오디오를 재생하는 탭은 활성화된 탭으로 간주되어 스로틀링되지 않습니다.
* 실시간 네트워크 연결(WebSockets 및 WebRTC)을 사용하는 코드를 실행하는 탭은 이러한 연결 시간이 초과하여 예기치 않게 닫히는 것을 방지하기 위해 스로틀링이 해제됩니다.
* IndexedDB 프로세스도 시간 초과를 피하고자 스로틀링이 되지 않은 상태로 유지됩니다.
다른 인터페이스로의 확장
-------------

### 인스턴스 속성

Page Visibility API는 `Document` 인터페이스에 다음과 같은 속성을 추가합니다.

`Document.hidden`
지원이 중단되었습니다
 읽기 전용

페이지가 사용자에게 숨겨진 것으로 간주되는 상태이면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다.

`Document.visibilityState` 읽기 전용

문서의 현재 가시성 상태를 나타내는 문자열입니다. 가능한 값은 다음과 같습니다.

`visible`

페이지 콘텐츠가 적어도 부분적으로 표시될 수 있습니다. 실제로는 페이지가 최소화되지 않은 창으로 활성화된 탭임을 의미합니다.

`hidden`

문서의 탭이 백그라운드에 있거나 최소화한 창의 일부이거나, 장치의 화면이 꺼져있기 때문에 페이지 콘텐츠가 사용자에게 표시되지 않습니다.

### 이벤트

Page Visibility API는 `Document` 인터페이스에 다음 이벤트를 추가합니다.

`visibilitychange`

탭의 콘텐츠가 표시되거나 숨겨졌을 때 발생합니다.

예제
--

### 페이지가 숨겨졌을 때, 오디오 일시 중지

이 예제는 사용자가 다른 탭으로 전환할 때, 오디오를 일시 중지하고, 다시 전환하면 재생합니다.

#### HTML

```html
<audio
 controls
 src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>
```

#### JavaScript

```js
const audio = document.querySelector("audio");

// 페이지 가시성이 변경될 때를 처리합니다:
// - 페이지가 숨겨져 있으면, 동영상을 일시 정지합니다.
// - 페이지가 표시되면, 동영상을 재생합니다.
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    audio.pause();
  } else {
    audio.play();
  }
});
```

#### 결과

오디오를 재생한 후에, 다른 탭으로 전환했다가 다시 재생해 보세요.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-visibilitystate |

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

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


table - Web API

table
=====

### HTML Table 요소 인터페이스

`table` 개체는 (상속으로 이용할 수 있는 정규 element 개체 인터페이스 외에) HTML 표의 layout과 presentation을 다루는 특수 프로퍼티와 메소드를 제공하는 `HTMLTableElement` 인터페이스를 내놓습니다.

### 프로퍼티

table.caption

**caption**은 표 caption을 반환합니다.

table.tHead

**tHead**는 표 head를 반환합니다.

table.tFoot

**tFoot**은 표 footer를 반환합니다.

table.rows

**rows**는 표의 줄(row)을 반환합니다.

table.tBodies

**tBodies**는 표 body를 반환합니다.

table.align

**align**은 표 정렬을 get/set합니다.

table.bgColor
지원이 중단되었습니다

**bgColor**는 표의 배경색을 get/set합니다.

table.border

**border**는 표 border를 get/set합니다.

table.cellPadding

**cellPadding**은 cell padding을 get/set합니다.

table.cellSpacing

**cellSpacing**은 표 주변 spacing을 get/set합니다.

table.frame

**frame**은 표 어느 쪽이 border를 가질 지를 지정합니다.

table.rules

**rules**는 안쪽 border가 보일 지를 지정합니다.

table.summary

**summary**는 표 요약을 get/set합니다.

table.width

**width**는 표 너비를 get/set합니다.

### 메소드

table.createTHead

**createTHead**는 표 header를 만듭니다.

table.deleteTHead

**deleteTHead**는 표 header를 없앱니다.

table.createTFoot

**createTFoot**은 표 footer를 만듭니다.

table.deleteTFoot

**deleteTFoot**은 표 footer를 없앱니다.

table.createCaption

**createCaption**는 표에 새 caption을 만듭니다.

table.deleteCaption

**deleteCaption**은 표 caption을 없앱니다.

table.insertRow

**insertRow**는 새 줄을 삽입합니다.

table.deleteRow

**deleteRow**는 줄을 없앱니다.


Using the Mozilla JavaScript interface to XSL Transformations - Web API

Using the Mozilla JavaScript interface to XSL Transformations
=============================================================

이 문서는 Mozilla 1.2의 JavaScript 인터페이스부터 XSLT 처리 엔진(TransforMiiX)까지 설명합니다.

### XSLTProcessor 만들기

시작하기 위해, XSLTProcessor 개체 만들기가 필요합니다.
```

var processor = new XSLTProcessor();
```

### 스타일시트 지정하기

쓸 수 있으려면 그 전에 `importStylesheet()` 함수로 스타일시트를 가져와야(import) 합니다. 가져올 XSLT 스타일시트의 DOM 노드인 매개변수가 하나 있습니다. 가져오기는 동적임을 (가져온 뒤로 스타일시트 DOM을 바꾸면, 이는 처리에 반영됨을 뜻함) 주의하세요. 그러나 DOM 수정 대신 스타일시트 매개변수 사용을 권장합니다. 이는 보통 더 쉽고 더 나은 성능을 줄 수 있습니다.
```

var testTransform = document.implementation.createDocument("", "test", null);
// just an example to get a transform into a script as a DOM
// XMLDocument.load is asynchronous, so all processing happens in the
// onload handler
testTransform.addEventListener("load", onload, false);
testTransform.load("test-transform.xml");
function onload() {
  processor.importStylesheet(testTransform);
}
```

`importStylesheet`는 DOM 노드인 인수가 하나 필요합니다. 그 노드가 문서 노드면 전체 XSL Transform이나 literal result element transform에 넘길 수 있습니다, 그렇지 않으면 `xsl:stylesheet`나 `xsl:transform` 요소이어야 합니다.

### 문서 변환하기

지정한 XSLT 스타일시트를 써서 문서를 변환하기 위해 `transformToDocument()`나 `transformToFragment()` 메소드를 쓸 수 있습니다.

#### transformToDocument

`transformToDocument()`는 변환할 소스 노드인 인수를 하나 취하고 변환 결과를 갖는 새 DOM `Document`를 반환합니다.
```

var newDocument = processor.transformToDocument(domToBeTransformed);
```

결과 개체는 스타일시트의 output 메소드가 `html`이면 `HTMLDocument`, `xml`이면 `XMLDocument`, `text`이면 자식이 text인 단일 루트 요소 `<transformiix:result>`를 갖는 `XMLDocument`입니다.

#### transformToFragment

또한 DOM `DocumentFragment` 노드를 반환하는 `transformToFragment()`를 쓸 수 있습니다. 이는 조각(fragment)을 다른 노드에 투명하게 추가함이 그 조각의 자손 모두를 추가하고 조각 자체는 합치지(merge) 않기 때문에 편리합니다. 그러므로 조각은 여기저기 노드 옮기기와 전체 문서 개체의 overhead 없이 저장하기에 쓸모가 있습니다.

`transformToFragment`는 인수 둘을 취합니다. 변환할 소스 문서(위와 같이)와 조각(조각 모두는 문서가 소유해야 합니다)를 소유하는 `Document` 개체.
```

var ownerDocument = document.implementation.createDocument("", "test", null);
var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);
```

`transformToFragment`는 소유자 문서 자신이 `HTMLDocument`이거나 스타일시트의 output 메소드가 HTML이면 오직 HTML DOM 개체를 만들어냅니다. 다만 결과의 최상위 요소가 `transformToFragment`로 이 요소를 만드는 데 좀처럼 쓰지 않는 `<html>`이면 HTML DOM 개체를 만들어내지 **않**습니다. 이를 재정의(override)하고 싶으면, 보통은 표준 방식으로 output 메소드를 설정할 수 있습니다.

### 매개변수 설정

`setParameter`, `getParameter`, `removeParameter` 메소드를 써서 parameters for the stylesheet를 조절할 수 있습니다. 이들은 모두 `setParameter` 메소드는 세 번째도 취하면서 처음 두 매개변수로 이름공간 URI와 지역명을 설정한 매개변수 값을 취합니다.

### 재설정

`XSLTProcessor` 개체는 또한 모든 스타일시트와 매개변수를 제거하고 처리기(processor)를 초기 상태로 되돌리는 데 쓸 수 있는 `reset()` 메소드를 구현합니다. 이 메소드는 Mozilla 1.3과 그 뒤에 구현됩니다.

### Resources

* nsIXSLTProcessor.idl는 항상 `XSLTProcessor` 개체의 실제 인터페이스를 반영합니다.
    + A XULPlanet reference page.
* The nsIXMLProcessorObsolete IDL file
 : 1.2판보다 앞서는 Mozilla의 JS 인터페이스.
### 원본 문서 정보

* 저자:
 Mike Hearn
* 최종 업데이트: December 21, 2005
* 저작권 정보: Copyright (C) Mike Hearn


Clipboard API - Web API

Clipboard API
=============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Clipboard API**는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다.

**참고:** 이 API는 웹 워커에서 사용할 수 **없습니다**. (`WorkerNavigator` (en-US)에 노출되지 않음)

Clipboard API는 `document.execCommand()`를 사용한 클립보드 접근을 대체하기 위해 디자인되었습니다.

클립보드 접근
-------

시스템 클립보드에 접근할 땐 `Clipboard` 객체의 인스턴스를 생성하지 않고, 전역 `Navigator.clipboard` (en-US)를 사용합니다.

```js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );
```

위의 코드 조각은 클립보드에서 텍스트를 가져와서, `editor` 클래스를 가진 첫 번째 요소의 콘텐츠 뒤에 추가합니다. `readText()` (en-US)는 (`read()` (en-US)도 마찬가지로) 클립보드의 내용이 텍스트가 아니면 빈 문자열을 반환하므로, 이 코드는 안전합니다.

인터페이스
-----

`Clipboard` (en-US) Secure context

시스템 클립보드에서 텍스트와 데이터를 읽고 쓸 수 있는 인터페이스를 제공합니다. 명세에서는 "Async Clipboard API"라고 부릅니다.

`ClipboardEvent` Secure context

`cut`, `copy`, `paste` 이벤트처럼 클립보드 조작에 대한 정보를 제공하는 이벤트를 나타냅니다. 명세에서는 "Clipboard Event API"라고 부릅니다.

`ClipboardItem` (en-US) Secure context

클립보드 데이터를 읽거나 쓸 때 데이터 형식을 나타낼 수 있습니다.

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |
| Clipboard API and events # clipboard-event-interfaces |
| Clipboard API and events # clipboarditem |

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

### api.Clipboard

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

### api.ClipboardEvent

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

### api.ClipboardItem

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

같이 보기
-----

* Async Clipboard API 데모 (Glitch)
* web.dev의 Async Clipboard API


Server-sent events - Web API

Server-sent events
==================

전통적으로 웹페이지는 새로운 데이터를 받기 위해 서버로 요청을 보내야만 합니다; 서버로 데이터를 요청하는 방식입니다. 하지만 Server-Sent Events 방식으로 웹페이지의 요청 없이도 언제든지 서버가 새로운 데이터를 보내는 것이 가능합니다. 이렇게 보내진 메시지는 웹페이지 안에서 *Events + 데이터*로 다룰 수 있습니다.

기본 & 사용하기
---------

Server-Sent Events를 배우려면 다음 글을 읽어보세요: Server-Sent Events 사용하기.

인터페이스
-----

`EventSource` (en-US)

서버와의 연결, 이벤트/데이터, 에러 받아오기, 연결 종료하기 등을 다루는 모든 기능을 정의하고 있습니다.

예제
--

* PHP를 이용하여 구현한 간단한 SSE 데모
명세
--

| Specification |
| --- |
| HTML Standard # server-sent-events |

더 찾아보기
------

### 도구

* Node.js를 위한 EventSource 폴리필
* Remy Sharp의 EventSource 폴리필
* Yaffle의 EventSource 폴리필
* Rick Waldron jquery 플러그인
* 선언적인 SSE를 지원하는 intercooler.js
### 관련 주제

* AJAX (en-US)
* JavaScript
* WebSockets
### 그 외 자료

* SSE로 구현된 Twitter 어플리케이션과 깃허브에 공개된 소스코드.
* HTML5와 Server-sent events
* Asp.net을 이용한 Server-Sent Events


Comment - Web API

Comment
=======

**`Comment`** 인터페이스는 마크업 내의 텍스트 표기인 주석을 나타냅니다. 주석은 화면에 보여지지 않지만 웹 페이지의 소스에서 확인할 수 있습니다. HTML과 XML에서 주석은 '`<!--`' 표기와 '`-->`' 사이의 내용입니다. XML의 주석 내용에는 '`--`'을 포함할 수 없습니다.

EventTarget

Node

(en-US)

CharacterData

Comment속성
--

`Comment` 인터페이스는 별도의 속성을 갖지 않지만 부모인 `CharacterData`와, 그 부모인 `Node` (en-US)의 속성을 상속합니다.

생성자
---

`Comment()` (en-US)
Experimental

매개변수를 내용으로 하는 `Comment` 객체를 반환합니다.

메서드
---

`Comment` 인터페이스는 별도의 메서드를 갖지 않지만 부모인 `CharacterData`와, 그 부모인 `Node` (en-US)의 메서드를 상속합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-comment |

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

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

같이 보기
-----

* DOM 인터페이스 목록


RTCIceCandidate - Web API

RTCIceCandidate
===============

**`RTCIceCandidate`** 인터페이스는 WebRTC API의 한 종류로서, `RTCPeerConnection` (en-US)을 구축 할 때 사용되기도하는 Internet Connectivity Establishment (ICE)의 후보군 (candidate)를 말합니다.

하나의 ICE candidate는 WebRTC가 원격 장치와 통신을 하기 위해 요구되는 프로토콜과 라우팅에 대해 알려줍니다. WebRTC 피어 연결을 처음 시작하게되면, 일반적으로 여러개의 candiate들이 연결의 각 end에 의해 만들어집니다. 그리고 이 과정은 로컬 유저와 원격 유저가 연결을 위해 최고의 방법을 서로의 동의하에 선택하기 전까지 계속 됩니다. 이후에 WebRTC가 선택한 candidate를 사용해서 연결을 시도하게됩니다.

ICE 과정이 어떻게 동작하는지 자세히 알고 싶다면, Lifetime of a WebRTC session (en-US)을 확인해보십시오.이외에도 WebRTC connectivity (en-US)에서는 유용한 추가 정보를 제공합니다.

생성자
---

`RTCIceCandidate()` (en-US)

단일 ICE candidate를 나타내기 위해 RTCIceCandidate 객체를 생성합니다. 옵션으로 `RTCIceCandidateInit` (en-US) 딕셔너리에 존재하는 객체를 이용해 설정이 가능합니다.> **참고:** 이전 버전의 호환성을 위해서는, 생성자가 `candidate` 속성의 값을 가진 문자열을 `RTCIceCandidateInit` (en-US) 객체 대신에 입력 인자로 받습니다. 이는 `candidate`가 `RTCIceCandidateInit`보다 더 많은 정보를 가지고 있기 때문입니다.

속성
--

`candidate` 읽기 전용

연결성 확인을 위해 사용 될 수 있는 candidate에 대한 전달 주소를 나타내는 `DOMString`입니다. 이 주소의 형식은 RFC 5245에 정의된바와 같이 `candidate-attribute` 입니다. `RTCIceCandidate`가 "마지막 candidate"를 알려주면, 이 문자열은 빈 문자열 (`""`)이 됩니다.

`component` (en-US) 읽기 전용

ICE candidate가 RTP (`rtp`) 인지 RTCP (`rtcp`)인지 알려주는 `DOMString`입니다. 이 값들은 `candidate` 라인 문자열에 있는 `"component-id"` 필드에서 가져와집니다. 허용되는 값은 `RTCIceComponent` (en-US) enum 타입에 정리되어있습니다.

`foundation` (en-US) 읽기 전용

같은 유형의 candidate와 동일한 식별자를 가진 `DOMString`를 반환합니다. `DOMString`는 동일한 베이스 (ICE 에이전트가 candidate를 보낸 주소)를 공유하고, 동일한 STUN서버에서 가져와집니다. 이 속성을 사용해서 `RTCIceTransport` (en-US)객체에 나타나는 candidate의 우선 순위를 매기고 연관을 시키면서 ICE 성능을 최적화 할 수 있습니다.

`ip` (en-US) 읽기 전용

candidate의 IP 주소를 가지고 있는 `DOMString`입니다.

`port` (en-US) 읽기 전용

candidate의 포트 넘버를 알려주는 정수 값 입니다.

`priority` (en-US) 읽기 전용

candidate의 우선순위를 알려주는 long 정수 값 입니다.

`protocol` (en-US) 읽기 전용

candidate의 프로토콜이 `"tcp"`인지 `"udp"`인지 알려주는 문자열입니다. 이 문자열은 `RTCIceProtocol` enum 타입 중 하나 입니다.

`relatedAddress` (en-US) 읽기 전용

candidate가 다른 candidate, 즉 호스트 candidate에서 가져와졌다면, `relatedAddress`는 호스트 candidate의 IP 주소를 포함하는 `DOMString`입니다. 호스트 candidate에서 이 값은 `null` 입니다.

`relatedPort` (en-US) 읽기 전용

candidate가 relay 혹은 reflexive candidate로 부터 가져와진 경우, `relatedPort`는 해당하는 호스트 candidate의 포트 넘버를 가르킵니다. 마찬가지로, 호스트 candidate에서 이 값은 `null` 입니다.

`sdpMid` (en-US) 읽기 전용

candidate의 미디어 스트림 식별 태그를 정의하는 `DOMString`입니다. 여기서 식별 태그는 candidate와 연관이 있는 컴포넌트안의 미디어 스트림을 유일하게 식별합니다. candidate와 관련이 있는 미디어 스트림이 존재하지 않으면, 이 값은 `null` 입니다.

`sdpMLineIndex` (en-US) 읽기 전용

이 값이 `null`이 아니라면, `sdpMLineIndex`는 candidate와 연관 된 SDP의 미디어 설명에 대한, 0을 기준으로 하는 색인 번호를 알려줍니다 (RFC 4566에 정의되어 있습니다.).

`tcpType` (en-US) 읽기 전용

`protocol`이 `"tcp"`라면,`tcpType`은 TCP candidate의 타입을 알려줍니다. 이외에는 `tcpType`은 `null` 입니다.

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

`RTCIceCandidateType` (en-US) enum 타입에 존재하는 문자열에 속하는 candidate의 타입을 알려주는 `DOMString`입니다.

`usernameFragment` (en-US) 읽기 전용

ICE가 무작위로 생성된 비밀번호 (`"ice-pwd"`) 와 함께 메세지의 무결성을 확인하기 위해 사용하는 무작위로 생성된 유저 이름 조각 (`"ice-ufrag"`)을 가지고 있는 `DOMString`입니다. 이 문자열을 사용해서 ICE 생성의 버전을 확인 할 수 있습니다. ICE가 재시작하더라도, 같은 버전의 ICE 프로세스는 동일한 `usernameFragment`를 가지게 됩니다.

메소드
---

`toJSON()`

`toJSON()`은 `RTCIceCandidate`의 현재 저장된 설정을 담은 JSON 표현식을 `RTCIceCandidateInit` (en-US) 객체의 형태로 변환시킨 `DOMString`를 반환합니다.

예시
--

예시를 보려면, 전체 과정을 설명해주는 Signaling and video calling문서를 확인하십시오.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcicecandidate-interface |

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

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


Battery Status API - Web API

Battery Status API
==================

**Battery API** 만큼이나 자주 언급되는 **Battery Status API**는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.

Battery Status API 는 `window.navigator.battery` 를 제공 합니다. 이는 `BatteryManager` 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.

예제
--

아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 `chargingchange` (en-US) 와 `levelchange` (en-US) 이벤트가 발생하면 완료 됩니다.

```js
var battery =
  navigator.battery || navigator.mozBattery || navigator.webkitBattery;

function updateBatteryStatus() {
  console.log("Battery status: " + battery.level \* 100 + " %");

  if (battery.charging) {
    console.log("Battery is charging");
  }
}

battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
updateBatteryStatus();
```

명세서의 예제도 **확인**해보세요.

명세
--

| Specification |
| --- |
| Battery Status API  |

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

### api.BatteryManager

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

### api.Navigator.getBattery

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

더보기
---

* Hacks blog post - Using the Battery API
* `BatteryManager`
* `navigator.battery`


queueMicrotask() - Web API

queueMicrotask()
================

`Window` 또는 `Worker` 인터페이스의 **`queueMicrotask()`** 메서드는 브라우저의 이벤트 루프로 통제권이 넘어가기 전, 안전한 시점에 실행할 마이크로태스크를 큐에 추가합니다.

마이크로태스크란 현재 태스크가 종료된 후, 그리고 실행 맥락의 통제권이 브라우저 이벤트 루프로 넘어가기 전에, 실행해야 하는 다른 코드가 없으면 처리되는 짧은 함수입니다.

마이크로태스크를 사용하면 현재 대기 중인 더 중요한 코드에 간섭하지 않으면서도, 브라우저가 실행 맥락을 다시 통제하기 전에 필요한 작업을 처리할 수 있습니다. 마이크로태스크 안내서에서 마이크로태스크 사용법과 필요성을 알아보세요.

마이크로태스크의 중요성은 작업을 비동기적으로, 그러나 특정 순서로 실행할 수 있다는 점에 있습니다. 관련 예제 또한 마이크로태스크 안내서에서 볼 수 있습니다.

최종 정리 작업이나 렌더링 바로 직전 실행해야 하는 작업이 필요한 라이브러리와 프레임워크에서 마이크로태스크를 유용하게 사용할 수 있습니다.

구문
--

```js
queueMicrotask(function);
```

### 매개변수

`function`

브라우저 엔진이 안전한 시점에 실행할 `function`입니다. 큐에 올라간 마이크로태스크는 현재 대기 중인 모든 태스크가 완료된 후, 그러나 통제권을 이벤트 루프로 넘겨주기 전에 실행됩니다.

### 반환 값

`undefined`.

예제
--

```js
queueMicrotask(() => {
  // 함수 내용
});
```

다음은 queueMicrotask 명세에서 가져온 예제 코드입니다.

```js
MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    queueMicrotask(() => {
      this.\_setData(this._cache[url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url)
      .then((res) => res.arrayBuffer())
      .then((data) => {
        this._cache[url] = data;
        this.\_setData(data);
        this.dispatchEvent(new Event("load"));
      });
  }
};
```

명세
--

| Specification |
| --- |
| HTML Standard # microtask-queuing |

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

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

같이 보기
-----

* `core-js`의 `queueMicrotask` 폴리필
* JavaScript의 queueMicrotask()와 함께 마이크로태스크 사용하기
* 비동기 JavaScript


Popover API - Web API

Popover API
===========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Popover API**는 개발자에게 다른 페이지 콘텐츠 위에 팝오버 콘텐츠를 표시할 수 있는 표준적이고 일관되며 유연한 메커니즘을 제공합니다. 팝오버 콘텐츠는 HTML 속성을 사용하여 선언적으로 제어하거나 JavaScript를 통해 제어할 수 있습니다.

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

웹에서 매우 일반적인 패턴은 다른 콘텐츠 위에 콘텐츠를 표시하여 사용자의 주의를 특정 중요 정보나 수행해야 하는 작업으로 유도하는 것입니다. 이 콘텐츠는 오버레이, 팝업, 팝오버, 대화 상자 등 여러 가지 이름으로 불릴 수 있습니다. 문서에서는 이를 팝오버라고 부릅니다. 일반적으로 다음과 같이 말할 수 있습니다.

* **모달**, 즉 팝오버가 표시되는 동안에는 팝오버가 어떤 식으로든 작동할 때까지(예: 중요한 선택이 이루어질 때까지) 페이지의 나머지 부분이 상호작용하지 않는 상태로 렌더링 됩니다.
* **비모달**, 팝오버가 표시되는 동안 페이지의 나머지 부분과 상호 작용할 수 있음을 의미합니다.

팝오버 API를 사용하여 생성된 팝오버는 항상 비모달입니다. 모달 팝오버를 만들려면 `<dialog>`를 사용하는 것이 올바른 방법이지만, 기본적으로 `<dialog>` 요소는 top layer에 배치되지 않지만, 팝오버는 배치된다는 점에 유의하세요. 예를 들어 지속되는 팝오버를 만들되 선언적 HTML을 사용하여 제어하려는 경우와 같이 두 요소 사이에는 상당한 중복이 있습니다. 팝오버 제어와 최상위 수준 배치를 대화 상자 의미와 결합하려는 경우, `<dialog>` 요소를 팝오버로 바꿀 수도 있습니다.

popover API의 일반적인 사용 사례에는 액션 메뉴, 사용자 지정 '토스트' 알림, 폼 요소 제안, 콘텐츠 선택기 또는 교육용 UI 같은 상호작용 요소가 포함됩니다.

팝오버는 두 가지 방법으로 만들 수 있습니다.

* 선언적으로, 새로운 HTML 특성 세트를 통해 다음 코드를 사용하여 토글 버튼이 있는 간단한 팝오버를 만들 수 있습니다.

```html
<button popovertarget="mypopover">팝오버를 토글하세요</button>
<div id="mypopover" popover>팝오버 콘텐츠</div>
```

* 예를 들어 `HTMLElement.togglePopover()` (en-US)와 같은 JavaScript API를 사용하여 팝오버를 표시와 숨김 간에 토글 할 수 있습니다.

팝오버가 전환될 때 반응하는 새로운 이벤트와 팝오버의 스타일을 지정하는 데 도움이 되는 CSS 기능도 추가되었습니다. 모든 새로운 기능은 아래에 나열되어 있습니다.

이 API 사용에 대한 자세한 안내는 popover API 사용하기 (en-US) 문서를 참조하세요.

HTML 특성
-------

`popover` (en-US)

요소를 팝오버 요소로 전환하는 전역 속성으로, 팝오버 상태(`"auto"` 또는 `"manual"`)를 값으로 받습니다.

`popovertarget`

`<button>` 또는 `<input>` (en-US) 요소를 팝오버 제어 버튼으로 바꾸고 제어할 팝오버 요소의 ID를 값으로 받습니다.

`popovertargetaction`

컨트롤 `<button>` 또는 `<input>` (en-US)으로 제어되는 팝오버 요소에서 수행할 작업(`"hide"`, `"show"`, 또는 `"toggle"`)을 지정합니다.

CSS 기능
------

`::backdrop` (en-US)

`::backdrop` 의사 요소(pseudo-element)는 팝오버 요소 바로 뒤에 배치되는 전체 화면 요소로, 원하는 경우 팝오버 뒤에 있는 페이지 콘텐츠에 효과(예: 흐리게 처리)를 추가할 수 있습니다.

`:popover-open` (en-US)

`:popover-open` 의사 클래스(pseudo-class)는 팝오버 요소가 표시 상태일 때만 일치하며, 팝오버 요소가 표시될 때 스타일을 지정하는 데 사용할 수 있습니다.

인터페이스
-----

`ToggleEvent` (en-US)

팝오버 요소의 상태가 표시와 숨김 사이를 전환할 때 사용자에게 알리는 이벤트를 나타냅니다. 팝오버의 상태가 변경될 때 발생하는 `beforetoggle` (en-US) 및 `toggle` (en-US) 이벤트의 이벤트 객체입니다.

다른 인터페이스로의 확장
-------------

### 인스턴스 속성

`HTMLElement.popover` (en-US)

JavaScript를 통해 요소의 팝오버 상태(`"auto"` or `"manual"`)를 가져오고 설정하며, 기능 감지에 사용할 수 있습니다. `popover` (en-US) 전역 HTML 특성 값을 반영합니다.

`HTMLButtonElement.popoverTargetElement` (en-US) 및 `HTMLInputElement.popoverTargetElement` (en-US)

컨트롤 버튼으로 제어되는 팝오버 요소를 가져오고 설정합니다. JavaScript에서 `popovertarget` HTML 특성에 해당하는 값입니다.

`HTMLButtonElement.popoverTargetAction` (en-US) 및 `HTMLInputElement.popoverTargetAction` (en-US)

컨트롤 버튼으로 제어되는 팝오버 요소에서 수행할 액션(`"hide"`, `"show"`, 또는 `"toggle"`)을 가져오고 설정합니다. `popovertargetaction` HTML 특성의 값을 반영합니다.

### 인스턴스 메서드

`HTMLElement.hidePopover()` (en-US)

팝오버 요소를 최상위 레이어에서 제거하고 `display: none`으로 스타일을 지정하여 숨깁니다.

`HTMLElement.showPopover()` (en-US)

팝오버 요소를 최상위 레이어에 추가하여 표시합니다.

`HTMLElement.togglePopover()` (en-US)

팝오버 요소를 표시 상태와 숨김 상태 간에 토글 합니다.

### 이벤트

`HTMLElement` `beforetoggle` (en-US) 이벤트

팝오버 요소의 상태가 표시와 숨김 사이 또는 그 반대로 변경되기 직전에 실행됩니다.

`HTMLElement` `toggle` (en-US) 이벤트

팝오버 요소의 상태가 표시됨에서 숨김으로 또는 그 반대로 변경된 직후에 발생합니다. 이 이벤트는 이미 `<details>` (en-US) 요소의 상태 변경을 알리기 위해 존재했으며, 팝오버 요소에도 확장하는 것이 논리적으로 보였습니다.

예제
--

MDN 팝오버 예제의 전체 컬렉션에 접근하려면 Popover API 예제 랜딩 페이지를 참조하세요.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-popover |

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

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


BaseAudioContext - Web API

BaseAudioContext
================

Web Audio API의 `BaseAudioContext` 인터페이스는 `AudioContext` 와 `OfflineAudioContext`에 의해 표현되는 온라인과 오프라인 오디오 프로세싱 그래프에 대한 기본 정의로 작동합니다. `BaseAudioContext`는 직접적으로 사용될 수 없습니다. 대신 위에서 언급한 두 상속 인터페이스를 통해 `BaseAudioContext`의 기능을 사용할 수 있습니다.

`BaseAudioContext`는 이벤트의 타겟이 될 수 있는데, 따라서 이것은 `EventTarget` 인터페이스를 구현합니다.

EventTarget

BaseAudioContext속성
--

`BaseAudioContext.audioWorklet` (en-US)
Experimental
 읽기 전용 Secure context

`AudioWorklet` 객체를 반환하는데, 이는 `AudioWorkletProcessor` 인터페이스를 구현하는 JavaScript 코드가 오디오 데이터를 처리하기 위해 백그라운드에서 실행되는 `AudioNode`들을 생성하고 관리하는 데 쓰일 수 있습니다.

`BaseAudioContext.currentTime` (en-US) 읽기 전용

스케쥴링에 사용되는 초 단위로 계속 증가하는 하드웨어 시간을 나타내는 double을 반환합니다. 이는 `0`에서 시작합니다.

`BaseAudioContext.destination` (en-US) 읽기 전용

컨텍스트 내의 모든 오디오의 최종 도착지를 나타내는 `AudioDestinationNode`를 반환합니다. 이것은 오디오를 렌더링하는 장치로 생각될 수 있습니다.

`BaseAudioContext.listener` (en-US) 읽기 전용

3D 공간화에 사용되는 `AudioListener` (en-US) 객체를 반환합니다.

`BaseAudioContext.sampleRate` (en-US) 읽기 전용

이 컨텍스트 내의 모든 노드에 의해 사용되는 샘플 레이트(초당 샘플)를 나타내는 float을 반환합니다. `AudioContext`의 샘플 레이트는 변경될 수 없습니다.

`BaseAudioContext.state` (en-US) 읽기 전용

`AudioContext`의 현재 상태를 반환합니다.

### 이벤트 처리기

`statechange` (en-US)

statechange 유형의 이벤트가 발생되었을 때 실행되는 이벤트 처리기입니다. 이것은 상태 변화 메서드(`AudioContext.suspend` (en-US), `AudioContext.resume` (en-US), 또는 `AudioContext.close` (en-US)) 중 하나의 호출에 기인해 `AudioContext`의 상태가 변경되었을 때 발생됩니다.

메서드
---

*또한 `EventTarget` 인터페이스로부터의 메서드를 구현합니다.*

`BaseAudioContext.createAnalyser()` (en-US)

오디오 시간과 주파수 데이터를 드러내고 데이터 시각화를 생성하는 데 사용될 수 있는 `AnalyserNode`를 생성합니다.

`BaseAudioContext.createBiquadFilter()` (en-US)

high-pass, low-pass, band-pass와 같은 몇몇 다른 흔한 필터 유형으로 설정 가능한 2차 필터를 나타내는 `BiquadFilterNode`를 생성합니다.

`BaseAudioContext.createBuffer()` (en-US)

데이터를 넣거나 `AudioBufferSourceNode`를 통해 재생될 수 있는 새로운 빈 `AudioBuffer` 객체를 생성합니다.

`BaseAudioContext.createBufferSource()` (en-US)

`AudioBuffer` 객체 내부에 포함된 오디오 데이터를 재생하거나 조작하기 위해 사용될 수 있는 `AudioBufferSourceNode`를 생성합니다. `AudioBuffer`들은 `AudioContext.createBuffer()` (en-US)를 사용해 생성되거나 성공적으로 오디오 트랙을 디코드했을 때 `AudioContext.decodeAudioData()` (en-US)에 의해 반환됩니다.

`BaseAudioContext.createConstantSource()` (en-US)

샘플이 모두 같은 값을 가지고 있는 모노럴의(한 채널의) 사운드 신호를 계속적으로 출력하는 오디오 소스인 `ConstantSourceNode` (en-US) 객체를 생성합니다.

`BaseAudioContext.createChannelMerger()` (en-US)

다수의 오디오 스트림으로부터 하나의 오디오 스트림에 채널을 결합하기 위해 사용되는 `ChannelMergerNode` (en-US)를 생성합니다.

`BaseAudioContext.createChannelSplitter()` (en-US)

오디오 스트림의 각 채널에 접근하고 별도로 그것들을 처리하기 위해 사용되는 `ChannelSplitterNode` (en-US)를 생성합니다.

`BaseAudioContext.createConvolver()` (en-US)

오디오 그래프에 잔향(reverberation) 효과와 같은 콘볼루션 이펙트를 적용하기 위해 사용될 수 있는 `ConvolverNode` (en-US)를 생성합니다.

`BaseAudioContext.createDelay()` (en-US)

들어오는 오디오 신호를 지연시키기 위해 사용되는 `DelayNode` (en-US)를 생성합니다. 이 노드는 Web Audio API 그래프에서 피드백 루프를 생성하는 데 유용합니다.

`BaseAudioContext.createDynamicsCompressor()` (en-US)

음향 압축(acoustic compression)을 오디오 신호에 적용하기 위해 사용될 수 있는 `DynamicsCompressorNode` (en-US)를 생성합니다.

`BaseAudioContext.createGain()` (en-US)

오디오 그래프의 전반적인 볼륨을 제어하기 위해 사용될 수 있는 `GainNode` (en-US)를 생성합니다.

`BaseAudioContext.createIIRFilter()` (en-US)

몇몇 다른 흔한 필터 유형으로 설정 가능한 2차 필터를 나타내는 `IIRFilterNode` (en-US)를 생성합니다.

`BaseAudioContext.createOscillator()` (en-US)

주기적인 파형을 나타내는 소스인 `OscillatorNode` (en-US)를 생성합니다. 이것은 기본적으로 음색을 생성합니다.

`BaseAudioContext.createPanner()` (en-US)

들어오는 오디오 스트림을 3D 공간에서 공간화하기 위해 사용되는 `PannerNode` (en-US)를 생성합니다.

`BaseAudioContext.createPeriodicWave()`

`OscillatorNode` (en-US)의 출력을 결정하기 위해 사용될 수 있는 주기적인 파형을 정의하는 데 쓰이는 `PeriodicWave`를 생성합니다.

`BaseAudioContext.createScriptProcessor()` (en-US)
지원이 중단되었습니다

JavaScript를 통한 직접적인 오디오 프로세싱을 위해 사용될 수 있는 `ScriptProcessorNode` (en-US)를 생성합니다.

`BaseAudioContext.createStereoPanner()` (en-US)

오디오 소스에 스테레오 패닝을 적용하기 위해 사용될 수 있는 `StereoPannerNode` (en-US)를 생성합니다.

`BaseAudioContext.createWaveShaper()` (en-US)

비선형 변형(non-linear distortion) 효과를 구현하기 위해 사용되는 `WaveShaperNode` (en-US)를 생성합니다.

`BaseAudioContext.decodeAudioData()` (en-US)

비동기적으로 `ArrayBuffer`에 포함된 오디오 파일 데이터를 디코드합니다. 이 경우, ArrayBuffer는 보통 `arraybuffer`에 `responseType`을 설정한 후 `XMLHttpRequest`의 `response` 특성으로부터 로딩됩니다. 이 메서드는 오디오 파일의 조각이 아니라, 오직 완전한 파일에서만 작동합니다.

예제
--

기본적인 오디오 컨텍스트 선언

```js
const audioContext = new AudioContext();
```

크로스 브라우저를 위한 다른 형태

```js
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();

const oscillatorNode = audioContext.createOscillator();
const gainNode = audioContext.createGain();
const finish = audioContext.destination;
```

명세
--

| Specification |
| --- |
| Web Audio API # BaseAudioContext |

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

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

같이 보기
-----

* Web Audio API 사용하기
* `AudioContext`
* `OfflineAudioContext`


AudioWorkletProcessor - Web API

AudioWorkletProcessor
=====================

Web Audio API의 **`AudioWorkletProcessor`** 인터페이스는 사용자 정의 `AudioWorkletNode` 뒤의 오디오 프로세싱 코드를 나타냅니다. 이것은 `AudioWorkletGlobalScope` 안에 있으며 Web Audio 렌더링 스레드에서 실행됩니다. 결과적으로, 이것에 기반한 `AudioWorkletNode`가 메인 스레드에서 실행됩니다.

생성자
---

**참고:** `AudioWorkletProcessor` 와 이것으로부터 파생된 클래스들은 사용자에 의해 제공된 코드로부터 직접적으로 초기화될 수 없습니다. 대신, 이것들은 오직 연관된 `AudioWorkletNode`들의 생성에 의해서만 내부적으로 생성됩니다. 파생된 클래스의 생성자는 options 객체와 함께 호출되므로, 여러분은 사용자 정의 초기화 절차를 수행할 수 있습니다 — 자세한 사항은 생성자 페이지를 참고하세요.

`AudioWorkletProcessor()`

`AudioWorkletProcessor` 객체의 새 인스턴스를 생성합니다.

속성
--

`port` 읽기 전용

프로세서와 프로세서가 속한 `AudioWorkletNode` 사이의 양방향 소통에 사용되는 `MessagePort` (en-US)를 반환합니다. 다른 쪽 끝은 이 노드의 `port` 속성 아래에서 사용 가능합니다.

메서드
---

*`AudioWorkletProcessor` 인터페이스는 이것이 소유하는 어떠한 메서드도 정의하지 않습니다. 그러나, 오디오 스트림을 처리하기 위해 호출되는 `process()` 메서드를 여러분은 반드시 제공해야만 합니다.*

이벤트
---

*`AudioWorkletProcessor` 인터페이스는 어떠한 이벤트에도 응답하지 않습니다.*

사용 일람
-----

### 클래스 파생

사용자 정의 오디오 프로세싱 코드를 정의하려면, 여러분은 `AudioWorkletProcessor` 인터페이스로부터 클래스를 파생시켜야 합니다. 비록 인터페이스에 정의되어 있지 않기는 하나, 파생 클래스는 반드시 `process` 메서드를 가지고 있어야만 합니다. 이 메서드는 128 샘플 프레임의 각 블럭마다 호출되고 입력과 출력 배열과 만약 정의되어 있다면 사용자 정의 `AudioParam`들의 계산된 값들을 매개변수로 받습니다. 여러분은 입력과 오디오 파라미터 값들을 기본적으로는 무음을 가지는 출력 배열을 채우기 위해 사용할 수 있습니다.

선택적으로, 만약 여러분이 사용자 정의 `AudioParam`들을 여러분의 노드에서 원한다면, 여러분은 프로세서의 *static getter* 로서 `parameterDescriptors` 속성을 제공할 수 있습니다. 반환되는 `AudioParamDescriptor` 기반 객체의 배열은 `AudioWorkletNode`의 초기화 동안 `AudioParam`들을 생성하기 위해 내부적으로 사용됩니다 .

결과로 나오는 `AudioParam` 들은 노드의 `parameters` 속성 안에 있으며 `linearRampToValueAtTime`과 같은 표준 메서드를 사용해 자동화될 수 있습니다. 이것들의 계산된 값들은 여러분이 노드 출력을 이에 맞춰 조절할 수 있도록 프로세서의 `process()` 메서드 안으로 전달될 것입니다.

### 오디오 프로세싱

사용자 정의 오디오 프로세싱 생성 메커니즘의 예제 알고리즘입니다.

1. 별도의 파일을 생성합니다.
2. 그 파일에서
    1. `AudioWorkletProcessor` 클래스를 확장하고 ("클래스 파생" 섹션을 참고하세요) 여러분만의 `process()` 메서드를 그 안에 제공하세요.
    2. `AudioWorkletGlobalScope.registerProcessor()` 메서드를 사용해 프로세서를 등록하세요.
3. 오디오 컨텍스트의 `audioWorklet` (en-US) 속성에서 `addModule()` (en-US) 메서드를 사용하여 파일을 로드하세요.
4. 이 프로세서에 기반하는 `AudioWorkletNode`를 생성하세요. 이 프로세서는 `AudioWorkletNode` 생성자에 의해 내부적으로 초기화될 것입니다.
5. 이 노드를 다른 노드들에 연결하세요.
예제
--

아래의 예제에서 우리는 백색소음을 출력하는 사용자 정의 `AudioWorkletNode`를 생성합니다.

우선, 우리는 백색소음을 출력할 사용자 정의 `AudioWorkletProcessor` 를 정의하고, 등록할 필요가 있습니다. 이 작업은 별도의 파일에서 이루어져야 함에 주의하세요.

```js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() \* 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);
```

다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 `AudioWorkletNode`에 전달하며 `AudioWorkletNode`의 인스턴스를 생성하고, 그리고 나서 이 노드를 오디오 그래프에 연결합니다.

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("white-noise-processor.js");
const whiteNoiseNode = new AudioWorkletNode(
  audioContext,
  "white-noise-processor",
);
whiteNoiseNode.connect(audioContext.destination);
```

명세서
---

| Specification |
| --- |
| Web Audio API # AudioWorkletProcessor |

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

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

같이 보기
-----

* Web Audio API
* Web Audio API 사용하기


Cache - Web API

Cache
=====

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

**`Cache`** 인터페이스는 `ServiceWorker` 의 생명주기의 일부로 캐시 된 `Request`와 `Response`를 나타냅니다.

도메인은 여러개의 이름이 지정된 `Cache` 객체를 가질 수 있으며 그 객체들은 `ServiceWorker`가 완전히 제어합니다.`ServiceWorker` 스크립트가 `Cache` 업데이트를 어떻게 컨트롤 할지에 대해서 구현해야 합니다. 명시적으로 요청하지 않으면 `Cache` 항목들은 업데이트 되지 않습니다. 삭제되지 않으면 만료되지 않습니다. `CacheStorage.open(cacheName)` (en-US) 을 사용하여 특정 이름으로 지정 된 `Cache` 객체를 로드하고 `Cache` 메서드를 호출하여 캐시를 유지 관리합니다.

또한 캐시 항목을 정기적으로 삭제해야 합니다. 각각의 브라우저는 `ServiceWorker`가 사용할 수 있는 캐시 저장소의 양에 대해서 제한을 엄격하게 두고 있습니다. 브라우저는 디스크 공간을 관리하기 위해서 최선을 다하지만 원본에 대한 캐시 저장소를 삭제할 수 있습니다. 브라우저는 일반적으로 원본에 대한 모든 데이터를 삭제하거나 원본에 대한 모든 데이터를 삭제하지 않을 것입니다. 이름지어진 특정 캐시 버전을 확인하고 안전하게 작동할 수 있는 `ServiceWorker` 버전에서만 캐시를 사용하십시오. 캐시 삭제에 대한 자세한 내용은 Deleting old caches (en-US)을 참고하세요.

**참고:** 초기 캐시 구현(Blink 및 Gecko)은 응답이 완전히 기록될 때 `Cache.add` (en-US), `Cache.addAll` (en-US), 그리고 `Cache.put` (en-US) 로 확인 됩니다. 보다 최근 사양 버전에서의 최신언어들은 응답이 여전히 스트리밍이 되는 경우에도 해당 내용이 데이터베이스에 기록되는 즉시 브라우저가 확인할 수 있습니다.

**참고:** `Cache.put` (en-US), `Cache.add` (en-US), 그리고`Cache.addAll` (en-US) 은 오직 `GET` 요청들만 cache로 저장됩니다.

**참고:** 캐시 API는 HTTP 캐시 헤더를 따르지 않습니다.

메서드
---

`Cache.match(request, options)` (en-US)

`Cache`객체의 첫 번째 일치하는 요청과 관련된 응답으로 확인되는 `Promise`를 반환합니다.

`Cache.matchAll(request, options)` (en-US)

`Cache` 객체에서 일치하는 모든 요청의 배열로 해석되는 `Promise`를 반환합니다.

`Cache.add(request)` (en-US)

URL을 가져 와서 추출해서 결과 객체를 지정된 캐시에 추가합니다. 이는 fetch()를 호출 한 다음 Cache.put()을 사용하여 캐시에 결과를 추가하는 것과 매우 유사합니다.

`Cache.addAll(requests)` (en-US)

URL 배열을 가져 와서 추출하고 결과 응답 객체를 지정된 캐시에 추가합니다.

`Cache.put(request, response)` (en-US)

요청과 응답을 모두 가져 와서 지정된 캐시에 추가합니다.

`Cache.delete(request, options)` (en-US)

해당 키가 request인 `Cache`를 찾고 `Cache`를 삭제하고 `true` 판정인 `Promise`를 리턴합니다. `Cache` 항목이 없으면 `false`를 반환합니다.

`Cache.keys(request, options)` (en-US)

`Cache` 키 배열은 결정된 `Promise`를 리턴합니다.

예제
--

이 코드는 service worker selective caching sample 에서 가져왔습니다. (see selective caching live). 이 코드는`CacheStorage.open(cacheName)` (en-US)을 사용하여 `font/`로 시작하는 `Content-Type` header로 `Cache`를 엽니다.

그런 다음 코드는 `Cache.match(request, options)` (en-US)를 사용하여 캐시에 이미 일치하는 글꼴이 있는지 확인한 후 일치하는 글꼴을 반환합니다. 일치하는 글꼴이 없으면 코드는 네트워크에서 글꼴을 가져오고 `Cache.put(request, response)` (en-US)을 사용하여 가져온 리소스를 캐시합니다.

이 코드는 `fetch()` (en-US) 연산에서 발생한 예외를 처리합니다. HTTP오류 응답(예 : 404)은 예외를 발생시키지 않습니다. 적절한 오류 코드가있는 일반 응답 객체를 리턴합니다.

또한 코드 스니펫은 {domxref ( "ServiceWorker")}}가 사용하는 캐시 버전 관리를 위한 모범 사례를 보여줍니다. 이 예에서는 캐시가 하나 밖에 없지만 동일한 접근법을 여러 캐시에 사용할 수 있습니다. 캐시의 단축 식별자를 특정 버전의 캐시 이름에 매핑합니다. 또한 이 코드는 `CURRENT_CACHES`에 이름이 지정되지 않은 모든 캐시를 삭제합니다.

**참고:** 크롬에서, chrome://inspect/#service-workers 를 방문하여 "inspect" 를 클릭하여 service-worker.js 스크립트가 수행중인 다양한 작업에 대한 로깅 구문을 확인합니다.

```js
var CACHE\_VERSION = 1;

// Shorthand identifier mapped to specific versioned cache.
var CURRENT\_CACHES = {
  font: "font-cache-v" + CACHE\_VERSION,
};

self.addEventListener("activate", function (event) {
  var expectedCacheNames = Object.keys(CURRENT\_CACHES).map(function (key) {
    return CURRENT\_CACHES[key];
  });

  // Active worker won't be treated as activated until promise resolves successfully.
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (cacheName) {
          if (expectedCacheNames.indexOf(cacheName) == -1) {
            console.log("Deleting out of date cache:", cacheName);

            return caches.delete(cacheName);
          }
        }),
      );
    }),
  );
});

self.addEventListener("fetch", function (event) {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    // Opens Cache objects that start with 'font'.
    caches.open(CURRENT\_CACHES["font"]).then(function (cache) {
      return cache
        .match(event.request)
        .then(function (response) {
          if (response) {
            console.log(" Found response in cache:", response);

            return response;
          }
        })
        .catch(function (error) {
          // Handles exceptions that arise from match() or fetch().
          console.error(" Error in fetch handler:", error);

          throw error;
        });
    }),
  );
});
```

명세
--

| Specification |
| --- |
| Service Workers # cache-interface |

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

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

같이 보기
-----

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)