recursal/MDN huggingface dataset:
RTCPeerConnection.connectionState
=================================

`RTCPeerConnection` (en-US) 인터페이스의 읽기 속성인 **`connectionState`** 는 피어 연결의 현재 상태를 알려줍니다. 이 속성은 `RTCPeerConnectionState` `enum` 값 중 하나를 문자열로 반환해줍니다.

만약 이 속성의 값이 바뀌게되면, `RTCPeerConnection` (en-US) 인스턴스로 `connectionstatechange` 이벤트가 전송됩니다.

Syntax
------


```js
var connectionState = RTCPeerConnection.connectionState;
```

### 값

연결의 현재 상태를 `RTCPeerConnectionState` enum의 값 중 하나로 표시합니다.

### RTCPeerConnectionState enum

`RTCPeerConnectionState` enum은 `RTCPeerConnection`이 존재 할 수 도있는 상태에 대해 알려주는 문자열 상수를 정의합니다. 이 값들은 {domxref("RTCPeerConnection.connectionState", "connectionState")}} 속성에 의해 반홥됩니다. 근본적으로 이 상태는 연결에 의해 사용되는 모든 ICE 전송 (`RTCIceTransport` (en-US) 혹은 `RTCDtlsTransport` (en-US)의 타입)의 상태 집합을 나타냅니다.

| 상수명 | 설명 |
| --- | --- |
| `"new"` | 연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 `"new"` 상태이고, 그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: `"connecting"`, `"checking"`, `"failed"`, 혹은 `"disconnected"`, 혹은 모든 연결의 전송이 끝났다는 `"closed"`상태. |
| `"connecting"` | 하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 `RTCIceConnectionState`가 `"checking"` 혹은 `"connected"`이며, 그 어떤 전송도 `"failed"`상태가 아니여야합니다. **<<< Make this a link once I know where that will be documented** |
| `"connected"` | 연결에 의해 사용되는 모든 ICE 전송이 사용 중 (`"connected"` 혹은 `"completed"`)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 `"connected"` 혹은 `"completed"`입니다. |
| `"disconnected"` | 연결에 대한 최소 한 개의 ICE 전송이 `"disconnected"`상태이고, 그 외의 다른 전송 상태는 `"failed"`, `"connecting"`, 혹은 `"checking"`이 아님을 알려주는 값. |
| `"failed"` | 연결에 대한 하나 혹은 여러개의 ICE 전송이 `"failed"`상태임을 알려주는 값. |
| `"closed"` | `RTCPeerConnection` 개통되지 않음을 알려주는 값.2016년 5월 13일에 작성된 명세서의 초안에 따르면, 이 값은 `RTCPeerConnectionState` enum 안에 존재했었습니다. 따라서, `signalingState` (en-US)의 값을 통해 찾을 수 있습니다. |

예시
--


