recursal/MDN huggingface dataset:
clearTimeout() 전역 함수
====================

전역 **`clearTimeout()`** 메서드는 `setTimeout()`으로 생성한 타임아웃을 취소합니다.

매개변수가 생성된 타임아웃들 중 무엇도 식별하지 못하면 아무 동작도 하지 않습니다.

구문
--


```js
clearTimeout(timeoutID)
```

### 매개변수

`timeoutID`

취소할 타임아웃의 식별자입니다. 이 ID는 취소할 타임아웃을 설정했던 `setTimeout()`이 반환한 값과 같아야 합니다.

`setTimeout()`과 `setInterval()`의 ID 풀이 공유된다는 사실을 참고하세요. 따라서 기술적으로는 `clearTimeout()`과 `clearInterval()` (en-US)을 혼용할 수 있습니다. 하지만 코드의 명확함을 위해 혼용하지 마세요.

### 반환 값

없음 (`undefined`).

예제
--

아래 스크립트를 웹 페이지 컨텍스트에서 실행하고, 페이지를 한 번 클릭하세요. 1초 후에 메시지가 나타납니다. 1초 안에 페이지를 여러 번 클릭해도 메시지는 한 번만 나타납니다.


```js
const alarm = {
  remind(aMessage) {
    alert(aMessage);
    this.timeoutID = undefined;
  },

  setup() {
    if (typeof this.timeoutID === "number") {
      this.cancel();
    }

    this.timeoutID = setTimeout(
      (msg) => {
        this.remind(msg);
      },
      1000,
      "일어나세요!",
    );
  },

  cancel() {
    clearTimeout(this.timeoutID);
  },
};
window.addEventListener("click", () => alarm.setup());
```

참고
--

`clearTimeout()`에 유효하지 않은 ID를 제공하면 아무것도 하지 않습니다. 예외도 발생하지 않습니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-cleartimeout-dev |

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

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

같이 보기
-----

* `setTimeout()`
* `setInterval()`
* `clearInterval()` (en-US)
* `Window.requestAnimationFrame()`
GeolocationCoordinates
======================

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

**`GeolocationCoordinates`** 인터페이스는 지구상에서의 장치 위치와 고도, 그리고 이 정보들의 정확도를 나타냅니다.

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

`GeolocationCoordinates` 인터페이스는 어떤 속성도 상속하지 않습니다.

`GeolocationCoordinates.latitude` 읽기 전용 Secure context

위치의 위도를 도(°) 단위의 `double`로 반환합니다.

`GeolocationCoordinates.longitude` 읽기 전용 Secure context

위치의 경도를 도(°) 단위의 `double`로 반환합니다.

`GeolocationCoordinates.altitude` 읽기 전용 Secure context

위치의 해발고도를 미터 단위의 `double`로 반환합니다. 구현체가 고도 데이터를 제공하지 못하면 `null`입니다.

`GeolocationCoordinates.accuracy` 읽기 전용 Secure context

`latitude`와 `longitude`의 오차범위를 미터 단위의 `double`로 반환합니다.

`GeolocationCoordinates.altitudeAccuracy` 읽기 전용 Secure context

`altitude`의 오차범위를 미터 단위의 `double`로 반환합니다. 이 값은 `null`일 수 있습니다.

`GeolocationCoordinates.heading` 읽기 전용 Secure context

장치가 향한 방위를 나타내는 `double`을 반환합니다. 진북(真北)에서 벗어난 각도를 도(°) 단위로 표현한 값으로, 진북인 `0`부터 시계방향(동쪽은 `90`도, 서쪽은 `270`도)으로 나아갑니다. `speed`가 `0`이면 `heading`은 `NaN`입니다. 장치가 `heading`을 제공하지 못하면 `null`입니다.

`GeolocationCoordinates.speed` 읽기 전용 Secure context

장치의 속도를 초속 미터 단위의 `double`로 반환합니다. 이 값은 `null`일 수 있습니다.

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

`GeolocationCoordinates` 인터페이스는 어떤 메서드도 상속하거나 구현하지 않습니다.

명세서
---

| Specification |
| --- |
| Geolocation API # coordinates\_interface |

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

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

