Window.innerHeight - Web API

Window.innerHeight
==================

`Window` 인터페이스의 읽기 전용인 **`innerHeight`** 속성은 존재한다면 수평 스크롤 막대 높이를 포함한 창 내부 높이를 픽셀로 반환합니다.

`innerHeight`의 값은 창의 layout viewport의 높이에서 가져옵니다. 너비는 `innerWidth` 속성을 사용하여 얻을 수 있습니다.

값
-

창의 레이아웃 뷰포트 높이를 픽셀로 나타낸 정수 값입니다. 속성은 읽기 전용이며, 기본 값이 없습니다.

창의 너비를 변경하려면, `resizeTo()`이나 `resizeBy()` (en-US)와 같은 크기를 조정하는 메서드 중 하나를 사용해야합니다.

사용 일람
-----

수평 스크롤 막대나 모든 테두리를 제외한 창의 높이를 구하려면, 루트 `<html>` 요소의 `clientHeight` 속성을 대신해서 사용하십시오.

`innerHeight`와 `innerWidth` 둘 다 탭이나 프레임같은 창처럼 행동하는 모든 창이나 모든 객체에서 사용할 수 있습니다.

예제
--

### 프레임셋 가정

```js
console.log(window.innerHeight); // 혹은

console.log(self.innerHeight);
// 프레임셋 내의 프레임 뷰포트의 높이 로그를 기록합니다.

console.log(parent.innerHeight);
// 가장 가까운 프레임셋 뷰포트의 높이 로그를 기록합니다.

console.log(top.innerHeight);
// 가장 바깥쪽 프레임셋 뷰포트의 높이 로그를 기록합니다.
```

창의 크기를 변경하려면 `window.resizeBy()` (en-US)와 `window.resizeTo()`를 참고하십시오.

창의 외부 높이, 즉 전체 브라우저 창의 높이를 구하려면 `window.outerHeight` (en-US)를 참고하십시오.

### 그래픽 예제

다음 그림은 `outerHeight`와 `innerHeight` 사이의 차이를 보여줍니다.

![innerHeight vs outerHeight illustration](/ko/docs/Web/API/Window/innerHeight/firefoxinnervsouterheight2.png)

데모
--

### HTML

```html
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
```

### JavaScript

```js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);
```

### 결과

또한 view the results of the demo code in a separate page에 방문하여 데모 코드 결과를 볼 수 있습니다.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-window-innerheight |

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

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

같이 보기
-----

* `window.innerWidth`
* `window.outerHeight` (en-US)
* `window.outerWidth`


Window.prompt() - Web API

Window.prompt()
===============

`Window.prompt()`는 사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자를 띄웁니다.

구문
--

```js
result = window.prompt(message, default);
```

### 매개변수

`message` Optional

사용자에게 보여줄 문자열. 프롬프트 창에 표시할 메세지가 없으면 생략할 수 있습니다.

`default` Optional

텍스트 입력 필드에 기본으로 채워 넣을 문자열. Internet Explorer 7과 8에서는 이 인자에 값을 지정하지 않으면 문자열 `"undefined"`가 지정됨에 유의하세요.

### 반환 값

사용자가 입력한 문자열, 또는 `null`.

예제
--

```js
let sign = prompt("당신의 별자리는 무엇입니까?");

if (sign.toLowerCase() === "전갈자리") {
  alert("와! 저도 전갈자리예요!");
}

// prompt 기능을 쓰는 방법은 다양합니다.
sign = window.prompt(); // 빈 대화 상자를 엽니다.
sign = prompt(); // 빈 대화 상자를 엽니다.
sign = window.prompt("님 지금 기분 좋아요?"); // 안내 문구 "님 지금 기분 좋아요?"가 보이는 창을 띄웁니다.
sign = window.prompt("님 지금 기분 좋아요?", "네."); // 안내 문구 "님 지금 기분 좋아요?"가 보이는 창을 띄우되 기본적으로 입력되어 있는 값은 "네."로 합니다.
```

사용자가 확인 버튼을 누르면 입력부의 문자열을 반환합니다. 만약 사용자가 아무것도 입력하지 않고 확인 버튼을 누르면 빈 문자열을 반환합니다. 만약 사용자가 취소 버튼을 누르면 `null`을 반환합니다.

상기의 대화 상자는 OS X 상의 Chrome에서 다음과 같이 보입니다.

![prompt() dialog in Chrome on OS X](/ko/docs/Web/API/Window/prompt/prompt.png)

비고
--

대화 상자는 한 줄의 텍스트 상자, 한 개의 취소 버튼과 한 개의 확인 버튼을 갖고, 사용자가 텍스트 상자에 입력한 문자열(빈 문자열일 수 있음)을 반환합니다.

대화 상자는 modal window(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)로, 사용자는 대화 상자가 닫힐 때까지 나머지 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 modal window)를 만드는 함수를 남용하면 안 됩니다.

이 함수가 반환하는 값은 문자열이라는 점에 유의하세요. 이는 사용자가 입력한 값을 다른 자료형으로 바꿔야 할 때가 있음을 뜻합니다. 예를 들어, 만약 사용자의 대답이 `Number`가 되어야 한다면 반환 값을 직접 변환해야 합니다.

```js
const aNumber = Number(window.prompt("Type a number", ""));
```

명세
--

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

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

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

관련 문서
-----

* `alert`
* `confirm`


Window.customElements - Web API

Window.customElements
=====================

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
`Window` 인터페이스의 **`customElements`** 읽기 전용 속성은 새로운 사용자 지정 요소를 등록하거나, 이전에 등록한 요소의 정보를 받아올 수 있는 `CustomElementRegistry` 객체의 참조를 반환합니다.

예제
--

`customElements`를 사용하는 가장 흔한 예시는 새로운 요소를 정의하고 등록하기 위해 `CustomElementRegistry.define()` (en-US) 메서드에 적용하는 경우입니다.

```js
let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);
```

그러나, 보통은 다음 코드처럼 줄여서 사용하곤 합니다.

```js
customElements.define(
  "element-details",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById(
        "element-details-template",
      ).content;
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        template.cloneNode(true),
      );
    }
  },
);
```

web-components-examples 저장소에서 더 많은 사용 예제를 찾아보세요.

명세
--

| Specification |
| --- |
| HTML Standard # dom-window-customelements |

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

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


Window.alert() - Web API

Window.alert()
==============

**`Window.alert()`** 메서드는 확인 버튼을 가지며 메시지를 지정할 수 있는 경고 대화 상자를 띄웁니다.

구문
--

```js
window.alert([message]);
```

### 매개변수

`message` Optional

경고 대화 상자에 표시할 텍스트 문자열이거나, 문자열로 변환해 나타낼 객체.

예제
--

```js
window.alert("Hello world!");
alert("Hello world!");
```

상기 두 코드의 동작은 모두 다음과 같습니다.

![Image:AlertHelloWorld.png](/ko/docs/Web/API/Window/alert/alerthelloworld.png)

참고
--

경고 대화 상자는 사용자의 확인을 제외한 다른 입력을 요구하지 않는 메시지를 전달할 때에 쓰여야 합니다.

대화 상자는 모달 창(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)으로, 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 모달 창)를 만드는 함수를 남용하면 안 됩니다.

명세
--

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

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

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

관련 문서
-----

* `confirm`
* `prompt`


Window.outerWidth - Web API

Window.outerWidth
=================

요약
--

Window.outerWidth 는 브라우저 윈도우 바깥쪽의 폭을 얻어온다. 이것은 브라우저 윈도우의 사이드바와 가장자리 경계선을 포함한 폭을 나타내어 준다.

이 값은 읽기전용이다. 그리고 기본값이 없다.

문법
--

```js
outWindowWidth = window.outerWidth;
```

반환이 끝나면 outWindowWidth는 윈도우의 바깥경계를 포함한 너비(폭)를 담고 있다.

노트
--

이 사이즈를 변경하기 위해서는, `window.resizeBy()` (en-US) 또는 `window.resizeTo()`를 참조하세요.

윈도우의 안쪽 폭 즉, 현재 표시되고있는 창의 폭을 얻으려면 `window.innerWidth`를 참조하세요.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-window-outerwidth |

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

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

같이 보기
-----

* `window.outerHeight` (en-US), `window.innerHeight`, `window.innerWidth`
* `window.resizeBy()` (en-US), `window.resizeTo()`


Window.scrollY - Web API

Window.scrollY
==============

`Window` 인터페이스의 **`scrollY`** 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다. 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아닙니다. 수평 스크롤은 `scrollX` 속성을 사용하여 가져올 수 있습니다.

구문
--

```js
var y = window.scrollY;
```

### 값

원점으로부터 문서를 수직방향으로 스크롤한 픽셀의 수를 나타내는, 배정밀도 부동소수점 값. 양의 값이 위쪽 스크롤을 의미합니다. 문서를 단일 픽셀보다 높은 정밀도의 장치에서 렌더링한 경우 반환값의 정밀도도 높아져 소숫값을 반환할 수 있습니다. 문서가 위나 아래로 전혀 움직이지 않은 상태면 `0`을 반환합니다.

**참고:** 정숫값이 필요하면 `Math.round()`를 사용해 반올림할 수 있습니다.

더 기술적인 용어로, `scrollY`는 현재 뷰포트 위쪽 모서리의 Y좌표를 반환하고, 뷰포트가 없으면 0을 반환합니다.

예제
--

```js
// make sure and go down to the second page
if (window.scrollY) {
  window.scroll(0, 0); // reset the scroll position to the top left of the document.
}

window.scrollByPages(1);
```

참고
--

`scrollY` 속성을 사용하면 `scrollBy()`, `scrollByLines()` (en-US), `scrollByPages()` (en-US)와 같은 상대적 스크롤 함수를 사용할 때, 문서가 이미 스크롤되지는 않았는지 판별할 수 있습니다.

`pageYOffset` (en-US) 속성은 `scrollY`의 다른 이름입니다.

```js
window.pageYOffset === window.scrollY; // 항상 true
```

브라우저간 호환성을 위해서는 `window.scrollY` 대신 `window.pageYOffset`을 사용하세요. 이에 더해, Internet Explorer 9 미만의 구형 환경에서는 두 속성 모두 지원하지 않으므로 또 다른 비표준 속성을 사용해야 합니다. 다음은 완벽히 호환되는 코드의 예시입니다.

```js
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";

var x = supportPageOffset
  ? window.pageXOffset
  : isCSS1Compat
    ? document.documentElement.scrollLeft
    : document.body.scrollLeft;
var y = supportPageOffset
  ? window.pageYOffset
  : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;
```

명세
--

| Specification |
| --- |
| CSSOM View Module # dom-window-scrolly |

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

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

같이 보기
-----

* `window.scrollX`


Window.localStorage - Web API

Window.localStorage
===================

**`localStorage`** 읽기 전용 속성을 사용하면 `Document` 출처의 `Storage` 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. `localStorage`는 `sessionStorage`와 비슷하지만, `localStorage`의 데이터는 만료되지 않고 `sessionStorage`의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 `localStorage` 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)

`localStorage`에 저장한 자료는 **페이지 프로토콜별로 구분**합니다. 특히 HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 `localStorage`에 저장됩니다.

키와 값은 **항상** 각 문자에 2바이트를 할당하는 UTF-16 `DOMString`의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.

구문
--

```js
myStorage = window.localStorage;
```

### 값

현재 출처의 로컬 저장 공간에 접근할 수 있는 `Storage` 객체.

### 예외

`SecurityError`

요청이 정책의 결정을 위반했거나, 출처가 유효한 스킴/호스트/포트 튜플이 아닌 경우. 유효하지 않은 튜플은 출처가 `file:`이나 `data:` 스킴을 사용했을 때 발생할 수 있습니다. 예외의 예를 들자면 사용자가 특정 출처의 지속성 데이터를 거부하도록 브라우저를 설정하는 경우가 있습니다.

예제
--

아래 코드는 현재 도메인의 로컬 `Storage` 객체에 접근한 후, `Storage.setItem()` (en-US)을 사용해 항목 하나를 추가합니다.

```js
localStorage.setItem("myCat", "Tom");
```

위에서 추가한 `localStorage` 항목을 읽는 법은 다음과 같습니다.

```js
const cat = localStorage.getItem("myCat");
```

그리고 제거는 아래와 같습니다.

```js
localStorage.removeItem("myCat");
```

`localStorage` 항목의 전체 제거 구문입니다.

```js
localStorage.clear();
```

**참고:** 참고: Web Storage API 사용하기 (en-US) 문서에서 전체 예제를 살펴보세요.

명세
--

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

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

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

함께 보기
-----

* Web Storage API 사용하기 (en-US)
* Local storage with Window.localStorage (en-US)
* `Window.sessionStorage`


Window.console - Web API

Window.console
==============

**`Window.console`** 속성은 브라우저 콘솔에 로그를 남길 수 있는 메서드를 가진 `Console` 객체의 참조를 반환합니다. 콘솔 메서드는 디버깅 용도로만 사용해야 하며, 엔드유저에게 정보를 제공할 의도를 가져션 안됩니다.

예제
--

### 콘솔에 로그 남기기

다음 코드는 콘솔에 로그 텍스트를 남깁니다.

```js
console.log("An error occurred while loading the content");
```

다음 코드는 객체를 콘솔에 출력합니다. 출력 결과를 클릭하면 객체의 필드를 펼쳐볼 수 있습니다.

```js
console.dir(someObject);
```

`Console` 문서의 예제 항목에서 더 자세한 예제를 살펴보세요.

명세
--

| Specification |
| --- |
| Console Standard  |

**참고:** 현재 브라우저간 구현에 많은 차이가 있지만, 하나로 통합하여 서로 보다 일관적으로 만드는 작업이 진행 중입니다.


Window.postMessage() - Web API

Window.postMessage()
====================

**`window.postMessage()`** 메소드는 `Window` 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 합니다. 예시로, 페이지와 생성된 팝업 간의 통신이나, 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있습니다.

일반적으로, 다른 페이지 간의 스크립트는 각 페이지가 같은 프로토콜, 포트 번호와 호스트을 공유하고 있을 때에("동일 출처 정책"으로도 불려 집니다.) 서로 접근할 수 있습니다. **`window.postMessage()`** 는 이 제약 조건을 안전하게 우회하는 기능을 제공합니다.

대체로, 한 window는 다른 window를 참조할 수 있고(*예시,* `targetWindow = window.opener`), `targetWindow.postMessage()`를 통해 다른 window에 `MessageEvent`를 전송할 수 있습니다. 이벤트를 받는 window는 이를 통해 필요에 따라 이벤트를 처리 (en-US)할 수 있습니다. **`window.postMessage()`** 를 통해 전달된 인자(예시, "message")는 이벤트 객체를 통해 이벤트를 받는 window에서 사용할 수 있습니다.

문법
--

```js
targetWindow.postMessage(message, targetOrigin, [transfer]);
```

`targetWindow`

메세지를 전달 받을 window의 참조. 참조를 취득할 방법으로는 다음과 같은 것이 있습니다:\* `Window.open` (en-US) (새 창을 만들고 새 창을 참조할 때),

* `Window.opener` (새 창을 만든 window를 참조할 때),
* `HTMLIFrameElement.contentWindow` (en-US) (부모 window에서 임베디드된 `<iframe>` (en-US)을 참조할 때),
* `Window.parent` (en-US) (임베디드된 `<iframe>` (en-US)에서 부모 window를 참조할 때),
* `Window.frames` (en-US) + an index value (named or numeric).

`message`