```js
var pc = new RTCPeerConnection(configuration);

/\* ... \*/

var connectionState = pc.connectionState;
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-connection-state |

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

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

참조
--

* Lifetime of a WebRTC session (en-US)
* `RTCPeerConnection` (en-US)
* `connectionstatechange`
* WebRTC (en-US)
window.screen.onorientationchange
=================================

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

Summary
-------

`orientationchange` 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.

Syntax
------


```js
screen.onorientationchange = funcRef;
```


`funcRef` 는 함수로의 참조 이다.

명세서
---

#### No specification found

No specification data found for `api.Screen.orientationchange_event`.  
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.

See also
--------

* `orientationchange`
* Managing screen orientation (en-US)
Screen.lockOrientation
======================

**지원이 중단되었습니다:** 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.

`lockOrientation` 함수는 지정된 방향으로 화면을 고정시킨다.

**참고:** 이 함수는 오직 설치된 웹앱 또는 full-screen mode 의 웹페이지에서만 동작한다..

Syntax
------


```js
var locked = window.screen.lockOrientation(orientation);
```

### Parameters

*orientation*

화면을 고정 시킬 방향. 문자열 또는 문자열의 배열이다. 여러 문자열을 지정하면 지정한 방향으로만 회전된다.

다음의 문자열들은 당신이 지정할 수 있는 방향들을 나타낸다.

`portrait-primary`

기본 세로 모드 일 때 화면의 방향을 나타낸다. 화면은 화면이 정상위치 (normal position)가 세로이고 세로로 고정 되어 있으면 기본 세로 모드 (primary portrait mode) 로 간주 된다. 만약 장치의 정상위치 (normal position)가 가로 모드 이면 장치가 시계방향으로 90° 돌렸을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.

`portrait-secondary`

보조 세로 모드 일 때 화면의 방향을 나타낸다. 화면은 정상위치에서 180° 로 고정 되어 있을 때 보조 세로 모드로 간주된다. 만약 정상위치가 가로 인 경우 장치가 반시계 방향으로 90° 회전 했을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.

`landscape-primary`

기본 가로 모드 일 때 화면의 방향을 나타낸다. 화면은 정상위치 (normal position)가 가로이고 가로로 고정 되어 있으면 기본 가로 모드 (primary landscape mode) 로 간주된다. 만약 장치의 정상위치 (normal position)가 세로이면 장치가 시계방향으로 90° 돌렸을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.

`landscape-secondary`

보조 가로 모드 일 때 화면의 방향을 나타낸다. 화면은 정상위치에서 180° 로 고정 되어 있을 때 보조 가로 모드 (secondary landscape mode) 로 간주된다. 또는 정상위치가 세로 인 경우 장치가 반시계 방향으로 90° 회전 했을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.

`portrait`

`portrait-primary` 와 `portrait-secondary 둘 다 이다.`

`landscape`

`landscape-primary` 와 `landscape-secondary 둘 다 이다.`


**참고:** 한번에 여러개의 고정 값을 가질 수 있다. 만약 한방향으로만 설정 하면 화면의 방향은 unlock 하기 전 까지는 절대로 변하지 않는다. 그렇지 않다면 (여러값을 가진 다면) 지정 된 방향들로 화면의 방향이 변할 것이다.

### Return value

성공적으로 고정 되었을 경우 `true` 를 반환한다. 고정 될 수 없다면 `false` 를 반환한다.

Example
-------


```js
if (window.screen.mozLockOrientation("landscape-primary")) {
  // orientation was locked
} else {
  // orientation lock failed
}
```

명세서
---

#### No specification found

No specification data found for `api.Screen.lockOrientation`.  
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.

See also
--------

* `window.screen.orientation`
* `window.screen.unlockOrientation()`
* `window.screen.onorientationchange`
* Managing screen orientation (en-US)
window.screen.unlockOrientation
===============================

**지원이 중단되었습니다:** 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.

**`Screen.unlockOrientation()`** 함수는 이전의 page나 앱을 통해 지정한 화면 고정 값들을 모두 제거 한다.

**참고:** 이 함수는 설치된 웹앱 또는 full-screen mode 의 웹 페이지들에서 동작한다..

Syntax
------


```js
var unlocked = window.screen.unlockOrientation();
```

### Return value

성공적으로 unlocked 된 경우 `true` 를 반환하며, 만약 방향이 unlock 될 수 없다면 `false` 를 반환한다.

Example
-------


```js
if (window.screen.unlockOrientation()) {
  // orientation was unlocked
} else {
  // orientation unlock failed
}
```

명세서
---

#### No specification found

No specification data found for `api.Screen.unlockOrientation`.  
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.

See also
--------

* `window.screen.orientation`
* `window.screen.lockOrientation()`
* `window.screen.onorientationchange`
* Managing screen orientation (en-US)
Screen.orientation
==================

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

Summary
-------

`orientation` 속성은 화면의 현재 방향을 알려 준다.

**참고:** 이 함수는 설치된 웹앱 또는 full-screen mode 의 웹페이지에서 동작한다.

Syntax
------


```js
var orientation = window.screen.orientation;
```

Return value
------------

리턴값은 화면의 방향을 표현하는 문자열이다. portrait-primary, portrait-secondary, landscape-primary, landscape-secondary 가 될 수 있다. (각 값들에 대해 좀 더 많은 정보를 구하려면 `lockOrientation` 를 보라.).

Example
-------


```js
var orientation = screen.mozOrientation;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (
  orientation === "portrait-secondary" ||
  orientation === "portrait-secondary"
) {
  console.log("Mmmh... you should rotate your device");
}
```

명세서
---

| Specification |
| --- |
| Screen Orientation # dom-screen-orientation |

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

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

See also
--------

* `window.screen.orientation`
* `window.screen.unlockOrientation()`
* `window.screen.onorientationchange`
* Managing screen orientation (en-US)
ClipboardEvent.clipboardData
============================

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

**`ClipboardEvent.clipboardData`** 속성은 다음과 같은 용도로 사용할 수 있는 `DataTransfer` 객체입니다.

* `cut`, `copy` 이벤트 처리기 내에서, 어떤 데이터를 클립보드에 넣어야 하는지 지정하기. 보통 `setData(format, data)` (en-US)를 호출해서 수행합니다.
* `paste` 이벤트 처리기 내에서 데이터를 가져오기. 보통 `getData(format)`을 호출해서 수행합니다.

`cut`, `copy`, `paste` 이벤트 문서에서 자세한 정보를 확인하세요.

구문
--


```js
data = ClipboardEvent.clipboardData;
```

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboardevent-clipboarddata |

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

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

같이 보기
-----

* 복사 관련 이벤트: `cut`, `copy`, `paste`
* 이 속성이 속한 `ClipboardEvent` 인터페이스.
BatteryManager.dischargingTime (배터리관리기 방전시간)
============================================

몇 초 단위로, 배터리가 완전히 방전될 때까지 남은 시간량을 가리킵니다.

**참고:** 반환되는 시간이 정확하더라도, 개인정보보호 정책 사유로 브라우저들이 더 큰 간격(대개 15분)으로 시간량을 반올림합니다.

Syntax
------


```js
var time = battery.dischargingTime;
```


반환되는 중에, `time` 은 `BatteryManager` object(객체)인 `battery` 가 완전히 방전되고 시스템이 중단되는 몇 초 뒤에 남게 되는 시간입니다. 배터리가 현재 방전되기보다 충전되거나 시스템이 남은 방전 시간을 보고할 수 없다면, 이 값은 무한 값입니다.

예제
--

### HTML 콘텐츠


```html
<div id="dischargingTime">(discharging time unknown)</div>
```

### 자바언어 콘텐츠


```js
navigator.getBattery().then(function (battery) {
  var time = battery.dischargingTime;

  document.querySelector("#dischargingTime").textContent =
    battery.dischargingTime;
});
```

명세서
---

| Specification |
| --- |
| Battery Status API # dom-batterymanager-dischargingtime |

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

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

같이 보세요
------

* `BatteryManager`
* `Navigator.getBattery`
BatteryManager.charging
=======================

현재 배터리가 충전중인지를 나타내는 Boolean 값 입니다.

문법
--


```js
var charging = battery.charging;
```


`charging` 변수는 배터리가 충전 중인지의 여부를 가져옵니다. 충전중일경우 `true`. 이외에는 `false` 를 가리킵니다.

예제
--

### HTML Content


```html
<div id="charging">(charging state unknown)</div>
```

### JavaScript Content


```js
navigator.getBattery().then(function (battery) {
  var charging = battery.charging;

  document.querySelector("#charging").textContent = charging;
});
```

명세
--

| Specification |
| --- |
| Battery Status API # dom-batterymanager-charging |

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

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

같이 보기
-----

* `BatteryManager`
* `Navigator.getBattery`
BatteryManager.chargingTime (배터리관리기 충전시간)
=========================================

몇 초 단위로, 배터리가 완전히 충전될 때까지 남은 시간량을 가리킵니다.

**참고:** 반환되는 시간이 정확하더라도, 개인정보보호 정책 사유로 브라우저들이 더 큰 간격(대개 15분)으로 시간량을 반올림합니다.


```js
var time = battery.chargingTime;
```


반환되는 중에, 건전지가 완전히 충전될 때까지 또는 이미 완전히 충전되어 있다면 0이 될 때까지 `time` 은 몇 초 뒤에 남게 되는 시간입니다. 이는 `BatteryManager` object (객체),입니다. 배터리의 전류가 방전되어 있다면, 이 값은 `Infinity` (en-US), 즉 무한 값이 됩니다.

예제
--

### HTML 콘텐츠


```html
<div id="chargingTime">(charging time unknown)</div>
```

### 자바언어 콘텐츠


```js
navigator.getBattery().then(function (battery) {
  var time = battery.chargingTime;

  document.querySelector("#chargingTime").textContent = battery.chargingTime;
});
```

명세서
---

| Specification |
| --- |
| Battery Status API # dom-batterymanager-chargingtime |

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

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

같이 보세요
------

* `BatteryManager`
* `Navigator.getBattery`
Web Audio 사용을 분석하기 위한 도구들
=========================

Web Audio API 코드를 작성하는 중에, 여러분은 여러분이 만든 노드의 그래프를 분석하거나 그게 아니라면 여러분의 작업을 디버그할 도구가 필요하다고 생각했을 지도 모릅니다. 이 글은 여러분을 도울 이용 가능한 도구들에 대해 이야기합니다.

Chrome
------

Chrome Web Store에서 찾을 수 있는 유용한 web audio 검사기.

Edge
----

*Microsoft Edge를 사용하는 개발자들을 위한 정보를 추가해 주세요.*

Firefox
-------

Firefox는 네이티브 Web Audio 에디터 (en-US)를 제공합니다.

Safari
------

*Safari에서 작업하는 개발자들을 위한 정보를 추가해 주세요.*

같이 보기
-----

* Web Audio API
* Web Audio API 사용하기
* 모든 브라우저에서 작동하는 Web Audio API 코드 작성하기 (en-US)
OffscreenCanvas.width
=====================

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

**`width`** 프로퍼티는 `OffscreenCanvas` 객체에 할당된 너비를 반환합니다.

구문
--


```js
var pxl = offscreen.width;
offscreen.width = pxl;
```

예시
--

새로운 offscreen 캔버스를 생성하고 높이를 설정하거나 반환합니다.


```js
var offscreen = new OffscreenCanvas(256, 256);
offscreen.width; // 256
offscreen.width = 512;
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-offscreencanvas-width-dev |

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

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