같이 보기
-----

* Geolocation API 사용하기
* `Geolocation`
Network Information API
=======================

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

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: `window.navigator.connection`.

연결상태 변경 감지
----------

이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.


```js
var connection =
  navigator.connection || navigator.mozConnection || navigator.webkitConnection;

function updateConnectionStatus() {
  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
  if (connection.metered) {
    alert("The connection is metered!");
  }
}

connection.addEventListener("change", updateConnectionStatus);
updateConnectionStatus();
```

명세
--

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

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

### api.NetworkInformation

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

### api.Navigator.connection

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

같이 보기
-----

* Online and offline events
* `window.navigator.connection`
File API
========

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

File API를 사용하면 웹 애플리케이션이 파일과 그 콘텐츠에 접근할 수 있습니다.

웹 애플리케이션은 사용자가 파일 `<input>` 요소를 사용하거나 드래그 앤드 드롭을 통해 파일을 사용할 수 있도록 설정하면 파일에 접근할 수 있습니다.

이러한 방식으로 제공되는 파일 세트는 웹 애플리케이션에서 개별 `File` 객체를 검색할 수 있는 `FileList` 객체로 표시됩니다. `File` 객체는 파일의 이름, 크기, 유형, 마지막 수정 날짜 등의 메타데이터에 대한 접근을 제공합니다.

`File` 객체를 `FileReader` 객체에 전달하여 파일 내용에 접근할 수 있습니다. `FileReader` 인터페이스는 비동기식이지만 웹 워커에서만 사용할 수 있는 동기식 버전은 `FileReaderSync` (en-US) 인터페이스에서 제공됩니다.

인터페이스
-----

`Blob`

`Blob`은 "이진 대용량 객체(Binary Large Object)"를 나타내며, 텍스트 또는 이진 데이터로 읽거나 해당 메서드를 사용하여 데이터를 처리할 수 있도록 `ReadableStream`으로 변환할 수 있습니다.

`File`

파일에 대한 정보를 제공하고 웹 페이지의 Javascript가 해당 콘텐츠에 접근할 수 있도록 허용합니다.

`FileList`

`<input>` (en-US) 요소의 `files` 속성으로 반환되며, 이를 통해 `<input type="file">` 요소로 선택한 파일 목록에 접근할 수 있습니다. 또한 드래그 앤드 드롭 API를 사용할 때 웹 콘텐츠에 끌어다 놓은 파일 목록에도 사용됩니다. 이 사용법에 대한 자세한 내용은 `DataTransfer` 객체를 참조하세요.

`FileReader`

웹 애플리케이션이 `File` 또는 `Blob` 객체를 사용하여 읽을 파일 또는 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있도록 합니다.

`FileReaderSync` (en-US)

웹 애플리케이션이 `File` 또는 `Blob` 객체를 사용하여 읽을 파일 또는 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 동기적으로 읽을 수 있도록 합니다.

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

`URL.createObjectURL()`

`File` 또는 `Blob` 객체를 가져오는 데 사용할 수 있는 URL을 만듭니다.

`URL.revokeObjectURL()`

이전에 `URL.createObjectURL()`을 호출하여 생성한 기존 개체 URL을 해제합니다.

예제
--

### 파일 읽기

이 예제에서는 파일 `<input>` 요소를 제공하고, 사용자가 파일을 선택하면 선택한 첫 번째 파일의 내용을 텍스트로 읽고 그 결과를 `<div>` (en-US)에 표시합니다.

#### HTML


```html
<input type="file" />
<div class="output"></div>
```


#### CSS


```css
.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}
```


#### JavaScript


```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", async () => {
  const [file] = fileInput.files;

  if (file) {
    output.innerText = await file.text();
  }
});
```

### 결과

명세서
---

| Specification |
| --- |
| File API  |

같이 보기
-----

* `<input type="file">`: 파일 input 요소
* `text() method` (en-US): .text()
* `DataTransfer` 인터페이스
AudioContext
============

