recursal/MDN huggingface dataset:
MediaStream Image Capture API
=============================

**MediaStream Image Capture API**는 촬영 장치를 사용해 이미지와 비디오를 캡처하기 위한 API입니다. 그러나 데이터 캡처 외에도 이미지 해상도, 적목 현상 감소 기능, 플래시 존재 유무와 현재 사용 여부 등 장치 사양에 대한 정보를 가져올 때에도 사용할 수 있습니다. 거꾸로, Image Capture API를 사용하면 현재 장치의 허용 범위 안에서 해당 기능을 조정할 수도 있습니다.

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

이미지 또는 비디오 스트림을 가져오는 절차는 다음과 같습니다. 예제 코드는 Chrome의 Image Capture 예제에서 가져온 것입니다.

우선, `MediaDevices.getUserMedia()` (en-US)를 사용해 장치를 가리키는 참조를 가져옵니다. 아래 코드는 단순히 사용 가능한 비디오 장치를 아무거나 요청하는 것이지만, `getUserMedia()` 메서드는더 상세한 장치 기능 요청도 허용합니다. 반환 값은 `MediaStream` (en-US) 객체로 이행하는 `Promise`입니다.


```js
navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // Do something with the stream.
});
```


그 후, `MediaStream.getVideoTracks()` (en-US)를 호출해 미디어 스트림에서 시각적인 부분을 분리합니다. `getVideoTracks()`의 반환 값은 `MediaStreamTrack` 객체의 배열로, 여기서는 사용해야 할 객체를 배열의 첫 번째 요소라고 가정합니다. 실제 사용 시에는 `MediaStreamTrack` 객체의 속성을 사용해 원하는 객체를 찾을 수 있습니다.


```js
const track = mediaStream.getVideoTracks()[0];
```


이미지를 캡처하기 전에 우선 장치의 기능을 설정하고 싶을 것입니다. 다른 작업을 수행하기 전에, 트랙 객체의 `applyConstraints()` 메서드를 사용하면 됩니다.


```js
let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// 확대 지원 여부 판별
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });
```


마지막으로, `MediaStreamTrack` 객체를 `ImageCapture()` 생성자에 제공합니다. `MediaStream`은 여러 종류의 트랙을 담고 있으며 적절한 트랙을 가져올 때 사용할 수 있는 메서드를 소유하지만, `ImageCapture` 생성자는 `MediaStreamTrack.kind`가 `"video"` 값이 아닌 경우 `NotSupportedError` `DOMException` (en-US)을 던집니다.


```js
let imageCapture = new ImageCapture(track);
```

인터페이스
-----

`ImageCapture`

촬영 장치를 참조하는 유효한 `MediaStreamTrack`을 사용해 이미지를 캡처하기 위한 인터페이스입니다.

`PhotoCapabilities`

장착된 촬영 장치에서 사용 가능한 설정 옵션을 제공합니다. `ImageCapture.getPhotoCapabilities()`를 호출해서 `PhotoCapabilities` 객체를 가져올 수 있습니다.

명세
--

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

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

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

같이 보기
-----

* `MediaStream` (en-US)
* `MediaStreamTrack`
WebGLShader
===========

**WebGLShader** 는 WebGL API 의 일부이며 정점 혹은 프래그먼트 셰이더가 될 수 있다. `WebGLProgram` (en-US) 는 두 타입의 셰이더 모두를 요구한다.설명
--

**WebGLShader** 를 생성하려면 `WebGLRenderingContext.createShader` (en-US)를 사용한다. 그러고 나서는 `WebGLRenderingContext.shaderSource()` (en-US)를 사용해서 GLSL 소스 코드를 연결한다. 마지막으로`WebGLRenderingContext.compileShader()` (en-US)를 호출하고 셰이더를 컴파일한다. 이 시점에서 **WebGLShader** 는 여전히 사용할 수 있는 형식은 아니고`WebGLProgram` (en-US)에 부착되어야 한다.