더 보기
----

* `OffscreenCanvas`, 프로퍼티가 속한 인터페이스
OffscreenCanvas()
=================

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

**`OffscreenCanvas()`** 생성자는 새롭게 초기화된 `OffscreenCanvas` 객체를 반환합니다.

구문
--


```js
new OffscreenCanvas(width, height);
```

### 매개 변수

`width`

offscreen 캔버스의 너비

`height`

offscreen 캔버스의 높이

예시
--

이 예시는 `OffscreenCanvas()` 생성자를 이용해 새로운 offscreen 캔버스를 생성하고, WebGL 컨텍스트의 `getContext()` (en-US) 메소드를 사용해 초기화합니다.


```js
let offscreen = new OffscreenCanvas(256, 256);
let gl = offscreen.getContext("webgl");
```

명세서
---

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

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

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

더 보기
----

* `OffscreenCanvas`, 생성자가 속한 인터페이스
OffscreenCanvas.height
======================

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

**`height`** 프로퍼티는 `OffscreenCanvas` 객체에 할당된 높이를 반환합니다.

구문
--


```js
var pxl = offscreen.height;
offscreen.height = pxl;
```

예시
--

새로운 offscreen 캔버스를 생성하고 높이를 설정하거나 반환합니다.


```js
var offscreen = new OffscreenCanvas(256, 256);
offscreen.height; // 256
offscreen.height = 512;
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-offscreencanvas-height-dev |

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

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

더 보기
----

* `OffscreenCanvas`, 프로퍼티가 속한 인터페이스
ServiceWorkerRegistration.active
================================

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

`ServiceWorkerRegistration` (en-US) 인터페이스의 **`active`** 속성은 `ServiceWorker.state` (en-US) 가 `activating` 또는 `activated` 상태인 서비스 워커를 반환한다. 이 속성은 `null` 로 초기 설정되어 있다.

클라이언트들의 URL이 등록 scope 내에 있을 경우 active 워커는 `ServiceWorkerClient` (en-US) 를 제어한다. (`ServiceWorkerContainer.register` (en-US) 가 처음으로 호출될 때 그 `scope` 옵션은 정의된다.)

**참고:** 이 기능은 Web Workers 에서 사용 가능하다.

Syntax
------


```js
sw = ServiceWorker.active;
```

### Value

현재 `activating` 또는 `activated` 상태에 있다면, `ServiceWorker` 객체.

명세서
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-active |

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

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

See also
--------

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)
ServiceWorkerRegistration.installing
====================================

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

`ServiceWorkerRegistration` (en-US) 인터페이스의 **`installing`** 속성은 `ServiceWorker.state` (en-US) 가 `installing` 인 서비스 워커를 반환한다. 이 속성은 `null` 로 초기 설정되어 있다.

**참고:** 이 기능은 Web Workers 에서 사용 가능하다.

Syntax
------


```js
sw = ServiceWorker.installing;
```

### Value

현재 `installing` 상태에 있다면, `ServiceWorker` 객체

명세서
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-installing |

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

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

See also
--------

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)
ServiceWorkerRegistration.navigationPreload
===========================================

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

`ServiceWorkerRegistration` (en-US) 인터페이스의 **`navigationPreload`** 읽기 전용 속성은 현재의 서비스 워커 등록와 관련된 `NavigationPreloadManager` (en-US) 를 반환한다.

Syntax
------


```js
var navigationPreloadManager = serviceWorkerRegistration.navigationPreload;
```

### Value

`NavigationPreloadManager` (en-US) 의 객체.

명세서
---

| Specification |
| --- |
| Service Workers # service-worker-registration-navigationpreload |

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

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

**`HTMLElement.accessKeyLabel`** 읽기 전용 속성은 엘리먼트의 할당된 접근키를 나타내는 `String` 를 반환합니다. 존재하지 않는 경우 빈 문자열을 반환합니다.

구문
--


```js
label = element.accessKeyLabel;
```

예시
--

### JavaScript


```js
var node = document.getElementById("btn1");
if (node.accessKeyLabel) {
  node.title += " [" + node.accessKeyLabel + "]";
} else {
  node.title += " [" + node.accessKey + "]";
}