`AudioContext` 인터페이스는 `AudioNode`에 의해 각각 표현되는, 함께 연결된 오디오 모듈로부터 만들어진 오디오 프로세싱 그래프를 표현합니다. 오디오 컨텍스트는 이것이 포함하는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행 둘 다를 제어합니다. 여러분은 다른 무언가를 하기 전에 `AudioContext`를 생성할 필요가 있습니다. 왜냐하면 모든 것은 컨텍스트 내에서 발생하기 때문입니다. 매번 새로운 컨텍스트를 초기화하는 대신 하나의 AudioContext를 생성하고 재사용하는 것이 추천되며, 몇 개의 다른 오디오 소스에 대해 하나의 `AudioContext`를 사용하고 동시에 연결하는 것은 문제없습니다.

EventTarget

BaseAudioContext

AudioContext생성자
---

`AudioContext()` (en-US)

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

속성
--

*또한 부모 인터페이스인 `BaseAudioContext`로부터 속성을 상속받습니다.*

`AudioContext.baseLatency` (en-US) 읽기 전용 
Experimental

`AudioDestinationNode`에서 오디오 서브시스템으로 오디오를 전달하는 `AudioContext`에 의해 초래된 프로세싱 레이턴시의 초를 반환합니다.

`AudioContext.outputLatency` (en-US) 읽기 전용 
Experimental

현재 오디오 컨텍스트의 출력 레이턴시의 평가치를 반환합니다.

메서드
---

*또한 부모 인터페이스인 `BaseAudioContext`로부터 메서드를 상속받습니다.*

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

오디오 컨텍스트가 사용하는 모든 시스템 오디오 자원을 해제하며, 오디오 컨텍스트를 닫습니다.

`AudioContext.createMediaElementSource()` (en-US)

`HTMLMediaElement`와 연관된 `MediaElementAudioSourceNode` (en-US)를 생성합니다. 이것은 `<video>` 혹은 `<audio>` (en-US) 요소로부터 오디오를 재생하거나 조작하기 위해 사용될 수 있습니다.

`AudioContext.createMediaStreamSource()` (en-US)

로컬 컴퓨터 마이크나 다른 소스로부터 올 지도 모르는 오디오 스트림을 나타내는 `MediaStream` (en-US)과 연관된 `MediaStreamAudioSourceNode` (en-US)를 생성합니다.

`AudioContext.createMediaStreamDestination()` (en-US)

로컬 파일에 저장되거나 다른 컴퓨터로 전송될지도 모르는 오디오 스트림을 나타내는 `MediaStream` (en-US)과 연관된 `MediaStreamAudioDestinationNode` (en-US)를 생성합니다.

`AudioContext.createMediaStreamTrackSource()` (en-US)

미디어 스트림 트랙을 나타내는 `MediaStream` (en-US)과 연관된 `MediaStreamTrackAudioSourceNode` (en-US)를 생성합니다.

`AudioContext.getOutputTimestamp()` (en-US)

현재 오디오 컨텍스트에 관련된 두 개의 오디오 타임스탬프 값을 포함하는 새로운 `AudioTimestamp` 객체를 반환합니다.

`AudioContext.resume()` (en-US)

이전에 연기되거나/정지된 오디오 컨텍스트의 시간 진행을 다시 시작합니다.

`AudioContext.suspend()` (en-US)

일시적으로 오디오 하드웨어 접근을 멈추고 프로세스에서의 CPU/배터리 사용을 줄이며, 오디오 컨텍스트에서의 시간 진행을 연기합니다.

예제
--

기본적인 오디오 컨텍스트 선언:


```js
var audioCtx = new AudioContext();
```


크로스 브라우저를 위한 다른 형태:


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