다른 window에 보내질 데이터. 데이터는 the structured clone algorithm (en-US)을 이용해 직렬화됩니다. 이를 통해 직렬화를 직접할 필요 없이 대상 window에 다양한 데이터 객체를 안전하게 전송할 수 있습니다. [1]

`targetOrigin`

`targetWindow`의 origin을 지정합니다. 이는 전송되는 이벤트에서 사용되며, 문자열 `"*"`(별도로 지정하지 않음을 나타냄) 혹은 URI이어야 합니다. 이벤트를 전송하려 할 때에 `targetWindow`의 스키마, 호스트 이름, 포트가 `targetOrigin`의 정보와 맞지 않다면, 이벤트는 전송되지 않습니다. 세 가지 모두 일치해야 이벤트가 전송됩니다. 이는 메세지를 보내는 곳을 제안하기 위함입니다. 예를 들어, `postMessage()`를 통해 비밀번호가 전송된다면, 악의적인 제 3자가 가로채지 못하도록, `targetOrigin`을 반드시 지정한 수신자와 동일한 URI를 가지도록 설정하는 것이 정말 중요합니다. **다른 window의 document의 위치를 알고 있다면, 항상 `targetOrigin`에 `*` 말고 특정한 값을 설정하세요. 특정한 대상을 지정하지 않으면 악의적인 사이트에 전송하는 데이터가 공개되어 버립니다.**

`transfer` Optional

일련의 transfer 객체 (en-US). 메세지와 함께 전송됩니다. 이 객체들의 소유권은 수신 측에게 전달되며, 더 이상 송신 측에서 사용할 수 없습니다.

디스페치 이벤트(The dispatched event)
------------------------------

이하의 JavaScript를 실행하면 `otherWindow` 에서 전달된 메시지를 받을 수 있습니다:

```js
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  if (event.origin !== "http://example.org:8080") return;

  // ...
}
```

전달된 메시지의 프로퍼티는 다음과 같습니다:

`data`

다른 윈도우에서 온 오브젝트.

`origin`

`postMessage` 가 호출될 때 메시지를 보내는 윈도우의 origin.
 이 문자열은 프로토콜과 "://", 호스트 명(존재할 경우), 그리고 ":"의 뒤에 이어 지는 포트 번호가 연결된 것입니다. (포트 번호는 포트 번호가 명기되었거나 주어진 프로토콜의 디폴트 포트와 다를 경우). 전형적인 origin의 예로 `https://example.org` (이 경우 port `443`), `http://example.net` (이 경우 port `80`), and `http://example.com:8080` 가 있습니다. 이 origin은 `postMessage` 호출 이후 다른 위치로 이동되었을 수 있는 해당 윈도우의 현재 또는 미래의 origin 이 보장되지 *않는다*는 점에 주의하세요.

`source`

 메시지를 보낸 `window` 오브젝트에 대한 참조.
 이것을 사용함으로 다른 orign에 있는 두 개의 윈도우에서 쌍방향 통신을 확립할 수 있습니다.

보안 문제(Security concerns)
------------------------

**다른 사이트로부터 메시지를 받고 싶지 않다면, `message` 이벤트를 위해 어떠한 이벤트 리스너도 추가하지 *마세요*.** 이것은 보안 문제를 피할 수 있는 단순명료한 방법입니다.

다른 사이트로부터 메시지를 받고자 한다면, `origin`과 추가로 `source` 프로퍼티를 이용해 **항상 보내는 쪽의 신원을 확인하세요**. 임의의 어떤 윈도우(예: `http://evil.example.com` 를 포함)는 다른 윈도우에 메시지를 보낼 수 있으며, 알 수 없는 발신자가 악의적인 메시지를 보내지 않는다는 보장이 없습니다. 그러나 신원을 확인했더라도 **수신된 메시지의 구문을 항상 확인해야 합니다**. 그렇지 않으면 신뢰할 수 있는 메시지만 전송할 것으로 기대한 사이트의 보안 구멍으로 인해 크로스 사이트 스크립트 빈틈이 생길 수 있습니다.

**`postMessage` 를 이용해 다른 윈도우로 데이터를 보낼 때, 항상 정확한 타겟 origin (`*`가 아니라) 을 지정하세요.** 악의적인 사이트는 당신이 모르는 사이에 윈도우의 위치를 변경할 수 있고, 따라서 `postMessage`를 사용하여 전송된 데이터를 가로챌 수 있습니다.

Example
-------

```js
/\*
 \* <http://example.com:8080>에 있는 윈도우 A의 스크립트:
 \*/

var popup = window.open(...popup details...);

// 팝업이 완전히 로드되었을 때:

// This does nothing, assuming the window hasn't changed its location.
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// This will successfully queue a message to be sent to the popup, assuming
// the window hasn't changed its location.
popup.postMessage("hello there!", "http://example.com");

function receiveMessage(event)
{
  // Do we trust the sender of this message? (might be
  // different from what we originally opened, for example).
  if (event.origin !== "http://example.com")
    return;

  // event.source is popup
  // event.data is "hi there yourself! the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);
```

```js
/\*
 \* In the popup's scripts, running on <http://example.com>:
 \*/

// Called sometime after postMessage is called
function receiveMessage(event) {
  // Do we trust the sender of this message?
  if (event.origin !== "http://example.com:8080") return;

  // event.source is window.opener
  // event.data is "hello there!"

  // Assuming you've verified the origin of the received message (which
  // you must do in any case), a convenient idiom for replying to a
  // message is to call postMessage on event.source and provide
  // event.origin as the targetOrigin.
  event.source.postMessage(
    "hi there yourself! the secret response " + "is: rheeeeet!",
    event.origin,
  );
}

window.addEventListener("message", receiveMessage, false);
```

### Notes

윈도우 document의 장소와 무관하게, 임의의 윈도우는 언제든지 메시지를 보내기 위해 임의의 다른 윈도우에 있는 함수에 접근할 수도 있습니다. 그래서 이벤트 리스너는 메시지를 취득할 때, `origin` 또는 `source` 프로퍼티를 이용해, 먼저 메시지 송신자의 식별 정보를 **체크해야만 합니다**. 이것은 아무리 강조해도 지나치지 않습니다. 왜냐하면, **`origin` 또는 `source` 프로퍼티의 체크 실패는 크로스 사이트 스크립팅 공격을 가능하게 하기 때문입니다.**

비동기로 전달된 스크립트(타임아웃, 유저 생성 이벤트)에서, `postMessage`의 호출자의 판별이 불가능할 때, `postMessage`에 의해 보내진 이벤트를 기다리는 이벤트 핸들러는 예외를 발생시킵니다.

`postMessage()`는 *보류 중인 모든 실행 컨텍스트가 완료된 후에만* `MessageEvent`을 발송하도록 스케줄합니다. 예를 들어, 이벤트 핸들러에서 `postMessage()`가 호출되는 경우, `MessageEvent`가 발송되기 전에 해당 이벤트에 대한 나머지 핸들러와 마찬가지로 이벤트 핸들러는 완료까지 실행됩니다.

전달된 이벤트의 `origin` 프로퍼티의 값은 호출하는 윈도우의 `document.domain` 현재 값에 영향을 받지 않습니다.

IDN 호스트 명에 한하여, `origin` 프로퍼티 값은 일관되게 Unicode 또는 punycode가 아닙니다. 그래서, IDN 사이트로 부터 메시지를 기대하는 경우 최상의 호환성 체크를 하기위해, IDN과 Punycode의 값 모두를 체크하세요. 이 값은 결국 일관되게 IDN이 될 것이지만, 현재로서는 IDN과 Punycode 양식을 모두 처리해야 합니다.

송신 창에 `javascript:` 또는`data:` URL이 있을 때의 `origin` 프로퍼티의 값은 URL을 로드한 스크립트의 origin입니다.

### Using window.postMessage in extensions
비표준

`window.postMessage`는 크롬 코드(예: 확장 코드 및 권한 코드)로 실행되는 JavaScript에서 사용할 수 있지만, 발송된 이벤트의 `source` 프로퍼티는 보안 제한으로 항상 `null`입니다. (다른 프로퍼티에는 예상 값이 있습니다.)

콘텐츠 또는 웹 컨텍스트 스크립트가 `targetOrigin`을 지정하여 확장 스크립트(백그라운드 스크립트 또는 콘텐츠 스크립트)와 직접 통신하는 것은 불가능합니다. 웹 또는 콘텐츠 스크립트는 `"*"`의 `targetOrigin`이 포함된 `window.postMessage`를 사용하여 모든 리스너에게 브로드캐스트할 수 있지만, 확장은 이러한 메시지의 발신지를 확인할 수 없고 다른 리스너(제어하지 않는 수신자 포함)가 수신할 수 있기 때문에 이 작업은 중지됩니다.

컨텐츠 스크립트는 runtime.sendMessage 를 사용하여 백그라운드 스크립트와 통신해야 합니다. 웹 컨텍스트 스크립트는 사용자 지정 이벤트를 사용하여 컨텐츠 스크립트(필요한 경우 게스트 페이지에서 스누핑을 방지하기 위해 임의로 생성된 이벤트 이름 포함)와 통신할 수 있습니다.

마지막으로, `file:` URL의 페이지의 메시지를 보낼 경우 `targetOrigin` 파라미터를 `"*"`로 할 필요가 있습니다. `file://` 은 보안 제한으로 사용할 수 없으며 이 제한은 향후 수정될 수 있습니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-window-postmessage-options-dev |

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

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

See also
--------

* `Document.domain`
* `CustomEvent`
* Interaction between privileged and non-privileged pages


Window.status - Web API

Window.status
=============

요약
--

브라우저 하단의 상태 표시줄에 텍스트를 바꾸거나, 기존 텍스트를 얻을 수 있다.

이 프로퍼티는 Firefox나 기타 브라우저의 기본 설정값에서는 동작하지 않는다. window.status를 변경한다고 하더라도 상태 표시줄의 메시지에 출력되지 않을 것이다. 상태바 텍스트를 변경할 수 있게 하려면 유저가 about:config 창에서 dom.disable\_window\_status\_change 를 허용해 주어야 한다.(인터넷 익스플로러의 경우 [인터넷 옵션 - 보안 - 사용자 지정 수준 - 스크립트를 통해 상태 표시줄 업데이트 허용]을 '사용'으로 바꾸어야 한다.)

**참고:** Starting in Gecko 1.9.1, users can let websites change the status text by enabling the "Change status bar" preference in the Advanced options panel.

문법
--

```js
window.status = string;
var value = window.status;
```

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

HTML5


Window.scrollX - Web API

Window.scrollX
==============

`Window` 인터페이스의 **`scrollX`** 읽기 전용 속성은 문서가 수평으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다. 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아닙니다. 수직 스크롤은 `scrollY` 속성을 사용하여 가져올 수 있습니다.

구문
--

```js
var x = window.scrollX;
```

### 값

반환하는 값은 문서가 원점으로부터 수평방향으로 스크롤한 픽셀의 수를 나타내는 배정밀도 부동소수점 값입니다. 양의 값이 왼쪽 스크롤을 의미합니다. 문서를 픽셀보다 작은 정밀도의 장치에서 렌더링한 경우 반환값의 정밀도도 높아져 소숫값을 반환할 수 있습니다. 문서가 좌우로 전혀 움직이지 않은 상태면 `0`을 반환합니다.

**참고:** 정숫값이 필요하면 `Math.round()`를 사용해 반올림할 수 있습니다.

더 기술적인 용어로, `scrollX`는 현재 뷰포트 왼쪽 모서리의 X좌표를 반환하고, 뷰포트가 없으면 0을 반환합니다.

예제
--

다음 예제는 문서의 현재 스크롤 위치가 400픽셀이 넘으면 맨 처음으로 돌아갑니다.

```js
if (window.scrollX > 400) {
  window.scroll(0, 0);
}
```

참고
--

`pageXOffset` 속성은 `scrollX` 의 다른 이름입니다.

```js
window.pageXOffset === window.scrollX; // 항상 true
```

브라우저 호환성을 위해서는 `window.scrollX` 대신 `window.pageXOffset`을 사용하세요. 이에 더해, Internet Explorer 9 미만에서는 두 속성 모두 지원하지 않으므로 다른 비표준 속성을 사용해야 합니다. 다음은 완벽히 호환되는 코드의 예시입니다.

```js
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";

var x = supportPageOffset
  ? window.pageXOffset
  : isCSS1Compat
    ? document.documentElement.scrollLeft
    : document.body.scrollLeft;
var y = supportPageOffset
  ? window.pageYOffset
  : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;
```

명세
--

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollx |

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

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

같이 보기
-----

* `window.scrollY`


Window.innerWidth - Web API

Window.innerWidth
=================

읽기 전용인 `Window` 속성 **`innerWidth`** 은 픽셀로 창 내부의 너비를 반환합니다. 하나가 존재하는 경우, 수직 스크롤 막대의 너비를 포함합니다.

더 정확하게는, `innerWidth`은 창의 layout viewport의 너비를 반환합니다. 창 내부의 높이, 레이아웃 뷰포트의 높이는 `innerHeight` 속성으로부터 얻을 수 있습니다.

값
-

창의 레이아웃 뷰포트 너비를 픽셀로 나타낸 정수 값입니다. 속성은 읽기 전용이며, 기본 값이 없습니다.

창의 너비를 변경하려면, `resizeBy()` (en-US)나 `resizeTo()`와 같은 크기를 조정하는 메서드 중 하나를 사용해야합니다.

사용 일람
-----

스크롤 막대와 테두리를 제외한 창의 너비를 구하려면, 루트 `<html>` 요소의 `clientWidth` 속성을 대신 사용하십시오.

`innerWidth` 속성은 탭이나 프레임같은 창처럼 행동하는 모든 창이나 모든 객체에서 사용할 수 있습니다.

예제
--

```js
// 뷰포트의 너비를 기록합니다.
console.log(window.innerWidth);

// 프레임셋 내의 프레임 뷰포트의 너비를 기록합니다.
console.log(self.innerWidth);

// 가장 가까운 프레임셋의 뷰포트의 너비를 기록합니다.
console.log(parent.innerWidth);

// 가장 먼 프레임셋의 뷰포트의 너비를 기록합니다.
console.log(top.innerWidth);
```

데모
--

### HTML

```html
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
```

### JavaScript

```js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);
```

### 결과

당신은 또한 별도의 페이지에서 데모 코드의 결과를 볼 수 있습니다.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-window-innerwidth |

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

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

같이 보기
-----

* `window.outerWidth`
* `window.innerHeight`
* `window.outerHeight` (en-US)


Window.resizeTo() - Web API

Window.resizeTo()
=================

**`Window.resizeTo()`** 메서드는 동적으로 창의 크기를 변경합니다.

구문
--

```js
window.resizeTo(width, height);
```

### 매개변수

`width`

새로운 `outerWidth`를 나타내는 픽셀 단위 정수. 스크롤 바, 제목 표시줄 등을 모두 포함한 너비입니다.

`height`

새로운 `outerHeight` (en-US)를 나타내는 픽셀 단위 정수. 스크롤 바, 제목 표시줄 등을 모두 포함한 높이입니다.

예제
--

다음 함수는 창의 크기를 화면에서 사용 가능한 크기의 1/4로 설정합니다. `Screen.availWidth` (en-US), `Screen.availHeight` (en-US) 속성도 참고하세요.

```js
function quarter() {
  window.resizeTo(window.screen.availWidth / 2, window.screen.availHeight / 2);
}
```

명세
--

| Specification |
| --- |
| CSSOM View Module # dom-window-resizeto |

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

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

같이 보기
-----

* `window.resizeBy()` (en-US)