```js
function createShader(gl, sourceCode, type) {
  // 셰이더 타입 gl.VERTEX\_SHADER 또는 gl.FRAGMENT\_SHADER 중 하나를 컴파일한다.
  var shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE\_STATUS)) {
    var info = gl.getShaderInfoLog(shader);
    throw "Could not compile WebGL program. \n\n" + info;
  }
}
```


셰이더 부착에 관한 정보는 `WebGLProgram` (en-US) 를 참고한다.

예시들
---

### 정점 셰이더 생성하기

셰이더 소스 코드 문자열들을 작성하고 접근하는 많은 다른 방법들이 있다는 점에 주목하라. 여기의 예는 오직 설명을 목적으로 한다.


```js
var vertexShaderSource = "attribute vec4 position;\n";
"void main() {\n" + " gl\_Position = position;\n" + "}\n";

// 위 예시로부터 createShader 함수를 사용한다.
var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX\_SHADER);
```

### 프래그먼트 셰이더 생성하기


```js
var fragmentShaderSource =
  "void main() {\n" + " gl\_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";

// 위 예시로부터 createShader 함수를 사용한다.
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT\_SHADER);
```

명세
--

| Specification |
| --- |
| WebGL Specification # 5.8 |

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

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

See also
--------

* `WebGLProgram` (en-US)
* `WebGLRenderingContext.attachShader()` (en-US)
* `WebGLRenderingContext.bindAttribLocation()` (en-US)
* `WebGLRenderingContext.compileShader()` (en-US)
* `WebGLRenderingContext.createProgram()` (en-US)
* `WebGLRenderingContext.createShader()` (en-US)
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()` (en-US)
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()` (en-US)
* `WebGLRenderingContext.shaderSource()` (en-US)
* `WebGLRenderingContext.useProgram()` (en-US)
* `WebGLRenderingContext.validateProgram()` (en-US)
Web Bluetooth API
=================

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

Web Bluetooth API는 블루투스 저에너지 주변 장비와 연결하고 상호 작용할 수 있는 기능을 제공합니다.

**참고:** 이 API는 웹 워커에서는 사용할 수 없습니다. (`WorkerNavigator` (en-US)를 통해 노출되지 않음).

인터페이스
-----

`Bluetooth` (en-US)

지정된 옵션이 있는 `BluetoothDevice` (en-US) 객체애 대한 `Promise`를 반환합니다.

`BluetoothCharacteristicProperties` (en-US)

`BluetoothRemoteGATTCharacteristic` 속성을 제공합니다.

`BluetoothDevice` (en-US)

특정 스크립트 실행 환경 내의 블루투스 장치를 나타냅니다.

`BluetoothRemoteGATTCharacteristic` (en-US)

주변 장치의 서비스에 대한 추가 정보를 제공하는 기본 데이터 요소인 GATT 특성을 나타냅니다.

`BluetoothRemoteGATTDescriptor` (en-US)

특성 값에 대한 추가 정보를 제공하는 GATT 설명자를 나타냅니다.

`BluetoothRemoteGATTServer` (en-US)

원격 장치의 GATT 서버를 나타냅니다.

`BluetoothRemoteGATTService` (en-US)

장치, 참조된 서비스 목록 및 이 서비스의 특성 목록을 포함하여 GATT 서버에서 제공하는 서비스를 나타냅니다.

명세서
---

| Specification |
| --- |
| Web Bluetooth # bluetooth |

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

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

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

**`GeolocationPosition`** 인터페이스는 주어진 시간에 장치가 위치한 지점을 나타냅니다. 지점은 `Coordinates` (en-US) 객체로 표현하여, 지구를 나타내는 회전타원체 위의 2D 위치와 더불어 높이와 속도 정보를 담습니다.

속성
--

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

`Position.coords` (en-US) 읽기 전용 Secure context

주어진 시간의 위치를 나타내는 `Coordinates` (en-US) 객체입니다.

`Position.timestamp` (en-US) 읽기 전용 Secure context