var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
var finish = audioCtx.destination;
// etc.
```

명세
--

| Specification |
| --- |
| Web Audio API # AudioContext |

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

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

같이 보기
-----

* Web Audio API 사용하기
* `OfflineAudioContext`
Idle Detection 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
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The Idle Detection API는 특히 사용자의 유휴 상태(활성 상태, 유휴 상태, 잠금 상태)를 감지하고, 스크립트에서 주기적으로 조회하지 않고도 유휴 상태 변경에 대한 알림을 받을 수 있는 수단을 제공합니다.

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

네이티브 애플리케이션과 브라우저 확장 프로그램은 유휴 상태 감지를 사용하여, 사용자가 디바이스와 상호 작용하는 시간을 기준으로 사용자 환경을 구성합니다. 예를 들어 채팅 애플리케이션은 애플리케이션의 다른 사용자에게 어떤 사람이 이용 중인지 여부를 표시할 수 있습니다. 다른 애플리케이션은 사용자가 앱과 상호 작용할 때만 알림을 표시하도록 선택할 수 있습니다. 웹 애플리케이션도 유사한 사용 사례에 이 API를 사용할 수 있습니다. 또한 프로그레시브 웹 앱은 유휴 상태 감지 기능을 사용하여 앱이 사용되지 않을 때 서비스 워커 업데이트를 실행할 수 있습니다.

인터페이스
-----

`IdleDetector` (en-US) 
Experimental

디바이스 또는 화면에서 사용자 활동을 감지하는 방법과 이벤트를 제공합니다.

예제
--

다음 예는 탐지기를 만들고, 사용자의 유휴 상태에 대한 변경 사항을 기록하는 방법을 보여줍니다. 버튼은 권한을 요청하기 전에 필요한 사용자 활성화를 가져오는 데 사용됩니다.


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

startButton.addEventListener("click", async () => {
  if ((await IdleDetector.requestPermission()) !== "granted") {
    console.error("Idle detection permission denied.");
    return;
  }

  try {
    const idleDetector = new IdleDetector();
    idleDetector.addEventListener("change", () => {
      const userState = idleDetector.userState;
      const screenState = idleDetector.screenState;
      console.log(`Idle change: ${userState}, ${screenState}.`);
    });

    await idleDetector.start({
      threshold: 60\_000,
      signal,
    });
    console.log("IdleDetector is active.");
  } catch (err) {
    // 권한 거부나 최상위 프레임 외부에서의 실행 등
    // 초기화와 관련된 오류를 처리합니다.
    console.error(err.name, err.message);
  }
});

stopButton.addEventListener("click", () => {
  controller.abort();
  console.log("IdleDetector is stopped.");
});
```

명세서
---

| Specification |
| --- |
| Idle Detection API # api-idledetector |

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

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

Credential Management API를 사용하면 웹사이트에서 비밀번호, 공개 키 및 페더레이션 자격 증명을 저장하고 불러올 수 있습니다. 이러한 기능을 통해 사용자는 비밀번호를 입력하지 않고도 로그인하고, 사이트에 로그인할 때 사용한 페더레이션 계정을 확인하고, 만료된 세션의 명시적인 로그인 흐름 없이 세션을 다시 시작할 수 있습니다.

자격 증명 관리 개념 및 사용법
-----------------

이 API를 사용하면 웹사이트가 사용자 에이전트의 비밀번호 시스템과 직접 상호작용할 수 있으므로, 웹사이트는 사이트 자격 증명을 일관된 방식으로 처리할 수 있고 사용자 에이전트는 자격 증명 관리를 개선할 수 있습니다. 예를 들어, 사용자 에이전트는 페더레이션 ID 공급자나 난해한 로그인 메커니즘을 처리하는 데 특히 어려움을 겪습니다.

이러한 문제를 해결하기 위해 Credential Management API는 웹사이트가 다양한 유형의 자격 증명을 저장하고 검색할 방법을 제공합니다. 이를 통해 사용자는 사이트에 로그인할 때 사용한 페더레이션 계정을 확인하거나 만료된 세션의 명시적인 로그인 흐름 없이 세션을 다시 시작하는 등의 기능을 사용할 수 있습니다.

**참고:** 이 API는 최상위 맥락으로 제한됩니다. `<iframe>` 요소 내서 `get()` 및 `store()` 호출은 효과 없이 해결됩니다.

### 하위 도메인 공유 자격 증명

이후 버전의 사양에서는 자격 증명을 다른 하위 도메인에서 검색할 수 있습니다. 예를 들어 `login.example.com`에 저장된 비밀번호를 `www.example.com`에 로그인하는 데 사용할 수 있습니다. 이 기능을 활용하려면 `CredentialsContainer.store()` (en-US)를 호출하여 비밀번호를 명시적으로 저장해야 합니다. 이를 공개 접미사 목록(PSL) 매칭이라고도 하지만, 사양에서는 자격 증명의 유효 범위를 결정할 때만 PSL을 사용하도록 권장하며, 필수 사항은 아닙니다. 따라서 브라우저마다 구현 방식이 다를 수 있습니다.

