recursal/MDN huggingface dataset:
AbortController.abort()
=======================

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

`AbortController` 인터페이스의 **`abort()`** 메소드는 DOM 요청(Fetch 요청과 같은)이 완료되기 전에 취소한다. 이를 통해 fetch 요청, 모든 응답 `Body` 소비, 스트림을 취소할 수 있다.

구문
--


```js
controller.abort();
```

### 파라미터

없음.

### 반환 값

Void.

예제
--

다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 한다.

먼저 `AbortController()` 생성자를 사용해 컨트롤러를 `AbortController.signal` 프로퍼티를 사용해 `AbortSignal` 객체와 관계된 참조를 얻는다.

Fetch 요청을 시작할 때, 요청의 옵션 객체 내부에 `AbortSignal` 옵션을 전달한다(아래의 `{signal}` 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 `AbortController.abort()`를 호출하여 이를 취소할 수 있게한다.


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

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```


**참고:** `abort()`가 호출되면, `fetch()` promise는 `AbortError`과 함께 reject된다.

동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — abort-api 참고(라이브 실행도 확인할 수 있다).

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |

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

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

함께 보기
-----

* Fetch API
AbortController.signal
======================

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

`AbortController` 인터페이스의 **`signal`** 읽기 전용 프로퍼티는 DOM 요청과 통신하거나 취소하는데 사용하는 `AbortSignal` 객체 인터페이스를 반환한다.

구문
--


```js
var signal = abortController.signal;
```

### 값

`AbortSignal` 객체 인터페이스.

예제
--

다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 한다.

먼저 `AbortController()` 생성자를 사용해 컨트롤러를 `AbortController.signal` 프로퍼티를 사용해 `AbortSignal` 객체와 관계된 참조를 얻는다.

Fetch 요청을 시작할 때, 요청의 옵션 객체 내부에 `AbortSignal` 옵션을 전달한다(아래의 `{signal}` 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 `AbortController.abort()`를 호출하여 이를 취소할 수 있게한다.


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

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```


**참고:** `abort()`가 호출되면, `fetch()` promise는 `AbortError`과 함께 reject된다.

동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — abort-api 참고(라이브 실행도 확인할 수 있다).

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-signal② |

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

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

함께 보기
-----

* Fetch API
Window: unload 이벤트
==================

**`unload`** 이벤트는 문서나 하위 리소스가 언로딩 중일 때 발생합니다.

| 확산 | 아니오 |
| --- | --- |
| 취소 가능 | 아니오 |
| 인터페이스 | `Event` |
| 이벤트 처리기 속성 | `onunload` (en-US) |

`unload`는 다음 이벤트 이후 발생합니다.

* `beforeunload` (취소 가능한 이벤트)
* `pagehide` (en-US)

`unload` 시점의 문서는 다음과 같은 상태입니다.

* 이미지, IFrame 등 모든 리소스는 여전히 존재합니다.
* 최종 사용자는 아무것도 볼 수 없습니다.
* UI 상호작용은 아무 효과도 없습니다. (`window.open()` (en-US), `window.alert()`, `window.confirm()`, 등등)
* 오류가 발생해도 언로딩 절차는 중단되지 않습니다.

참고로 `unload` 이벤트 역시 문서 트리의 순서를 따라갑니다. 즉 부모 프레임의 `unload`가 자식 프레임의 `unload` **이전에** 발생합니다. 아래 예제를 확인하세요

예제
--


```html
<!doctype html>
<html>
  <head>
    <title>Parent Frame</title>
    <script>
 window.addEventListener("beforeunload", function (event) {
 console.log("I am the 1st one.");
 });
 window.addEventListener("unload", function (event) {
 console.log("I am the 3rd one.");
 });
 </script>
  </head>
  <body>
    <iframe src="child-frame.html"></iframe>
  </body>
</html>
```


아래는 `child-frame.html`의 내용입니다.


```html
<!doctype html>
<html>
  <head>
    <title>Child Frame</title>
    <script>
 window.addEventListener("beforeunload", function (event) {
 console.log("I am the 2nd one.");
 });
 window.addEventListener("unload", function (event) {
 console.log("I am the 4th and last one…");
 });
 </script>
  </head>
  <body>
    ☻
  </body>
</html>
```


부모 프레임이 언로딩 될 때, `console.log()` 메시지를 통해 순서를 확인할 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # event-unload |
| HTML Standard # handler-window-onunload |

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

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

같이 보기
-----

* 관련 이벤트: `DOMContentLoaded`, `readystatechange`, `load`
* Unloading Documents — unload a document
Window: message 이벤트
===================

`message` 이벤트는 window가 메세지를 받을 때, 예를 들어 다른 브라우징 맥락에서 `Window.postMessage()`을 호출할 때 `Window` 객체에서 실행됩니다.

이 이벤트는 취소할 수 없고, 버블링되지도 않습니다.

구문
--

`addEventListener()`와 같은 메서드에서 이벤트 이름을 사용하거나, 이벤트 핸들러의 속성을 설정하세요.


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

이벤트 타입
------

`Event`로부터 상속된 `MessageEvent`입니다.

Event

MessageEvent이벤트 속성
------

*이 인터페이스는 부모인 `Event`의 속성들도 상속받습니다.*

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

발신자가 보낸 메세지 데이터입니다.

`MessageEvent.origin` (en-US) 읽기 전용

발신자의 출처를 나타내는 문자열입니다.

`MessageEvent.lastEventId` (en-US) 읽기 전용

이벤트의 고유한 ID 값을 나타내는 문자열입니다.

`MessageEvent.source` (en-US) 읽기 전용

발신인을 나타내는 `MessageEventSource`(WindowProxy, `MessagePort` (en-US), `ServiceWorker` 등등) 입니다.

`MessageEvent.ports` (en-US) 읽기 전용

메세지가 전송되는 채널과 연결된 포트를 나타내는 `MessagePort` (en-US) 객체의 배열입니다(공유 워커에 메세지를 보내거나, 채널 메세징에 적합합니다).

예시
--

서로 다른 `<iframe>` (en-US)과 같은, 다른 브라우징 맥락에서 메세지를 보낸다고 가정할 때, 아래와 같이 코드를 작성하면 됩니다.


```js
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const windowMessageButton = document.querySelector("#window-message");

windowMessageButton.addEventListener("click", () => {
  targetFrame.postMessage("hello there", targetOrigin);
});
```


수신자는 `addEventListener()`를 사용해, 아래 코드와 같이 메세지를 받을 수 있습니다.


```js
window.addEventListener("message", (event) => {
  console.log(`Received message: ${event.data}`);
});
```


다른 방법으로는 `onmessage`라는 이벤트 핸들러의 속성을 이용할 수 있습니다.


```js
window.onmessage = (event) => {
  console.log(`Received message: ${event.data}`);
};
```

명세서
---

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-window-onmessage |

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

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

같이 보기
-----

* 연관된 이벤트들: `messageerror` (en-US).
* `Window.postMessage()`.
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()
===============

`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
=====================

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()
==============

**`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
=================

요약
--

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
==============

`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
===================

**`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
==============

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

예제
--

### 콘솔에 로그 남기기

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


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


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


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


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

명세
--

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

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

`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
=================

읽기 전용인 `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()
=================

**`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 이벤트
===============

**`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
====

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