Window: cut 이벤트 - Web API

Window: cut 이벤트
===============

**`cut`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `oncut` (en-US) |

`cut` 이벤트의 원 대상은 복사 동작의 대상인 `Element` (en-US)입니다. `Window`에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 Element: cut 이벤트에서 확인하세요.

예제
--

```js
window.addEventListener("cut", (event) => {
  console.log("잘라내기 동작 실행");
});
```

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

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

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

같이 보기
-----

* 관련 이벤트: `copy`, `paste`
* `Element` (en-US)를 대상으로 한 같은 이벤트: `cut`
* `Document`를 대상으로 한 같은 이벤트: `cut`


load - Web API

load
====

`load` 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.

예제
--

### Window

```html
<script>
 window.addEventListener("load", function (event) {
 console.log("All resources finished loading!");
 });
</script>
```

### `script` 엘리먼트

```html
<script>
 var script = document.createElement("script");
 script.addEventListener("load", function (event) {
 console.log("Script finished loading and executing");
 });
 script.src = "http://example.com/example.js";
 script.async = true;
 document.getElementsByTagName("script")[0].parentNode.appendChild(script);
</script>
```

일반 정보
-----

스펙

DOM L3

인터페이스

UIEvent

Bubbles

No

취소가능 여부

No

타겟

Window,Document,Element

기본 동작

None.

속성
--

| 속성 | 타입 | 설명 |
| --- | --- | --- |
| `target` 읽기 전용 | ``EventTarget`` | The event target (the topmost target in the DOM tree). |
| `type` 읽기 전용 | ``DOMString`` | The type of event. |
| `bubbles` 읽기 전용 | ``Boolean`` | Whether the event normally bubbles or not. |
| `cancelable` 읽기 전용 | ``Boolean`` | Whether the event is cancellable or not. |
| `view` 읽기 전용 | ``WindowProxy`` | ``document.defaultView`` (`window` of the document) |
| `detail` 읽기 전용 | `long` (`float`) | 0. |

명세서
---

| Specification |
| --- |
| UI Events # event-type-load |
| HTML Standard # delay-the-load-event |

관련 이벤트
------

* `DOMContentLoaded`
* `readystatechange (en-US)`
* `load`
* `beforeunload (en-US)`
* `unload (en-US)`


Window.getSelection() - Web API

Window.getSelection()
=====================

요약
--

사용자 또는 Caret의 위치에 따라 선택된 텍스트의 범위를 나타내는 `Selection` (en-US) 객체를 반환한다.

문법
--

```js
selection = window.getSelection();
```

* selection은 `Selection` (en-US) 객체입니다. 빈 문자열("")을 추가하거나 `Selection.toString()` (en-US)을 호출하면 선택된 text를 반환합니다.
예제
--

```js
function foo() {
  var selObj = window.getSelection();
  alert(selObj);
  var selRange = selObj.getRangeAt(0);
  // do stuff with the range
}
```

노트
--

### Selection 객체의 문자열 표현

JavaScript에서 문자열을 인자로 받는 함수(`window.alert()` 나 `document.write()` (en-US) 같은)에 객체를 전달하면 해당 객체의 `toString()` 메소드를 호출하고 그 결과를 호출한 함수로 전달합니다. 이를 통해서 실제로는 속성과 메소드를 갖는 문자열이 아닌 일반적인 객체라 하더라도 문자열을 인자로 받는 함수의 인자로 사용할 때에는 객체를 문자열인 것처럼 전달할 수 있습니다.

위 예제에서 selObj를 `window.alert()`의 인자로 전달하면 `selObj.toString()`가 자동적으로 호출됩니다. 하지만, selObj에 대해서 `length` 나 `substr` 같은 JavaScript String의 속성이나 메소드를 사용하면 객체에 그러한 속성이나 메소드가 없기 때문에 에러나 예상치 못한 결과가 발생합니다. `Selection` 객체를 문자열로 사용하려면 다음처럼 직접 `toString()` 메소드를 호출해야 합니다:

```js
var selectedText = selObj.toString();
```

* `selObj`는 `Selection` 객체입니다.
* `selectedText`는 문자열 (선택한 문자열)입니다.
### Related objects

It's also useful to note that you can call `Document.getSelection()`, which works identically.

HTML inputs provide simpler helper APIs for working with selection (see `HTMLInputElement.setSelectionRange()` (en-US)).

Notice the difference between *selection* and *focus*. `Document.activeElement` returns the focused element.

명세서
---

| Specification |
| --- |
| Selection API # dom-window-getselection |

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

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

See also
--------

* `Selection` (en-US)
* `Range`
* `Document.getSelection()`
* `HTMLInputElement.setSelectionRange()` (en-US)
* `Document.activeElement`, `HTMLElement.focus()` (en-US), and `HTMLElement.blur()` (en-US)


resize - Web API

resize
======

**`resize`** 이벤트는 document view의 크기가 변경될 때 발생합니다.

`window.onresize` 속성(어트리뷰트)을 사용하거나,`window.addEventListener('resize', ...)`를 사용하여, 이벤트 핸들러에 `resize` 이벤트를 등록할 수 있습니다.

일부 브라우저의 이전 버전에서는 모든 HTML 요소(엘리먼트)에 `resize` 이벤트 핸들러를 등록 할 수 있었습니다. 여전히 `onresize` 속성을 사용하거나, `addEventListener()`를 사용하여 모든 요소에 핸들러를 설정할 수 있습니다. 그러나 `resize` 이벤트는 오직 `window`객체(`document.defaultView`)에서만 발생합니다(전달합니다). `window` 객체에 등록된 핸들러만 이벤트를 수신합니다.

모든 요소가 resize 변경을 알림받을 수 있도록 하는 새로운 제안(proposal 2017)이 있습니다. 드래프트문서를 읽으려면 Resize Observer를 참조하고, 진행중인 토론을 읽으려면 Github issues 문서를 참조하세요.

General info
------------

Specifications

DOM L3, CSSOM View

Interface

UIEvent

Bubbles

No

Cancelable

No

Target

defaultView (window)

Default Action

None

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` 읽기 전용 | `EventTarget` | 이벤트 타겟(DOM 트리의 최상위 타겟). |
| `type` 읽기 전용 | `DOMString` | 이벤트의 타입. |
| `bubbles` 읽기 전용 | `Boolean` | 이벤트가 정상적으로 버블이 발생하는지 여부. |
| `cancelable` 읽기 전용 | `Boolean` | 이벤트 취소 가능 여부. |
| `view` 읽기 전용 | `WindowProxy` | `document.defaultView` (문서의 `window`) |
| `detail` 읽기 전용 | `long` (`float`) | 0. |

Examples
--------

`resize` 이벤트는 빈번하게 발생될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같은 계산이 많이 필요한 연산을 실행하지 않아야 합니다. 대신에 다음과 같이 requestAnimationFrame (en-US), setTimeout, customEvent\* 등을 사용해 이벤트를 스로틀(throttle) 하는것이 좋습니다:

**\* 주의:** IE11은 제대로 작동하려면 customEvent 폴리필(polyfill)이 필요합니다.

### requestAnimationFrame + customEvent

```js
(function () {
  var throttle = function (type, name, obj) {
    obj = obj || window;
    var running = false;
    var func = function () {
      if (running) {
        return;
      }
      running = true;
      requestAnimationFrame(function () {
        obj.dispatchEvent(new CustomEvent(name));
        running = false;
      });
    };
    obj.addEventListener(type, func);
  };

  /\* init - you can init any event \*/
  throttle("resize", "optimizedResize");
})();

// handle event
window.addEventListener("optimizedResize", function () {
  console.log("Resource conscious resize callback!");
});
```

### requestAnimationFrame

```js
var optimizedResize = (function () {
  var callbacks = [],
    running = false;

  // fired on resize event
  function resize() {
    if (!running) {
      running = true;

      if (window.requestAnimationFrame) {
        window.requestAnimationFrame(runCallbacks);
      } else {
        setTimeout(runCallbacks, 66);
      }
    }
  }

  // run the actual callbacks
  function runCallbacks() {
    callbacks.forEach(function (callback) {
      callback();
    });

    running = false;
  }

  // adds callback to loop
  function addCallback(callback) {
    if (callback) {
      callbacks.push(callback);
    }
  }

  return {
    // public method to add additional callback
    add: function (callback) {
      if (!callbacks.length) {
        window.addEventListener("resize", resize);
      }
      addCallback(callback);
    },
  };
})();

// start process
optimizedResize.add(function () {
  console.log("Resource conscious resize callback!");
});
```

### setTimeout

```js
(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    ...
  }

}());
```


Window.scrollBy() - Web API

Window.scrollBy()
=================

**`Window.scrollBy()`** 메서드는 창에 있는 문서를 지정된 양만큼 스크롤합니다.

구문
--

```js
scrollBy(x-coord, y-coord)
scrollBy(options)
```

### 매개변수

* `x-coord`는 스크롤할 수평 픽셀 값입니다.
* `y-coord`는 스크롤할 수직 픽셀 값입니다.

- 혹은 -

`options`

다음 매개변수가 포함된 사전.

`top`

창 또는 요소를 스크롤할 Y축을 따라 픽셀 수를 지정합니다.

`left`

창 또는 요소를 스크롤할 X축을 따라 픽셀 수를 지정합니다.

`behavior`

스크롤이 부드럽게 애니메이션되는지 (`smooth`), 한 번의 점프로 즉시 실행되는지 (`instant`), 또는 브라우저가 선택하도록 할지 (`auto`, 기본)를 지정합니다.

### 반환 값

없음 (`undefined`).

예제
--

한 페이지 아래로 스크롤하려면.

```js
window.scrollBy(0, window.innerHeight);
```

위로 스크롤하려면.

```js
window.scrollBy(0, -window.innerHeight);
```

`options` 사용.

```js
window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

참고
--

`window.scroll()`가 문서의 절대 위치로 스크롤하는데 반해, `window.scrollBy()`는 특정 양만큼 스크롤합니다.
 `window.scrollByLines()` (en-US)와 `window.scrollByPages()` (en-US)를 참조하십시오.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollby |

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

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


Window.frameElement - Web API

Window.frameElement
===================

**`Window.frameElement`** 속성은 `<iframe>` (en-US)이나 `<object>`처럼 현재 창을 포함한 요소를 반환합니다. 창이 다른 문서에 포함된 것이 아니거나, 문서의 출처가 다른 경우, 즉 창과 해당 문서의 도메인이 서로 다른 경우 `null`을 반환합니다.

**참고:** 속성 이름("frame")과는 달리, `<object>`, `<iframe>` (en-US), `<embed>`를 포함한 모든 포함 지점에서 사용할 수 있습니다.

예제
--

```js
var frameEl = window.frameElement;
// If we're embedded, change the containing element's URL to 'http://mozilla.org/'
if (frameEl) {
  frameEl.src = "http://mozilla.org/";
}
```

명세
--

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

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

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

같이 보기
-----

* `window.frames` (en-US)는 현재 창의 모든 자식 프레임을 배열형 객체로 나열합니다.
* `window.parent` (en-US)는 부모 창, 즉 `frameElement`를 담고 있는 창을 반환합니다.


Window: copy 이벤트 - Web API

Window: copy 이벤트
================

**`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `oncopy` (en-US) |

`copy` 이벤트의 원 대상은 복사 동작의 대상인 `Element` (en-US)입니다. `Window`에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 Element: copy 이벤트에서 확인하세요.

예제
--

```js
window.addEventListener("copy", (event) => {
  console.log("복사 동작 실행");
});
```

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

같이 보기
-----

* 관련 이벤트: `cut`, `paste`
* `Element` (en-US)를 대상으로 한 같은 이벤트: `copy`
* `Document`를 대상으로 한 같은 이벤트: `copy`


Window.self - Web API

Window.self
===========

**`Window.self`** 읽기전용 속성은 자기 자신을 `WindowProxy`로써 반환합니다. `window.self`로도 사용할 수 있고, `self`만 독립적으로 사용해 접근할 수 있습니다. 독립적으로 접근했을 때의 이점은 비 `Window` 환경인 웹 워커 등도 비슷한 표기법을 사용한다는 것입니다. 이 때 `self`는 `Window` 문맥에서는 `window.self`, 워커 문맥에서는 `WorkerGlobalScope.self` (en-US)와 같습니다.

예제
--

아래와 같이 쓴 `window.self`는 그냥 `window`로 바꿨을 때와 동일합니다.

```js
if (window.parent.frames[0] != window.self) {
  // this window is not the first frame in the list
}
```

이에 더해 브라우징 문맥의 현재 활성확된 문서에서는 `window`가 현재 전역 객체를 가리키므로 다음 네 줄의 코드는 모두 동일합니다.

```js
var w1 = window;
var w2 = self;
var w3 = window.window;
var w4 = window.self;
// w1, w2, w3, w4 모두 일치. 그러나 워커에서는 w2만 작동함
```

명세
--

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

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

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

같이 보기
-----

* `Worker`에서 같은 역할을 하는 `WorkerGlobalScope.self` (en-US).


Window.navigator - Web API

Window.navigator
================

**`Window.navigator`** 읽기 전용 속성은 스크립트를 구동 중인 애플리케이션에 대한 메서드와 속성을 가진 `Navigator` 객체의 참조를 반환합니다.

값
-

`navigator` 객체.

예제
--

### 예제 1: 브라우저를 감지하고 그 이름을 문자열로 반환하기

```js
function getBrowserName(userAgent) {
  // 여기서는 순서가 중요하며, 목록에 없는 브라우저는 거짓 양성이 될 수 있습니다.

  if (userAgent.includes("Firefox")) {
    // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
    return "Mozilla Firefox";
  } else if (userAgent.includes("SamsungBrowser")) {
    // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
    return "Samsung Internet";
  } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
    // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12\_5\_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
    return "Opera";
  } else if (userAgent.includes("Edge")) {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
    return "Microsoft Edge (Legacy)";
  } else if (userAgent.includes("Edg")) {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
    return "Microsoft Edge (Chromium)";
  } else if (userAgent.includes("Chrome")) {
    // "Mozilla/5.0 (X11; Linux x86\_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
    return "Google Chrome or Chromium";
  } else if (userAgent.includes("Safari")) {
    // "Mozilla/5.0 (iPhone; CPU iPhone OS 15\_6\_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
    return "Apple Safari";
  } else {
    return "알려지지 않은 브라우저";
  }
}

const browserName = getBrowserName(navigator.userAgent);
console.log(`당신이 사용중인 브라우저는 ${browserName}입니다.`);
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-navigator |

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

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


orientationchange - Web API

orientationchange
=================

`orientationchange` 이벤트는 장치의 방향이 바뀔 때 호출 된다.

General info
------------

Specification

Screen Orientation

Interface

Event

Bubbles

No

Cancelable

No

Target

Screen

Default Action