인터페이스
-----

`Credential` (en-US)

신뢰 결정 전에 개체에 대한 정보를 제공합니다.

`CredentialsContainer` (en-US)

자격증명을 요청하고 성공적인 로그인 또는 로그아웃과 같은 흥미로운 이벤트가 발생할 때 사용자 에이전트에 알릴 수 있는 메서드를 노출합니다. 이 인터페이스는 `navigator.credentials`에서 접근할 수 있습니다.

`FederatedCredential` (en-US)

웹사이트가 사용자를 올바르게 인증하기 위해 신뢰하는 개체인 페더레이션 ID 공급자로부터 자격 증명에 대한 정보를 제공하며, 이를 위한 API를 제공합니다. OpenID Connect는 이러한 프레임워크의 한 예입니다.

`PasswordCredential` (en-US)

사용자 이름/비밀번호 쌍에 대한 정보를 제공합니다.

`PublicKeyCredential` (en-US)

비밀번호 대신 비대칭 암호화에 기반한 보다 안전한 시스템을 사용하여 로그인할 수 있는 자격 증명을 제공합니다.

명세서
---

| Specification |
| --- |
| Credential Management Level 1 # the-credential-interface |

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

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

`MutationObserver` 인터페이스는 DOM 트리의 변경을 감지하는 기능을 제공합니다. DOM3 이벤트 명세의 일부였던 Mutation Events (en-US)를 대체합니다.

생성자
---

`MutationObserver()`

DOM 변경이 발생하면 콜백을 호출하는 새 `MutationObserver`를 생성하고 반환합니다.

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

`disconnect()`

`observe()`를 호출하기 전까지 `MutationObserver` 인스턴스가 더이상의 알림을 수신하지 않도록 설정합니다.

`observe()`

주어진 설정과 일치하는 DOM 변경이 발생했을 때 `MutationObserver` 인스턴스가 자신의 콜백으로 알림을 수신하도록 설정합니다.

`takeRecords()` (en-US)

`MutationObserver`의 알림 큐를 비우고, 큐에서 대기 중이던 알림들은 `MutationRecord`들로 구성된 새로운 `Array`로 반환합니다.

예제
--

다음 예제는 이 블로그 글에서 가져온 것입니다.


```js
// 변경을 감지할 노드 선택
const targetNode = document.getElementById("some-id");

// 감지 옵션 (감지할 변경)
const config = { attributes: true, childList: true, subtree: true };

// 변경 감지 시 실행할 콜백 함수
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("자식 노드가 추가되거나 제거됐습니다.");
    } else if (mutation.type === "attributes") {
      console.log(`${mutation.attributeName} 특성이 변경됐습니다.`);
    }
  }
};

// 콜백 함수에 연결된 감지기 인스턴스 생성
const observer = new MutationObserver(callback);

// 설정한 변경의 감지 시작
observer.observe(targetNode, config);

// 이후 감지 중단 가능
observer.disconnect();
```

명세서
---

| Specification |
| --- |
| DOM Standard # interface-mutationobserver |

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

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

같이 보기
-----

* `PerformanceObserver` (en-US)
* `ResizeObserver` (en-US)
* `IntersectionObserver`
* 짧은 개요
* 좀 더 깊게 알아보기
* Chromium 개발자 Rafael Weinstein의 발표
Web Animations API
==================

**Web Animations API**를 사용하면 웹 페이지의 프레젠테이션, 즉 DOM 요소의 애니메이션에 대한 변경 사항을 동기화하고 타이밍을 조정할 수 있습니다. 이는 타이밍 모델과 애니메이션 모델이라는 두 가지 모델을 결합하여 수행됩니다.

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

Web Animations API는 브라우저와 개발자가 DOM 요소의 애니메이션을 설명할 수 있는 공통 언어를 제공합니다. API의 개념과 사용 방법에 대한 자세한 내용은 Web Animations API 사용하기 (en-US) 문서를 참조하세요.