위치를 기록한 시간을 나타내는 `DOMTimeStamp` (en-US)입니다.

메서드
---

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

명세
--

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

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

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

같이 보기
-----

* 위치정보 사용하기
* 이 인터페이스를 사용하는 `Geolocation` 인터페이스.
AudioParamMap
=============

Web Audio API의 **`AudioParamMap`** 인터페이스는 다수의 오디오 파라미터의 집합을 나타내는데, 각 파라미터는 `DOMString`의 매핑으로 기술되고, DOMString은 `AudioParam` 객체에 대한 파라미터를 명시하며, AudioParam 객체는 자신의 값을 나타냅니다.

속성
--

`AudioParamMap` 객체는 `Map`으로써 이용되는데, 이 Map에서 각 파라미터는 이 파라미터의 값을 포함하고 있는 `AudioParam`에 매핑된 name 문자열에 의해 식별됩니다. 추가적으로, 다음의 속성들을 사용할 수 있습니다.

`size`

?

메서드
---

`entries()`

?

`forEach()`

?

`has()`

?

`keys()`

?

`values()`

?

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

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

The **`DOMParser`** 인터페이스는 DOM `Document` 문서에 맞는 XML 및 HTML 소스 코드를 해석할 수 있는 기반을 제공한다 .

**참고:** `XMLHttpRequest` 객체로도 인식 가능한 URL 주소로부터 직접 XML 및 HTML 문서를 해석하여 `response` (en-US) 속성을 통해 `Document` 객체로 제공한다.

반대로 DOM 구조를 XML 및 HTML 소스 코드로 제공하는 방식은 `XMLSerializer` (en-US) 인터페이스를 참고하도록 한다.

HTML 문서의 경우, `Element.innerHTML` 속성과 `outerHTML` 속성을 통해 DOM 구조를 새로운 방식으로 변경할 수 있다. 또한 이들 속성을 통해 HTML 구조의 하위에 있는 HTML 구조도 불러올 수 있다.

문법
--


```js
let domparser = new DOMParser();
```

메소드
---

* `DOMParser.parseFromString()` (en-US)

#### 문법


```js
let doc = domparser.parseFromString(string, mimeType);
```


#### 반환

**`mimeType`** 인자를 통해 정의한 형식에 따른 `Document` 또는`XMLDocument` (en-US) 문서를 반환한다.

#### 인자

이 메소드에는 2개의 인자가 제공되는데, 모두 필수값이다.

`string`

해석할 `DOMString` 문자열. 반드시 HTML, xml, xhtml+xml 또는 svg 문서 형식에 맞아야 한다.

`mimeType`

아래 표에 정의한 형식을 반환 값으로 제공할 `DOMString` 문자열.

| `mimeType` | `doc.constructor` |
| --- | --- |
| `text/html` | ``Document`` |
| `text/xml` | ``XMLDocument` (en-US)` |
| `application/xml` | ``XMLDocument` (en-US)` |
| `application/xhtml+xml` | ``XMLDocument` (en-US)` |
| `image/svg+xml` | ``XMLDocument` (en-US)` |

예제
--

이 인터페이스의 유일한 메서드인 `DOMParser.parseFromString()` (en-US)에 대한 설명서에는 XML, SVG 및 HTML 문자열을 구문 분석하기 위한 예제가 포함되어 있습니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-parsing-and-serialization |

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

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

같이 보기
-----

* XML 문서 직렬화와 해석 (en-US)
* `XMLHttpRequest`
* `XMLSerializer` (en-US)
* `JSON.parse()` - `JSON` 문서에 대해 같은 역할을 제공한다.
Geolocation
===========

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

**`Geolocation`** 인터페이스는 장치의 위치를 가져오는 방법을 나타냅니다. `Geolocation`을 사용하면 웹 사이트나 웹 앱이 위치 정보를 활용해, 현재 위치에 대해 맞춤 콘텐츠를 제공할 수 있습니다.

`Navigator` 객체의 `geolocation` 속성으로 이 인터페이스를 구현하는 객체에 접근할 수 있습니다.