None

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` 읽기 전용 | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` 읽기 전용 | `DOMString` | The type of event. |
| `bubbles` 읽기 전용 | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` 읽기 전용 | `Boolean` | Whether the event is cancellable or not. |

Example
-------

```js
// Note that "orientationchange" and screen.orientation are unprefixed in the following
// code although this API is still vendor-prefixed browsers implementing it.
screen.addEventListener("orientationchange", function () {
  alert("the orientation of the device is now " + screen.orientation);
});
```


Window.opener - Web API

Window.opener
=============

`Window` 인터페이스의 **`opener`** 속성은 `open()` (en-US)을 사용해 현재 창을 열었던 창의 참조를 반환합니다.

예제로 설명하자면, 창 `A`가 창 `B`를 열었을 때 `B.opener`는 `A`를 반환합니다.

구문
--

```js
const openerWindow = window.opener;
```

### 값

`window.open()` (en-US)을 사용하거나 `target` 특성을 지정한 링크로 현재 창을 연 `Window`. 현재 창이 다른 창에 의해 생성됐거나 링크로 열리지 않았다면 `null`.

최근 브라우저에서는 `<a>` 요소에 `rel="noopener noreferrer"` 특성을 지정하면 `window.opener` 참조 설정을 방지합니다. 따라서 생성된 창의 `opener` 속성에 접근해도 `null`을 반환합니다.

명세
--

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

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

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


WindowEventHandlers.onhashchange - Web API

WindowEventHandlers.onhashchange
================================

`WindowEventHandlers` 믹스인의 **WindowEventHandlers.onhashchange** 속성은
**hashchange** 이벤트를 처리하기 위한 `event handler` 입니다.

hashchange 이벤트는 윈도우의 해시가 변경되면 시작됩니다. ( `Window.location` (en-US) 및 `HTMLHyperlinkElementUtils.hash` (en-US) 참조)

문법
--

**event handler:**

```js
window.onhashchange = funcRef;
```

**HTML event handler:**

```html
<body onhashchange="funcRef();"></body>
```

**event listener:**

`addEventListener()`를 사용하여 이벤트 리스너 추가하기

```js
window.addEventListener("hashchange", funcRef, false);
```

### 매개변수

`funcRef`

함수에 대한 참조.

예제
--

### event handler 사용하기

This example uses an event handler (`window.onhashchange`) to check the new hash value whenever it changes. If it equals `#cool-feature`, the script logs a message to the console.

```js
function locationHashChanged() {
  if (location.hash === "#cool-feature") {
    console.log("You're visiting a cool feature!");
  }
}

window.onhashchange = locationHashChanged;
```

### Using an event listener

이 예제는 이벤트 리스너를 사용하여 해시가 변경 될 때마다 콘솔에 알림표시합니다.

```js
function hashHandler() {
  console.log("The hash has changed!");
}

window.addEventListener("hashchange", hashHandler, false);
```

### Overriding the hash

이 함수는 새로운 해시를 동적으로 설정하여 임의로 두 값 중 하나로 설정합니다.

```js
function changeHash() {
  location.hash = Math.random() > 0.5 ? "location1" : "location2";
}
```

hashchange 이벤트
--------------

`hashchange` 이벤트에는 다음과 같은 필드가 있습니다:

| Field | Type | Description |
| --- | --- | --- |
| `newURL` | `DOMString` | 탐색할 새로운 URL입니다. |
| `oldURL` | `DOMString` | 탐색했던 이전의 URL입니다. |

### 제2의 해결책을 위한 event.newURL 와 event.oldURL

```js
//let this snippet run before your hashchange event binding code
if (!window.HashChangeEvent)
  (function () {
    var lastURL = document.URL;
    window.addEventListener("hashchange", function (event) {
      Object.defineProperty(event, "oldURL", {
        enumerable: true,
        configurable: true,
        value: lastURL,
      });
      Object.defineProperty(event, "newURL", {
        enumerable: true,
        configurable: true,
        value: document.URL,
      });
      lastURL = document.URL;
    });
  })();
```

명세
--

| Specification |
| --- |
| HTML Standard # event-hashchange |
| HTML Standard # handler-window-onhashchange |

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

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

See also
--------

* `hashchange` event
* Manipulating the browser history (en-US)
* `history.pushState()` and `history.replaceState()` (en-US) methods
* `WindowEventHandlers.onpopstate`
* `HTMLHyperlinkElementUtils.hash` (en-US)


window.cancelAnimationFrame() - Web API

window.cancelAnimationFrame()
=============================

**`window.cancelAnimationFrame()`** 메소드는 이전에 `window.requestAnimationFrame()` 을 호출하여 스케줄된 애니메이션 프레임 요청을 취소합니다.

구문
--

```js
window.cancelAnimationFrame(requestID);
```

### Parameters

`requestID`

요청된 콜백 `window.requestAnimationFrame()` 을 호출하여 반환된 ID 값.

예시
--

```js
var requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

var cancelAnimationFrame =
  window.cancelAnimationFrame || window.mozCancelAnimationFrame;

var start = window.mozAnimationStartTime; // Firefox 에서만 지원됨. 다른 브라우저에서는 Date.now() 같은 것을 사용할 수 있음.

var myReq;

function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress / 10, 200) + "px";
  if (progress < 2000) {
    myReq = requestAnimationFrame(step);
  }
}
myReq = requestAnimationFrame(step);

cancelAnimationFrame(myReq);
```

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

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

명세
--

| Specification |
| --- |
| HTML Standard # animationframeprovider-cancelanimationframe |

함께 보기
-----

* `window.mozAnimationStartTime` (en-US)
* `window.requestAnimationFrame()`


Window.matchMedia() - Web API

Window.matchMedia()
===================

**`Window.matchMedia()`** 메서드는 주어진 미디어 쿼리 문자열의 분석 결과를 나타내는 `MediaQueryList` (en-US) 객체를 반환합니다.

구문
--

```js
window.matchMedia(mediaQueryString);
```

### 매개변수

`mediaQueryString`

분석할 미디어 쿼리를 나타내는 문자열.

### 반환 값

주어진 미디어 쿼리에 대한 `MediaQueryList` (en-US) 객체,

예제
--

다음 예제는 화면이 매우 좁을 때 다른 작업을 수행합니다.

```js
if (window.matchMedia("(min-width: 400px)").matches) {
  /\* 뷰포트 너비가 400 픽셀 이상 \*/
} else {
  /\* 뷰포트 너비가 400 픽셀 미만 \*/
}
```

더 많은 예제는 Testing media queries programmatically (en-US)를 참고하세요.

명세
--

| Specification |
| --- |
| CSSOM View Module # dom-window-matchmedia |

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

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

같이 보기
-----

* 미디어 쿼리 사용하기
* Using media queries from code (en-US)
* `MediaQueryList` (en-US)
* `MediaQueryListListener` (en-US)


Window: paste 이벤트 - Web API

Window: paste 이벤트
=================

**`paste`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 붙여넣기를 했을 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `onpaste` (en-US) |

`paste` 이벤트의 원 대상은 붙여넣기 동작의 대상인 `Element` (en-US)입니다. `Window`에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 Element: paste 이벤트에서 확인하세요.

예제
--

```js
window.addEventListener("paste", (event) => {
  console.log("붙여넣기 동작 실행");
});
```

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

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

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

같이 보기
-----

* 관련 이벤트: `copy`, `cut`
* `Element` (en-US)를 대상으로 한 같은 이벤트: `paste`
* `Document`를 대상으로 한 같은 이벤트: `paste`


Window.closed - Web API

Window.closed
=============

**`Window.closed`** 읽기 전용 속성은 참조한 창이 닫혔는지 여부를 나타냅니다.

구문
--

```js
const isClosed = windowRef.closed;
```

### 값

창이 닫혔으면 `true`, 그렇지 않으면 `false`.

예제
--

### 팝업에서 자신을 띄운 창의 URL 바꾸기

다음 예제는 팝업 창에서 자신을 띄운 창의 URL을 바꾸는 예제입니다. URL을 바꾸기 전, 현재 창을 띄운 창의 존재 유무를 `window.opener` 속성으로 검사하고, `closed` 속성으로 이미 닫히지는 않았는지도 검사합니다.

```js
// Check that an opener exists and is not closed
if (window.opener && !window.opener.closed) {
  window.opener.location.href = "http://www.mozilla.org";
}
```

**참고:** 팝업은 자신을 띄운 창에만 접근할 수 있습니다.

### 이전에 열었던 팝업 새로고침

이번 예제의 `refreshPopupWindow()`는 팝업의 `reload()` 메서드를 호출해 데이터를 다시 불러옵니다. 만약 팝업을 아직 열지 않았거나, 사용자가 이미 닫은 경우 새로운 팝업을 띄웁니다.

```js
const popupWindow = null;

function refreshPopupWindow() {
  if (popupWindow && !popupWindow.closed) {
    // popupWindow is open, refresh it
    popupWindow.location.reload(true);
  } else {
    // Open a new popup window
    popupWindow = window.open("popup.html", "dataWindow");
  }
}
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-window-closed-dev |


Window.scroll() - Web API

Window.scroll()
===============

**`Window.scroll()`** 메서드는 문서 내 창을 특정 위치로 스크롤합니다.

구문
--

```js
scroll(x-coord, y-coord)
scroll(options)
```

### 매개변수

* `x-coord`는 왼쪽 상단에 표시하고 싶은 문서의 수평축에 따른 픽셀입니다.
* `y-coord`는 왼쪽 상단에 표시하고 싶은 문서의 수직축에 따른 픽셀입니다.

- 혹은 -

`options`

다음 매개변수를 포함하는 사전.

`top`

창이나 요소를 스크롤할 Y축의 픽셀의 수를 지정합니다.

`left`

창이나 요소를 스크롤할 X축의 픽셀의 수를 지정합니다.

`behavior`

요소를 위치로 스크롤하는 브라우저는 다음 스크롤 동작 중 하나를 가질 수 있습니다.

* `auto` (기본): 스크롤 동작은 스크롤 요소에 의해 설정되거나 상속된 `scroll-behavior` (en-US) CSS 스타일에 의해 제어됩니다.
* `smooth`: 스크롤이 부드럽게 작동합니다.

### 반환 값

없음 (`undefined`).

예제
--

```html
<!-- put the 100th vertical pixel at the top of the window -->

<button onclick="scroll(0, 100);">click to scroll to the 100th pixel</button>
```

`options` 사용:

```js
window.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

참고
--

`Window.scrollTo()`는 이 메서드와 사실상 같습니다. 상대적인 스크롤의 경우 `Window.scrollBy()`, `Window.scrollByLines()` (en-US) 그리고 `Window.scrollByPages()` (en-US)를 참고하십시오.

스크롤 요소의 경우, `Element.scrollTop` (en-US) 그리고 `Element.scrollLeft` (en-US)를 참고하십시오.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-window-scroll |

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

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

같이 보기
-----

* `Window.scrollByLines()` (en-US)
* `Window.scrollByPages()` (en-US)
* `Element.scrollIntoView()`


Window.scrollTo() - Web API

Window.scrollTo()
=================

요약
--

문서의 지정된 위치로 스크롤합니다.

구문
--

```js
window.scrollTo(x_좌표, y_좌표);
```

### 매개변수

* `x_좌표`는 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 가로축입니다.
* `y_좌표`는 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 세로축입니다.

- 또는 -

`options`

다음 매개변수가 포함된 딕셔너리

`top`

창 또는 요소를 스크롤할 Y축을 따라 픽셀 수를 지정합니다.

`left`

창 또는 요소를 스크롤할 X축을 따라 픽셀 수를 지정합니다.

`behavior`

스크롤을 즉시 적용할지 아니면 부드러운 애니메이션을 적용할지 결정합니다. 이 옵션은 다음 값 중 하나의 문자열을 취해야 합니다.

* `smooth`: 스크롤이 부드럽게 움직입니다.
* `instant`: 스크롤이 단번에 즉시 적용됩니다.
* `auto`: 스크롤 동작은 계산된 `scroll-behavior` (en-US) 값에 의해 결정됩니다.

### 반환 값

없음 (`undefined`)

예제
--

```js
window.scrollTo(0, 1000);
```

참고
--

이 함수는 window.scroll (en-US)과 효과적으로 같습니다. 스크롤링 관련 정보는 window.scrollBy (en-US), window.scrollByLines (en-US), 그리고 window.scrollByPages (en-US)가 있습니다.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollto |


Window.event - Web API

Window.event
============

`Window` 객체의 **`event`** 속성은 웹 사이트의 코드가 현재 처리 중인 `Event`를 반환합니다. 이벤트 처리기 바깥에서는 항상 `undefined`입니다.

신규 코드에서는 사용을 피하세요. 대신, 처리기가 매개변수로 받는 `Event`를 사용해야 합니다. `event` 속성은 많이 지원되지도 않고, 지원하는 환경에서도 나중에 문제가 발생할 여지를 키웁니다.

**참고:** `event` 속성이 반환하는 `Event`가 예상하는 값과 다른 경우가 많습니다. 게다가 섀도우 트리 안에서 발생한 이벤트의 경우 정확하지 않습니다.

명세
--

| Specification |
| --- |
| DOM Standard # dom-window-event |

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

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

같이 보기
-----

* `Event.srcElement` (en-US)


Window.length - Web API

Window.length
=============

window의 frame 개수를 반환합니다. (`<frame>` (en-US) 또는 `<iframe>` (en-US) 요소들 중 하나)

신텍스
---

```js
framesCount = window.length;
```

* `framesCount` 는 frame의 개수이다.
예제
--

```js
if (window.length) {
  // document의 subframes
}
```

명세서
---

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

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

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


Window.getComputedStyle() - Web API

Window.getComputedStyle()
=========================

`Window.getComputedStyle()` 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신합니다. 이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값입니다. 개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있습니다.

구문
--

```js
var style = window.getComputedStyle(element[, pseudoElt]);
```

element

속성값을 얻으려하는 `Element` (en-US).

pseudoElt Optional

일치시킬 의사요소(`pseudo element`)를 지정하는 문자열. 보통의 요소들에 대해서는 생략되거나 `null`이어야 함.

반환되는 `style`은 요소의 스타일이 변경 될 때 자동으로 업데이트되는 실시간 `CSSStyleDeclaration` (en-US) 객체입니다.

예제
--

이 예제에서는 간단한 `<div>` (en-US) 요소에 CSS스타일을 적용하고, `getComputedStyle()`를 사용해서 적용된 스타일값을 찾아낸 후에 `<div>`의 본문으로 출력합니다.

```html
<p>Hello</p>
```

```css
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
  font-family: sans-serif;
  background: purple;
  color: white;
  text-align: center;
}
```

```js
let para = document.querySelector("p");
let compStyles = window.getComputedStyle(para);
para.textContent =
  "My computed font-size is " +
  compStyles.getPropertyValue("font-size") +
  ",\nand my computed line-height is " +
  compStyles.getPropertyValue("line-height") +
  ".";
```

### 결과

설명
--

메소드의 호출에서 반환되는 객체의 자료형은 요소의 `style` (en-US) 속성에서 반환되는 객체와 동일한 `CSSStyleDeclaration` (en-US)형입니다. 그러나 두 객체는 다른 목적을 가지고 있습니다. `getComputedStyle` 에서 반환된 객체는 읽기 전용이며 요소의 (<style> 또는 외부 stylesheet로 설정되는 것도 포함해서) 스타일을 검사하는 데 사용할 수 있습니다. `elt.style` 객체는 특정한 요소에 스타일을 설정하는 데 사용해야 합니다.

첫 번째 인수는 요소여야합니다. #text 노드같은 비-요소 노드를 전달하면 오류가 발생합니다.

`defaultView`
-------------

온라인의 많은 코드 샘플중에서, `getComputedStyle`은 `document.defaultView`객체에서 사용됩니다만, 대개의 경우에는 `getComputedStyle`은 `window`객체에도 존재하므로 `document.defaultView`객체에서 사용하는 패턴은 필요하지 않습니다. `defaultView`패턴은 (1) window 스펙을 작성하고 싶지 않은 사람들과 (2) Java에서도 사용할 수있는 API를 만드는 것의 조합이었을 가능성이 큽니다. 그러나 `defaultView`의 메소드를 사용해야만하는 경우가 하나 있습니다. Firefox 3.6을 사용하여 프레임 스타일(framed styles)에 액세스하는 경우입니다.