웹 애니메이션 인터페이스
-------------

`Animation` (en-US)

애니메이션 노드 또는 소스에 대한 재생 컨트롤과 타임라인을 제공합니다. `KeyframeEffect()` (en-US) 생성자로 생성된 객체를 받을 수 있습니다.

`KeyframeEffect` (en-US)

**keyframes**이라고 하는 애니메이션 가능한 속성과 값의 집합과 타이밍 옵션을 설명합니다. 그런 다음 `Animation()` (en-US) 생성자를 사용하여 재생할 수 있습니다.

`AnimationTimeline` (en-US)

애니메이션의 타임라인을 나타냅니다. 이 인터페이스는 `DocumentTimeline` (en-US) 및 향후 타임라인 객체에 상속되는 타임라인 기능을 정의하기 위해 존재하며, 개발자에 의해 직접 접근되지 않습니다.

`AnimationEvent`

실제 CSS 애니메이션의 일부입니다.

`DocumentTimeline` (en-US)

`Document.timeline` 속성을 사용하여 접근한 기본 문서 타임라인을 포함한 애니메이션 타임라인을 표시합니다.

다른 인터페이스로의 확장
-------------

Web Animations API는 `document`와 `element` (en-US)에 몇 가지 새로운 기능을 추가합니다.

### `Document` 인터페이스로의 확장

`document.timeline`

기본 문서 타임라인을 나타내는 `DocumentTimeline` 객체입니다.

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

`document`의 요소에 현재 적용 중인 `Animation` (en-US) 객체 배열을 반환합니다.

### `Element` 인터페이스로의 확장

`Element.animate()` (en-US)

요소에서 애니메이션을 생성하고 재생하는 메서드입니다. 생성된 `Animation` (en-US) 객체 인스턴스를 반환합니다.

`Element.getAnimations()` (en-US)

현재 요소의 영향을 미치고 있거나, 향후 영향을 미칠 예정인 `Animation` (en-US) 객체의 배열을 반환합니다.

명세서
---

| Specification |
| --- |
| Web Animations  |

같이 보기
-----

* Web Animations API 사용하기 (en-US)
* 웹 애니메이션 데모
* Polyfill
* Firefox의 현재 구현: AreWeAnimatedYet
* 브라우저 호환 테스트
StorageEvent
============

**`StorageEvent`** 인터페이스는 `storage` 이벤트가 구현합니다. `storage` 이벤트는 `window`에서 접근 가능한 저장소가 다른 문서에서 변경될 경우 발생합니다.

Event

StorageEvent생성자
---

`StorageEvent()` (en-US)

새로 생성한 `StorageEvent` 객체를 반환합니다.

속성
--

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

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

바뀐 키를 나타내는 `DOMString`을 반환합니다. `clear()` 메서드에 의해 발생한 이벤트에서는 `null`입니다.

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

`key`가 가리키는 새로운 값을 나타내는 `DOMString`을 반환합니다. `clear()` 메서드에 의해, 또는 `key`가 저장소에서 제거되어 발생한 이벤트에서는 `null`입니다.

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

`key`가 가리키던 원래 값을 나타내는 `DOMString`을 반환합니다. 저장소에 `key`를 새로 추가해서 발생한 경우, 이전 값이 존재할 수 없으므로 `oldValue`도 `null`입니다.

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

영향을 받은 저장소를 나타내는 `Storage` 객체를 반환합니다.

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

`key`를 바꾼 문서의 URL `DOMString`을 반환합니다.

메서드
---

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

명세
--

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

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

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

**`HTMLTemplateElement`** 인터페이스는 HTML `<template>` 엘리먼트의 컨텐츠에 접근할 수 있게 해줍니다.

프로퍼티
----

*이 인터페이스는 `HTMLElement` 의 프로퍼티를 상속받습니다.*

`HTMLTemplateElement.content` (en-US)읽기 전용

`DocumentFragment`: `<template>` 엘리먼트의 템플릿 컨텐츠를 반환합니다.

메소드
---

