recursal/MDN huggingface dataset:
Console API
===========

**Console API**는 개발자가 코드의 설정 지점에서 메시지나 변수 값을 로깅 하거나, 작업 완료에 걸리는 시간을 측정하는 등의 디버깅 작업을 수행할 수 있는 기능을 제공합니다.

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

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

Console API는 처음에는 대부분 자체 개발 API로 시작되었으며, 브라우저마다 구현 방식이 다르고 일관성이 없었습니다. 콘솔 API 명세는 일관된 동작을 정의하기 위해 만들어졌으며, 모든 최신 브라우저는 결국 일관된 동작을 구현하기로 했지만, 일부 구현에는 여전히 자체적인 추가 함수가 있습니다. 여기에서 자세히 알아보세요.

* Google Chrome 개발자도구 구현
* Safari 개발자도구 구현

사용법은 매우 간단합니다. the `console` 객체에는 일반적으로 브라우저의 웹 콘솔에 다양한 값을 로깅 하는 데 중점을 두고 있고, 기초적인 디버깅 작업을 수행하기 위해 호출할 수 있는 많은 메서드가 포함되어 있습니다.

가장 일반적으로 사용되는 메서드는 `console.log`이며, 특정 변수 안에 포함된 현재 값을 기록하는 데 사용됩니다.

인터페이스
-----

`console`

로깅, 스택 추적, 타이머, 카운터 등 기초적인 디버깅 기능을 제공합니다.

예제
--


```js
let myString = "Hello world";

// 콘솔에 "Hello world"가 출력됩니다
console.log(myString);
```


더 많은 예제는 console 문서를 참조하세요.

명세
--

| Specification |
| --- |
| Console Standard # console-namespace |

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

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

같이 보기
-----

* Tools
* Web Console — Firefox의 웹 콘솔이 콘솔 API 호출을 처리하는 방법
* about:debugging — 디버깅 대상이 모바일 디바이스인 경우 콘솔 출력을 확인하는 방법
FormData
========

**`FormData`** 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다. 또한 `XMLHttpRequest.send()` (en-US) 메서드를 사용하여 쉽게 전송할 수 있습니다. 인코딩 타입이 `"multipart/form-data"`로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 합니다.

간단한 `GET` 전송을 사용하는 경우에는 `<form>` 이 수행하는 방식으로 쿼리 매개 변수를 생성할 수 있습니다. 이 경우 `URLSearchParams` 생성자에 직접 전달할 수 있습니다.

`FormData` 를 구현하는 객체는 `entries()` 대신 `for...of` 구조를 직접 사용할 수 있습니다. `for (var p of myFormData)` 는 `for (var p of myFormData.entries())` 와 같습니다.

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

생성자
---

`FormData()`

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

메소드
---

`FormData.append()`

FormData 객체안에 이미 키가 존재하면 그 키에 새로운 값을 추가하고, 키가 없으면 추가합니다.

`FormData.delete()`

FormData 객체로부터 키/밸류 쌍을 삭제합니다.

`FormData.entries()`

이 객체에 담긴 모든 키/밸류 쌍을 순회할 수 있는 `iterator`를 반환합니다.

`FormData.get()`

`FormData` 객체 내의 값들 중 주어진 키와 연관된 첫번째 값을 반환합니다.

`FormData.getAll()`

`FormData` 객체 내의 값들 중 주어진 키와 연관된 모든 값이 담긴 배열을 반환합니다.

`FormData.has()`

`FormData` 객체에 특정 키가 포함되어 있는지 여부를 나타내는 boolean 을 반환합니다.

`FormData.keys()`

이 객체에 담긴 모든 키/벨류 쌍들의 모든 키들을 순회 할 수 있는 `iterator`를 반환합니다.

`FormData.set()`

`FormData` 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 키/밸류 쌍을 추가합니다.

`FormData.values()`

이 객체에 포함된 모든 밸류를 통과하는 `iterator`를 반환합니다.

명세
--