의사요소 사용하기
---------

getComputedStyle은 의사요소(pseudo-elements, `::after`, `::before`, `::marker`, `::line-marker`, spec참고)에서 스타일 정보를 가져올 수 있습니다.

```html
<style>
 h3::after {
 content: " rocks!";
 }
</style>

<h3>generated content</h3>

<script>
 var h3 = document.querySelector("h3");
 var result = getComputedStyle(h3, ":after").content;

 console.log("the generated content is: ", result); // returns ' rocks!'
</script>
```

참고
--

반환되는 `CSSStyleDeclaration` (en-US) 객체에는 지원되는 모든 CSS의 본디속성(longhand)명에 대한 활성값을 갖게 됩니다. 예로, 본디속성명 `border-bottom-width`의 경우를 보면, `border-width`와 `border`같은 단축속성명이 사용됩니다. `font-size`과 같은 본디속성명만을 사용하여 속성값을 질의하는 것이 안전합니다. `font`같은 단축속성명을 사용하여 질의하는 것은 대부분의 브라우저에서 동작하지 않을 것입니다.

CSS속성 값은 `getPropertyValue(propName)` API를 사용하거나, `cs[' z-index']` 또는 `cs.zIndex` 같은 방식으로 객체에 직접 인덱싱하여 액세스할 수 있습니다.

`getComputedStyle`에서 반환되는 값들은 `resolved values`라고 합니다. 이 값들은 일반적으로 CSS 2.1 `computed values`과 같지만, 일부 오래된 속성(`width`, `height` 또는 `padding`)에 대해서는 `used values`입니다. 원래, CSS 2.0에서는 이 computed values를 cascading과 inheritance 후에 "사용준비완료"된 최종값을 의미했습니다. 하지만, CSS 2.1에서는 computed values를 pre-layout으로, used values들은 post-layout으로 재정의했습니다. CSS 2.0 속성들에 대해서는 `getComputedStyle`은 지금은 **used values**라고 불리는 옛 의미의 computed values를 반환합니다. pre-layout과 post-layout값의 차이를 나타내는 예로서 요소의 width 또는 height(layout이라고도 함)를 나타내는 백분율(퍼센트표시)이 이 있는데, 이 값들은 used value의 경우에만 픽셀(에 상당하는 대체물)로 대체됩니다.

몇 몇 알려진 경우에 대해, 반환값은 의도적으로 부정확한 값을 가집니다. 특히, 소위 CSS History Leak 보안 문제를 피하기 위해 브라우저는 링크에 대해서는 명시적으로 used value에 대해 "거짓말"을 하는데, 사용자가 링크된 사이트를 한번도 방문한 적이 없는 것 처럼 값을 반환합니다. 이것이 어떻게 구현되는 지에 대한 자세한 내용은 http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/와 http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/를 보십시오. 대부분의 최신 브라우저는 의사 선택기 스타일 응용과 `getComputedStyle`의 반환값에 대해서 유사한 변경 사항을 적용했습니다.

CSS전이 중에 `getComputedStyle`를 호출하면, Firefox에서는 원래속성값(Original property value)을 반환하지만, WebKit에서는 최종속성값(final property value)을 반환합니다.

Firefox에서는 `auto`값을 가진 속성들이 `auto`값이 아니라 used value를 반환합니다. 그래서, `height:100px;`의 컨테이너 블록 안에 `height:30px;`의 속성을 가진 요소를 넣고 `top:auto;`와 `bottom:0;`를 적용하면, `top`에 대한 computed style값을 요구할때 Firefox는 `100px-30px=70px`의 결과로서 `top:70px`를 반환합니다.

명세
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-window-getcomputedstyle |

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

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

같이 보기
-----

* `window.getDefaultComputedStyle` (en-US)
* `Resolved Value`


Window.document - Web API

Window.document
===============

**`window.document`** 속성은 창이 포함한 문서의 참조를 반환합니다.

예제
--

```js
console.log(window.document.title);
```

명세
--

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

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

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


Window.confirm() - Web API

Window.confirm()
================

**`Window.confirm()`** 메서드는 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자를 띄웁니다.

구문
--

```js
result = window.confirm(message);
```

### Parameters

`message`

경고 대화 상자에 표시할 텍스트 문자열.

### 반환 값

확인 (`true`) 또는 취소 (`false`) 중 사용자가 선택한 값. 브라우저가 페이지 내 대화 상자를 무시하고 있으면 항상 `false`입니다.

예제
--

```js
if (window.confirm("Do you really want to leave?")) {
  window.open("exit.html", "Thanks for Visiting!");
}
```

위 코드는 다음 결과를 보입니다.

![firefox confirm](/ko/docs/Web/API/Window/confirm/firefox_confirm_dialog.png)

참고
--

대화 상자는 모달 창(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)으로, 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 모달 창)를 만드는 함수를 남용하면 안 됩니다. 이 뿐만이 아니더라도, 대화 상자로 사용자 확인을 받는 것은 피해야 할 좋은 이유 여럿이 존재합니다.

명세
--

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

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

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

같이 보기
-----

* `window.alert()`
* `window.prompt()`


window.requestIdleCallback() - Web API

window.requestIdleCallback()
============================

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

**`window.requestIdleCallback()`** 메서드는 브라우저의 idle 상태에 호출될 함수를 대기열에 넣습니다. 이를 통해 개발자는 애니메이션 및 입력 응답과 같은 대기 시간이 중요한 이벤트에 영향을 미치지 않고 메인 이벤트 루프에서 백그라운드 및 우선 순위가 낮은 작업을 수행 할 수 있습니다. 함수는 일반적으로 first-in-first-out(FIFO) 순서로 호출됩니다. 하지만, `timeout` 옵션이 지정된 callback은 제한 시간이 지나기 전에 이들을 실행하기 위해 순서에 맞지 않게 호출될 수 있습니다.

idle callback 안에서 `requestIdleCallback()` 을 호출하여 다음 패스가 이벤트 루프를 통과하는 즉시 다른 callback을 예약할 수 있습니다.

**참고:** 필수적인 작업이라면 `timeout` 옵션을 사용하는 것을 강력히 권장합니다. 사용하지 않을 경우 callback이 실행되기전에 몇 초 이상 소요될 수 있습니다.

Syntax
------

```js
var handle = window.requestIdleCallback(callback[, options])
```

### Return value

실행 ID. `window.cancelIdleCallback()` (en-US) 메서드에 인자로 전달하여 callback 실행을 취소할 수 있습니다.

### Parameters

`callback`

이벤트 루프가 유휴 상태가 될 때 호출되어야 하는 함수. callback 함수는 `IdleDeadline` 객체를 인자로 전달받습으며 이 객체를 통해 타임아웃 기간이 만료되어 callback이 실행되었는지 여부를 알 수 있습니다.

`options` Optional

선택적으로 사용가능한 option 설정. 현재는 하나의 property만 정의 되어 있습니다 :\* `timeout`: 만약`timeout` 이 지정되어 있고 양수일 경우, *timeout* 밀리세컨드가 지날 때까지 callback이 실행되지 않았다면 성능상에 부정적인 영향을 미치는 위험이 있더라도 다음 idle 상태에 callback이 호출됩니다.

Example
-------

Cooperative Scheduling of Background Tasks API 포스트의 complete example 예제를 참조해 주십시오.

명세서
---

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-requestidlecallback-method |

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

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

See also
--------

* `window.cancelIdleCallback()` (en-US)
* `IdleDeadline`
* `window.setTimeout()` (en-US)
* `window.setInterval()` (en-US)


Window: devicePixelRatio 속성 - Web API

Window: devicePixelRatio 속성
===========================

`Window` 인터페이스의 **`devicePixelRatio`** 는 현재 디스플레이 장치에 대한 '물리적 픽셀' 해상도와 'CSS 픽셀' 해상도의 비율을 반환합니다.

이 값은 픽셀 크기의 비율로도 해석될 수 있습니다. 하나의 'CSS 픽셀' 크기와 하나의 '물리적 픽셀' 크기를 비교한 값입니다. 간단히 말해서, 이것은 브라우저에 단일 CSS 픽셀을 그리기 위해 화면의 실제 픽셀 중 몇 개를 사용해야 하는지 알려줍니다.

이것은 표준 디스플레이에서 렌더링하는 것과 더 많은 화면 픽셀을 사용하여 더 선명한 이미지를 생성하는 HiDPI 혹은 Retina 디스플레이에서 렌더링하는 것의 차이를 다룰 때 유용합니다.

`window.matchMedia()`를 사용하여 `devicePixelRatio`의 값이 변경되는지 확인할 수 있습니다. (예를 들어 사용자가 픽셀 밀도가 다른 디스플레이로 창을 드래그하는 경우 발생할 수 있습니다.) 아래 예시를 참고하시길 바랍니다.

값
-

디스플레이의 물리적 픽셀 해상도와 CSS 픽셀 해상도의 비율을 나타내는 배정밀도 부동 소수점 값입니다. 값이 1이면 기존 96 DPI (일부 플랫폼에서는 76 DPI) 디스플레이를 의미하며, 값이 2이면 HiDPI/Retina 디스플레이로 예측됩니다. 비정상적으로 해상도가 낮은 디스플레이의 경우 혹은 화면의 픽셀 깊이가 표준 해상도인 96 혹은 76 DPI의 두 배보다 높은 경우 다른 값이 반환될 수도 있습니다.

예제
--

### `<canvas>`에서 해상도 수정하기

retina 화면에서 `<canvas>`가 매우 흐릿하게 보일 수 있습니다. 선명한 이미지를 위해 추가 픽셀 밀도를 얼마나 많이 추가해야 하는지 결정하려면 `window.devicePixelRatio`를 사용하시길 바랍니다.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 디스플레이 크기 (css 픽셀) 를 설정합니다.
const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

// 메모리에서 실제 크기를 설정합니다. (추가 픽셀 밀도를 고려한 스케일 조정)
const scale = window.devicePixelRatio; // retina 화면에서 1로 변경하면 캔버스가 흐릿하게 표시됩니다.
canvas.width = Math.floor(size \* scale);
canvas.height = Math.floor(size \* scale);

// 좌표계를 정규화하여 CSS 픽셀을 사용합니다.
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = "18px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

const x = size / 2;
const y = size / 2;

const textString = "I love MDN";
ctx.fillText(textString, x, y);
```

![retina 디스플레이에 표시된 이미지에 대한 다른 devicePixelRatio 값의 효과를 나란히 비교합니다.](/ko/docs/Web/API/Window/devicePixelRatio/devicepixelratio_diff.png)

### 화면 해상도 혹은 줌 레벨 변경 모니터링

이 예제에서 미디어 쿼리를 설정하고 장치 해상도가 변하는 시점을 관찰하여 새 해상도를 기록합니다.

#### HTML

```html
<div id="container">
  <p>
    이 예제는 페이지를 확대하거나 축소할 때 (혹은 다른 배율이 적용된 화면으로 이동할 때) <code>devicePixelRatio</code> 속성 값에 미치는 영향를 보여줍니다.</p>
    <p>시도해보고 어떤 일이 일어나는지 지켜보시길 바랍니다!</p>
  </p>
</div>
<div id="output"></div>
```

#### CSS

```css
body {
  font:
    22px arial,
    sans-serif;
}

#container {
  border: 2px solid #22d;
  margin: 1rem auto;
  padding: 1rem;
  background-color: #a9f;
}
```

#### JavaScript

문자열 `mqString`은 현재 디스플레이 해상도가 특정 `px`당 장치 도트 수와 일치하는지 확인하는 미디어 쿼리로 설정됩니다.

`media` 변수는 미디어 쿼리 문자열로 초기화되는 `MediaQueryList` (en-US) 객체입니다. 문서에 대해 `mqString`을 실행한 결과가 변하면 `media` 객체의 `change` 이벤트가 발생하고 코드가 새 해상도를 기록합니다.

해상도가 변할때 마다, 예제에서는 새로운 해상도에 기반하여 새 미디어 쿼리와 새 `MediaQueryList` 인스턴스를 생성해야 합니다.

```js
let remove = null;
const output = document.querySelector("#output");

const updatePixelRatio = () => {
  if (remove != null) {
    remove();
  }
  const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
  const media = matchMedia(mqString);
  media.addEventListener("change", updatePixelRatio);
  remove = () => {
    media.removeEventListener("change", updatePixelRatio);
  };

  output.textContent = `devicePixelRatio: ${window.devicePixelRatio}`;
};

updatePixelRatio();
```

#### 결과

예제를 테스트하기 위해 페이지를 확대하거나 축소해보고 `devicePixelRatio`의 기록된 값에 차이가 있는지 확인하길 바랍니다.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-window-devicepixelratio |

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

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

같이 보기
-----

* 미디어 쿼리
* 미디어 쿼리 사용하기
* CSS `resolution` media query (en-US)
* `image-resolution` (en-US) 속성


Window.name - Web API

Window.name
===========

요약
--

창의 이름을 얻거나/설정합니다.

문법
--

```js
string = window.name;
window.name = string;
```

예제
--

```js
window.name = "lab\_view";
```

설명
--

창의 이름은 주로 하이퍼링크나 폼의 target으로 설정됩니다. 그외엔, 창은 이름을 가지는 것을 거의 필요로 하지 않습니다.

또한 몇몇 프레임워크에서 창의 이름은 cross-domain messaging을 제공하기 위해 사용됩니다. (예를 들면, SessionVars 과 Dojo's dojox.io.windowName) 좀더 보안을 생각한다면 JSONP로 대체 될 수 있습니다. 하지만 최근 의 웹어플리케이션이 호스팅하는 민감한 데이터들은 cross-domain messaging을 이용하기 위해서 `window.name`에 의존해서는 안되며, 대신 postMessage API를 이용하는 방법이 있습니다.

`window.name`은 `toString` 메소드를 이용해 모든 값을 문자열로 변환합니다.


Window.sessionStorage - Web API

Window.sessionStorage
=====================

**`sessionStorage`** 읽기 전용 속성은 현재 출처 세션의 `Storage` 객체에 접근합니다. `sessionStorage`는 `localStorage`와 비슷하지만, `localStorage`의 데이터는 만료되지 않고, `sessionStorage`의 데이터는 **페이지 세션**이 끝날 때 제거되는 차이가 있습니다.

* 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다.
* **페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성합니다.**
* 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 `sessionStorage`를 생성합니다.
* 탭/창을 닫으면 세션이 끝나고 `sessionStorage` 안의 객체를 초기화합니다.

`sessionStorage`에 저장한 자료는 **페이지 프로토콜별로 구분**합니다. 특히 HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 `sessionStorage`에 저장됩니다.

키와 값은 **항상** 각 문자에 2바이트를 할당하는 UTF-16 `DOMString`의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.

구문
--

```js
myStorage = window.sessionStorage;
```

### 값

현재 출처의 세션 저장 공간에 접근할 수 있는 `Storage` 객체.

### 예외

`SecurityError`

요청이 정책의 결정을 위반했거나, 출처가 유효한 스킴/호스트/포트 튜플이 아닌 경우. 유효하지 않은 튜플은 출처가 `file:`이나 `data:` 스킴을 사용했을 때 발생할 수 있습니다. 예외의 예를 들자면 사용자가 특정 출처의 지속성 데이터를 거부하도록 브라우저를 설정하는 경우가 있습니다.

예제
--

아래 코드는 현재 출처의 세션 `Storage` 객체에 접근한 후, `Storage.setItem()` (en-US)을 사용해 항목 하나를 추가합니다.

```js
sessionStorage.setItem("myCat", "Tom");
```

다음 예제는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 합니다.

```js
// 추적할 텍스트 입력 칸 가져오기
let field = document.getElementById("field");