*이 인터페이스는 `HTMLElement` 의 메소드를 상속받습니다.*

명세
--

| Specification |
| --- |
| HTML Standard # htmltemplateelement |

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

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

**`HTMLCanvasElement`** 인터페이스는 <canvas> 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 `HTMLCanvasElement` 인터페이스는 `HTMLElement` 인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.

프로퍼티
----

\_부모객체인 \_`HTMLElement` 로*부터 프로퍼티를 상속받음.*

`HTMLCanvasElement.height` (en-US)

는 `<canvas>` 요소에서 HTML 속성인 `height`를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 150이 사용됩니다.

`HTMLCanvasElement.mozOpaque` (en-US) 
비표준

는 `<canvas>` 요소에서 HTML 속성인 `moz-opaque`를 반영하는 `Boolean` 객체입니다. 이는 `<canvas>`에게 반투명이 인자로 사용될지에 대한 여부를 알려줍니다. 만약 반투명 요소가 없다면, `<canvas>`의 성능이 최적화될 수 있습니다.

`HTMLCanvasElement.width` (en-US)

는 `<canvas>` 요소에서 HTML 속성인 `width`를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 300이 사용됩니다.

`HTMLCanvasElement.mozPrintCallback`
비표준

는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 JavaScript 함수를 등록함으로써, 만약 프린터가 사용되는 경우 `<canvas>`를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. 다음의 블로그 글을 참조하세요.

메서드
---

*부모객체인 `HTMLElement` 로부터 메서드를 상속받음.*

`HTMLCanvasElement.captureStream()` (en-US) 
Experimental

<canvas> 상의 화면을 실시간 비디오로 캡처할 수 있는 `CanvasCaptureMediaStream` (en-US) 을 반환합니다.

`HTMLCanvasElement.getContext()`

<canvas> 상의 드로잉 컨텍스트를 반환합니다. 만약 컨텍스트 ID가 지원되지 않는 경우 null값을 반환합니다. 드로잉 컨텍스트는 <canvas> 상에 그림을 그릴 수 있게 해줍니다. getContext를 `"2d"` 를 매개 변수로 호출한다면 `CanvasRenderingContext2D` (en-US) 객체를 반환할 것이며, `"experimental-webgl"` (또는 `"webgl"`) 를 매개 변수로 호출한다면 `WebGLRenderingContext` (en-US) 객체를 반환할 것입니다. 후자의 컨텍스트의 경우 WebGL 이 구현된 브라우저에서만 사용 가능합니다.

`HTMLCanvasElement.toDataURL()` (en-US)

`type` 파라미터에서 지정하고 있는 포맷(기본: png) 의 이미지를 나타내는 data-URL을 반환합니다. 반환된 이미지는 96dpi의 해상도를 갖습니다.

`HTMLCanvasElement.toBlob()` (en-US)

<canvas>가 포함하고 있는 이미지를 나타내는 `Blob` 객체를 생성합니다. 이 파일은 사용자의 브라우저에 따라 디스크나 메모리에 캐싱되거나 저장될 수 있습니다.

`HTMLCanvasElement.transferControlToOffscreen()` (en-US) 
Experimental

메인 쓰레드나 워커 쓰레드에서 `OffscreenCanvas` 객체에게 제어 권한을 넘깁니다.

`HTMLCanvasElement.mozGetAsFile()` (en-US) 
비표준

지원이 중단되었습니다

<canvas>가 포함하고 있는 이미지를 나타내는 `File` 객체를 반환합니다. 이 파일은 메모리 기반의 파일이며, `name` 의 이름을 갖습니다. 만약 `type` 이 지정되지 않는다면, 이미지는 기본적으로 `image/png`의 타입을 갖게 될 것입니다.

명세
--

| Specification |
| --- |
| HTML Standard # htmlcanvaselement |

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

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

참조
--

* 이 인터페이스를 구현한 HTML 요소: `<canvas>`.
PerformanceEntry
================