| Specification |
| --- |
| XMLHttpRequest Standard # interface-formdata |

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

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

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`
InputEvent
==========

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
**`InputEvent`** 인터페이스는 편집 가능한 콘텐츠의 변경 이벤트를 나타냅니다.

Event

UIEvent

InputEvent생성자
---

`InputEvent()` (en-US)

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

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

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

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

삽입한 문자들로 구성된 문자열을 반환합니다. 문자를 삭제하는 등, 텍스트를 삽입하지 않는 변경 사항에서는 빈 문자열일 수 있습니다.

`InputEvent.dataTransfer` (en-US) 읽기 전용

편집 가능한 콘텐츠에 추가나 제거 중인 서식 텍스트 또는 평문 데이터의 정보가 포함된 `DataTransfer` 객체를 반환합니다.

`InputEvent.inputType` (en-US) 읽기 전용

편집 가능한 콘텐츠의 변경 유형을 반환합니다. 속성 문서에서 가능한 유형의 목록을 확인할 수 있습니다.

`InputEvent.isComposing` (en-US) 읽기 전용

이 이벤트가 `compositionstart` (en-US) 이후, `compositionend` (en-US) 이전에 발생했는지 나타내는 `Boolean`을 반환합니다.

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

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

`InputEvent.getTargetRanges()` (en-US)

이 이벤트를 취소하지 않으면 영향을 받는 DOM 범위들의 배열을 반환합니다.

명세서
---

| Specification |
| --- |
| Input Events Level 2 # interface-InputEvent |
| UI Events # interface-inputevent |

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

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

같이 보기
-----

* `beforeinput` 이벤트 (en-US)
* `input` 이벤트
CustomEvent
===========

**`CustomEvent`** 인터페이스는 어떤 목적이든간에 애플리케이션이 초기화한 이벤트를 나타냅니다.

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

Event

CustomEvent생성자
---

`CustomEvent()`

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

속성
--

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

`CustomEvent.detail` 읽기 전용

이벤트를 초기화할 때 제공한 임의의 데이터입니다.

메서드
---

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

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

`CustomEvent` 객체를 초기화합니다. 이미 발송한 이벤트에서는 아무 동작도 하지 않습니다.

명세서
---

| Specification |
| --- |
| DOM Standard # interface-customevent |

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

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

같이 보기
-----

* `Window.postMessage()`
* 이벤트 생성 및 발동
Notifications API
=================

Notifications API 는 웹 페이지가 일반 사용자에게 시스템 알림 표시를 제어할 수 있게 해줍니다. 이러한 알람은 최상단 브라우징 컨텍스트 뷰포트의 바깥에 위치하므로 사용자가 탭을 변경하거나 다른 앱으로 이동했을때에도 표시할 수 있습니다. 이 API 는 다양한 플랫폼에 존재하는 알림 시스템과 호환되도록 디자인되었습니다.

개념과 사용
------

지원되는 플랫폼에서, 시스템 알림 표시는 일반적으로 두 가지를 포함합니다. 첫째로, 사용자가 시스템 알림 표시에 대한 현재 origin 권한을 허용해야합니다. 이는 `Notification.requestPermission()` (en-US) 메소드를 사용해 앱이나 사이트가 초기화될 때 일반적으로 완료됩니다. 다음과 같이 요청 대화상자가 나타납니다.

![](/ko/docs/Web/API/Notifications_API/notification-bubble.png)

여기에서 사용자는 이 origin 으로부터의 알림을 허용할지, 차단할지, 이 시점에는 선택하지 않을지를 선택할 수 있습니다. 하나가 선택된후에는, 그 설정이 현재 세션에대해서 일반적으로 유지됩니다.

**참고:** Firefox 44 부터 Notifications 와 Push 권한이 통합되었습니다. notifications 에대한 권한이 허용되면, push 또한 활성화됩니다.

그 다음, `Notification()` (en-US) 생성자를 사용해 새로운 알림이 생성됩니다. title 인자를 반드시 포함해야하며, 텍스트 방향, 바디 텍스트, 표시할 아이콘, 재생할 알림 사운드 등과 같은 옵션을 지정하는 옵션 객체를 선택적으로 전달할 수 있습니다.

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

부가적으로, Notifications API 명세는 ServiceWorker API 에 여러가지 추가 기능을 지정하여 service worker 가 알림을 발생시킬 수 있도록 허용합니다.

**참고:** 여러분의 앱에서 알림을 사용하는것에 대한 자세한 내용은 Notifications API 사용하기 글에서 찾아보시기 바랍니다.

Notifications 인터페이스
-------------------

`Notification`

notification 객체를 정의합니다.

### Service worker 추가 기능

`ServiceWorkerRegistration` (en-US)

알림 표시 제어를 위한 `ServiceWorkerRegistration.showNotification()` (en-US) 와 `ServiceWorkerRegistration.getNotifications()` (en-US) 메소드를 포함합니다.

`ServiceWorkerGlobalScope` (en-US)

알림이 클릭됐을 때 커스텀 함수를 실행하기 위한 `ServiceWorkerGlobalScope.onnotificationclick` 핸들러를 포함합니다.

`NotificationEvent` (en-US)

`ExtendableEvent` (en-US) 를 기반으로한 이벤트 객체의 특정 타입입니다. 발생한 알림을 나타냅니다.

명세
--

| Specification |
| --- |
| Notifications API Standard  |

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

### api.Notification

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

### api.ServiceWorkerRegistration.showNotification

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

### api.ServiceWorkerRegistration.getNotifications

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

함께 보기
-----

* Notifications API 사용하기
Permissions API
===============

**Permissions API**는 현재 맥락에 따른 API 권한의 상태를 조회할 수 있는 일관된 프로그래밍 방식을 제공합니다. 예를 들어, Permissions API를 사용하여 특정 API에 대한 접근 권한이 부여되었는지 또는 거부되었는지, 특정 사용자 권한이 필요한지를 확인할 수 있습니다.

이 API의 권한은 보안 맥락에서 API를 사용하기 위한 모든 요구 사항, 문서에 적용된 권한 정책 제한, 사용자 프롬프트 등 맥락에 대한 모든 보안 제한을 효과적으로 집계합니다. 예를 들어 API가 권한 정책 (en-US)에 의해 제한되는 경우, 반환된 권한은 `거부(denied)`되고 사용자에게 접근 여부를 묻는 메시지가 표시되지 않습니다.

**참고:** 이 기능은 WorkerNavigator.permissions (en-US) 속성을 지원하는 Web Workers에서 사용할 수 있습니다.

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

예를 들어, Notifications API는 권한을 요청하고 권한 상태를 확인하는 자체 메서드를 제공한 반면, Geolocation API는 그렇지 않았습니다. Permissions API는 개발자가 권한 작업을 위한 일관되고 더 나은 사용자 환경을 구현할 수 있는 도구를 제공합니다.

`permissions` 속성은 표준 브라우징 맥락과 작업자 맥락(`WorkerNavigator` (en-US) - 작업자 내부에서 권한 확인이 가능) 모두에서 `Navigator` 객체에서 사용할 수 있게 되었으며, Permissions API 기능에 대한 접근을 제공하는 `Permissions` (en-US) 객체를 반환합니다.

이 객체가 있으면, `Permissions.query()` (en-US) 메서드를 사용하여 권한을 조회하여, 특정 API에 대한 `PermissionStatus` (en-US)로 확인되는 프로미스를 반환하는 등 권한 관련 작업을 수행할 수 있습니다.

### 권한 인식 API 목록(Permission-aware APIs)

Permissions API를 사용하여 모든 API의 권한 상태를 조회할 수 있는 것은 아닙니다. 권한을 인식 가능한 API의 전체 목록은 다음과 같습니다.

* Background Synchronization API (en-US): `background-sync` (항상 부여되어야 합니다.)
* Clipboard API: `clipboard-read`, `clipboard-write`
* Geolocation API: `geolocation`
* Local Font Access API (en-US)
* Media Capture and Streams API: `microphone`, `camera`
* Notifications API: `notifications`
* Payment Handler API (en-US): `payment-handler`
* Push API: `push`
* Sensor APIs (en-US): `accelerometer`, `gyroscope`, `magnetometer`, `ambient-light-sensor`
* Storage Access API (en-US): `storage-access`
* Storage API (en-US): `persistent-storage`
* Web Audio Output Devices API (en-US): `speaker-selection`
* Web MIDI API (en-US): `midi`
예제
--

위치 찾기라는 간단한 예제를 만들었습니다. 예제를 실시간으로 실행하거나 Github에서 소스 코드를 확인할 수 있습니다.

작동 방식에 대한 자세한 내용은 Permissions API 사용하기 (en-US) 문서를 참조하세요.

인터페이스
-----

`Navigator.permissions` (en-US) 및 `WorkerNavigator.permissions` (en-US) 읽기 전용

기본 맥락 및 작업자 맥락에서 각각 `Permissions` (en-US) 객체에 대한 접근을 제공합니다.

`Permissions` (en-US)

권한을 조회하고, 해제하는 메서드 등 핵심 권한 API 기능을 제공합니다.

`PermissionStatus` (en-US)

권한의 현재 상태에 대한 액세스와 권한 상태 변경에 응답하는 이벤트 핸들러를 제공합니다.

명세서
---

| Specification |
| --- |
| Permissions  |

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

### api.Permissions

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

### api.Navigator.permissions

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

### api.WorkerNavigator.permissions

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

같이 보기
-----

* Permissions API 사용하기 (en-US)
* Permissions API를 사용하여 사용자가 카메라 액세스를 허용하거나 거부하는 빈도 감지하기
* `Notification.permission`
* 개인정보 보호, 권한 및 정보 보안 (en-US)
Beacon API
==========

**`Beacon`** API는 웹 서버에 비동기적인 논블로킹 요청을 보내기 위해 사용됩니다. 이 요청은 서버로부터 응답을 요구하지 않습니다. `XMLHttpRequest` 나 Fetch API 로 만들어진 요청과는 다르게, 브라우저는 Beacon 요청이 페이지가 닫히기 전에 보내지게 하고, 그것이 완료될 수 있게 보장합니다.

Beacon API의 주된 용도로는 클라이언트 사이드 이벤트나 세션 데이터 같은 분석 정보를 서버로 보내는 것입니다. 과거에는 이를 위해 웹사이트들은 `XMLHttpRequest`를 사용했습니다. 하지만 브라우저는 페이지가 전송 전에 닫힐 때 등, 몇몇 상황에선 브라우저가 이러한 비동기적 요청이 전송되는 것을 보장하지 않습니다. 이처럼 요청이 전송되지 않는 것을 방지하기 위해서, 웹사이트들은 동기적으로 요청하는 등의 응답성에 부정적인 영향을 주는 여러가지 기술에 기대왔습니다. Beacon 요청들은 비동기적이고 서버로 전송되기로 보장되어 있는 덕분에 Beacon은 신뢰성과 좋은 성능을 겸비하고 있습니다.

이 API의 동기 및 사용에 대한 자세한 내용은, `navigator.sendBeacon()` 메서드 문서를 참조하세요.

**참고:** 이 API는 Web Workers 에서 사용이 불가능 합니다. (`WorkerNavigator` (en-US) 에 포함되어 있지 않음)

인터페이스
-----

이 API는 `navigator.sendBeacon()` 라는 하나의 메서드를 정의합니다.

이 메서드는 URL과 서버로 보낼 데이터, 두 개의 인수를 필요로 합니다. 서버로 보낼 데이터는 필수 사항이 아니며, 데이터의 타입은 `TypedArray`, `DataView`, `Blob`, 문자열 이나 객체, `FormData` 객체가 될 수도 있습니다. 브라우저가 요청을 성공적으로 대기열에 넣으면 `true` 를 반환하고 그 외에는 `false` 를 반환합니다.

명세서
---

| Specification |
| --- |
| Beacon # sendbeacon-method |

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

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

같이 보기
-----

* Beacon standard
* Beacon CanIUse data
* Intercepting beacons through service workers; Ehsan Akhgari; 2015-Apr-08
* https://webkit.org/blog/8821/link-click-analytics-and-privacy/
* Beaconing in Practice
ImageCapture
============

MediaStream Image Capture API의 **`ImageCapture`** 인터페이스는 유효한 `MediaStreamTrack`이 참조하는 카메라 또는 기타 촬영 장치를 통해 이미지나 사진을 촬영하기 위한 메서드를 제공합니다.

생성자
---

`ImageCapture()`

비디오 스트림을 나타내는 `MediaStreamTrack`에서 정지 프레임(사진)을 캡처하기 위한 `ImageCapture` 객체를 반환합니다.

속성
--

`ImageCapture.track` 읽기 전용

생성자에 전달한 `MediaStreamTrack`의 참조를 반환합니다.

메서드
---

`ImageCapture` 인터페이스는 `EventTarget`의 메서드를 상속하며, 다음 메서드도 포함합니다.

`ImageCapture.takePhoto()`

`MediaStreamTrack`의 출처 비디오 캡처 장치를 통해 단일 노출 촬영을 한 후, 그 데이터를 담은 `Blob`으로 이행하는 `Promise`를 반환합니다.

`ImageCapture.getPhotoCapabilities()`

가능한 설정 옵션을 담은 `PhotoCapabilities` 객체로 이행하는 `Promise`를 반환합니다.

`ImageCapture.getPhotoSettings()`

현재 사진 설정을 담은 `PhotoSettings` 객체로 이행하는 `Promise`를 반환합니다.

`ImageCapture.grabFrame()`

`MediaStreamTrack`의 라이브 비디오에서 스냅샷을 찍은 후, 성공했으면 `ImageBitmap` (en-US)을 반환합니다.

예제
--

다음 코드는 Chrome의 Grab Frame - Take Photo Sample에서 가져온 것입니다. `ImageCapture`는 이미지를 캡처할 도구가 필요하므로, 다음 예제는 브라우저 단말기의 미디어 장치(카메라)로 시작합니다.

이 예제는 `MediaStream` (en-US)으로부터 추출한 `MediaStreamTrack`부터 시작합니다. 그 다음엔 해당 트랙을 사용해 `takePhoto()`와 `grabFrame()`을 호출할 `ImageCapture` 객체를 생성합니다. 마침내, 최종 결과를 캔버스 객체에 적용합니다.


```js
var imageCapture;