// 자동저장 값이 존재하는지 판별
// (의도치 않게 페이지를 새로 불러올 경우에만 발생)
if (sessionStorage.getItem("autosave")) {
  // 입력 칸의 콘텐츠 복구
  field.value = sessionStorage.getItem("autosave");
}

// 텍스트 입력 칸의 변화 수신
field.addEventListener("change", function () {
  // 결과를 세션에 저장
  sessionStorage.setItem("autosave", field.value);
});
```

**참고:** Web Storage API 사용하기 (en-US) 문서에서 전체 예제를 살펴보세요.

명세
--

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

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

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

같이 보기
-----

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


popstate - Web API

popstate
========

`Window` 인터페이스의 **`popstate`** 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 됩니다.

history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의합니다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다.

브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리합니다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킵니다. 하지만 Firefox 는 그렇지 않습니다.

| Bubbles | Yes |
| --- | --- |
| Cancelable | No |
| Interface | `PopStateEvent` (en-US) |
| Event handler property | `onpopstate` |

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

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

Example
-------

예시를 보자, 다음의 코드를 실행하는 `http://example.com/example.html` 의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.

```js
window.onpopstate = function (event) {
  console.log(
    "location: " +
      document.location +
      ", state: " +
      JSON.stringify(event.state),
  );
};
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
```

원래의 히스토리 엔트리인 (`http://example.com/example.html`) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.

See Also
--------

* Manipulating the browser history (the History API)


Window: toolbar 속성 - Web API

Window: toolbar 속성
==================

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

이 속성은 불리언 `visible` 속성을 포함하는 객체로, 유사한 역할의 다른 `Window` 속성들처럼 과거에는 웹 브라우저 사용자 인터페이스의 특정 부분이 보이는지를 나타냈었습니다.

개인정보 보호 및 호환성을 위해, 지금은 `visible` 속성의 값이 `Window`가 팝업이면 `false`, 그 외에는 모두 `true`입니다.

값
-

하나의 속성을 포함하는 객체입니다.

`visible` 읽기 전용

불리언 속성으로, `Window`가 팝업이면 `false`, 아니면 `true`입니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-window-toolbar-dev |

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

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

같이 보기
-----

* `window.locationbar` (en-US)
* `window.menubar` (en-US)
* `window.personalbar` (en-US)
* `window.scrollbars` (en-US)
* `window.statusbar` (en-US)


Window.stop() - Web API

Window.stop()
=============

요약
--

Window.stop()메서드는 window 객체의 로딩을 취소하는 메서드입니다.

문법
--

```js
window.stop();
```

예시
--

```js
window.stop();
```

본문
--

stop() 메서드는 브라우저의 정지 버튼을 누르는 행위와 동등한 효과를 지닙니다. Because of the order in which scripts are loaded, the stop() method cannot stop the document in which it is contained from loading, but it will stop the loading of large images, new windows, and other objects whose loading is deferred.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-window-stop-dev |

Compatibility
-------------

stop()메서드는 인터넷 익스플로러에서 지원하지 않습니다.


WindowEventHandlers.onstorage - Web API

WindowEventHandlers.onstorage
=============================

`WindowEventHandlers` 믹스인의 **`onstorage`** 속성은 `storage` 이벤트를 처리하는 `event handler`입니다.

`storage` 이벤트는 다른 문서에서 저장소를 변경했을 때 발생합니다.

구문
--

```js
window.onstorage = functionRef;
```

### 값

`functionRef`는 함수 이름 혹은 함수 표현식으로, 단일 매개변수로써 `StorageEvent`를 받습니다.

예제
--

다음 예제는 다른 문서에서 저장소 키를 바꿀 때마다 메시지를 기록합니다.

```js
window.onstorage = function (e) {
  console.log(
    "The " +
      e.key +
      " key has been changed from " +
      e.oldValue +
      " to " +
      e.newValue +
      ".",
  );
};
```

명세
--

| Specification |
| --- |
| HTML Standard # event-storage |
| HTML Standard # handler-window-onstorage |

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

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

같이 보기
-----

* Window: `storage` 이벤트


Window.history - Web API

Window.history
==============

`Window.history` 읽기 전용 속성은 `History` 객체로의 참조를 반환합니다. History 객체는 브라우저의 세션 기록(현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작할 때 사용합니다.

History API 문서를 방문해 자세한 정보와 함께 예제를 살펴보세요. 특히, 저 문서는 `pushState()`와 `replaceState()` 메서드를 사용하기 전 알아야 할 보안 기능을 설명합니다.

예제
--

```js
history.back(); // 뒤로 가기 버튼 클릭과 동일
history.go(-1); // history.back()과 동일
```

참고
--

프레임에 속하지 않은 최상위 페이지의 세션 기록은 브라우저의 뒤로 가기/앞으로 가기 버튼의 드롭다운 메뉴에서도 볼 수 있습니다.

보안상의 문제로, `History` 객체는 세션 기록 내 다른 페이지의 URL을 알 수 없습니다. 그러나 세션 기록을 탐색하는 것은 할 수 있습니다.

일반 코드에서 세션 기록을 지우거나, 브라우저의 뒤로/앞으로 가기 버튼을 비활성화할 방법은 없습니다. 그나마 가장 근접한 방법은 `location.replace()` 메서드로, 세션 기록의 현재 항목을 주어진 URL로 바꿉니다.

명세
--

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

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

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


ImageCapture.takePhoto() - Web API

ImageCapture.takePhoto()
========================

`ImageCapture` 인터페이스의 **`takePhoto()`** 메서드는 `MediaStreamTrack`을 제공하는 비디오 캡처 장치를 사용해 단일 노출 촬영을 하고, 그 데이터를 담은 `Blob`으로 이행하는 `Promise`를 반환합니다.

구문
--

```js
const blobPromise = imageCaptureObj.takePhoto([photoSettings]);
```

### 매개변수

`photoSettings` Optional

사진을 촬영할 때 사용할 옵션을 나타내는 객체. 가능한 옵션은 다음과 같습니다.\* `fillLightMode`: 캡처 장치의 플래시 설정. `"auto"`, `"off"`, `"flash"` 중 하나를 사용할 수 있습니다.

* `imageHeight`: 원하는 이미지 크기의 높이를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 높이를 사용합니다.
* `imageWidth`: 원하는 이미지 크기의 너비를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 너비를 사용합니다.
* `redEyeReduction`: 적목 현상 감소 기능이 존재하는 경우, 사용할지 나타내는 불리언 값.

### 반환 값

`Blob`으로 이행하는 `Promise`.

예제
--

다음 코드는 Simple Image Capture 데모에서 가져온 것으로, `takePhoto()`가 반환한 `Promise`의 `Blob`을 사용해 `<img>` 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 `ImageCapture` 객체의 초기화 과정은 생략했습니다.

```js
var takePhotoButton = document.querySelector("button#takePhoto");
var canvas = document.querySelector("canvas");

takePhotoButton.onclick = takePhoto;

function takePhoto() {
  imageCapture
    .takePhoto()
    .then(function (blob) {
      console.log("Took photo:", blob);
      img.classList.remove("hidden");
      img.src = URL.createObjectURL(blob);
    })
    .catch(function (error) {
      console.log("takePhoto() error: ", error);
    });
}
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-takephoto |

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

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


ImageCapture.getPhotoCapabilities() - Web API

ImageCapture.getPhotoCapabilities()
===================================

`ImageCapture` 인터페이스의 **`getPhotoCapabilities()`** 메서드는 사용 가능한 설정 옵션을 담은 `PhotoCapabilities` 객체로 이행하는 `Promise`를 반환합니다.

구문
--

```js
const capabilitiesPromise = imageCaptureObj.getPhotoCapabilities();
```

### 반환 값

다음 속성을 포함하는 객체로 이행하는 `Promise`.

`redEyeReduction`

장치의 적목 현상 감소 기능 적용 여부를 나타내는 `"never"`, `"always"`, `"controllable"` 중 하나를 반환합니다.

`imageHeight`

사용자 에이전트가 지원하는 이미지 높이의 범위를 나타내는 객체를 반환합니다.

`imageWidth`

사용자 에이전트가 지원하는 이미지 너비의 범위를 나타내는 객체를 반환합니다.

`fillLightMode`

사용 가능한 카메라 플래시 옵션을 담은 배열을 반환합니다. 가능한 값은 `auto`, `off`, `flash`입니다.

예제
--

다음 예제는 Chrome의 Image Capture / Photo Resolution Sample에서 가져온 코드로, `getPhotoCapabilities()`를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 `MediaStream` (en-US)에서 가져온 `MediaStreamTrack` 객체를 사용해 `ImageCapture` 객체를 생성하는 부분도 포함하고 있습니다.

```js
const input = document.querySelector('input[type="range"]');

var imageCapture;

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

    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);

    return imageCapture.getPhotoCapabilities();
  })
  .then((photoCapabilities) => {
    const settings = imageCapture.track.getSettings();

    input.min = photoCapabilities.imageWidth.min;
    input.max = photoCapabilities.imageWidth.max;
    input.step = photoCapabilities.imageWidth.step;

    return imageCapture.getPhotoSettings();
  })
  .then((photoSettings) => {
    input.value = photoSettings.imageWidth;
  })
  .catch((error) => console.log("Argh!", error.name || error));
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-getphotocapabilities |

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

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


ImageCapture.track - Web API

ImageCapture.track
==================

`ImageCapture` 인터페이스의 **`track`** 읽기 전용 속성은 `ImageCapture()` 생성자에 제공한 `MediaStreamTrack`의 참조를 반환합니다.

구문
--

```js
const mediaStreamTrack = imageCaptureObj.track;
```

### 값

`MediaStreamTrack` 객체.

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-track |

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

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


ImageCapture.getPhotoSettings() - Web API

ImageCapture.getPhotoSettings()
===============================

`ImageCapture` 인터페이스의 **`getPhotoSettings()`** 메서드는 현재 촬영 설정을 담은 `PhotoSettings` 객체로 이행하는 `Promise`를 반환합니다.

구문
--

```js
const settingsPromise = imageCapture.getPhotoSettings();
```

### 반환 값

다음의 속성으로 구성된 `PhotoSettings` 객체로 이행하는 `Promise`.

* `fillLightMode`: 캡처 장치의 플래시 설정. `"auto"`, `"off"`, `"flash"` 중 하나를 사용할 수 있습니다.
* `imageHeight`: 원하는 이미지 크기의 높이를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 높이를 사용합니다.
* `imageWidth`: 원하는 이미지 크기의 너비를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 너비를 사용합니다.
* `redEyeReduction`: 적목 현상 감소 기능이 존재하는 경우, 사용할지 나타내는 불리언 값.
예제
--

다음 예제는 Chrome의 Image Capture / Photo Resolution Sample에서 가져온 코드로, `getPhotoCapabilities()`를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 `MediaStream` (en-US)에서 가져온 `MediaStreamTrack` 객체를 사용해 `ImageCapture` 객체를 생성하는 부분도 포함하고 있습니다.

```js
const input = document.querySelector('input[type="range"]');

var imageCapture;

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

    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);

    return imageCapture.getPhotoCapabilities();
  })
  .then((photoCapabilities) => {
    const settings = imageCapture.track.getSettings();

    input.min = photoCapabilities.imageWidth.min;
    input.max = photoCapabilities.imageWidth.max;
    input.step = photoCapabilities.imageWidth.step;

    return imageCapture.getPhotoSettings();
  })
  .then((photoSettings) => {
    input.value = photoSettings.imageWidth;
  })
  .catch((error) => console.log("Argh!", error.name || error));
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-getphotosettings |

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

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


ImageCapture() 생성자 - Web API

ImageCapture() 생성자
==================

**`ImageCapture()`** 생성자는 새로운 `ImageCapture` 객체를 생성합니다.

구문
--

```js
const imageCapture = new ImageCapture(videoTrack);
```

### 매개변수

`videoTrack`

이미지를 가져올 때 사용할 `MediaStreamTrack`. 화상전화 스트림, 재생 중인 영화, 웹캠 스트림 등 모든 출처를 사용할 수 있습니다.

### 반환 값

지정한 비디오 트랙에서 정지 프레임을 캡처할 수 있는 `ImageCapture` 객체.

예제
--

다음 예제는 `MediaDevices.getUserMedia()` (en-US)을 사용해, `ImageCapture()` 생성자에 필요한 `MediaStreamTrack`을 가져오는 법을 보입니다.

```js
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));
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-imagecapture |

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

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


ImageCapture.grabFrame() - Web API

ImageCapture.grabFrame()
========================

`ImageCapture` 인터페이스의 **`grabFrame()`** 메서드는 `MediaStreamTrack`의 라이브 비디오에서 스냅샷을 찍고, 그 결과를 담은 `ImageBitmap` (en-US)으로 이행하는 `Promise`를 반환합니다.

구문
--

```js
const bitmapPromise = imageCapture.grabFrame();
```

### 반환 값

`ImageBitmap` (en-US) 객체로 이행하는 `Promise`.

예제
--

다음 예제는 Simple Image Capture 데모에서 가져온 것으로, `grabFrame()`이 반환한 `Promise`의 `ImageBitmap` (en-US)을 사용해 `<canvas>` 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 `ImageCapture` 객체의 초기화 과정은 생략했습니다.

```js
var grabFrameButton = document.querySelector("button#grabFrame");
var canvas = document.querySelector("canvas");

grabFrameButton.onclick = grabFrame;

function grabFrame() {
  imageCapture
    .grabFrame()
    .then(function (imageBitmap) {
      console.log("Grabbed frame:", imageBitmap);
      canvas.width = imageBitmap.width;
      canvas.height = imageBitmap.height;
      canvas.getContext("2d").drawImage(imageBitmap, 0, 0);
      canvas.classList.remove("hidden");
    })
    .catch(function (error) {
      console.log("grabFrame() error: ", error);
    });
}
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-grabframe |

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

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


BaseAudioContext.createPeriodicWave() - Web API

BaseAudioContext.createPeriodicWave()
=====================================

`BaseAudioContext` 인터페이스의 `createPeriodicWave()` 메서드는 `PeriodicWave`를 생성하기 위해 사용되는데, 이는 `OscillatorNode` (en-US)의 출력을 형성하기 위해 사용될 수 있는 주기적인 파형을 정의하기 위해 사용됩니다.

구문
--

```js
var wave = AudioContext.createPeriodicWave(real, imag[, constraints]);
```

### 반환

`PeriodicWave`.

### 매개변수

`real`

코사인 항의 배열 (전통적으로 A 항).

`imag`

사인 항의 배열 (전통적으로 B 항).

`real` 과 `imag` 배열은 같은 길이를 가져야만 합니다. 그렇지 않으면 오류가 발생됩니다.

`constraints` Optional

정규화(normalization)가 비활성화되어야 하는지를 명시하는 dictionary 객체입니다 (만약 명시되지 않으면, 기본적으로 정규화는 활성화 됩니다.) 이것은 하나의 프로퍼티를 취합니다:\* `disableNormalization`: 만약 `true`로 설정되면, 정규화는 주기파에 대해 비활성화 됩니다. 기본값은 `false`입니다.

**참고:** 만약 정규화되면, 결과 파동은 최고 절대값(maximum absolute peak value) 1을 가지게 됩니다.

예제
--

다음의 예제는 단순한 사인파를 포함하는 `PeriodicWave` 객체를 생성하기 위한 `createPeriodicWave()`의 간단한 사용을 보여줍니다.

```js
var real = new Float32Array(2);
var imag = new Float32Array(2);
var ac = new AudioContext();
var osc = ac.createOscillator();