**참고:** 보안 상의 문제로, 웹 페이지가 위치 정보에 접근을 시도하면 사용자에게 알림을 보내고 권한을 허용할지 묻습니다. 각 브라우저는 자신만의 권한 정책과 요청 방식을 가지고 있으므로 주의해야 합니다.

속성
--

*`Geolocation` 인터페이스는 어떤 속성도 구현하거나 상속하지 않습니다.*

메서드
---

**`Geolocation` 인터페이스는 어떤 메서드도 상속하지 않습니다.**

`Geolocation.getCurrentPosition()` Secure context

장치의 현재 위치를 조사한 후 `GeolocationPosition` 객체로 반환합니다.

`Geolocation.watchPosition()` Secure context

장치의 위치가 변경될 때마다 호출하는 콜백을 등록합니다. 반환값은 콜백의 식별자로 쓸 수 있는 `long` 값입니다.

`Geolocation.clearWatch()` Secure context

`watchPosition()`을 이용해 등록한 특정 콜백을 삭제합니다.

명세
--

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

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

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

같이 보기
-----

* Geolocation API 사용하기
Storage
=======

Web Storage API의 **`Storage`** 인터페이스는 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가하고 수정하거나 삭제할 수 있습니다.

도메인의 세션 저장소를 수정해야 하면 `Window.sessionStorage`에, 로컬 저장소를 수정해야 하면 `Window.localStorage`에 접근하세요.

속성
--

`Storage.length` 읽기 전용

`Storage` 객체에 저장된 데이터 항목의 수를 반환합니다.

메서드
---

`Storage.key()`

주어진 숫자 `n`에 대하여 저장소의 `n`번째 항목 키를 반환합니다.

`Storage.getItem()` (en-US)

주어진 키에 연결된 값을 반환합니다.

`Storage.setItem()` (en-US)

키가 저장소에 존재하는 경우 값을 재설정합니다. 존재하지 않으면 키와 값을 저장소에 추가합니다.

`Storage.removeItem()`

주어진 키를 저장소에서 제거합니다.

`Storage.clear()` (en-US)

저장소의 모든 키를 저장소에서 제거합니다.

예제
--

아래 코드에서는 `localStorage`에 접근해 `Storage` 객체를 접근합니다. 우선 `!localStorage.getItem('bgcolor')`를 사용해 데이터가 저장소에 존재하는지 알아냅니다. 데이터가 있으면 `Storage.getItem()` (en-US)으로 회수한 후 `setStyles()`로 페이지 스타일을 바꿉니다. 데이터가 없으면 `populateStorage()` 함수를 호출하고, 그 안에서는 `Storage.setItem()` (en-US)을 통해 데이터를 설정합니다. 그 후에는 동일하게 `setStyles()`를 사용합니다.