**`PerformanceEntry`** 객체는 *performance timeline* 상의 단일 성능 수치를 캡슐화 합니다. *performance entry*는 응용프로그램의 특정 지점에서 performance \*`mark` (en-US)\*나 \*`measure` (en-US)\*를 생성함으로써 (예를 들면 `mark()`를 호출하는 방법으로) 직접적으로 만들어질 수 있습니다. 또는 (이미지와 같은) 리소스를 로딩하는 등의 간접적인 방법으로 생성되기도 합니다.

`PerformanceEntry` 인스턴스는 항상 다음 서브타입들 중 하나를 따릅니다:

* `PerformanceMark` (en-US)
* `PerformanceMeasure` (en-US)
* `PerformanceFrameTiming`
* `PerformanceNavigationTiming` (en-US)
* `PerformanceResourceTiming` (en-US)
* `PerformancePaintTiming` (en-US)

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

Properties
----------

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

A value that further specifies the value returned by the `PerformanceEntry.entryType` (en-US) property. The value of both depends on the subtype. See property page for valid values.

`PerformanceEntry.entryType` (en-US) 읽기 전용

A `DOMString` representing the type of performance metric such as, for example, "`mark`". See property page for valid values.

`PerformanceEntry.startTime` (en-US) 읽기 전용

A `DOMHighResTimeStamp` (en-US) representing the starting time for the performance metric.

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

A `DOMHighResTimeStamp` (en-US) representing the time value of the duration of the performance event.

Methods
-------

`PerformanceEntry.toJSON()` (en-US)

Returns a JSON representation of the `PerformanceEntry` object.

Example
-------

The following example checks all `PerformanceEntry` properties to see if the browser supports them and if so, write their values to the console.


```js
function print\_PerformanceEntries() {
  // Use getEntries() to get a list of all performance entries
  var p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    console.log("PerformanceEntry[" + i + "]");
    print\_PerformanceEntry(p[i]);
  }
}
function print\_PerformanceEntry(perfEntry) {
  var properties = ["name", "entryType", "startTime", "duration"];

  for (var i = 0; i < properties.length; i++) {
    // Check each property
    var supported = properties[i] in perfEntry;
    if (supported) {
      var value = perfEntry[properties[i]];
      console.log("... " + properties[i] + " = " + value);
    } else {
      console.log("... " + properties[i] + " is NOT supported");
    }
  }
}
```

명세서
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry |

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

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

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**`BatteryManager`** 인터페이스는 시스템의 배터리 충전 상태에 대한 정보를 확인 하는 방법을 제공합니다.

`navigator.battery` 프로퍼티는 Battery Status API와 상호작용 할 수 있는 `BatteryManager` 인터페이스의 인스턴스를 반환합니다.

속성
--

`BatteryManager.charging` 읽기 전용

배터리가 현재 충전 중인지 여부를 Boolean 값으로 나타냅니다.

`BatteryManager.chargingTime` 읽기 전용

배터리가 완전히 충전되기 까지 남은 시간을 초로 표현합니다. 0 이면 이미 배터리의 충전이 완료 된 상황 입니다.

`BatteryManager.dischargingTime` 읽기 전용

배터리가 완전히 방전되고 시스템이 중지 될 때까지의 남은 시간을 초로 표현 합니다.

`BatteryManager.level` (en-US) 읽기 전용

배터리의 충전 상태를 0.0 에서 1.0 사이의 값으로 표현 합니다.

### 이벤트

`chargingchange` (en-US)

`charging` 이벤트의 핸들러 입니다. 이 이벤트는 배터리 충전 상태가 변경될 때 발생합니다.

`chargingtimechange` (en-US)

`chargingTime` 이벤트의 핸들러 입니다. 이 이벤트는 배터리 충전 시간이 변경될 때 발생합니다.

`dischargingtimechange` (en-US)

`dischargingTime` 이벤트의 핸들러 입니다. 이 이벤트는 배터리 방전 시간이 변경될 때 발생합니다.

`levelchange` (en-US)

`level` (en-US) 이벤트의 핸들러 입니다. 이 이벤트는 배터리 수준 상태가 변경 될 때 발생합니다.

메서드
---

`EventTarget` 으로 부터 상속을 받습니다.

명세
--

| Specification |
| --- |
| Battery Status API # the-batterymanager-interface |

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

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

참고
--

* `navigator.battery`
* Battery Status API