real[0] = 0;
imag[0] = 0;
real[1] = 1;
imag[1] = 0;

var wave = ac.createPeriodicWave(real, imag, { disableNormalization: true });

osc.setPeriodicWave(wave);

osc.connect(ac.destination);

osc.start();
osc.stop(2);
```

이는 정의에 의해 오직 기본음을 포함하는 소리가 사인파이기 때문에 작동합니다.

여기서, 우리는 두 값과 함께 `PeriodicWave`를 생성합니다. 첫번째 값은 oscillator가 시작하는 값인 DC 오프셋입니다. 여기서 0은 좋은데, 왜냐하면 우리는 곡선을 [-1.0; 1.0] 범위의 중간에서 시작하기를 원하기 때문입니다.

두번째와 그 다음의 값은 사인과 코사인 요소입니다. 여러분은 이것을 시간 도메인 값으로부터 주파수 도메인 값을 얻는 푸리에 변환의 결과로 생각할 수 있습니다. 여기서, `createPeriodicWave()`와 함께, 여러분은 주파수를 명시하고, 브라우저는 oscillator의 주파수에 대한 시간 도메인 버퍼를 얻기 위해 역 푸리에 변환을 수행합니다. 여기서, 우리는 오직 기본음의 전체 볼륨 (1.0)에서의 한 요소만을 설정했으므로, 우리는 사인파를 얻습니다.

 푸리에 변환의 계수는 *오름*차순으로 주어져야만 하고
 (예:

(

a
+
b
i

)

e
i

,

(

c
+
d
i

)

e

2
i

,

(

f
+
g
i

)

e

3
i

 \left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} ,
 \left(f+gi\right)e^{3i}

 등) 양이거나 음일 수 있습니다. 수동으로 이러한 계수들을 얻는 간단한 방법은 (최고의 방법은 아니지만) 그래프 계산기를 사용하는 것입니다.

명세
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createperiodicwave |

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

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

See also
--------

* Using the Web Audio API


AbstractRange.collapsed - Web API

AbstractRange.collapsed
=======================

`AbstractRange` (en-US)의 범위가 축소된 read-only 속성은 범위의 시작 위치와 끝 위치가 같을 경우 true를 반환합니다.

문법
--

```js
var isCollpased = range.collapsed;
```

### Value

범위가 축소된 경우 true인 `Boolean`값을 반환합니다. 축소된 범위는 시작 위치와 종료 위치가 동일하며, 문자 길이가 0인 범위입니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

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

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


Storage.length - Web API

Storage.length
==============

`Storage` 인터페이스의 `length` 읽기 전용 속성은 `Storage` 객체에 저장된 데이터 항목의 수를 반환합니다.

구문
--

```js
length = storage.length;
```

### 반환 값

`Storage` 객체에 저장된 항목의 수.

예제
--

다음의 함수는 현재 도메인의 로컬 저장소에 세 개의 항목을 추가한 후 저장소 항목의 수를 반환합니다.

```js
function populateStorage() {
  localStorage.setItem("bgcolor", "yellow");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "cats.png");

  return localStorage.length; // Should return 3
}
```

**참고:** 실제 사용 예제를 보시려면 저희의 Web Storage Demo를 방문하세요.

명세
--

| Specification |
| --- |
| HTML Standard # dom-storage-length-dev |

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

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

같이 보기
-----

* Web Storage API 사용하기 (en-US)


Storage.removeItem() - Web API

Storage.removeItem()
====================

`Storage` 인터페이스의 removeItem() 메소드에 키 이름을 파라미터로 전달하면 스토리지에서 해당 키를 삭제합니다.

문법
--

```js
storage.removeItem(keyName);
```

### 파라미터

***keyName***

삭제하고자 하는 키 이름(`DOMString`).

### 반환값

*반환값 없음.*

예제
--

아래의 함수는 로컬 스토리지에 3 개의 데이터 아이템을 생성한 후 그 중 하나를 삭제합니다.

```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.removeItem("image");
}
```

**참고:** 실 사용 예제는 Web Storage Demo를 참고하시기 바랍니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-storage-removeitem-dev |

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

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

같이 보기
-----

Web Storage API 사용하기 (en-US)


Storage.key() - Web API

Storage.key()
=============

`Storage` 인터페이스의 `key()` 메서드는 숫자 `n`이 전달되면 Storage의 `n`번째 key 이름을 반환합니다. key의 순서는 user-agent에 의해 정의되므로 이 순서에 의존성이 있어서는 안됩니다.

문법
--

```js
var aKeyName = storage.key(index);
```

### Parameters

*index*

반환받으려하는 key의 번호를 나타내는 정수. 이 정수는 0부터 시작하는 인덱스입니다.

### Return value

key 이름을 포함한 `DOMString` 입니다.

예제
--

다음 함수는 localStorage 의 key들을 반복합니다.

```js
function forEachKey(callback) {
  for (var i = 0; i < localStorage.length; i++) {
    callback(localStorage.key(i));
  }
}
```

다음 함수는 localStorage 의 key들을 반복하고 각 key에 설정된 값들을 가져옵니다.

```js
for (var i = 0; i < localStorage.length; i++) {
  console.log(localStorage.getItem(localStorage.key(i)));
}
```

**참고:** 실제로 쓰이는 예제를 보려면 우리의 Web Storage Demo 를 참조하세요.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-storage-key-dev |

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

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

See also
--------

Using the Web Storage API (en-US)


MediaDevices.enumerateDevices() - Web API

MediaDevices.enumerateDevices()
===============================

`MediaDevices`의 **`enumerateDevices()`** 메서드는 사용(또는 접근)이 가능한 미디어 입력장치나 출력장치들의 리스트를 가져옵니다. 예를 들면 마이크, 카메라, 헤드셋 등의 미디어 입/출력 장치 리스트를 불러오는 것 이죠. 이 메서드는 `Promise` (en-US)를 반환하는데, 이 Promise가 resolve되면 장치(device)정보가 들어있는 `MediaDeviceInfo` (en-US) 배열(array)을 확인할 수 있습니다.

Syntax (구문)
-----------

```js
var enumeratorPromise = navigator.mediaDevices.enumerateDevices();
```

### Return value ( 반환값 )

반환받는 `Promise` (en-US)는 모든 장치 리스트를 가져오는 것에 성공하면 `MediaDeviceInfo` (en-US)객체 배열(array)를 받습니다. 배열에 들어있는 객체들은 각각의 장치정보를 가지고 있습니다.

장치 리스트를 가져오는 것이 실패하면, promise는 rejected처리 됩니다.

Example (예제)
------------

`enumerateDevices()`을 사용하는 방법을 알아봅시다. 아래는 장치 종류와 device IDs (장치 아이디) (en-US)를 반환하며, 레이블이 있을 경우 레이블도 보여주는 간단한 코드 입니다.

```js
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices()를 지원하지 않습니다.");
  return;
}

// 카메라와 마이크 리스트

navigator.mediaDevices
  .enumerateDevices()
  .then(function (devices) {
    devices.forEach(function (device) {
      console.log(
        device.kind + ": " + device.label + " id = " + device.deviceId,
      );
    });
  })
  .catch(function (err) {
    console.log(err.name + ": " + err.message);
  });
```

위 코드를 실행하면 아래와 같은 결과를 볼 수 있을 것입니다.:
```

videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

또는 하나 이상의 `MediaStream` (en-US)이 사용 가능하거나 접근(사용권한)이 가능할 경우:
```

videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

명세서
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadevices-enumeratedevices |

Browser compatibility (브라우저 호환)
-------------------------------

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

See also
--------

* `navigator.mediaDevices.getUserMedia()` (en-US)
* WebRTC (en-US) - the introductory page to the API
* MediaStream API (en-US) - the API for the media stream objects
* Taking webcam photos (en-US) - a tutorial on using `getUserMedia()` for taking photos rather than video.


Text.splitText() - Web API

Text.splitText()
================

**`Text.splitText()`** 메소드는 `Text` 노드를 지정된 오프셋에서 두 노드로 분리합니다. 두 노드는 sibling으로써 트리에 유지됩니다.

분리한 이후, 현재 노드는 지정된 오프셋 지점까지의 모든 컨텐츠를 포함하며, 새롭게 생성된 같은 타입의 노드는 남아있는 텍스트를 포함합니다. 새롭게 생성된 노드는 호출자에게 반환됩니다. 기존 노드가 부모를 갖고 있다면, 새 노드는 기존 노드의 다음 sibling으로 삽입됩니다. 기존 노드의 길이와 오프셋이 동일하다면, 새롭게 생성된 노드는 데이터를 갖지 않습니다.

분리된 텍스트 노드는 `Node.normalize()` 메소드를 사용해 이어붙혀질 수 있습니다.

지정된 오프셋이 음수이거나 노드의 텍스트의 16 비트 단위의 수보다 크면 `INDEX_SIZE_ERR` 값을 갖는 `DOMException` (en-US) 을 throw됩니다. `NO_MODIFICATION_ALLOWED_ERR` 값을 갖는 `DOMException` (en-US) 은 노드가 읽기 전용일 때 throw됩니다.

문법
--

```js
replacementNode = textnode.splitText(offset);
```

예제
--

이 예제에서 `<p>` 텍스트 노드는 두 텍스트 노드로 분리되며 그 사이에 `<span>` 이 삽입됩니다.

```html
<body>
  <p id="p">foobar</p>

  <script type="text/javascript">
 var p = document.getElementById("p");
 var textnode = p.firstChild;

 // foo 와 bar 사이를 분리
 var replacementNode = textnode.splitText(3);

 // ' span contents ' 를 포함하는 span을 생성
 var span = document.createElement("span");
 span.appendChild(document.createTextNode(" span contents "));

 // 'bar' 앞에 span을 추가
 p.insertBefore(span, replacementNode);

 // 결과: <p id="p">foo<span> span contents </span>bar</p>
 </script>
</body>
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-splittext① |

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

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

함께 보기
-----

* 이 메소드가 속한 `Text` 인터페이스.
* 반대되는 메소드: `Node.normalize`.


Text() - Web API

Text()
======

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

**`Text()`** 생성자는 옵션인 파라미터로 주어진 문자형 컨텐츠인 `DOMString` 으로 새롭게 생성된 `Text` 객체를 반환합니다.

문법
--

```js
text1 = new Text(); // 빈 텍스트 노드 생성
text2 = new Text("텍스트 노드입니다");
```

예제
--

```js
text = new Text("Test");
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-text① |

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

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

함께 보기
-----

* DOM 인터페이스 목차.


선택자로 DOM 요소 선택하기 - Web API

선택자로 DOM 요소 선택하기
================

선택자 API는 DOM에서 `Element` (en-US) 노드를 선택자를 통해 빠르고 쉽게 가져올 수 있는 메서드를 제공합니다. 이 방법은 JavaScript 코드에서 반복문을 통해 특성 요소를 탐색하던 이전 방법보다 훨씬 빠릅니다.

NodeSelector 인터페이스
------------------

본 명세는 `Document`, `DocumentFragment`, `Element` (en-US) 인터페이스를 구현하는 모든 객체에 메서드 두 개를 추가합니다.

`querySelector`

노드의 하위 트리에서 첫 번째로 일치하는 `Element` (en-US) 노드를 반환합니다. 결과가 없으면 `null`을 반환합니다.

`querySelectorAll`

노드의 하위 트리 안에서 일치하는 모든 `Element`를 포함한 `NodeList`를 반환합니다. 결과가 없으면 빈 `NodeList`를 반환합니다.

**참고:** The `NodeList` (en-US) returned by `querySelectorAll()` (en-US) is not live, which means that changes in the DOM are not reflected in the collection. This is different from other DOM querying methods that return live node lists.

You may find examples and details by reading the documentation for the `querySelector()` (en-US) and `querySelectorAll()` (en-US) methods, as well as in the article Code snippets for querySelector.

선택자
---

The selector methods accept one or more comma-separated selectors to determine what element or elements should be returned. For example, to select all paragraph (`p`) elements in a document whose CSS class is either `warning` or `note`, you can do the following:

```js
var special = document.querySelectorAll("p.warning, p.note");
```

You can also query by ID. For example:

```js
var el = document.querySelector("#main, #basic, #exclamation");
```

After executing the above code, `el` contains the first element in the document whose ID is one of `main`, `basic`, or `exclamation`.

You may use any CSS selectors with the `querySelector()` and `querySelectorAll()` methods.

같이 보기
-----

* Selectors API
* `element.querySelector` (en-US)
* `element.querySelectorAll` (en-US)
* `document.querySelector` (en-US)
* `document.querySelectorAll` (en-US)
* Code snippets for querySelector


W3C DOM Level 1 Core 사용하기 - Web API

W3C DOM Level 1 Core 사용하기
=========================

The W3C's DOM Level 1 Core 는 documents의 콘텐츠 트리를 변경하기 위한 강력한 객체형 모델입니다. 웹 스크립팅을 위한 초석이기도 한 이 모델은 Mozilla Firefox and Microsoft Internet Explorer를 포함한 주요 브라우저에서 지원합니다.

What is a content tree?
-----------------------

많은 HTML 웹 페이지 저자(이하 개발자)는 HTML를 - 태그와 글자로 버무려진 - 평평한 무언가라고 생각할 수 있습니다. 하지만 HTML은, 그 이상의 의미를 가지고 있습니다. 모든 HTML 문서 (SGML document or XML document 또한) 트리 구조를 가지고 있습니다. 예를 들면 아래의 문서와 도면의 구조는 굉장히 유사합니다. (완전히 같지는 않습니다! whitespace in the DOM (en-US) 문서를 참조하세요.)

```html
<html>
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>
```

![내용을 포함하는 루트 및 노드 요소가 있는 문서의 트리 형식의 DOM](/ko/docs/Web/API/Document_object_model/Using_the_Document_Object_Model/using_the_w3c_dom_level_1_core-doctree.jpg)

Mozilla에서 어떤 HTML 문서를 파싱할 때, 컨텐츠 트리를 만들고 이를 HTML 보여줄 때 사용합니다.

DOM Level 1 Core에 대해서 설명하기 위한 용어에 대한 설명입니다. 위 도면에서 나온 모든 박스는 트리의 노드입니다. 한 노드 위의 선은 노드 간의 부모 - 자식 관계를 설명합니다. 상위 노드가 부모 노드이고, 하위 노드는 자식 노드입니다. 두 자식 노드를 같은 부모 노드를 가지고 있기 때문에 형제자매 노드라고 부를 수 있습니다. 비슷하게, ancestors와 descendants라는 용어를 사용할 수도 있습니다.

What does the DOM Level 1 Core let me do?
-----------------------------------------

The W3C DOM Level 1은 컨텐츠 트리를 웹 페이지 **개발자가 원하는 어떤 방식으로든** 바꿀 수 있게 합니다. 백지 상태에서 HTML 문서를 제작할 수 있을 만큼 강력합니다. 또한 스크립트 언어를 통해 언제 어디서든 HTML 문서를 개발자가 조작할 수 있도록 합니다. JavaScript를 통해서 개발자는 동적으로 DOM을 가장 쉽게 변경할 수 있습니다. JavaScript는 전역 객체의 `document` 객체를 통해 오래된 브라우저가 접근했던 그 방식대로, HTML 문서에 접근 가능합니다, 이 `document` 객체는 the W3C's DOM Level 1 spec의 Document interface 가 적용되어 있습니다.

A simple example
----------------

개발자가 상단의 HTML 문서에서 header의 내용을 바꾸고, 한 문단(Paragraph) 대신 두 문단으로 적용하고 싶다면, 아래와 같은 스크립트를 작성할 수 있습니다.

### HTML Content

```html
<body>
  <input type="button" value="Change this document." onclick="change()" />
  <h2>Header</h2>
  <p>Paragraph</p>