function onGetUserMediaButtonClick() {
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then((mediaStream) => {
      document.querySelector("video").srcObject = mediaStream;

      const track = mediaStream.getVideoTracks()[0];
      imageCapture = new ImageCapture(track);
    })
    .catch((error) => console.log(error));
}

function onGrabFrameButtonClick() {
  imageCapture
    .grabFrame()
    .then((imageBitmap) => {
      const canvas = document.querySelector("#grabFrameCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.log(error));
}

function onTakePhotoButtonClick() {
  imageCapture
    .takePhoto()
    .then((blob) => createImageBitmap(blob))
    .then((imageBitmap) => {
      const canvas = document.querySelector("#takePhotoCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.log(error));
}

/\* Utils \*/

function drawCanvas(canvas, img) {
  canvas.width = getComputedStyle(canvas).width.split("px")[0];
  canvas.height = getComputedStyle(canvas).height.split("px")[0];
  let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width \* ratio) / 2;
  let y = (canvas.height - img.height \* ratio) / 2;
  canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
  canvas
    .getContext("2d")
    .drawImage(
      img,
      0,
      0,
      img.width,
      img.height,
      x,
      y,
      img.width \* ratio,
      img.height \* ratio,
    );
}

document.querySelector("video").addEventListener("play", function () {
  document.querySelector("#grabFrameButton").disabled = false;
  document.querySelector("#takePhotoButton").disabled = false;
});
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # imagecaptureapi |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS 객체 모델 (CSSOM)
=================

**CSS Object Model**은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.

참고서
---

* `AnimationEvent`
* `CaretPosition` (en-US)
* `CSS`
* `CSSCharsetRule`
* `CSSConditionRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule` (en-US)
* `CSSFontFeatureValuesMap`
* `CSSFontFeatureValuesRule` (en-US)
* `CSSGroupingRule` (en-US)
* `CSSImportRule` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
* `CSSMarginRule`
* `CSSMediaRule`
* `CSSNamespaceRule` (en-US)
* `CSSPageRule` (en-US)
* `CSSRule` (en-US)
* `CSSRuleList` (en-US)
* `CSSStyleDeclaration` (en-US)
* `CSSStyleSheet` (en-US)
* `CSSStyleRule` (en-US)
* `CSSSupportsRule` (en-US)
* `CSSVariablesMap`
* `CSSViewportRule`
* `FontFace` (en-US)
* `FontFaceSet` (en-US)
* `FontFaceSetLoadEvent` (en-US)
* `GetStyleUtils`
* `MediaList` (en-US)
* `MediaQueryList` (en-US)
* `MediaQueryListEvent` (en-US)
* `Screen` (en-US)
* `StyleSheet`
* `StyleSheetList` (en-US)
* `TransitionEvent` (en-US)

여러 다른 인터페이스도 CSSOM-related 규격에 의해 확장됩니다 : `Document`, `Window`, `Element` (en-US), `HTMLElement`, `HTMLImageElement` (en-US), `Range`, `MouseEvent`, and `SVGElement` (en-US).

### CSS 자료형 객체 모델 
Experimental

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

* `CSSImageValue` (en-US) 
Experimental
* `CSSKeywordValue` (en-US) 
Experimental
* `CSSMathInvert` (en-US) 
Experimental
* `CSSMathMax` (en-US) 
Experimental
* `CSSMathMin` (en-US) 
Experimental
* `CSSMathNegate` (en-US) 
Experimental
* `CSSMathProduct` (en-US) 
Experimental
* `CSSMathSum` (en-US) 
Experimental
* `CSSMathValue` (en-US) 
Experimental
* `CSSMatrixComponent` (en-US) 
Experimental
* `CSSNumericArray` (en-US) 
Experimental
* `CSSNumericValue` (en-US) 
Experimental
* `CSSPerspective` (en-US) 
Experimental
* `CSSPositionValue` (en-US) 
Experimental
* `CSSRotate` (en-US) 
Experimental
* `CSSScale` (en-US) 
Experimental
* `CSSSkew` (en-US) 
Experimental
* `CSSSkewX` (en-US) 
Experimental
* `CSSSkewY` (en-US) 
Experimental
* `CSSStyleValue` (en-US) 
Experimental
* `CSSTransformComponent` (en-US) 
Experimental
* `CSSTransformValue` (en-US) 
Experimental
* `CSSTranslate` (en-US) 
Experimental
* `CSSUnitValue` (en-US) 
Experimental
* `CSSUnparsedValue` (en-US) 
Experimental
* `CSSVariableReferenceValue` (en-US) 
Experimental
* `StylePropertyMap` (en-US) 
Experimental
* `StylePropertyMapReadOnly` (en-US) 
Experimental
자습서
---

* 화면 방향 관리
명세서
---

| Specification |
| --- |
| CSS Object Model (CSSOM)  |
| CSSOM View Module  |
| CSS Typed OM Level 1  |

같이 보기
-----

* 문서 객체 모델 (DOM)
* CSS Houdini
IntersectionObserver
====================

Intersection Observer API의 **`IntersectionObserver`** 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다.

`IntersectionObserver`가 생성되면 루트 내에서 설정된 가시성 비율이 자신의 주시 대상 중에서 나타나는지 감지하기 시작합니다. 한 번 생성한 이후에는 설정을 변경할 수 없으므로, 이미 생성된 감지기 객체는 지정했던 가시성 비율의 감지에만 사용할 수 있습니다. 그래도 하나의 감지기가 다수의 대상을 한꺼번에 주시할 수 있습니다.

생성자
---

`IntersectionObserver.IntersectionObserver()`

`IntersectionObserver` 객체를 생성합니다. `IntersectionObserver` 객체는 대상 요소의 가시성 비율이 설정한 역치 값을 넘어가는 것을 감지하면 지정한 콜백을 호출합니다.

속성
--

`IntersectionObserver.root` 읽기 전용

교차 영역 계산에 사용하는 바운딩 박스의 기준이 되는 `Element` (en-US) 또는 `Document`입니다. `root` 설정을 생성자에 제공하지 않았거나, `root`의 값이 `null`인 경우 최상위 문서의 뷰포트를 사용합니다.

`IntersectionObserver.rootMargin` (en-US) 읽기 전용

교차 영역을 계산할 때 루트의 바운딩 박스에 적용할 오프셋입니다. 즉, 필요에 따라 계산 용도로 루트 영역을 늘리거나 줄일 수 있습니다. 생성자 설정에 지정한 값은 생성자 내에서 내부 조건에 맞도록 조정 과정을 거치므로, 이 속성의 반환 값이 설정 값과 다를 수도 있습니다. 각각의 오프셋에는 픽셀(`px`)과 퍼센트(`%`)를 사용할 수 있으며, 기본 값은 `0px 0px 0px 0px`입니다.

`IntersectionObserver.thresholds` (en-US) 읽기 전용

오름차순으로 정렬된 역치 리스트입니다. 각각의 역치는 대상의 바운딩 박스 영역과 교차 영역 사이의 비율에 대한 역치입니다. 대상에 대한 교차 알림(콜백 호출)은 이 역치 값 중 하나라도 넘어갈 때 발생합니다. 아무 값도 생성자에 지정하지 않은 경우의 기본 값은 0입니다.

메서드
---

`IntersectionObserver.disconnect()`

모든 대상의 주시를 해제합니다.

`IntersectionObserver.observe()`

주어진 대상 요소를 주시합니다.

`IntersectionObserver.takeRecords()`

모든 주시 대상에 대한 `IntersectionObserverEntry` (en-US) 배열을 반환합니다.

`IntersectionObserver.unobserve()`

특정 대상 요소에 대한 주시를 해제합니다.

예제
--


```js
var intersectionObserver = new IntersectionObserver(function (entries) {
  // intersectionRatio가 0이라는 것은 대상을 볼 수 없다는 것이므로
  // 아무것도 하지 않음
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("새 항목 불러옴");
});
// 주시 시작
intersectionObserver.observe(document.querySelector(".scrollerFooter"));
```

명세
--

| Specification |
| --- |
| Intersection Observer # intersection-observer-interface |

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

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

같이 보기
-----

* `MutationObserver`
* `PerformanceObserver` (en-US)
* `ResizeObserver` (en-US)
WebSocket
=========

`WebSocket` 객체는 WebSocket 서버 연결의 생성과 관리 및 연결을 통한 데이터 송수신 API를 제공합니다.

`WebSocket` 객체를 생성하려면 `WebSocket()` 생성자를 사용하세요.

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

EventTarget

WebSocket생성자
---

`WebSocket()`

새로운 `WebSocket` 객체를 생성해 반환합니다.

속성
--

`WebSocket.binaryType` (en-US)

연결에 사용되는 이진 데이터의 유형입니다.

`WebSocket.bufferedAmount` (en-US) 읽기 전용

큐에 대기 중인 데이터의 바이트 수입니다.

`WebSocket.extensions` (en-US) 읽기 전용

서버에서 선택한 확장입니다.

`WebSocket.protocol` (en-US) 읽기 전용

서버에서 선택한 하위 프로토콜입니다.

`WebSocket.readyState` 읽기 전용

연결의 현재 상태입니다.

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

WebSocket의 절대 URL입니다.

메서드
---

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

연결을 닫습니다.

`WebSocket.send()` (en-US)

전송할 데이터를 큐에 등록합니다.

이벤트
---

`addEventListener()` 메서드를 사용하거나 `WebSocket` 인터페이스의 `oneventname` 속성에 수신기를 할당해서 아래의 이벤트를 수신할 수 있습니다.

`close` (en-US)

`WebSocket`의 연결이 닫힐 때 발생합니다. `onclose` 속성으로도 수신할 수 있습니다.

`error` (en-US)

`WebSocket`의 연결이, 일부 데이터 전송의 실패 등 오류로 인해 닫힐 때 발생합니다. `onerror` 속성으로도 수신할 수 있습니다.

`message` (en-US)

`WebSocket`으로 데이터를 수신했을 때 발생합니다. `onmessage` 속성으로도 수신할 수 있습니다.

`open` (en-US)

`WebSocket` 연결이 열렸을 때 발생합니다. `onopen` 속성으로도 수신할 수 있습니다.

예제
--


```js
// WebSocket 연결 생성
const socket = new WebSocket("ws://localhost:8080");

// 연결이 열리면
socket.addEventListener("open", function (event) {
  socket.send("Hello Server!");
});

// 메시지 수신
socket.addEventListener("message", function (event) {
  console.log("Message from server ", event.data);
});
```

명세
--

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

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

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

같이 보기
-----

* WebSocket을 이용하여 클라이언트 애플리케이션 작성하기
File
====

**`File`** 인터페이스는 파일에 대한 정보를 제공하고, 웹 페이지가 JavaScript로 파일의 내용에 접근할 수 있는 방법을 제공합니다.

`File` 객체는 보통 `FileList` 객체가 포함한 것을 사용하게 됩니다. `FileList` 객체는 사용자가 `<input>` (en-US) 요소로 파일을 선택한 결과 값으로, 또는 드래그 앤 드롭 작업의 `DataTransfer` 객체에서 가져올 수 있습니다.

`File` 객체는 `Blob`의 한 종류로, `Blob`을 사용할 수 있는 모든 맥락에서 사용할 수 있습니다. 특히 `FileReader`, `URL.createObjectURL()`, `createImageBitmap()` (en-US), `XMLHttpRequest.send()`는 `Blob`과 `File`을 모두 허용합니다.

자세한 정보 및 예제는 웹 애플리케이션에서 파일 사용하기를 참고하세요.

Blob

File생성자
---

`File()`

새로 생성한 `File`을 반환합니다.

속성
--

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

파일의 최종 수정 시간을 UNIX 시간(1970년 1월 1일 자정)과의 밀리초 차이로 반환합니다.

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

`File` 객체가 참조하는 파일의 마지막 수정 시간을 `Date`로 반환합니다.

`File.prototype.name` 읽기 전용

`File` 객체가 참조하는 파일의 이름을 반환합니다.

`File.prototype.webkitRelativePath` (en-US) 
비표준
 읽기 전용

`File`의 URL 상대경로를 반환합니다.

`File`은 `Blob`을 구현하므로 다음 속성도 가집니다.

`File.prototype.size` 읽기 전용

`File`의 크기를 바이트 단위로 반환합니다.

`File.prototype.type` 읽기 전용

`File`의 MIME 유형을 반환합니다.

메서드
---

`File` 인터페이스는 메서드를 정의하지 않지만, `Blob` 인터페이스에서 메서드를 상속합니다.

`Blob.prototype.slice()` (en-US)

지정한 바이트 범위 만큼 소스 `Blob`의 데이터를 복사한 새로운 `Blob` 객체를 반환합니다.

`Blob.prototype.stream()` (en-US)

`File`을 `ReadableStream`으로 변환합니다. `ReadableStream`은 파일 내용을 읽을 때 사용할 수 있습니다.

`Blob.prototype.text()` (en-US)

`File`을 스트림으로 변환한 후 끝까지 읽습니다. 문자열로 이행하는 `Promise`를 반환합니다.

`Blob.prototype.arrayBuffer()` (en-US)

`File`을 스트림으로 변환한 후 끝까지 읽습니다. `ArrayBuffer`로 이행하는 `Promise`를 반환합니다.

명세
--

| Specification |
| --- |
| File API # file-section |

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

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

같이 보기
-----

* 웹 애플리케이션에서 파일 사용하기
* `FileReader`
HTMLDocument
============

\*\*`HTMLDocument`\*\*은 일반적인 (XML) 문서에서 기본적으로 존재하지 않는 특별한 프로퍼티와 메소드에 접근을 제공하는 DOM의 추상 인터페이스입니다. 특히 HTML 문서와 엘리먼트에 관련된 기능을 추가해줍니다.

코어 `document` 인터페이스에서 파생되었습니다. 메소드와 프로퍼티는 `document` 페이지에 포함되어있고 DOM 페이지의 해당 섹션에 구분되어 나열되어있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # htmldocument |
UIEvent
=======

**`UIEvent`** 인터페이스는 간단한 사용자 인터페이스 이벤트를 나타냅니다.

`UIEvent`는 `Event`를 상속합니다. 하위 호환을 유지하기 위해 `UIEvent.initMouseEvent()` 메서드가 사라지지는 않았지만, `UIEvent` 객체의 생성은 `UIEvent()` 생성자로 해야 합니다.

`MouseEvent`, `TouchEvent` (en-US), `FocusEvent` (en-US), `KeyboardEvent`, `WheelEvent` (en-US), `InputEvent`, `CompositionEvent` (en-US) 인터페이스가 `UIEvent`를 직접 또는 간접적으로 상속합니다.

Event

UIEvent생성자
---

`UIEvent()`

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

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

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

`UIEvent.detail` 읽기 전용

이벤트에 관련된 세부사항을 나타내는 `long`을 반환합니다. 정확한 정보는 이벤트 유형에 따라 다릅니다.

`UIEvent.sourceCapabilities` (en-US) 
Experimental
 읽기 전용

`InputDeviceCapabilities` 인터페이스를 반환합니다. 터치 이벤트를 생성하는 물리적 장치에 대한 정보를 담고 있습니다.

`UIEvent.view` 읽기 전용

이벤트를 생성한 뷰를 담은 WindowProxy를 반환합니다.

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

입력한 숫자 `keyCode`, 또는 알파벳 키의 경우 문자 코드(`charCode`)를 반환합니다.

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

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

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

`UIEvent` 객체를 초기화합니다. 이미 발송한 이벤트에서는 아무 동작도 하지 않습니다.

명세서
---

| Specification |
| --- |
| UI Events # idl-uievent |

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

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

같이 보기
-----

* 이벤트 입문
* `Event`