node.onclick = function () {
  var p = document.createElement("p");
  p.textContent = "Clicked!";
  node.parentNode.appendChild(p);
};
```

### HTML


```html
<button accesskey="h" title="Caption" id="btn1">Hover me</button>
```

### Result

명세
--

| Specification |
| --- |
| HTML Standard # dom-accesskeylabel |

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

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

함께 보기
-----

* `element.accessKey`
* accesskey 전역 속성.
Element.accessKey
=================

**`Element.accessKey`** 속성은 주어진 사용자가 눌러 주어진 엘리먼트로 이동할 수 있는 키 입력 세트입니다.

**참고:** `Element.accessKey` 속성은 브라우저에 이미 바인딩 된 키와의 여러 충돌로 인해 거의 사용되지 않습니다. 이를 해결하기 위해, 브라우저는 다른 "적절한" 키(예, `Alt` + accesskey)와 함께 키가 눌렸을 때동작하도록 구현하였습니다.

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

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

함께 보기
-----

* HTML 전역 속성: accesskey
HTMLElement.outerText
=====================

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

**`HTMLElement.outerText`** 는 비표준 속성(property)입니다. getter로써`Node.innerText`의 값을 반환합니다. setter로써는 현재 노드를 삭제하고 주어진 텍스트값으로 대체합니다.

Example
-------

StackOverflow의 이 답변을 보세요.

Specification
-------------

표준이 아니므로 스펙이 없습니다. 표준 논의가 다음에서 진행중입니다: whatwg/html#668.

Microsoft has a description on MSDN.

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

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

See also
--------

* `Node.innerText`
* `Element.outerHTML`
Document: dragstart 이벤트
=======================

`dragstart` 이벤트는 사용자가 요소나 선택한 텍스트를 드래그하기 시작할 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 기본 동작 | 드래그 앤 드롭 작업 시작을 시작합니다. |
| 인터페이스 | `DragEvent` (en-US) |
| 이벤트 처리기 속성 | `ondragstart` (en-US) |

예제
--

### 드래그 시작 시 투명도 설정

이 예제에서는 컨테이너 안에 드래그 가능한 요소를 배치했습니다. 이 요소를 잡아 드래그한 후 놓아보세요.

`dragstart` 이벤트를 수신해서, 요소가 드래그 되기 시작하면 반투명하게 설정하는 예제입니다.

`drag` 이벤트 문서에서 드래그 앤 드롭의 더 완전한 예제를 확인할 수 있습니다.

#### HTML


```html
<div id="container">
  <div id="draggable" draggable="true">드래그 가능</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* 사용자가 예제의 텍스트를 선택하지 못하도록 \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