</body>
```

### JavaScript Content

```js
function change() {
  // document.getElementsByTagName("H2") 는 <h2> 엘리먼트의
  // NodeList를 반환(return)합니다. 0부터 시작합니다.

  var header = document.getElementsByTagName("H2").item(0);
  // 헤더의 첫번째 자식 노드는 Text 노드입니다.
  header.firstChild.data = "A dynamic document";
  // 이제 헤더는 "A dynamic document"가 되었습니다.

  var para = document.getElementsByTagName("P").item(0);
  para.firstChild.data = "This is the first paragraph.";

  // 두번째 문단을 만들기 위한 새로운 Text 노드를 만들었습니다.
  var newText = document.createTextNode("This is the second paragraph.");
  // 두번째 문단을 만들기 위한 새로운 p 엘리먼트를 만들었습니다.
  var newElement = document.createElement("P");
  // 새로운 p 엘리먼트에 텍스트를 넣어 문단을 만듭니다.
  newElement.appendChild(newText);
  // 생성한 문단을 HTML 문서 마지막에 넣기 위해
  // (para의 부모인) HTML BODY에 append합니다.
  para.parentNode.appendChild(newElement);
}
```

여기에서 완성된 예시를 확인할 수 있습니다.

How can I learn more?
---------------------

이제 DOM의 기본적인 개념에 대한 설명이 끝났습니다. DOM Level 1 fundamental methods (en-US) 에 대해서 궁금하시다면, 더 자세히 공부하실 수 있습니다.

더욱 정확하고 엄밀한 설명은 W3C DOM Level 1 Core specification 에서 확인하실 수 있습니다. 개발자에게 정보는 DOM 객체에 대한 설명과, 객체의 특성과 메소드에 대한 설명이 특히 유용합니다. MDN의 다른 DOM 관련 문서도 참고 부탁 드립니다.


IdleDeadline.didTimeout - Web API

IdleDeadline.didTimeout
=======================

**`IdleDeadline`** 인터페이스의 읽기 전용 속성(property)인 **`didTimeout`** 는 `Window.requestIdleCallback()`이 호출될 때 지정된 timeout 간격이 만료되어, 유휴 콜백(idle callback)이 호출되는지 여부를 나타내는 Boolean 값 입니다.

`didTimeout` 이 `true` 면, `IdleDeadline` 객체의 `timeRemaining()` (en-US) 메서드는 대략 0을 반환합니다..

유휴 콜백은 사용자 에이전트가 충분한 유휴 시간을 사용할 수 없는 경우에도, 수행하려는 작업이 실제로 발생하는지 확인하기 위해 timeout 개념을 지원합니다. 브라우저가 너무 바빠서 시간을 허락하지 않더라도, 액션을 수행해야 하는 경우 콜백은 일반적으로 `didTimeout`값을 확인합니다. 필요로 하는 작업을 수행하거나, 이상적인 상황을 유지하기 위해 수행할 수 있는 최소한의 작업을 수행하도록 대응하고, 새로운 콜백을 예약하여 나머지 작업을 다시 시도하도록 해야합니다.

Syntax
------

```js
var timedOut = IdleDeadline.didTimeout;
```

### Value

Boolean 으로, 콜백의 timeout 기간이 경과하여 콜백이 실행 중이면 `true` 입니다. 사용자 에이전트가 유휴 상태이고 콜백에 시간을 제공하고 있기 때문에 콜백이 실행 중이면, `false` 입니다.

Example
-------

Cooperative Scheduling of Background Tasks API의 complete example 를 참조하세요

명세서
---

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # dom-idledeadline-didtimeout |

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

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

See also
--------

* Collaborative Scheduling of Background Tasks
* `IdleDeadline`
* `Window.requestIdleCallback()`
* `Window.cancelIdleCallback()` (en-US)


AudioWorkletNode() - Web API

AudioWorkletNode()
==================

**`AudioWorkletNode()`** 생성자는 새로운 `AudioWorkletNode` 객체를 생성하는데, 이는 사용자 정의 오디오 프로세싱을 수행하기 위해 JavaScript 함수를 사용하는 `AudioNode`를 나타냅니다.

구문
--

```js
var node = new AudioWorkletNode(context, name);
var node = new AudioWorkletNode(context, name, options);
```

### 매개변수

`context`

이 노드가 관련될 `BaseAudioContext` 인스턴스.

`name`

이 노드가 기반으로 할 `AudioWorkletProcessor`의 이름을 나타내는 문자열. 제공된 이름을 가진 프로세서는 `AudioWorkletGlobalScope.registerProcessor()` 메서드를 사용하여 반드시 맨 먼저 등록되어야 합니다.

`options` Optional

새로운 노드를 설정하기 위해 다음의 선택적인 속성들 중 0개 또는 그 이상을 포함하는 객체:

**참고:** 이 객체에 적용된 structured clone algorithm의 결과는
 또한 연관된 `AudioWorkletProcessor()` 생성자로 내부적으로 전달됩니다
 — 이는 근본적인 사용자 정의 `AudioWorkletProcessor`의 커스텀 초기화를 가능케 합니다.

`numberOfInputs` Optional

`numberOfInputs` 속성을 초기화할 값. 기본값은 1입니다.

`numberOfOutputs` Optional

`numberOfOutputs` 속성을 초기화할 값. 기본값은 1입니다.

`outputChannelCount` Optional

각 출력에 대한 채널의 숫자를 정의하는 **배열**. 예를 들자면, *outputChannelCount: [n, m]* 은 첫번째 출력의 채널 숫자를 *n* 으로 그리고 두번째 출력을 *m* 으로 명시합니다. 배열의 길이는 반드시 `numberOfOutputs`과 일치해야 합니다.

`parameterData` Optional

`key`가 사용자 정의 파라미터의 이름이고 `value`가 이것의 초기 값인 채로, (노드의 `parameters` 속성에 있는) 이 노드에 있는 사용자 정의 `AudioParam` 객체의 초기 값을 포함하는 객체.

`processorOptions` Optional

근본적인 `AudioWorkletProcessor`의 사용자 정의 초기화를 위해 사용될 수 있는 모든 추가적인 데이터.

### 반환 값

새롭게 생성된 `AudioWorkletNode` 인스턴스.

### 예외

`NotSupportedError` `DOMException` (en-US)

명시된 `options.outputChannelCount` 이 `0` 또는 현재 구현 지원보다 더 큽니다.

`options.numberOfInputs`와 `options.numberOfOutputs`가 둘 다 0입니다.

`IndexSizeError` `DOMException` (en-US)

`options.outputChannelCount` 배열의 길이가 `options.numberOfOutputs`와 일치하지 않습니다.

사용 일람
-----

각기 다른 `options` 매개변수 값들은 다음의 영향을 가질 수 있습니다.

만약 입력의 수와 출력의 수가 둘 다 0으로 설정된다면, `NotSupportedError`가 발생될 것이고 노드 구성 과정은 중단됩니다. 만약 `outputChannelCount` 배열의 길이가 `numberOfOutputs`과 일치하지 않다면, `IndexSizeError` `DOMException` (en-US)이 발생할 것입니다.

만약 `outputChannelCount`이 명시되지 않았고, `numberOfInputs`와 `numberOfOutputs`가 모두 1이라면, `AudioWorkletNode`의 초기 채널 카운트는 1으로 설정됩니다. 이것은 계산된 채널의 수로 동적으로 변화하는 출력 채널 카운트를 변화시키는 효과를 가지는데, 이는 입력의 채널 카운트와 `AudioNode` 속성 `channelCountMode`의 현재 설정에 기반합니다.

그렇지 않으면, 만약 `outputChannelCount`이 제공되고 만약 `numberOfInputs`와 `numberOfOutputs`의 값이 둘 다 1이라면, 오디오 worklet 노드의 채널 카운트는 `outputChannelCount`의 값으로 설정됩니다. 그렇지 않으면, 출력 채널의 집합에 있는 각 채널의 채널 카운트는 해당하는 `outputChannelCount` 배열의 값과 일치되도록 설정됩니다.

예제
--

*사용자 정의 오디오 프로세싱을 시연하는 완전한 예제는 `AudioWorkletNode` 페이지에서 찾아보실 수 있습니다.*

명세
--

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-audioworkletnode |

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

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

같이 보기
-----

* Web Audio API
* AudioWorklet을 사용한 백그라운드 오디오 프로세싱
* `AudioWorkletNode` 인터페이스


AudioWorkletNode.onprocessorerror - Web API

AudioWorkletNode.onprocessorerror
=================================

`AudioWorkletNode` 인터페이스의 `onprocessorerror` 속성은 `processorerror` 이벤트가 발생했을 때 호출될 이벤트 처리기 함수를 정의합니다. 이것은 노드 뒤의 근본적인 `AudioWorkletProcessor`가 이것의 생성자, `process` 메서드, 또는 유저에 의해 정의된 모든 클래스 메서드에서 예외를 발생시켰을 때 발생합니다.

한 번 예외가 발생되면, 프로세서 (그리고 따라서 노드) 는 생애 주기 내내 무음을 출력할 것입니다.

구문
--

```js
audioWorkletNode.onprocessorerror = function() { ... };
```

예제
--

// 예제 코드 추가하기

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-onprocessorerror |

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

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

같이 보기
-----

* Web Audio API 사용하기


AudioWorkletNode.port - Web API

AudioWorkletNode.port
=====================

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

`AudioWorkletNode` 인터페이스의 읽기 전용 **`port`** 속성은 연관된 `MessagePort` (en-US)를 반환합니다. 이것은 노드와 노드에 연관된 `AudioWorkletProcessor` 사이에서 소통하기 위해 사용될 수 있습니다.

**참고:** 채널의 다른 쪽 끝에 있는 포트는
 프로세서의 `port` 속성 아래에서
 사용 가능합니다.

구문
--

```js
audioWorkletNodeInstance.port;
```

### 값

`AudioWorkletNode` 와 이것에 연관된 `AudioWorkletProcessor`를 연결하는 `MessagePort` (en-US) 객체.

예제
--

양방향 소통 능력을 시연하기 위해서, 우리는 `AudioWorkletProcessor` 를 생성할 것인데, 이는 무음을 출력하고 이것의 `AudioWorkletNode` 으로부터의 핑 요청에 응답할 것입니다.

우선, 우리는 커스텀 `AudioWorkletProcessor` 를 정의하고, 등록할 필요가 있습니다. 이 작업은 별도의 파일에서 이루어져야 함에 주의하세요.

```js
// ping-pong-processor.js
class PingPongProcessor extends AudioWorkletProcessor {
  constructor(...args) {
    super(...args);
    this.port.onmessage = (e) => {
      console.log(e.data);
      this.port.postMessage("pong");
    };
  }
  process(inputs, outputs, parameters) {
    return true;
  }
}

registerProcessor("ping-pong-processor", PingPongProcessor);
```

이제 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결할 것입니다.

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("ping-pong-processor.js");
const pingPongNode = new AudioWorkletNode(audioContext, "ping-pong-processor");
// 매 초 AudioWorkletNode로부터
// AudioWorkletProcessor에 'ping' 문자열을 포함하는 메시지를 보냅니다
setInterval(() => pingPongNode.port.postMessage("ping"), 1000);
pingPongNode.port.onmessage = (e) => console.log(e.data);
pingPongNode.connect(audioContext.destination);
```

이것은 `"ping"` 과 `"pong"` 문자열을 콘솔에 매 초 출력할 것입니다.

명세
--

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-port |

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

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

같이 보기
-----

* Web Audio API
* Web Audio
API 사용하기


AudioWorkletNode.parameters - Web API

AudioWorkletNode.parameters
===========================

`AudioWorkletNode` 인터페이스의 읽기 전용 **`parameters`** 속성은 연관된 `AudioParamMap`을 반환합니다 — 즉, `AudioParam` 객체들의 유사 `Map` 컬렉션입니다. 이것들은 `AudioWorkletProcessor`의 static `parameterDescriptors` getter에 따라 근본적인 `AudioWorkletProcessor`의 생성 중에 초기화됩니다.

구문
--

```js
audioWorkletNodeInstance.parameters;
```

### 값

`AudioParam` 인스턴스들을 포함하는 `AudioParamMap` 객체. 이것들은 기본 `AudioNode` 들과 같은 방법으로 자동화 가능하고, 그들의 계산된 값들은 여러분의 `AudioWorkletProcessor`의 `process` 메서드에서 사용될 수 있습니다.

예제
--

사용자 정의 `AudioParam` 들의 생성과 사용을 시연하기 위해, 우리는 `AudioWorkletNode` 페이지의 예제를 확장할 것입니다. 저 글에서 우리는 백색소음을 출력하는 단순한 노드를 생성했습니다. 여기서 추가적으로, 우리는 출력의 볼륨을 직접 변경할 수 있도록 사용자 정의 gain 속성을 생성할 것입니다 (비록 여러분은 이를 달성하기 위해 `GainNode` (en-US)를 또한 사용할 수도 있지만요).

우선, 우리는 커스텀 `AudioWorkletProcessor`를 정의하고, 등록할 필요가 있습니다. 이 작업은 별도의 파일에서 이루어져야 함을 기억하세요.

우리는 static `parameterDescriptors` getter를 추가함으로써 프로세서를 확장합니다. 이것은 초기화된 `AudioParam` 객체들로 이것의 `parameters` 를 채우기 위해 `AudioWorkletNode` 생성자에 의해 내부적으로 사용될 것입니다.

```js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [
      {
        name: "customGain",
        defaultValue: 1,
        minValue: 0,
        maxValue: 1,
        automationRate: "a-rate",
      },
    ];
  }

  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] =
          (Math.random() \* 2 - 1) \*
          (parameters["customGain"].length > 1
            ? parameters["customGain"][i]
            : parameters["customGain"][0]);
        // 참고: 파라미터는 128개의 값 (각 128 샘플에 대한 하나의 값) 을 가진 배열을 포함하지만,
        // 만약 그 순간에 자동화가 스케쥴되어 있지 않다면
        // 모든 128개의 샘플에 대해 사용될 하나의 값을 포함할 수도 있습니다.
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);
```

다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결합니다.

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("white-noise-processor.js");
const whiteNoiseNode = new AudioWorkletNode(
  audioContext,
  "white-noise-processor",
);
whiteNoiseNode.connect(audioContext.destination);
```

이제 우리는 노드의 gain을 다음과 같이 변경할 수 있습니다:

```js
const gainParam = whiteNoiseNode.parameters.get("customGain");
gainParam.setValueAtTime(0, audioContext.currentTime);
gainParam.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.5);
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-parameters |

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

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

같이 보기
-----

* Web Audio API
* Web Audio
API 사용하기


GeolocationCoordinates: latitude 속성 - Web API

GeolocationCoordinates: latitude 속성
===================================

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

**`GeolocationCoordinates.latitude`** 읽기 전용 속성은 위치의 위도를 십진수 도(°, DD)로 나타낸 `double`입니다.

값
-

위치의 위도를 십진수 도(°, DD)로 나타낸 `double`입니다.

명세서
---

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

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

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

같이 보기
-----

* Geolocation API 사용하기
* `GeolocationCoordinates`