```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);
}

function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**참고:** 실제 작동 예제는 저희의 Web Storage Demo에서 볼 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # storage |

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

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

같이 보기
-----

* Web Storage API 사용하기 (en-US)
* `Window.localStorage`
* `Window.sessionStorage`
* `CacheStorage` (en-US)
StyleSheet
==========

`StyleSheet` 인터페이스를 구현하는 객체는 단일 스타일 시트를 나타냅니다. CSS 스타일 시트는 보다 특수화된 `CSSStyleSheet` (en-US) 인터페이스를 추가로 구현합니다.

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

`StyleSheet.disabled` (en-US)

현재 스타일시트가 적용되었는지 여부를 나타내는 불리언 값입니다.

`StyleSheet.href` (en-US) 읽기 전용

스타일시트의 위치를 나타내는 문자열을 반환합니다.

`StyleSheet.media` (en-US) 읽기 전용

스타일 정보에 대해 원하는 대상 매체를 나타내는 `MediaList` (en-US)를 반환합니다.

`StyleSheet.ownerNode` (en-US) 읽기 전용

현재 문서와 이 스타일 시트를 연결하는 `Node` (en-US)를 반환합니다.

`StyleSheet.parentStyleSheet` (en-US) 읽기 전용

이 시트를 포함하는 `StyleSheet`를 반환합니다. 없으면 `null`을 반환합니다.

`StyleSheet.title` (en-US) 읽기 전용

현재 스타일 시트의 추가적인 제목을 나타내는 문자열을 반환합니다.

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

이 스타일 시트의 스타일 시트 언어를 나타내는 문자열을 반환합니다.

명세서
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-stylesheet-interface |

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

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

같이 보기
-----

* `CSSStyleSheet` (en-US)
Web Workers API
===============

**웹 워커**(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다.

웹 워커의 개념과 활용법
-------------

워커는 이름을 지정한 JavaScript 파일을 구동하는 객체로서 `Worker()` (en-US) 등의 생성자로 생성합니다. 해당 파일은 현재 `window`와는 다른 전역 맥락에서 동작하는 워커 스레드에서 작동합니다. 이 때, 전역 맥락은 전용 워커(단일 스크립트에서만 사용하는 워커)의 경우 `DedicatedWorkerGlobalScope` (en-US) 객체이고, 공유 워커(여러 스크립트에서 공유하는 워커)의 경우 `SharedWorkerGlobalScope` (en-US) 객체입니다.

원하는 코드는 뭐든 워커 스레드에서 실행할 수 있으나 몇 가지 예외가 존재합니다. 예를 들어 워커에서 DOM을 직접 조작할 수 없고, `window`의 일부 메서드와 속성은 사용할 수 없습니다. 그러나 WebSocket과 IndexedDB를 포함한 많은 수의 항목은 사용 가능합니다. 워커에서 사용할 수 있는 함수와 클래스 (en-US)에서 더 자세히 알아보세요.

워커와 메인 스레드 간의 데이터 교환은 메시지 시스템을 사용합니다. 양측 모두 postMessage() 메서드를 사용해 전송하고, `onmessage` 이벤트 처리기(메시지는 `Message`의 `data` 속성에 들어있습니다)를 사용해 수신합니다. 전송하는 데이터는 복사하며 공유하지 않습니다.

워커 역시 새로운 워커를 생성할 수 있습니다. 단, 생성하려는 워커가 부모 페이지와 동일한 출처에 호스팅 되어있어야 합니다. 추가로, 워커는 `XMLHttpRequest`를 사용해 네트워크 입출력을 할 수 있지만 `responseXML`과 `channel` 특성은 항상 `null`을 반환합니다.

전용 워커 외에도 다음과 같은 다른 유형의 워커도 존재합니다.

* 공유 워커는 워커와 도메인이 같다면 창, IFrame, 등등 여러 곳에서 작동 중인 다수의 스크립트에서 사용 가능한 워커입니다. 전용 워커보다 복잡한 편으로, 스크립트간 통신은 활성 포트를 통해 이뤄져야 합니다. `SharedWorker` 문서에서 더 자세히 알아보세요.
* 서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있습니다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공합니다.
* 오디오 워커는 웹 워커 맥락 내에서 스크립트를 통한 직접적인 오디오 처리 능력을 제공합니다.
웹 워커 인터페이스
----------

`AbstractWorker` (en-US)

모든 종류의 워커(`Worker`, `SharedWorker` 등)에 공통적인 속성과 메서드를 추상화합니다.

`Worker`

실행 중인 워커 스레드를 나타냅니다. 현재 작동 중인 워커로 메시지를 전송할 때 사용할 수 있습니다.

`WorkerLocation` (en-US)

`Worker`가 실행하는 스크립트의 절대 위치를 정의합니다.

`SharedWorker`

다수의 창, `<iframe>` (en-US), 혹은 다른 워커 등 브라우징 맥락 여러 개에서 접근할 수 있는 특정 종류의 워커를 나타냅니다.

`WorkerGlobalScope` (en-US)

모든 워커의 통용 범위를 나타냅니다. 통용 범위는 일반적인 웹 콘텐츠의 `Window`와 같은 역할을 합니다. 각각의 워커 유형별로 이 인터페이스를 상속한 후 보다 세부적인 기능을 추가한 인터페이스를 전역 범위 객체로 사용합니다.

`DedicatedWorkerGlobalScope` (en-US)

`WorkerGlobalScope` (en-US)를 상속해서 몇 가지 전용 기능을 추가한 전용 워커의 범위를 나타냅니다.

`SharedWorkerGlobalScope` (en-US)

`WorkerGlobalScope` (en-US)를 상속해서 몇 가지 전용 기능을 추가한 공유 워커의 범위를 나타냅니다.

`WorkerNavigator` (en-US)

사용자 에이전트(클라이언트)의 신분과 상태를 나타냅니다.

예제
--

워커의 기본 사용법을 보이는 간단한 데모를 준비해놨습니다.

* 기본적인 전용 워커 예제 (실행)
* 기본적인 공유 워커 예제 (실행)

웹 워커 사용하기 (en-US)에서 데모의 동작법을 자세히 알아볼 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # workers |

같이 보기
-----

* 웹 워커 사용하기 (en-US)
* `Worker` 인터페이스
* `SharedWorker` 인터페이스
* Service Worker API
* 워커에서 사용할 수 있는 함수와 클래스 (en-US)
URL
===

**`URL`** 인터페이스는 URL을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다. `URL` 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다. 이렇게 생성한 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다.

브라우저가 아직 `URL()` 생성자를 지원하지 않을 땐 `Window` 인터페이스의 `Window.URL` 속성으로 `URL` 객체에 접근할 수 있습니다. 개발에 사용하기 전, 프로젝트의 지원 대상 브라우저를 확인하고, 이런 절차를 추가해야 하는지 결정하세요.

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

생성자
---

`new URL()`

주어진 절대 URL, 또는 상대 URL과 기준 URL 문자열을 사용해 생성한 `URL` 객체를 생성하고 반환합니다.

속성
--

`hash`

`'#'`과 URL의 프래그먼트 식별자를 담은 `USVString`입니다.

`host`

URL의 도메인(호스트 이름), `':'`, 포트를 담은 `USVString`입니다.

`hostname`

URL의 도메인을 담은 `USVString`입니다.

`href`

전체 URL을 반환하는 문자열화 속성입니다.

`origin` 읽기 전용

URL의 출처, 즉 스킴, 도메인, 포트를 담은 `USVString`입니다.

`password`

도메인 이름 이전에 지정된 비밀번호를 담은 `USVString`입니다.

`pathname`

`'/'`와 URL의 경로를 담은 `USVString`입니다.

`port`

URL의 포트 번호를 담은 `USVString`입니다.

`protocol`

URL의 프로토콜 스킴을 담은 `USVString`입니다. 마지막 `':'`을 포함합니다.

`search`

URL의 매개변수 문자열을 나타내는 `USVString`입니다. 어떤 매개변수라도 존재하는 경우 `'?'` 문자로 시작해, 모든 매개변수를 포함합니다.

`searchParams` 읽기 전용

`search` 속성의 매개변수 각각에 접근할 수 있는 `URLSearchParams` 객체입니다.

`username`

도메인 이름 이전에 지정된 사용자 이름을 담은 `USVString`입니다.

메서드
---

`toString()`

전체 URL을 담은 `USVString`을 반환합니다. `URL.href`와 동일하나, `toString()`으로는 URL을 편집할 수 없습니다.

`toJSON()`

전체 URL을 담은 `USVString`을 반환합니다. `URL.href`와 동일한 문자열을 반환합니다.

정적 메서드
------

`createObjectURL()`

고유한 블롭 URL, 즉 `blob:` 을 스킴으로 하고, 브라우저 내의 객체를 가리키는 고유한 불투명 문자열을 그 뒤에 붙인 `DOMString`을 반환합니다.

`revokeObjectURL()`

이전에 `URL.createObjectURL()`로 생성한 객체 URL을 취소합니다.

사용 일람
-----

생성자는 `url` 매개변수를 받으며, URL이 상대 URL인 경우 선택적으로 `base` 매개변수를 지정해 기준으로 사용할 수 있습니다.


```js
const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
```


URL 속성을 사용해 URL을 만들 수 있습니다.


```js
url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"
```


URL은 RFC 3986의 규칙을 따라 인코딩 됩니다.


```js
url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
```


`URLSearchParams` 인터페이스를 사용해 URL 쿼리 문자열을 생성하거나 조작할 수 있습니다.

현재 URL의 검색 매개변수를 가져오려면 다음과 같은 코드를 사용하세요.


```js
// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"
```


`toString()` 메서드는 단순히 `href` 속성의 값을 반환하는 것이므로, URL 정규화와 인코딩에 생성자를 직접 사용할 수 있습니다.


```js
const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);
```

명세
--

| Specification |
| --- |
| URL Standard # url |

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

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

같이 보기
-----

* URL API (en-US)
* `URLSearchParams`.
VREyeParameters
===============

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

WebVR API (en-US)의 **`VREyeParameters`** 인터페이스는 시야 정보 필드를 포함하여 특정한 눈에 대한 장면을 정확하게 렌더링 하는 데 필요한 모든 정보를 나타냅니다.

`VRDisplay.getEyeParameters()` (en-US) 방법을 통해 액세스 할 수 있습니다.

**경고:** The values in this interface should not be used to compute view or projection matrices. In order to ensure the widest possible hardware compatibility use the matrices provided by `VRFrameData` (en-US).

속성
--

`VREyeParameters.offset` (en-US) 읽기 전용

사용자 눈 사이의 중심점에서 눈 중심까지의 거리를 미터 단위로 나타냅니다.

`VREyeParameters.fieldOfView` (en-US) 읽기 전용

현재 눈에 보이는 시야를 설명하며,사용자가 동공 사이의 거리(m/s)를 조절할 때 달라질 수 있습니다.(IPD).

`VREyeParameters.renderWidth` (en-US) 읽기 전용

각 눈 뷰포트의 권장 렌더 타겟 폭을 픽셀 단위로 설명합니다.

`VREyeParameters.renderHeight` (en-US) 읽기 전용

각 눈 뷰포트의 권장 렌더 타겟 높이를 픽셀 단위로 나타냅니다..

예제
--


```js
navigator.getVRDisplays().then(function (displays) {
  // If a display is available, use it to present the scene
  vrDisplay = displays[0];
  console.log("Display found");
  // Starting the presentation when the button is clicked:
  // It can only be called in response to a user gesture
  btn.addEventListener("click", function () {
    vrDisplay.requestPresent([{ source: canvas }]).then(function () {
      console.log("Presenting to WebVR display");

      // Set the canvas size to the size of the vrDisplay viewport

      var leftEye = vrDisplay.getEyeParameters("left");
      var rightEye = vrDisplay.getEyeParameters("right");

      canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) \* 2;
      canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);

      drawVRScene();
    });
  });
});
```

명세
--

#### No specification found

No specification data found for `api.VREyeParameters`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

같이 보기
-----

* WebVR API homepage (en-US)
* MozVr.com — demos, downloads, and other resources from the Mozilla VR team.
HTMLCollection
==============

**`HTMLCollection`** 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(`arguments`처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다.

**참고:** `HTMLCollection`의 이름은 현대적 DOM의 이전, 구성요소로 HTML 요소만 지닐 수 있었던 시절에 정해졌습니다.

HTML DOM 내의 `HTMLCollection`은 문서가 바뀔 때 실시간으로 업데이트됩니다.

속성
--

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

컬렉션 항목의 갯수를 반환합니다.

메서드
---

`HTMLCollection.item()`

리스트에서 주어진 인덱스의 노드를 반환합니다. 인덱스가 범위 밖일 경우 `null`을 반환합니다.

`HTMLCollection.namedItem()` (en-US)

리스트에서 ID 또는 이름 속성이 주어진 문자열과 일치하는 노드를 반환합니다. 이름 속성 판별은 HTML에서만 최후의 수단으로 쓰이며 참조하는 요소가 `name` 속성을 지원해야 합니다. 일치하는 요소가 없으면 `null`을 반환합니다.

JavaScript에서 사용하기
-----------------

`HTMLCollection`은 구성요소를 이름과 인덱스로 동시에 직접 노출합니다. HTML ID는 `:`와 `.`을 유효한 문자로 포함할 수 있으므로 속성 접근 시에는 괄호 표기법을 사용해야 합니다. `HTMLCollection`은 배열 스타일 구성요소 접근법과 충돌할 수 있는 순수 숫자 인덱스를 지원하지 않습니다.


```js
var elem1, elem2;