document.addEventListener("dragstart", (event) => {
  // 반투명하게 만들기
  event.target.classList.add("dragging");
});

document.addEventListener("dragend", (event) => {
  // 불투명하게 초기화
  event.target.classList.remove("dragging");
});
```


#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # ix-handler-ondragstart |
| HTML Standard # event-dnd-dragstart |

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

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

같이 보기
-----

* 다른 드래그 앤 드롭 이벤트:
    + `drag`
    + `dragend`
    + `dragover` (en-US)
    + `dragenter` (en-US)
    + `dragleave` (en-US)
    + `drop` (en-US)
* 이 이벤트의 다른 대상:
    + `Window`: `dragstart` 이벤트
    + `HTMLElement`: `dragstart` 이벤트
    + `SVGElement` (en-US): `dragstart` 이벤트
Document: dragend 이벤트
=====================

`dragend` 이벤트는 마우스 버튼을 놓거나 이스케이프 키를 눌러 드래그 작업이 끝나게 되면 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 아니오 |
| 기본 동작 | 다양함 |
| 인터페이스 | `DragEvent` (en-US) |
| 이벤트 처리기 속성 | `ondragend` (en-US) |

예제
--

### 드래그 종료 시 투명도 초기화

이 예제에서는 컨테이너 안에 드래그 가능한 요소를 배치했습니다. 이 요소를 잡아 드래그한 후 놓아보세요.

요소가 드래그 되기 시작하면 반투명하게 설정했다가, `dragend` 이벤트를 수신해서 드래그가 끝나면 다시 불투명하게 만드는 예제입니다.

`drag` 이벤트 문서에서 드래그 앤 드롭의 더 완전한 예제를 확인할 수 있습니다.

#### HTML


```html
<div id="container">
  <div id="draggable" draggable="true">드래그 가능</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* 사용자가 예제의 텍스트를 선택하지 못하도록 \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
document.addEventListener("dragstart", (event) => {
  // 반투명하게 만들기
  event.target.classList.add("dragging");
});

document.addEventListener("dragend", (event) => {
  // 불투명하게 초기화
  event.target.classList.remove("dragging");
});
```


#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # ix-handler-ondragend |
| HTML Standard # event-dnd-dragend |

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

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

같이 보기
-----

* 다른 드래그 앤 드롭 이벤트:
    + `drag`
    + `dragstart`
    + `dragover` (en-US)
    + `dragenter` (en-US)
    + `dragleave` (en-US)
    + `drop` (en-US)
* 이 이벤트의 다른 대상:
    + `Window`: `dragend` 이벤트
    + `HTMLElement`: `dragend` 이벤트
    + `SVGElement` (en-US): `dragend` 이벤트
HTMLElement.click()
===================

**`HTMLElement.click()`** 메소는 엘리먼트에 마우스 클릭을 시뮬레이션합니다.

지원하는 엘리먼트(`<input>` (en-US) 등)에서 `click()` 이 사용될 때, 엘리먼트의 클릭 이벤트가 실행됩니다. 그 다음, 다큐먼트 트리(또는 이벤트 체인)에서 더 상위의 엘리먼트로 버블링되며 상위 엘리먼트의 클릭 이벤트를 실행합니다.

구문
--


```js
element.click();
```

명세
--

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

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

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