// document.forms은 HTMLCollection임

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // "true"

elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // "true"

elem1 = document.forms["named.item.with.periods"];
```

명세
--

| Specification |
| --- |
| DOM Standard # interface-htmlcollection |

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

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

같이 보기
-----

* `NodeList`
* `HTMLFormControlsCollection` (en-US), `HTMLOptionsCollection` (en-US)
HTMLDivElement
==============

**`HTMLDivElement`** 인터페이스는 `HTMLElement` 인터페이스를 확장해, `<div>` (en-US) 요소를 조작할 때 사용할 수 있는 추가 속성을 제공합니다.

속성
--

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

`HTMLDivElement.align` 
지원이 중단되었습니다

주변 맥락에 대해 요소 콘텐츠의 정렬 위치를 나타내는 `DOMString`입니다. 가능한 값은 `"left"`, `"right"`, `"justify"`, `"center"`입니다.

메서드
---

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

명세
--

| Specification |
| --- |
| HTML Standard # htmldivelement |

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

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

같이 보기
-----

* 인터페이스를 구현하는 HTML 요소 `<div>` (en-US).
FileList
========

**`FileList`** 유형의 객체는 HTML `<input>` (en-US) 요소의 `files` 속성이나 Drag and Drop API의 `DataTransfer`에서 가져올 수 있으며, `<input type="file">` 요소로 선택했거나 웹 콘텐츠 위에 끌어다 놓은 파일 목록에 대한 접근을 제공합니다.

모든 `<input>` 요소 노드에는 `FileList`를 반환하는 `files` 특성이 있어서 파일의 목록에 접근할 수 있습니다. 예를 들어, 다음과 같은 HTML 코드를 가정하면,


```html
<input id="fileItem" type="file" />
```


아래 코드로 노드의 파일 리스트에서 첫 번째 항목을 `File` 객체로 가져올 수 있습니다.


```js
const file = document.getElementById("fileItem").files[0];
```

속성
--

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

리스트가 포함한 파일의 수를 나타내는 읽기 전용 값입니다.

메서드
---

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

파일 리스트에서 지정한 인덱스에 위치한 파일을 나타내는 `File` 객체를 반환합니다.

예제
--

### 파일 이름 기록하기

이 예제에서는 사용자가 선택한 파일들의 이름을 기록합니다.

#### HTML


```html
<!--'multiple'을 지정해서 여러 파일의 선택을 허용-->
<input id="myfiles" multiple type="file" />
<div class="output"></div>
```


#### CSS


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


#### JavaScript


```js
const output = document.querySelector(".output");
const myFiles = document.querySelector("#myfiles");

function logFilenames() {
  const fileInput = document.querySelector("#myfiles");
  const files = fileInput.files;
  const fileListLength = files.length;
  for (let i = 0; i < fileListLength; i++) {
    output.innerText = `${output.innerText}\n${files.item(i).name}`;
  }
}

myFiles.addEventListener("change", logFilenames);
```


#### 결과

명세
--

| Specification |
| --- |
| File API # filelist-section |
| HTML Standard # dom-input-files-dev |

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

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

같이 보기
-----

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