initial commit

46 files changed, 5120 insertions, 0 deletions

diff --git a/files/ko/web/api/window/alert/index.html b/files/ko/web/api/window/alert/index.html
new file mode 100644
index 0000000000..c6037986c3
--- /dev/null
+++ b/files/ko/web/api/window/alert/index.html
@@ -0,0 +1,71 @@
+---
+title: Window.alert()
+slug: Web/API/Window/alert
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/alert
+---
+<p>{{APIRef}}</p>
+
+<p><strong><code>Window.alert()</code></strong> 메서드는 확인 버튼을 가지며 메시지를 지정할 수 있는 경고 대화 상자를 띄웁니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">window.alert([<em>message]</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>경고 대화 상자에 표시할 텍스트 문자열이거나, 문자열로 변환해 나타낼 객체.</dd>
+</dl>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Hello world!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Hello world!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+</pre>
+
+<p>상기 두 코드의 동작은 모두 다음과 같습니다.</p>
+
+<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p>
+
+<h2 id="참고">참고</h2>
+
+<p>경고 대화 상자는 사용자의 확인을 제외한 다른 입력을 요구하지 않는 메시지를 전달할 때에 쓰여야 합니다.</p>
+
+<p>대화 상자는 모달 창(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)으로, 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 모달 창)를 만드는 함수를 남용하면 안 됩니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-alert', 'alert()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.alert")}}</p>
+
+<h2 id="관련_문서">관련 문서</h2>
+
+<ul>
+ <li>{{domxref("window.confirm","confirm")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/beforeunload_event/index.html b/files/ko/web/api/window/beforeunload_event/index.html
new file mode 100644
index 0000000000..216b85ed7a
--- /dev/null
+++ b/files/ko/web/api/window/beforeunload_event/index.html
@@ -0,0 +1,105 @@
+---
+title: 'Window: beforeunload 이벤트'
+slug: Web/API/Window/beforeunload_event
+tags:
+  - Event
+  - Reference
+  - Window
+  - 이벤트
+translation_of: Web/API/Window/beforeunload_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>beforeunload</code></strong> 이벤트는 문서와 그 리소스가 언로드 되기 직전에 {{domxref("window")}}에서 발생합니다.</span> 이벤트 발생 시점엔 문서를 아직 볼 수 있으며 이벤트도 취소 가능합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">확산</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">취소 가능</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 처리기 속성</th>
+   <td>{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>beforeunload</code> 이벤트를 사용하면 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누를 경우 브라우저는 새로운 페이지로 탐색하고, 취소할 경우 탐색을 취소하고 현재 페이지에 머무릅니다.</p>
+
+<p>명세에 따라, 확인 대화 상자를 표시하려면 이벤트의 {{domxref("Event.preventDefault()", "preventDefault()")}}를 호출해야 합니다.</p>
+
+<p>다만, 모든 브라우저가 위의 방법을 지원하는 것은 아니므로 아래의 두 가지 구형 방법을 사용해야 할 수도 있습니다.</p>
+
+<ul>
+ <li>이벤트의 <code>returnValue</code> 속성에 문자열 할당</li>
+ <li>이벤트 처리기에서 문자열 반환</li>
+</ul>
+
+<p>일부 브라우저에서는 확인 대화 상자의 문구를 직접 지정할 수 있었습니다. 그러나 현재 대부분의 브라우저에서는 사용자 지정 문구를 사용하지 않으며 이 동작을 지원하지 않습니다.</p>
+
+<p>원치 않는 팝업을 방지하기 위해, 브라우저는 사용자가 이벤트 발생 전에 현재 페이지와 상호작용을 했을 때만 대화 상자를 표시할 수도 있고, 심지어 아예 표시하지 않을 수도 있습니다.</p>
+
+<p><code>window</code> 또는 <code>document</code>에 <code>beforeunload</code> 이벤트 처리기를 부착하면 페이지가 브라우저의 메모리 내 탐색 캐시에 추가되는 것을 방지합니다.</p>
+
+<p>HTML 명세는 이벤트 처리 중의 {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, 및 {{domxref("window.prompt()")}} 메서드를 무시할 수 있음을 요구합니다. <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts">HTML 명세</a>에서 더 자세한 정보를 확인하세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>HTML 명세에 따르면 개발 시 {{domxref("Event.returnValue")}} 대신 {{domxref("Event.preventDefault()")}} 메서드를 사용해야 합니다. 그러나 모든 브라우저가 이 방법을 지원하는 것은 아닙니다.</p>
+
+<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) =&gt; {
+  // 표준에 따라 기본 동작 방지
+  event.preventDefault();
+  // Chrome에서는 returnValue 설정이 필요함
+  event.returnValue = '';
+});
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.beforeunload_event")}}</p>
+
+<p>{{domxref("WindowEventHandlers.onbeforeunload")}}에서 각각의 브라우저가 beforeunload를 어떻게 처리하는지 자세히 알아보세요.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>관련 이벤트: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li>
+ <li><a href="https://html.spec.whatwg.org/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
+ <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs">Remove Custom Messages in onbeforeload Dialogs after Chrome 51</a></li>
+</ul>
diff --git a/files/ko/web/api/window/cancelanimationframe/index.html b/files/ko/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..51c506a7e3
--- /dev/null
+++ b/files/ko/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,72 @@
+---
+title: window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+tags:
+  - API
+  - DOM
+  - 레퍼런스
+  - 메소드
+  - 실험적
+  - 애니메이션
+  - 윈도우
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>window.cancelAnimationFrame()</strong></code> 메소드는 이전에 {{domxref("window.requestAnimationFrame()")}} 을 호출하여 스케줄된 애니메이션 프레임 요청을 취소합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>requestID</code></dt>
+ <dd>요청된 콜백 {{domxref("window.requestAnimationFrame()")}} 을 호출하여 반환된 ID 값.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: 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 &lt; 2000) {
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+
+cancelAnimationFrame(myReq);
+</pre>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<ul>
+ <li>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li>
+</ul>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/closed/index.html b/files/ko/web/api/window/closed/index.html
new file mode 100644
index 0000000000..4c077bda92
--- /dev/null
+++ b/files/ko/web/api/window/closed/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.closed
+slug: Web/API/Window/closed
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/closed
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>Window.closed</strong></code> 읽기 전용 속성은 참조한 창이 닫혔는지 여부를 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">const <em>isClosed</em> = <em>windowRef</em>.closed;</pre>
+
+<h3 id="값">값</h3>
+
+<p>창이 닫혔으면 <code>true</code>, 그렇지 않으면 <code>false</code>.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="팝업에서_자신을_띄운_창의_URL_바꾸기">팝업에서 자신을 띄운 창의 URL 바꾸기</h3>
+
+<p>다음 예제는 팝업 창에서 자신을 띄운 창의 {{glossary("URL")}}을 바꾸는 예제입니다. URL을 바꾸기 전, 현재 창을 띄운 창의 존재 유무를 {{domxref("window.opener")}} 속성으로 검사하고, <code>closed</code> 속성으로 이미 닫히지는 않았는지도 검사합니다.</p>
+
+<pre class="brush:js notranslate">// Check that an opener exists and is not closed
+if (window.opener &amp;&amp; !window.opener.closed) {
+  window.opener.location.href = 'http://www.mozilla.org';
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 팝업은 자신을 띄운 창에만 접근할 수 있습니다.</p>
+</div>
+
+<h3 id="이전에_열었던_팝업_새로고침">이전에 열었던 팝업 새로고침</h3>
+
+<p>이번 예제의 <code>refreshPopupWindow()</code>는 팝업의 {{domxref("Location.reload", "reload()")}} 메서드를 호출해 데이터를 다시 불러옵니다. 만약 팝업을 아직 열지 않았거나, 사용자가 이미 닫은 경우 새로운 팝업을 띄웁니다.</p>
+
+<pre class="brush: js notranslate">const popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // popupWindow is open, refresh it
+    popupWindow.location.reload(true);
+  } else {
+    // Open a new popup window
+    popupWindow = window.open('popup.html', 'dataWindow');
+  }
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-window-closed', 'window.closed')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/window/confirm/index.html b/files/ko/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..f2895337bd
--- /dev/null
+++ b/files/ko/web/api/window/confirm/index.html
@@ -0,0 +1,76 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p><code><strong>Window.confirm()</strong></code> 메서드는 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자를 띄웁니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em>result</em> = window.confirm(<em>message</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>경고 대화 상자에 표시할 텍스트 문자열.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>확인 (<code>true</code>) 또는 취소 (<code>false</code>) 중 사용자가 선택한 값. 브라우저가 페이지 내 대화 상자를 무시하고 있으면 항상 <code>false</code>입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js notranslate">if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+</pre>
+
+<p>위 코드는 다음 결과를 보입니다.</p>
+
+<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br>
+  </p>
+
+<h2 id="참고">참고</h2>
+
+<p>대화 상자는 모달 창(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)으로, 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 모달 창)를 만드는 함수를 남용하면 안 됩니다. 이 뿐만이 아니더라도, <a href="https://alistapart.com/article/neveruseawarning/">대화 상자로 사용자 확인을 받는 것은 피해야</a> 할 좋은 이유 여럿이 존재합니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.confirm")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.alert()")}}</li>
+ <li>{{domxref("window.prompt()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/console/index.html b/files/ko/web/api/window/console/index.html
new file mode 100644
index 0000000000..baed7caeeb
--- /dev/null
+++ b/files/ko/web/api/window/console/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Window
+  - console
+translation_of: Web/API/Window/console
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Window.console</code></strong> 속성은 브라우저 콘솔에 로그를 남길 수 있는 메서드를 가진 {{domxref("Console")}} 객체의 참조를 반환합니다. 콘솔 메서드는 디버깅 용도로만 사용해야 하며, 엔드유저에게 정보를 제공할 의도를 가져션 안됩니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="콘솔에_로그_남기기">콘솔에 로그 남기기</h3>
+
+<p>다음 코드는 콘솔에 로그 텍스트를 남깁니다.</p>
+
+<pre class="brush: js">console.log("An error occurred while loading the content");
+</pre>
+
+<p>다음 코드는 객체를 콘솔에 출력합니다. 출력 결과를 클릭하면 객체의 필드를 펼쳐볼 수 있습니다.</p>
+
+<pre class="brush: js">console.dir(someObject);</pre>
+
+<p>{{domxref("Console")}} 문서의 <a href="/ko/docs/Web/API/Console#예제">예제</a> 항목에서 더 자세한 예제를 살펴보세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>현재 브라우저간 구현에 많은 차이가 있지만, 하나로 통합하여 서로 보다 일관적으로 만드는 작업이 진행 중입니다.</p>
+</div>
diff --git a/files/ko/web/api/window/crypto/index.html b/files/ko/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..1b43534adc
--- /dev/null
+++ b/files/ko/web/api/window/crypto/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/crypto
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Window.crypto</code></strong>속성은 전역 객체인 {{domxref("Crypto")}} 객체를 반환합니다. <code>Crypto</code> 객체는 웹 페이지가 특정 암호학적 서비스에 접근할 수 있는 경로입니다.</span> <code>crypto</code> 속성 자체는 읽기 전용이지만, 모든 메서드(와 자식 객체 {{domxref("SubtleCrypto")}})의 메서드)는 읽기 전용이 아니므로 {{glossary("polyfill", "폴리필")}}을 통한 공격에 취약합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // for IE 11
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p id="Using_the_domxrefWindow.crypto_property_to_access_the_getRandomValues_method.">다음 예제는 {{domxref("Window.crypto")}} 속성을 통해 {{domxref("Crypto.getRandomValues", "getRandomValues()")}} 메서드에 접근합니다.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">genRandomNumbers = function getRandomNumbers() {
+  var array = new Uint32Array(10);
+  window.crypto.getRandomValues(array);
+
+  var randText = document.getElementById("myRandText");
+  randText.innerHTML = "The random numbers are: "
+  for (var i = 0; i &lt; array.length; i++) {
+    randText.innerHTML += array[i] + " ";
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="myRandText"&gt;The random numbers are: &lt;/p&gt;
+&lt;button type="button" onClick='genRandomNumbers()'&gt;Generate 10 random numbers&lt;/button&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제')}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.crypto")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Window")}} 전역 객체</li>
+ <li>{{domxref("Crypto")}} 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/window/customelements/index.html b/files/ko/web/api/window/customelements/index.html
new file mode 100644
index 0000000000..591cd5bf65
--- /dev/null
+++ b/files/ko/web/api/window/customelements/index.html
@@ -0,0 +1,63 @@
+---
+title: Window.customElements
+slug: Web/API/Window/customElements
+tags:
+  - API
+  - Property
+  - Reference
+  - Web Components
+  - Window
+translation_of: Web/API/Window/customElements
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <strong><code>customElements</code></strong> 읽기 전용 속성은 새로운 사용자 지정 요소를 등록하거나, 이전에 등록한 요소의 정보를 받아올 수 있는 {{domxref("CustomElementRegistry")}} 객체의 참조를 반환합니다.</span></p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<p><code>customElements</code>를 사용하는 가장 흔한 예시는 새로운 요소를 정의하고 등록하기 위해 {{domxref("CustomElementRegistry.define()")}} 메서드에 적용하는 경우입니다.</p>
+
+<pre class="brush: js">let customElementRegistry = window.customElements;
+customElementRegistry.define('my-custom-element', MyCustomElement);</pre>
+
+<p>그러나, 보통은 다음 코드처럼 줄여서 사용하곤 합니다.</p>
+
+<pre class="brush: 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));
+    }
+  }
+);</pre>
+
+<p><a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> 저장소에서 더 많은 사용 예제를 찾아보세요.</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.customElements")}}</p>
+</div>
diff --git a/files/ko/web/api/window/devicepixelratio/index.html b/files/ko/web/api/window/devicepixelratio/index.html
new file mode 100644
index 0000000000..361862dd9e
--- /dev/null
+++ b/files/ko/web/api/window/devicepixelratio/index.html
@@ -0,0 +1,180 @@
+---
+title: Window.devicePixelRatio
+slug: Web/API/Window/devicePixelRatio
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Window
+translation_of: Web/API/Window/devicePixelRatio
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <strong><code>devicePixelRatio</code></strong> 읽기 전용 속성은 현재 표시 장치의 물리적 픽셀과 CSS 픽셀의 비율을 반환합니다.</span> CSS 픽셀의 크기를 물리적 픽셀의 크기로 나눈 값으로 해석해도 됩니다. 또 다른 해석은, 하나의 CSS 픽셀을 그릴 때 사용해야 하는 장치 픽셀의 수라고 할 수 있습니다.</p>
+
+<p><code>devicePixelRatio</code> 속성은 HiDPI/Retina 디스플레이처럼 같은 객체를 그릴 때 더 많은 픽셀을 사용해 보다 선명한 이미지를 표현하는 화면과, 표준 디스플레이의 렌더링 차이에 대응할 때 유용합니다.</p>
+
+<p>{{domxref("window.matchMedia()")}}를 사용하면, 사용자가 창을 드래그 해 디스플레이의 픽셀 밀도가 바뀌는 등의 상황에서 <code>devicePixelRatio</code>가 바뀌는지 알아낼 수 있습니다. 아래의 예제를 참고하세요.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Correcting_resolution_in_a_&lt;canvas>">Correcting resolution in a <code>&lt;canvas&gt;</code></h3>
+
+<p>A {{htmlelement("canvas")}} can appear too blurry on retina screens. Use <code>window.devicePixelRatio</code> to determine how much extra pixel density should be added to allow for a sharper image.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Set display size (css pixels).
+var size = 200;
+canvas.style.width = size + "px";
+canvas.style.height = size + "px";
+
+// Set actual size in memory (scaled to account for extra pixel density).
+var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
+canvas.width = size * scale;
+canvas.height = size * scale;
+
+// Normalize coordinate system to use css pixels.
+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';
+
+var x = size / 2;
+var y = size / 2;
+
+var textString = "I love MDN";
+ctx.fillText(textString, x, y);</pre>
+
+<p><a href="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png"><img alt="This image describe the impact of different value on retina display. " src="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png" style="height: 57px; width: 600px;"></a></p>
+
+<h3 id="Monitoring_screen_resolution_or_zoom_level_changes">Monitoring screen resolution or zoom level changes</h3>
+
+<p>In this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the value of <code>devicePixelRatio</code> to handle any updates we need to.</p>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>The JavaScript code creates the media query that monitors the device resolution and checks the value of <code>devicePixelRatio</code> any time it changes.</p>
+
+<pre class="brush: js">let pixelRatioBox = document.querySelector(".pixel-ratio");
+let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
+
+const updatePixelRatio = () =&gt; {
+  let pr = window.devicePixelRatio;
+  let prString = (pr * 100).toFixed(0);
+  pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
+}
+
+updatePixelRatio();
+
+matchMedia(mqString).addListener(updatePixelRatio);</pre>
+
+<p>The string <code>mqString</code> is set up to be the media query itself. The media query, which begins as <code>(resolution: 1dppx)</code> (for standard displays) or <code>(resolution: 2dppx)</code> (for Retina/HiDPI displays), checks to see if the current display resolution matches a specific number of device dots per <code>px</code>.</p>
+
+<p>The <code>updatePixelRatio()</code> function fetches the current value of <code>devicePixelRatio</code>, then sets the {{domxref("HTMLElement.innerText", "innerText")}} of the element <code>pixelRatioBox</code> to a string which displays the ratio both as a percentage and as a raw decimal value with up to two decimal places.</p>
+
+<p>Then the <code>updatePixelRatio()</code> function is called once to display the starting value, after which the media query is created using {{domxref("Window.matchMedia", "matchMedia()")}} and {{domxref("EventTarget.addEventListener", "addEventListener()")}} is called to set up <code>updatePixelRatio()</code> as a handler for the <code>change</code> event.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The HTML creates the boxes containing the instructions and the <code>pixel-ratio</code> box that will display the current pixel ratio information.</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="inner-container"&gt;
+    &lt;p&gt;This example demonstrates the effect of zooming the page in
+       and out (or moving it to a screen with a different scaling
+       factor) on the value of the property &lt;code&gt;Window.devicePixelRatio&lt;/code&gt;.
+       Try it and watch what happens!&lt;/p&gt;
+  &lt;/div&gt;
+    &lt;div class="pixel-ratio"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<details><summary>
+<h4 id="CSS">CSS</h4>
+</summary>
+
+<pre class="brush: css">body {
+  font: 22px arial, sans-serif;
+}
+
+.container {
+  top: 2em;
+  width: 22em;
+  height: 14em;
+  border: 2px solid #22d;
+  margin: 0 auto;
+  padding: 0;
+  background-color: #a9f;
+}
+
+.inner-container {
+  padding: 1em 2em;
+  text-align: justify;
+  text-justify: auto;
+}
+
+.pixel-ratio {
+  position: relative;
+  margin: auto;
+  height: 1.2em;
+  text-align: right;
+  bottom: 0;
+  right: 1em;
+  font-weight: bold;
+}</pre>
+</details>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Monitoring_screen_resolution_or_zoom_level_changes", "100%", 500)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.devicePixelRatio")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li>
+</ul>
diff --git a/files/ko/web/api/window/document/index.html b/files/ko/web/api/window/document/index.html
new file mode 100644
index 0000000000..1703ac8474
--- /dev/null
+++ b/files/ko/web/api/window/document/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>window.document</code></strong> 속성은 창이 포함한 <a href="/ko/docs/Web/API/Document">문서</a>의 참조를 반환합니다.</span></p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">console.log(window.document.title);
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.document")}}</p>
diff --git a/files/ko/web/api/window/event/index.html b/files/ko/web/api/window/event/index.html
new file mode 100644
index 0000000000..d358167e58
--- /dev/null
+++ b/files/ko/web/api/window/event/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.event
+slug: Web/API/Window/event
+tags:
+  - API
+  - DOM
+  - Event
+  - Property
+  - Read-only
+  - Reference
+  - Window
+  - 이벤트
+translation_of: Web/API/Window/event
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Window")}} 객체의 <strong><code>event</code></strong> 속성은 웹 사이트의 코드가 현재 처리 중인 {{domxref("Event")}}를 반환합니다. 이벤트 처리기 바깥에서는 항상 {{jsxref("undefined")}}입니다.</p>
+
+<p>신규 코드에서는 사용을 피하세요. 대신, 처리기가 매개변수로 받는 {{domxref("Event")}}를 사용해야 합니다. <code>event</code> 속성은 많이 지원되지도 않고, 지원하는 환경에서도 나중에 문제가 발생할 여지를 키웁니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>event</code> 속성이 반환하는 <code>Event</code>가 예상하는 값과 다른 경우가 많습니다. 게다가 {{Glossary("shadow tree", "섀도우 트리")}} 안에서 발생한 이벤트의 경우 정확하지 않습니다.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#ref-for-dom-window-event", "Window.event")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Event.srcElement")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/frameelement/index.html b/files/ko/web/api/window/frameelement/index.html
new file mode 100644
index 0000000000..5652dac1f0
--- /dev/null
+++ b/files/ko/web/api/window/frameelement/index.html
@@ -0,0 +1,61 @@
+---
+title: Window.frameElement
+slug: Web/API/Window/frameElement
+tags:
+  - API
+  - DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/frameElement
+---
+<div>{{ApiRef}}</div>
+
+<p><span class="seoSummary"><code><strong>Window.frameElement</strong></code> 속성은 {{HTMLElement("iframe")}}이나 {{HTMLElement("object")}}처럼 현재 창을 포함한 요소를 반환합니다.</span> 창이 다른 문서에 포함된 것이 아니거나, 문서의 출처가 다른 경우, 즉 창과 해당 문서의 도메인이 서로 다른 경우 {{jsxref("null")}}을 반환합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 속성 이름("frame")과는 달리, {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}를 포함한 모든 포함 지점에서 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: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/';
+}
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.frameElement")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.frames")}}는 현재 창의 모든 자식 프레임을 배열형 객체로 나열합니다.</li>
+ <li>{{domxref("window.parent")}}는 부모 창, 즉 <code>frameElement</code>를 담고 있는 창을 반환합니다.</li>
+</ul>
diff --git a/files/ko/web/api/window/getcomputedstyle/index.html b/files/ko/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..928f2f4b47
--- /dev/null
+++ b/files/ko/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,137 @@
+---
+title: Window.getComputedStyle()
+slug: Web/API/Window/getComputedStyle
+tags:
+  - API
+  - CSSOM View
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/getComputedStyle
+---
+<div>{{APIRef}}</div>
+
+<p class="summary"><span class="seoSummary"><code>Window.getComputedStyle()</code> 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신합니다. 이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값입니다.  개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있습니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
+</pre>
+
+<dl>
+ <dt>element</dt>
+ <dd>속성값을 얻으려하는 {{domxref("Element")}}.</dd>
+ <dt>pseudoElt {{optional_inline}}</dt>
+ <dd>일치시킬 의사요소(<code>pseudo element</code>)를 지정하는 문자열. 보통의 요소들에 대해서는 생략되거나 <code>null</code>이어야 함.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="ko"><span>Gecko 2.0 </span></span>{{geckoRelease("2.0")}} <span lang="ko"><span>이전에는 pseudoElt 매개 변수가 필요했습니다.</span> <span>다른 주요 브라우저에서는 pseudoElt 매개변수의 값이 null 인 경우에는 생략해도 됩니다.</span> <span>Gecko는 다른 브라우저의 동작과 일치하도록 변경되었습니다.</span></span></div>
+
+<p><span id="result_box" lang="ko"><span>반환되는</span> </span><code>style</code><span lang="ko"><span>은 요소의 스타일이 변경 될 때 자동으로 업데이트되는 실시간 {{domxref ( "CSSStyleDeclaration")}} 객체입니다.</span></span></p>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제에서는 간단한 {{htmlelement("div")}} 요소에 CSS스타일을 적용하고, <code>getComputedStyle()</code>를 사용해서 적용된 스타일값을 찾아낸 후에 <code>&lt;div&gt;</code>의 본문으로 출력합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;Hello&lt;/p&gt;</pre>
+
+<pre class="brush: 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;
+}</pre>
+
+<pre class="brush: 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') + '.';</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', '100%', '240px')}}</p>
+
+<h2 id="설명">설명</h2>
+
+<p>메소드의 호출에서 반환되는 객체의 자료형은 요소의 {{domxref("HTMLElement.style", "style")}} 속성에서 반환되는 객체와 동일한 {{domxref("CSSStyleDeclaration")}}형입니다. 그러나 두 객체는 다른 목적을 가지고 있습니다. <code>getComputedStyle</code>에서 반환된 객체는 읽기 전용이며 요소의 (&lt;style&gt; 또는 외부 stylesheet로 설정되는 것도 포함해서) 스타일을 검사하는 데 사용할 수 있습니다. <code><em>elt</em>.style </code>객체는 특정한 요소에 스타일을 설정하는 데 사용해야 합니다.</p>
+
+<p>첫 번째 인수는 요소여야합니다. #text 노드같은 비-요소 노드를 전달하면 오류가 발생합니다. Gecko 1.9.2 {{geckoRelease("1.9.2")}}부터는, 반환되는 URL 값에는 <code>url("http://foo.com/bar.jpg")</code>과 같이 URL 문자열 주위에 따옴표가 있습니다.</p>
+
+<h2 id="defaultView"><code>defaultView</code></h2>
+
+<p>온라인의 많은 코드 샘플중에서, <code>getComputedStyle</code>은 <code>document.defaultView</code>객체에서 사용됩니다만, 대개의 경우에는 <code>getComputedStyle</code>은 <code>window</code>객체에도 존재하므로 <code>document.defaultView</code>객체에서 사용하는 패턴은 필요하지 않습니다. <code>defaultView</code>패턴은 (1) window 스펙을 작성하고 싶지 않은 사람들과 (2) Java에서도 사용할 수있는 API를 만드는 것의 조합이었을 가능성이 큽니다. 그러나 <code>defaultView</code>의 메소드를 사용해야만하는 <a href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">경우</a>가 하나 있습니다. Firefox 3.6을 사용하여 프레임 스타일(framed styles)에 액세스하는 경우입니다.</p>
+
+<h2 id="의사요소_사용하기">의사요소 사용하기</h2>
+
+<p>getComputedStyle은 의사요소(pseudo-elements, <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code>, <a href="http://dev.w3.org/csswg/css3-content/#pseudo-elements">spec</a>참고)에서 스타일 정보를 가져올 수 있습니다.</p>
+
+<pre class="brush: html">&lt;style&gt;
+ h3::after {
+   content: ' rocks!';
+ }
+&lt;/style&gt;
+
+&lt;h3&gt;generated content&lt;/h3&gt;
+
+&lt;script&gt;
+  var h3       = document.querySelector('h3');
+  var result   = getComputedStyle(h3, ':after').content;
+
+  console.log('the generated content is: ', result); // returns ' rocks!'
+&lt;/script&gt;
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>반환되는 {{domxref("CSSStyleDeclaration")}} 객체에는 지원되는 모든 CSS의 본디속성(longhand)명에 대한 활성값을 갖게 됩니다. 예로, 본디속성명 <code>border-bottom-width</code>의 경우를 보면, <code>border-width</code>와 <code>border</code>같은 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties">단축속성명</a>이 사용됩니다. <code>font-size</code>과 같은 본디속성명만을 사용하여 속성값을 질의하는 것이 안전합니다. <code>font</code>같은 단축속성명을 사용하여 질의하는 것은 대부분의 브라우저에서 동작하지 않을 것입니다.</p>
+
+<p>CSS속성 값은 <code>getPropertyValue(propName)</code> API를 사용하거나,  <code>cs[' z-index']</code> 또는 <code>cs.zIndex</code> 같은 방식으로 객체에 직접 인덱싱하여 액세스할 수 있습니다.</p>
+
+<p><code>getComputedStyle</code>에서 반환되는 값들은 {{cssxref("resolved_value", "resolved values")}}라고 합니다. 이 값들은 일반적으로 CSS 2.1 {{cssxref("computed_value","computed values")}}과 같지만, 일부 오래된 속성(<code>width</code>, <code>height</code> 또는 <code>padding</code>)에 대해서는 {{cssxref("used_value","used values")}}입니다. 원래, CSS 2.0에서는 이 computed values를 cascading과 inheritance 후에 "사용준비완료"된 최종값을 의미했습니다. 하지만, CSS 2.1에서는 computed values를 pre-layout으로, used values들은 post-layout으로 재정의했습니다. CSS 2.0 속성들에 대해서는 <code>getComputedStyle</code>은 지금은 <strong>used values</strong>라고 불리는 옛 의미의 computed values를 반환합니다. pre-layout과 post-layout값의 차이를 나타내는 예로서 요소의 width 또는 height(layout이라고도 함)를 나타내는 백분율(퍼센트표시)이 이 있는데, 이 값들은 used value의 경우에만 픽셀(에 상당하는 대체물)로 대체됩니다.</p>
+
+<p>몇 몇 알려진 경우에 대해, 반환값은 의도적으로 부정확한 값을 가집니다. 특히, 소위 CSS History Leak 보안 문제를 피하기 위해 브라우저는 링크에 대해서는 명시적으로 used value에 대해 "거짓말"을 하는데, 사용자가 링크된 사이트를 한번도 방문한 적이 없는 것 처럼 값을 반환합니다. 이것이 어떻게 구현되는 지에 대한 자세한 내용은 <a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a>와 <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a>를 보십시오. 대부분의 최신 브라우저는 의사 선택기 스타일 응용과 <code>getComputedStyle</code>의 반환값에 대해서 유사한 변경 사항을 적용했습니다.</p>
+
+<p>CSS전이 중에 <code>getComputedStyle</code>를 호출하면, Firefox에서는 원래속성값(Original property value)을 반환하지만, WebKit에서는 최종속성값(final property value)을 반환합니다.</p>
+
+<p>Firefox에서는 <code>auto</code>값을 가진 속성들이 <code>auto</code>값이 아니라 used value를 반환합니다. 그래서, <code>height:100px;</code>의 컨테이너 블록 안에 <code>height:30px;</code>의 속성을 가진 요소를 넣고 <code>top:auto;</code>와 <code>bottom:0;</code>를 적용하면, <code>top</code>에 대한 computed style값을 요구할때 Firefox는 <code>100px-30px=70px</code>의 결과로서 <code>top:70px</code>를 반환합니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", "getComputedStyle()")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.getComputedStyle")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.getDefaultComputedStyle")}}</li>
+ <li>{{cssxref("resolved_value", "Resolved Value")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/getselection/index.html b/files/ko/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..c51281b307
--- /dev/null
+++ b/files/ko/web/api/window/getselection/index.html
@@ -0,0 +1,129 @@
+---
+title: Window.getSelection()
+slug: Web/API/Window/getSelection
+translation_of: Web/API/Window/getSelection
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>사용자 또는 Caret의 위치에 따라 선택된 텍스트의 범위를 나타내는 {{domxref("Selection")}} 객체를 반환한다. </p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre>
+
+<ul>
+ <li>selection은 {{domxref("Selection")}} 객체입니다. 빈 문자열("")을 추가하거나 {{domxref("Selection.toString()")}}을 호출하면 선택된 text를 반환합니다.</li>
+</ul>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">function foo() {
+    var selObj = window.getSelection();
+    alert(selObj);
+    var selRange = selObj.getRangeAt(0);
+    // do stuff with the range
+}</pre>
+
+<h2 id="Notes" name="Notes">노트</h2>
+
+<h3 id="Selection_객체의_문자열_표현">Selection 객체의 문자열 표현</h3>
+
+<p>JavaScript에서 문자열을 인자로 받는 함수({{ Domxref("window.alert()") }} 나 {{ Domxref("document.write()") }} 같은)에 객체를 전달하면 해당 객체의 {{jsxref("Object.toString", "toString()")}} 메소드를 호출하고 그 결과를 호출한 함수로 전달합니다. 이를 통해서 실제로는 속성과 메소드를 갖는 문자열이 아닌 일반적인 객체라 하더라도 문자열을 인자로 받는 함수의 인자로 사용할 때에는 객체를 문자열인 것처럼 전달할 수 있습니다.</p>
+
+<p>위 예제에서 selObj를 {{domxref("window.alert()")}}의 인자로 전달하면 <code>selObj.toString()</code>가 자동적으로 호출됩니다. 하지만, selObj에 대해서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code> 나 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code> 같은 JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a>의 속성이나 메소드를 사용하면 객체에 그러한 속성이나 메소드가 없기 때문에 에러나 예상치 못한 결과가 발생합니다. <code>Selection</code> 객체를 문자열로 사용하려면 다음처럼 직접 <code style="font-style: normal;">toString()</code> 메소드를 호출해야 합니다:</p>
+
+<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
+
+<ul>
+ <li><code>selObj</code>는 <code>Selection</code> 객체입니다.</li>
+ <li><code>selectedText</code>는 문자열 (선택한 문자열)입니다.</li>
+</ul>
+
+<h3 id="Related_objects">Related objects</h3>
+
+<p>It's also useful to note that you can call {{domxref("Document.getSelection()")}}, which works identically.</p>
+
+<p>HTML inputs provide simpler helper APIs for working with selection (see {{domxref("HTMLInputElement.setSelectionRange()")}}).</p>
+
+<p>Notice the difference between <em>selection</em> and <em>focus</em>. {{domxref("Document.activeElement")}} returns the focused element.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}</td>
+   <td>{{Spec2("HTML Editing")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Document.getSelection()")}}</li>
+ <li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li>
+ <li>{{domxref("Document.activeElement")}}, {{domxref("HTMLElement.focus()")}}, and {{domxref("HTMLElement.blur()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/history/index.html b/files/ko/web/api/window/history/index.html
new file mode 100644
index 0000000000..1fffa11d9a
--- /dev/null
+++ b/files/ko/web/api/window/history/index.html
@@ -0,0 +1,59 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+tags:
+  - API
+  - HTML DOM
+  - History API
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/history
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>Window</strong>.<strong>history</strong></code> 읽기 전용 속성은 {{domxref("History")}} 객체로의 참조를 반환합니다. History 객체는 브라우저의 세션 기록(현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작할 때 사용합니다.</p>
+
+<p><a href="/ko/docs/Web/API/History_API">History API</a> 문서를 방문해 자세한 정보와 함께 예제를 살펴보세요. 특히, 저 문서는 {{domxref("History.pushState", "pushState()")}}와 {{domxref("History.replaceState", "replaceState()")}} 메서드를 사용하기 전 알아야 할 보안 기능을 설명합니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: js">history.back();     // 뒤로 가기 버튼 클릭과 동일
+history.go(-1);     // history.back()과 동일
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>프레임에 속하지 않은 최상위 페이지의 세션 기록은 브라우저의 뒤로 가기/앞으로 가기 버튼의 드롭다운 메뉴에서도 볼 수 있습니다.</p>
+
+<p>보안상의 문제로, {{domxref("History")}} 객체는 세션 기록 내 다른 페이지의 {{glossary("URL")}}을 알 수 없습니다. 그러나 세션 기록을 탐색하는 것은 할 수 있습니다.</p>
+
+<p>일반 코드에서 세션 기록을 지우거나, 브라우저의 뒤로/앞으로 가기 버튼을 비활성화할 방법은 없습니다. 그나마 가장 근접한 방법은 {{domxref("Location.replace", "location.replace()")}} 메서드로, 세션 기록의 현재 항목을 주어진 URL로 바꿉니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.history")}}</p>
diff --git a/files/ko/web/api/window/index.html b/files/ko/web/api/window/index.html
new file mode 100644
index 0000000000..4ab8a88279
--- /dev/null
+++ b/files/ko/web/api/window/index.html
@@ -0,0 +1,700 @@
+---
+title: Window
+slug: Web/API/Window
+tags:
+  - API
+  - DOM
+  - Interface
+  - JavaScript
+  - Reference
+  - Window
+translation_of: Web/API/Window
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Window</code></strong> 인터페이스는 {{glossary("DOM")}} 문서를 담은 창을 나타냅니다.</span> <code>document</code> 속성이 창에 불러온 <a href="/ko/docs/Web/API/Document">DOM 문서</a>를 가리킵니다. 반대로, 주어진 문서의 창은 {{domxref("document.defaultView")}}를 사용해 접근할 수 있습니다.</p>
+
+<p>JavaScript 코드에 노출된 전역 변수 <code>window</code>는 현재 스크립트가 작동 중인 창을 나타냅니다.</p>
+
+<p><code>Window</code> 인터페이스는 다양한 함수, 이름공간, 객체, 생성자가 머무는 장소입니다. 그 중엔 사용자 인터페이스로서의 창 개념과는 직접 관련되지 않은 것도 존재하며, 대신 전역적으로 접근할 수 있어야 하는 항목에 적합합니다. 많은 수의 항목이 <a href="/ko/docs/Web/JavaScript/Reference">JavaScript 참고서</a>와 <a href="/ko/docs/Web/API/Document_Object_Model">DOM 참고서</a>에 문서화되어 있습니다.</p>
+
+<p>탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 <code>Window</code> 객체로 나타냅니다. 주어진 탭에서 동작 중인 JavaScript 코드의 전역 <code>window</code> 객체는 항상 자신의 탭을 나타냅니다. 그렇지만 {{domxref("Window.resizeTo", "resizeTo()")}}와 {{domxref("Window.innerHeight", "innerHeight")}}처럼, 일부 속성과 메서드는 탭이 아닌 창 전체에 적용됩니다. 보통 탭과 합리적으로는 연관 지을 수 없는 경우 창에 속합니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<p><a href="/ko/docs/Web/API/Document_Object_Model#DOM_인터페이스" title="/en-US/docs/DOM/DOM_Reference">DOM 인터페이스</a>도 참고하세요.</p>
+
+<dl>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd><code>DOMParser</code>는 문자열에 저장한 XML 또는 HTML 소스 코드를 DOM {{domxref("Document")}}로 구문 분석할 수 있습니다. <code>DOMParser</code>는 <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a> 명세의 일부입니다.</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>{{domxref("HTMLImageElement")}}를 생성할 때 사용합니다.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>{{domxref("HTMLOptionElement")}}를 생성할 때 사용합니다.</dd>
+ <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt>
+ <dd>{{domxref('StaticRange')}} 객체를 생성하는 {{domxref('StaticRange.StaticRange','StaticRange()')}} 생성자를 반환합니다.</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd><a href="/ko/docs/Web/API/Web_Workers_API/Using_web_workers">Web Worker</a> 생성에 사용합니다.</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>DOM 트리를 XML 또는 HTML 소스로 변환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p>{{domxref("EventTarget")}}의 속성을 상속하고, {{domxref("WindowOrWorkerGlobalScope")}}와 {{domxref("WindowEventHandlers")}} 믹스인의 속성을 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("Window.closed")}} {{readOnlyInline}}</dt>
+ <dd>현재 창이 닫혔는지 나타냅니다.</dd>
+ <dt>{{domxref("Window.console")}} {{readOnlyInline}}</dt>
+ <dd>브라우저 디버깅 콘솔에 접근할 수 있는 콘솔 객체를 반환합니다.</dd>
+ <dt>{{domxref("Window.controllers")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt>
+ <dd>현재 크롬 창의 XUL 컨트롤러 객체를 반환합니다.</dd>
+ <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt>
+ <dd>새로운 사용자 지정 요소를 등록하거나, 이전에 등록한 요소에 대한 정보를 얻을 수 있는 {{domxref("CustomElementRegistry")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>브라우저 암호화 객체를 반환합니다.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{ReadOnlyInline}}</dt>
+ <dd>현재 화면에서의 물리적 픽셀과 CSS 픽셀의 비율을 반환합니다.</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>창이 포함하는 문서로의 참조를 반환합니다.</dd>
+ <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd>
+ <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd>
+ <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd>
+ <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd>
+ <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd>
+ <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd>
+ <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd>
+ <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>이 창을 삽입했을 때 사용한 요소를 반환합니다. 창이 문서 내에 삽입된 것이 아니면 {{jsxref("null")}}을 반환합니다.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>현재 창의 하위 프레임을 배열로 반환합니다.</dd>
+ <dt>{{domxref("Window.fullScreen")}}</dt>
+ <dd>현재 창을 전체 화면으로 보여주고 있는지 나타냅니다.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the history object.</dd>
+ <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd>
+ <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Indicates whether a context is capable of using features that require secure contexts.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}}</dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.messageManager")}}</dt>
+ <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Gets/sets the name of the window.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>현재 창을 열었던 다른 창의 참조를 반환합니다.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>브라우저 창 외곽 높이를 반환합니다.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>브라우저 창 외곽 너비를 반환합니다.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+ <dt>{{domxref("Window.screenX")}} and {{domxref("Window.screenLeft")}} {{readOnlyInline}}</dt>
+ <dd>Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} and {{domxref("Window.screenTop")}} {{readOnlyInline}}</dt>
+ <dd>Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}}</dt>
+ <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>, <code>window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd>
+</dl>
+
+<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Deprecated_properties">Deprecated properties</h3>
+
+<dl>
+ <dt>{{domxref("Window.content")}} and <code>Window._content</code> {{Non-standard_inline}} {{deprecated_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{deprecated_inline}}</dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{deprecated_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{deprecated_inline}}</dt>
+ <dd>Synonym of {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Multiple storage objects that were used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.orientation")}} {{readOnlyInline}} {{deprecated_inline}}</dt>
+ <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{deprecated_inline}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{deprecated_inline}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+</dl>
+</div>
+
+<h2 id="메서드">메서드</h2>
+
+<p>{{domxref("EventTarget")}}의 메서드를 상속하고, {{domxref("WindowOrWorkerGlobalScope")}}와 {{domxref("WindowEventHandlers")}} 믹스인의 메서드를 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>경고 대화 상자를 표시합니다.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.matchMedia()")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.postMessage()")}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables the scheduling of tasks during a browser's idle periods.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt>
+ <dd>Toggles a user's ability to resize a window.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Removes an event listener from the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="deprecated_methods">deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Moves back one in the window history. This method is deprecated; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Moves the window one document forward in the history. This method is deprecated; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd>
+ <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Displays a modal dialog.</dd>
+</dl>
+</div>
+
+<h2 id="이벤트_처리기">이벤트 처리기</h2>
+
+<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}}</dt>
+ <dd>Called if accelerometer detects a change (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}}</dt>
+ <dd>Called when the orientation is changed (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}}</dt>
+ <dd>An event handler property for any device orientation changes.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd>
+</dl>
+
+<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Called after the window loses focus, such as due to a popup.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Called after the ANY mouse button is pressed &amp; released</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Called when a double click is made with ANY mouse button.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Called after the window is closed</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Called when the RIGHT mouse button is pressed</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Called when the value of an &lt;input&gt; element changes</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Called when ANY mouse button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Called continously when the mouse is moved inside the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Called when the pointer leaves the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Called when the pointer enters the window</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Called when ANY mouse button is released</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Called when network connection is lost. See {{event("offline")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Called when network connection is established. See {{event("online")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Called when a back button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Called when a form is reset</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Called continuously as you are resizing the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Called when the mouse wheel is rotated around any axis</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Called after text in an input field is selected</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Called when a form is submitted</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Called when the user navigates away from the page.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt>{{domxref("Window/error_event", "error")}}</dt>
+ <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd>
+ <dt>{{domxref("Window/languagechange_event", "languagechange")}}</dt>
+ <dd>Fired at the global scope object when the user's preferred language changes.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> property.</dd>
+ <dt>{{domxref("Window/orientationchange_event", "orientationchange")}}</dt>
+ <dd>Fired when the orientation of the device has changed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/Window/onorientationchange">onorientationchange</a></code> property.</dd>
+ <dt>{{domxref("Window/devicemotion_event", "devicemotion")}}</dt>
+ <dd>Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.</dd>
+ <dt>{{domxref("Window/deviceorientation_event", "deviceorientation")}}</dt>
+ <dd>Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.</dd>
+ <dt>{{domxref("Document/defaultView/resize_event", "resize")}}</dt>
+ <dd>Fired when the window has been resized.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onresize">onresize</a></code> property.</dd>
+ <dt>{{domxref("Document/defaultView/storage_event", "storage")}}</dt>
+ <dd>Fired when a storage area (<code>localStorage</code> or <code>sessionStorage</code>) has been modified in the context of another document.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> property.</dd>
+</dl>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<dl>
+ <dt>{{domxref("Window/animationcancel_event", "animationcancel")}}</dt>
+ <dd>Fired when an animation unexpectedly aborts.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> property.</dd>
+ <dt>{{domxref("Window/animationend_event", "animationend")}}</dt>
+ <dd>Fired when an animation has completed normally.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code> property.</dd>
+ <dt>{{domxref("Window/animationiteration_event", "animationiteration")}}</dt>
+ <dd>Fired when an animation iteration has completed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code> property.</dd>
+ <dt>{{domxref("Window/animationstart_event", "animationstart")}}</dt>
+ <dd>Fired when an animation starts.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code> property.</dd>
+</dl>
+
+<h3 id="Clipboard_events">Clipboard events</h3>
+
+<dl>
+ <dt>{{domxref("Window/clipboardchange_event", "clipboardchange")}}</dt>
+ <dd>Fired when the system clipboard content changes.</dd>
+ <dt>{{domxref("Window/copy_event", "copy")}}</dt>
+ <dd>Fired when the user initiates a copy action through the browser's user interface.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a> property.</dd>
+ <dt>{{domxref("Window/cut_event", "cut")}}</dt>
+ <dd>Fired when the user initiates a cut action through the browser's user interface.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a> property.</dd>
+ <dt>{{domxref("Window/paste_event", "paste")}}</dt>
+ <dd>Fired when the user initiates a paste action through the browser's user interface.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a> property.</dd>
+</dl>
+
+<h3 id="Connection_events">Connection events</h3>
+
+<dl>
+ <dt>{{domxref("Window/offline_event", "offline")}}</dt>
+ <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> has switched to <code>false</code>.<br>
+ Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} property.</dd>
+ <dt>{{domxref("Window/online_event", "online ")}}<code><a href="/en-US/docs/Web/API/Window/online_event"> </a></code></dt>
+ <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> has switched to <code>true</code>.<br>
+ Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} property.</dd>
+</dl>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<dl>
+ <dt>{{domxref("Window/blur_event", "blur")}}</dt>
+ <dd>Fired when an element has lost focus.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a> property.</dd>
+ <dt>{{domxref("Window/focus_event", "focus")}}</dt>
+ <dd>Fired when an element has gained focus.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a> property</dd>
+</dl>
+
+<h3 id="Gamepad_events">Gamepad events</h3>
+
+<dl>
+ <dt>{{domxref("Window/gamepadconnected_event", "gamepadconnected")}}</dt>
+ <dd>Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepadconnected">ongamepadconnected</a></code> property.</dd>
+ <dt>{{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}}</dt>
+ <dd>Fired when the browser detects that a gamepad has been disconnected.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepaddisconnected">ongamepaddisconnected</a></code> property</dd>
+</dl>
+
+<h3 id="History_events">History events</h3>
+
+<dl>
+ <dt>{{domxref("Window/hashchange_event", "hashchange")}}</dt>
+ <dd>Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the <code>#</code> symbol).<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">onhashchange</a></code> property.</dd>
+ <dt>{{domxref("Window/pagehide_event", "pagehide")}}</dt>
+ <dd>Sent when the browser hides the current document while in the process of switching to displaying in its place a different document from the session's history. This happens, for example, when the user clicks the Back button or when they click the Forward button to move ahead in session history.<br>
+ Also available through the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code> event handler property.</dd>
+ <dt>{{domxref("Window/pageshow_event", "pageshow")}}</dt>
+ <dd>Sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab.<br>
+ Also available using the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code> event handler property.</dd>
+ <dt>{{domxref("Window/popstate_event", "popstate")}}</dt>
+ <dd>Fired when the active history entry changes.<br>
+ Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a></code> event handler property.</dd>
+</dl>
+
+<h3 id="Load_unload_events">Load &amp; unload events</h3>
+
+<dl>
+ <dt>{{domxref("Window/beforeunload_event", "beforeunload")}}</dt>
+ <dd>Fired when the window, the document and its resources are about to be unloaded.<br>
+ Also available via the {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} property.</dd>
+ <dt>{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</dt>
+ <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd>
+ <dt>{{domxref("Window/load_event", "load")}}</dt>
+ <dd>Fired when the whole page has loaded, including all dependent resources such as stylesheets images.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onload", "onload")}} property.</dd>
+ <dt>{{domxref("Window/unload_event", "unload")}}</dt>
+ <dd>Fired when the document or a child resource is being unloaded.<br>
+ Also available via the {{domxref("WindowEventHandlers/onunload", "onunload")}} property.</dd>
+</dl>
+
+<h3 id="Manifest_events">Manifest events</h3>
+
+<dl>
+ <dt>{{domxref("Window/appinstalled_event", "appinstalled")}}</dt>
+ <dd>Fired when the browser has successfully installed a page as an application.<br>
+ Also available via the {{domxref("Window/onappinstalled", "onappinstalled")}} property.</dd>
+ <dt>{{domxref("Window/beforeinstallprompt_event", "beforeinstallprompt")}}</dt>
+ <dd>Fired when a user is about to be prompted to install a web application.<br>
+ Also available via the {{domxref("Window/onbeforeinstallprompt", "onbeforeinstallprompt")}} property.</dd>
+</dl>
+
+<h3 id="Messaging_events">Messaging events</h3>
+
+<dl>
+ <dt>{{domxref("Window/message_event", "message")}}</dt>
+ <dd>Fired when the window receives a message, for example from a call to {{domxref("Window/postMessage", "Window.postMessage()")}} from another browsing context.<br>
+ Also available via the {{domxref("WindowEventHandlers/onmessage", "onmessage")}} property.</dd>
+ <dt>{{domxref("Window/messageerror_event", "messageerror")}}</dt>
+ <dd>Fired when a <code>Window</code> object receives a message that can't be deserialized.<br>
+ Also available via the {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} property.</dd>
+</dl>
+
+<h3 id="Print_events">Print events</h3>
+
+<dl>
+ <dt>{{domxref("Window/afterprint_event", "afterprint")}}</dt>
+ <dd>Fired after the associated document has started printing or the print preview has been closed.<br>
+ Also available via the {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} property.</dd>
+ <dt>{{domxref("Window/beforeprint_event", "beforeprint")}}</dt>
+ <dd>Fired when the associated document is about to be printed or previewed for printing.<br>
+ Also available via the {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} property.</dd>
+</dl>
+
+<h3 id="Promise_rejection_events">Promise rejection events</h3>
+
+<dl>
+ <dt>{{domxref("Window/rejectionhandled_event", "rejectionhandled")}}</dt>
+ <dd>Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.<br>
+ Also available through the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code> event handler property.</dd>
+ <dt>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</dt>
+ <dd>Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.<br>
+ Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code> event handler property.</dd>
+</dl>
+
+<h3 id="Transition_events">Transition events</h3>
+
+<dl>
+ <dt>{{domxref("Window/transitioncancel_event", "transitioncancel")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code> property.</dd>
+ <dt>{{domxref("Window/transitionend_event", "transitionend")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> property.</dd>
+ <dt>{{domxref("Window/transitionrun_event", "transitionrun")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionrun</a></code> property.</dd>
+ <dt>{{domxref("Window/transitionstart_event", "transitionstart")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart">ontransitionstart</a></code> property.</dd>
+</dl>
+
+<h3 id="WebVR_events">WebVR events</h3>
+
+<dl>
+ <dt>{{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}}</dt>
+ <dd>Fired when a VR display becomes available to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.<br>
+ Also available via the {{domxref("Window/onvrdisplayactivate", "onvrdisplayactivate")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayblur_event", "vrdisplayblur")}}</dt>
+ <dd>Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.<br>
+ Also available via the {{domxref("Window/onvrdisplayblur", "onvrdisplayblur")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}}</dt>
+ <dd>Fired when a compatible VR display is connected to the computer.<br>
+ Also available via the {{domxref("Window/onvrdisplayconnect", "onvrdisplayconnect")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}}</dt>
+ <dd>Fired when a VR display can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.<br>
+ Also available via the {{domxref("Window/onvrdisplaydeactivate", "onvrdisplaydeactivate")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}}</dt>
+ <dd>Fired when a compatible VR display is disconnected from the computer.<br>
+ Also available via the {{domxref("Window/onvrdisplaydisconnect", "onvrdisplaydisconnect")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayfocus_event", "vrdisplayfocus")}}</dt>
+ <dd>Fired when presentation to a VR display has resumed after being blurred.<br>
+ Also available via the {{domxref("Window/onvrdisplayfocus", "onvrdisplayfocus")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}}</dt>
+ <dd>Fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.<br>
+ Also available via the {{domxref("Window/onvrdisplaypresentchange", "onvrdisplaypresentchange")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaypointerrestricted_event", "vrdisplaypointerrestricted")}}</dt>
+ <dd>Fired when the VR display's pointer input is restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br>
+ Also available via the {{domxref("Window/onvrdisplaypointerrestricted", "onvrdisplaypointerrestricted")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaypointerunrestricted_event", "vrdisplaypointerunrestricted")}}</dt>
+ <dd>Fired when the VR display's pointer input is no longer restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br>
+ Also available via the {{domxref("Window/onvrdisplaypointerunrestricted", "onvrdisplaypointerunrestricted")}} property.</dd>
+</dl>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<p><a href="/ko/docs/Web/API/Document_Object_Model#DOM_인터페이스" title="/en-US/docs/DOM/DOM_Reference">DOM 인터페이스</a>를 참고하세요.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window")}}</p>
diff --git a/files/ko/web/api/window/innerwidth/index.html b/files/ko/web/api/window/innerwidth/index.html
new file mode 100644
index 0000000000..129b4a9347
--- /dev/null
+++ b/files/ko/web/api/window/innerwidth/index.html
@@ -0,0 +1,78 @@
+---
+title: Window.innerWidth
+slug: Web/API/Window/innerWidth
+tags:
+  - API
+  - Property
+  - Reference
+translation_of: Web/API/Window/innerWidth
+---
+<p>{{APIRef}}<br>
+ 브라우저 윈도우의 뷰포트 너비로, 수직 스크롤바가 존재한다면 포함합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p> </p>
+
+<pre>var <var>intViewportWidth</var> = window.innerWidth;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><strong><var>intViewportWidth</var></strong> stores the <code>window.innerWidth</code> property value.</p>
+
+<p>The <code>window.innerWidth</code> property is read only; it has no default value.</p>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p>innerWidth 값은 window, frame, frameset이나 다른 윈도우들처럼 모든 window 형식의 객체에서 사용할 수 있습니다.</p>
+
+<p>There is <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7" title="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">an algorithm</a> to obtain the width of the viewport excluding, if rendered, the vertical scrollbar.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// 다음과 같이 뷰포트의 폭을 받아올 수 있습니다.
+var intFrameWidth = window.innerWidth;
+
+// 다음과 같이 frameset 안의 어떤 frame의 뷰포트 폭을 받아올 수 있습니다.
+var intFrameWidth = self.innerWidth;
+
+// 다음과 같이 가장 가까운 frameset의 뷰포트 폭을 받아올 수 있습니다.
+var intFramesetWidth = parent.innerWidth;
+
+// 다음과 같이 가장 바깥쪽 프레임셋의 뷰포트 폭을 받아올 수 있습니다.
+var intOuterFramesetWidth = top.innerWidth;</pre>
+
+<p>윈도우의 사이즈를 변경하려면, {{domxref("window.resizeBy")}} 또는 {{domxref("window.resizeTo")}}를 참조하세요.</p>
+
+<h2 id="Standards_information" name="Standards_information">명세</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Window.innerWidth")}}</p>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<ul>
+ <li>{{domxref("window.outerWidth")}}</li>
+ <li>{{domxref("window.innerHeight")}}</li>
+ <li>{{domxref("window.outerHeight")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/length/index.html b/files/ko/web/api/window/length/index.html
new file mode 100644
index 0000000000..b2d61b92af
--- /dev/null
+++ b/files/ko/web/api/window/length/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.length
+slug: Web/API/Window/length
+translation_of: Web/API/Window/length
+---
+<div>{{ ApiRef() }}</div>
+
+<p>window의 frame 개수를 반환합니다. ({{HTMLElement("frame")}} 또는 {{HTMLElement("iframe")}} 요소들 중 하나) </p>
+
+<h2 id="신텍스">신텍스</h2>
+
+<pre class="syntaxbox"><em>framesCount</em> = window.length;
+</pre>
+
+<ul>
+ <li><code>framesCount</code> 는 frame의 개수이다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">if (window.length) {
+  // document의 subframes
+}</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.length")}}</p>
diff --git a/files/ko/web/api/window/localstorage/index.html b/files/ko/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..328650bb16
--- /dev/null
+++ b/files/ko/web/api/window/localstorage/index.html
@@ -0,0 +1,92 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Storage
+  - Web Storage
+  - Window
+  - WindowLocalStorage
+  - 로컬스토리지
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p><span class="seoSummary"><code><strong>localStorage</strong></code><strong> </strong>읽기 전용 속성을 사용하면 {{domxref("Document")}} {{glossary("origin", "출처")}}의 {{domxref("Storage")}} 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.</span> <code>localStorage</code>는 {{domxref("Window.sessionStorage", "sessionStorage")}}와 비슷하지만, <code>localStorage</code>의 데이터는 만료되지 않고 <code>sessionStorage</code>의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 <code>localStorage</code> 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)</p>
+
+<p><code>localStorage</code>에 저장한 자료는 <strong>페이지 프로토콜별로 구분</strong>합니다. 특히 HTTP(<a href="http://example.com">http://example.com</a>)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(<a href="https://example.com">https://example.com</a>)와는 다른 <code>localStorage</code>에 저장됩니다.</p>
+
+<p>키와 값은 <u>항상</u> 각 문자에 2바이트를 할당하는 UTF-16 {{domxref("DOMString")}}의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="notranslate"><em>myStorage</em> = <em>window</em>.localStorage;</pre>
+
+<h3 id="값">값</h3>
+
+<p>현재 {{glossary("origin", "출처")}}의 로컬 저장 공간에 접근할 수 있는 {{domxref("Storage")}} 객체.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>요청이 정책의 결정을 위반했거나, 출처가 <a href="/ko/docs/Web/Security/Same-origin_policy#출처의_정의">유효한 스킴/호스트/포트 튜플</a>이 아닌 경우. 유효하지 않은 튜플은 출처가 <code>file:</code>이나 <code>data:</code> 스킴을 사용했을 때 발생할 수 있습니다. 예외의 예를 들자면 사용자가 특정 출처의 지속성 데이터를 거부하도록 브라우저를 설정하는 경우가 있습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 코드는 현재 도메인의 로컬 {{domxref("Storage")}} 객체에 접근한 후, {{domxref("Storage.setItem()")}}을 사용해 항목 하나를 추가합니다.</p>
+
+<pre class="brush: js notranslate">localStorage.setItem('myCat', 'Tom');
+</pre>
+
+<p>위에서 추가한 <code>localStorage</code> 항목을 읽는 법은 다음과 같습니다.</p>
+
+<pre class="brush: js notranslate">const cat = localStorage.getItem('myCat');</pre>
+
+<p>그리고 제거는 아래와 같습니다.</p>
+
+<pre class="brush: js notranslate">localStorage.removeItem('myCat');</pre>
+
+<p><code>localStorage</code> 항목의 전체 제거 구문입니다.</p>
+
+<pre class="brush: js notranslate">localStorage.clear();
+</pre>
+
+<div class="blockIndicator note">
+<p>참고: <a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a> 문서에서 전체 예제를 살펴보세요.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></li>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Local_storage">Local storage with Window.localStorage</a></li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/location/index.html b/files/ko/web/api/window/location/index.html
new file mode 100644
index 0000000000..702857e02e
--- /dev/null
+++ b/files/ko/web/api/window/location/index.html
@@ -0,0 +1,213 @@
+---
+title: Window.location
+slug: Web/API/Window/location
+tags:
+  - API
+  - HTML
+  - Window
+  - 레퍼런스
+translation_of: Web/API/Window/location
+---
+<p>{{APIRef}}</p>
+
+<p><strong><code>Window.location</code></strong> 프로퍼티에 접근하면 읽기 전용인 {{domxref("Location")}} 오브젝트를 얻어올 수 있습니다. 이는 현재 도큐먼트의 로케이션에 대한 정보를 담고 있습니다.</p>
+
+<p>Though <code>Window.location</code> is a <em>read-only</em> <code>Location</code> object, you can also assign a {{domxref("DOMString")}} to it. This means that you can work with <code>location</code> as if it were a string in most cases: <code>location = 'http://www.example.com'</code> is a synonym of <code>location.href = 'http://www.example.com'</code>.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox">var <em>oldLocation</em> = location;
+location = <em>newLocation</em>;
+</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="Basic_Example">Basic Example</h3>
+
+<pre class="brush: js">alert(location); // alerts "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"</pre>
+
+<h3 id="예제_1_새_페이지로_이동하기">예제 #1: 새 페이지로 이동하기</h3>
+
+<p>Whenever a new value is assigned to the location object, a document will be loaded using the URL as if <code>location.assign()</code> had been called with the modified URL. Note that security settings, like CORS, may prevent this to effectively happen.</p>
+
+<pre class="brush: js">location.assign("http://www.mozilla.org"); // 또는
+location = "http://www.mozilla.org";
+</pre>
+
+<h3 id="예제_2_서버로부터_현재_페이지_강제로_다시_로드하기">예제 #2: 서버로부터 현재 페이지 강제로 다시 로드하기</h3>
+
+<pre class="brush: js">location.reload(true);</pre>
+
+<h3 id="예제_3">예제 #3</h3>
+
+<p>Consider the following example, which will reload the page by using the <a href="/en-US/docs/Web/API/Location.replace"><code>replace()</code></a> method to insert the value of <code>location.pathname</code> into the hash:</p>
+
+<pre class="brush: js">function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The example above works in situations where <code>location.hash</code> does not need to be retained. However, in Gecko-based browsers, setting <code>location.pathname</code> in this manner will erase any information in <code>location.hash</code>, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the hash. If you need to change pathname but keep the hash as is, use the <code>replace()</code> method instead, which should work consistently across browsers.</div>
+
+<h3 id="예제_4_Display_the_properties_of_the_current_URL_in_an_alert_dialog">예제 #4: Display the properties of the current URL in an alert dialog:</h3>
+
+<pre class="brush: js">function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// in html: &lt;button onclick="showLoc();"&gt;Show location properties&lt;/button&gt;
+</pre>
+
+<h3 id="예제_5_Send_a_string_of_data_to_the_server_by_modifying_the_search_property">예제 #5: Send a string of data to the server by modifying the <code>search</code> property:</h3>
+
+<pre class="brush: js">function sendData (sData) {
+  location.search = sData;
+}
+
+// in html: &lt;button onclick="sendData('Some data');"&gt;Send data&lt;/button&gt;
+</pre>
+
+<p>The current URL with "?Some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).</p>
+
+<h3 id="예제_6_Using_bookmarks_without_changing_the_hash_property">예제 #6: Using bookmarks without changing the <code>hash</code> property:</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"/&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script&gt;
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+&lt;/script&gt;
+&lt;style&gt;
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
+&lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Go to bookmark #2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+&lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
+&lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
+&lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
+&lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Go to bookmark #1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Go to bookmark #1 without using location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Go to bookmark #3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
+&lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
+&lt;p id="myBookmark3"&gt;&lt;em&gt;Here is the bookmark #3&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
+&lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
+&lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
+&lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
+&lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
+&lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
+&lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
+&lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
+&lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
+&lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div class="note"><strong>Note:</strong> The function <code>showNode</code> is also an example of the use of the <code><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></code> cycle without a <code>statement</code> section. In this case <strong>a semicolon is always put immediately after the declaration of the cycle</strong>.</div>
+
+<p>아래는 같은 역할을 하지만, 애니메이션 스크롤이 들어간 버전…:</p>
+
+<pre class="brush: js">var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Window.location")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>The interface of the returned value, {{domxref("Location")}}.</li>
+ <li>A similar information, but attached to the document, {{domxref("Document.location")}}.</li>
+ <li><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+</ul>
diff --git a/files/ko/web/api/window/matchmedia/index.html b/files/ko/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..224edecbd1
--- /dev/null
+++ b/files/ko/web/api/window/matchmedia/index.html
@@ -0,0 +1,77 @@
+---
+title: Window.matchMedia()
+slug: Web/API/Window/matchMedia
+tags:
+  - API
+  - CSSOM View
+  - JavaScript
+  - Media Queries
+  - Method
+  - Reference
+translation_of: Web/API/Window/matchMedia
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Window.matchMedia()</code></strong> 메서드는 주어진 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a> 문자열의 분석 결과를 나타내는 {{domxref("MediaQueryList")}} 객체를 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">window.matchMedia(<em>mediaQueryString</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>mediaQueryString</code></dt>
+ <dd>분석할 미디어 쿼리를 나타내는 문자열.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 미디어 쿼리에 대한 {{domxref("MediaQueryList")}} 객체,</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>다음 예제는 화면이 매우 좁을 때 다른 작업을 수행합니다.</p>
+
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* 뷰포트 너비가 400 픽셀 이상 */
+} else {
+  /* 뷰포트 너비가 400 픽셀 미만 */
+}
+</pre>
+
+<p>더 많은 예제는 <a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries programmatically</a>를 참고하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.matchMedia")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리 사용하기</a></li>
+ <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/name/index.html b/files/ko/web/api/window/name/index.html
new file mode 100644
index 0000000000..54228c7183
--- /dev/null
+++ b/files/ko/web/api/window/name/index.html
@@ -0,0 +1,32 @@
+---
+title: Window.name
+slug: Web/API/Window/name
+tags:
+  - 참고
+  - 창
+translation_of: Web/API/Window/name
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>창의 이름을 얻거나/설정합니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><var>string</var> = window.name;
+window.name = <var>string</var>;
+</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">window.name = "lab_view";
+</pre>
+
+<h2 id="Notes" name="Notes">설명</h2>
+
+<p>창의 이름은 주로 하이퍼링크나 폼의 target으로 설정됩니다. 그외엔, 창은 이름을 가지는 것을 거의 필요로 하지 않습니다.</p>
+
+<p>또한 몇몇 프레임워크에서 창의 이름은 cross-domain messaging을 제공하기 위해 사용됩니다. (예를 들면, <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> 과 Dojo's <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a>) 좀더 보안을 생각한다면 JSONP로 대체 될 수 있습니다. 하지만 최근 의 웹어플리케이션이 호스팅하는 민감한 데이터들은 cross-domain messaging을 이용하기 위해서 <code>window.name</code>에 의존해서는 안되며, 대신 <a href="/en-US/docs/Web/API/Window/postMessage">postMessage API</a>를 이용하는 방법이 있습니다.</p>
+
+<p><code>window.name</code>은 <code>toString</code> 메소드를 이용해 모든 값을 문자열로 변환합니다.</p>
diff --git a/files/ko/web/api/window/navigator/index.html b/files/ko/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..2c37903789
--- /dev/null
+++ b/files/ko/web/api/window/navigator/index.html
@@ -0,0 +1,44 @@
+---
+title: Window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - API
+  - DOM
+  - Property
+  - Read-only
+  - Reference
+  - Window
+translation_of: Web/API/Window/navigator
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Window.navigator</code></strong> 읽기 전용 속성은 스크립트를 구동 중인 애플리케이션에 대한 메서드와 속성을 가진 {{domxref("Navigator")}} 객체의 참조를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>navigatorObject</em> = window.navigator</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.navigator")}}</p>
diff --git a/files/ko/web/api/window/open/index.html b/files/ko/web/api/window/open/index.html
new file mode 100644
index 0000000000..eefa823c08
--- /dev/null
+++ b/files/ko/web/api/window/open/index.html
@@ -0,0 +1,665 @@
+---
+title: Window.open()
+slug: Web/API/Window/open
+translation_of: Web/API/Window/open
+---
+<div>{{APIRef}}</div>
+
+<p> {{domxref("Window")}} 인터페이스인 <strong><code>open()</code></strong> 메써드는 명시된 리소스를 명시된 이름으로 브라우징 컨텍스트(윈도우, {{HTMLElement("iframe")}} 또는 탭)에 로드한다. 이름이 없다면 새 윈도우가 열리고 이 윈도우의 브라우징 컨텍스트에 명시된 리소스가 열린다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>var <em>window</em> = window.open(<em>url</em>, <em>windowName</em>, [<var>windowFeatures</var>]);</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>A {{domxref("DOMString")}} indicating the URL of the resource to be loaded. This can be a path or URL to an HTML page, image file, or any other resource which is supported by the browser. If the empty string ("") is specified as <code>url</code>, a blank page is opened into the targeted browsing context.</dd>
+ <dt><code>windowName</code></dt>
+ <dd>A {{domxref("DOMString")}} specifying the name of the browsing context (window, {{HTMLElement("iframe")}} or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by <code>windowName</code>. This name can then be used as the target of links and forms by specifying it as the <code>target</code> attribute of {{HTMLElement("a")}} or {{HTMLElement("form")}} elements. The name should not contain whitespace. Keep in mind that this will <em>not</em> be used as the window's displayed title.<br>
+ If the string is empty, the browser will create a new window every time (this behaviour doesn't work when the string is replaced with NULL).</dd>
+ <dt><code>windowFeatures</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("DOMString")}} containing a comma-separated list of window features given with their corresponding values in the form "name=value". These features include options such as the window's default size and position, whether or not to include scroll bars, and so forth. There must be no whitespace in the string. See {{anch("Window features")}} below for documentation of each of the features that can be specified.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("Window")}} object representing to the newly created window. If the window couldn't be opened, the returned value is instead <code>null</code>. The returned <code>Window</code> reference can be used to access properties and methods of the new window as long as it complies with <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a> security requirements.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>The <code>open()</code> method creates a new secondary browser window, similar to choosing New Window from the File menu. The <code>strUrl</code> parameter specifies the URL to be fetched and loaded in the new window. If <code>strUrl</code> is an empty string, then a new blank, empty window (URL <code>about:blank</code>) is created with the default toolbars of the main window.</p>
+
+<p>Note that remote URLs won't load immediately. When <code>window.open()</code> returns, the window always contains <code>about:blank</code>. The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:js">var windowObjectReference;
+var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
+
+function openRequestedPopup() {
+  windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures);
+}</pre>
+
+<pre class="brush:js">var windowObjectReference;
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImageFile.png",
+    "DescriptiveWindowName",
+    "resizable,scrollbars,status"
+  );
+}</pre>
+
+<p>If a window with the name already exists, then <code>strUrl</code> is loaded into the <em>existing</em> window. In this case the return value of the method is the existing window and <code>strWindowFeatures</code> is ignored. Providing an empty string for <code>strUrl</code> is a way to get a reference to an open window by its name without changing the window's location. To open a <em>new</em> window on every call of <code>window.open()</code>, use the special value <code>_blank</code> for <code>strWindowName</code>.</p>
+
+<div class="note">
+<p><a href="#Note_on_use_of_window_open" id="Note_on_use_of_window_open">Note on the use of window.open to reopen an existing window</a> with name <code>strWindowName</code> : This functionality is not valid for all browsers and more with variable conditions. Firefox (50.0.1) functions as described: from the same domain+port reopen with same name will access the previously created window. Google Chrome (55.0.2883.87 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener"). This is a wide limitation and generates unbelievable complexity of development. Firefox (51.) gets the handle but cannot run any Element.focus() while Chrome can run focus() from opener to child but not between siblings nor, reverse, from child to opener. This function is the lonely key to get back the handle on a window if the developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle). For now 10/01/2017 the differencies of behavior found recently have not still been tested for others Browsers.  </p>
+</div>
+
+<h2 id="Window_features">Window features</h2>
+
+<p><code>strWindowFeatures</code> is an optional string containing a comma-separated list of requested features of the new window. After a window is opened, JavaScript can't be used to change the features. If <code>strWindowName</code> does not specify an existing window and the <code>strWindowFeatures</code> parameter is not provided (or if the <code>strWindowFeatures</code> parameter is an empty string), then the new secondary window will render the default toolbars of the main window.</p>
+
+<p>If the <code>strWindowFeatures</code> parameter is used and no size features are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window.</p>
+
+<p>If the <code>strWindowFeatures</code> parameter is used and if no position features are defined, then the left and top coordinates of the new window dimension will be 22 pixels from where the most recently rendered window was. An offset is universally implemented by browser manufacturers (it is 29 pixels in IE6 SP2 with the default theme) and its purpose is to help users to notice new windows opening. If the most recently used window was maximized, then there is no offset: the new window will be maximized as well.</p>
+
+<p><strong>If the <code>strWindowFeatures</code> parameter is used, the features that are not listed will be disabled or removed</strong> (except <code>titlebar</code> and <code>close</code>, which are by default <code>yes</code>).</p>
+
+<div class="note">
+<p><strong>Tip</strong>: If using the <code>strWindowFeatures</code> parameter, only list the features to be enabled or rendered; the others (except <code>titlebar</code> and <code>close</code>) will be disabled or removed. Note that in some browsers, users can override the <code>strWindowFeatures</code> settings and enable (or prevent the disabling of) features.</p>
+</div>
+
+<p><img alt="Firefox Toolbars Illustration" src="/@api/deki/files/210/=FirefoxChromeToolbarsDescription7a.gif" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Position_and_size_features">Position and size features</h3>
+
+<div>{{gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session store feature. That means the next time the window is opened, it will still open in the saved location.")}}</div>
+
+<p><a href="#Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</a></p>
+
+<div class="bug">{{bug(176320)}}</div>
+
+<p><a href="#Note_on_precedence">Note on precedence</a></p>
+
+<dl>
+ <dt id="left">left</dt>
+ <dd>Specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="top">top</dt>
+ <dd>Specifies the distance the new window is placed from the top side of the work area for applications of the user's operating system to the topmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="height">height</dt>
+ <dd>Specifies the height of the content area, viewing area of the new secondary window in pixels. The height value includes the height of the horizontal scrollbar if present. The minimum required value is 100.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="width">width</dt>
+ <dd>Specifies the width of the content area, viewing area of the new secondary window in pixels. The width value includes the width of the vertical scrollbar if present. The width value does not include the sidebar if it is expanded. The minimum required value is 100.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt>screenX</dt>
+ <dd>Deprecated. Same as <a href="#left">left</a> but only supported by Netscape and Mozilla-based browsers.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>screenY</dt>
+ <dd>Deprecated. Same as <a href="#topS">top</a> but only supported by Netscape and Mozilla-based browsers.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>centerscreen</dt>
+ <dd>Centers the window in relation to its parent's size and position. Requires chrome=yes.</dd>
+ <dt>outerHeight</dt>
+ <dd>Specifies the height of the whole browser window in pixels. This outerHeight value includes any/all present toolbar, window horizontal scrollbar (if present) and top and bottom window resizing borders. Minimal required value is 100.</dd>
+ <dd><strong>Note</strong>: since titlebar is always rendered, then requesting outerHeight=100 will make the innerHeight of the browser window under the minimal 100 pixels.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>outerWidth</dt>
+ <dd>Specifies the width of the whole browser window in pixels. This outerWidth value includes the window vertical scrollbar (if present) and left and right window resizing borders.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>innerHeight</dt>
+ <dd>Same as <a href="#height">height</a> but only supported by Netscape and Mozilla-based browsers. Specifies the height of the content area, viewing area of the new secondary window in pixels. The <var>innerHeight</var> value includes the height of the horizontal scrollbar if present. Minimal required value is 100.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>innerWidth</dt>
+ <dd>Same as <a href="#width">width</a> but only supported by Netscape and Mozilla-based browsers. Specifies the width of the content area, viewing area of the new secondary window in pixels. The innerWidth value includes the width of the vertical scrollbar if present. The innerWidth value does not include the sidebar if it is expanded. Minimal required value is 100.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<h3 id="Toolbar_and_chrome_features">Toolbar and chrome features</h3>
+
+<dl>
+ <dt>NOTE: All features can be set to <var>yes</var> or <var>1</var>, or just be present to be "on". Set them to <var>no</var> or <var>0</var>, or in most cases just omit them, to be "off".</dt>
+ <dd>Example: "status=yes", "status=1", and "status" have identical results.</dd>
+ <dt>menubar</dt>
+ <dd>If this feature is on, then the new secondary window renders the menubar.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the menubar by setting <code>dom.disable_window_open_feature.menubar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>toolbar</dt>
+ <dd>If this feature is on, then the new secondary window renders the Navigation Toolbar (Back, Forward, Reload, Stop buttons). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window. (If this feature is set to <var>no</var> all toolbars in the window will be invisible, for example extension toolbars).</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting <code>dom.disable_window_open_feature.toolbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>location</dt>
+ <dd>If this feature is on, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the location bar by setting <code>dom.disable_window_open_feature.location</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>. {{Fx_minversion_note(3, "In Firefox 3, <code>dom.disable_window_open_feature.location</code> now defaults to <var>true</var>, forcing the presence of the Location Bar much like in IE7. See bug 337344 for more information.")}}</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt>personalbar</dt>
+ <dd>If this feature is on, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting <code>dom.disable_window_open_feature.personalbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>directories {{obsolete_inline("2")}}</dt>
+ <dd>Obsolete synonym of personalbar. In IE, it rendered the Links bar. Supported in Gecko up to 1.9.2 and in IE up to 6.</dd>
+ <dt>status</dt>
+ <dd>If this feature is on, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (<a href="#Note_on_security_issues_of_the_status_bar_presence">Note on status bar in XP SP2</a>) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.</dd>
+ <dd><a href="#Note_on_status_bar">Note on status bar</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<h3 id="Window_functionality_features">Window functionality features</h3>
+
+<dl>
+ <dt>attention {{NonStandardBadge}}</dt>
+ <dd>If this feature is specified, the window is able to open even if another application is already in the foreground. This feature is for Firefox OS applications only, and is currently restricted to certified applications. See {{SectionOnPage("/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/App_permissions", "Internal (Certified) app permissions")}} for more information.</dd>
+ <dd>Supported in: <img alt="" src="https://mdn.mozillademos.org/files/8003/firefox_os_logo_wordmark-75px.png" style="height: 25px; width: 83px;"></dd>
+ <dt>dependent</dt>
+ <dd>If on, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.</dd>
+ <dd>Dependent windows are not implemented on MacOS X, this option will be ignored.</dd>
+ <dd>The dependent feature is currently under revision to be removed ({{Bug(214867)}})</dd>
+ <dd>In MSIE 6, the nearest equivalent to this feature is the <code>showModelessDialog()</code> method.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>minimizable</dt>
+ <dd>This setting can only apply to dialog windows; "minimizable" requires <code>dialog=yes</code>. If <code>minimizable</code> is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and <code>minimizable=no</code> will be ignored.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>fullscreen</dt>
+ <dd>Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.</dd>
+ <dd>This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.</dd>
+ <dd><code>fullscreen</code> always upsets users with large monitor screen or with dual monitor screen. Forcing <code>fullscreen</code> onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.</dd>
+ <dd><a href="#Note_on_fullscreen">Note on fullscreen</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png"></dd>
+ <dd><code>fullscreen</code> does not really work in MSIE 6 SP2.</dd>
+ <dt><a id="noopener" name="noopener">noopener</a></dt>
+ <dd>If this feature is set, the newly-opened window will open as normal, except that it will not have access back to the originating window (via {{domxref("Window.opener")}} — it returns <code>null</code>). In addition, the <code>window.open()</code> call will also return <code>null</code>, so the originating window will not have access to the new one either.  This is useful for preventing untrusted sites opened via <code>window.open()</code> from tampering with the originating window, and vice versa.</dd>
+ <dd>Note that when <code>noopener</code> is used, nonempty target names other than <code>_top</code>, <code>_self</code>, and <code>_parent</code> are all treated like <code>_blank</code> in terms of deciding whether to open a new window/tab.<br>
+ <br>
+ This is supported in modern browsers including Chrome, and Firefox 52+. See <code><a href="/en-US/docs/Web/HTML/Link_types#noopener">rel="noopener"</a></code> for more information and for browser compatibility details, including information about ancillary effects.</dd>
+ <dt>resizable</dt>
+ <dd>If this feature is on, the new secondary window will be resizable.</dd>
+ <dd><strong>Note</strong>: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar.
+ <p>Starting with Firefox 3, secondary windows are always resizable ({{Bug(177838)}})</p>
+
+ <div class="note">
+ <p><strong>Tip</strong>: For accessibility reasons, it is strongly recommended to set this feature always on</p>
+ </div>
+ </dd>
+ <dd>Mozilla and Firefox users can force new windows to be easily resizable by setting <code>dom.disable_window_open_feature.resizable</code> to <code><var>true</var></code> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>scrollbars</dt>
+ <dd>If this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.
+ <div class="note">
+ <p><strong>Tip</strong>: For accessibility reasons, it is strongly encouraged to set this feature always on.</p>
+ </div>
+ </dd>
+ <dd>Mozilla and Firefox users can force this option to be always enabled for new windows by setting {{pref("dom.disable_window_open_feature.scrollbars")}} to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>. <strong>Starting in Firefox 49, this feature is on by default, and the {{pref("dom.disable_window_open_feature.scrollbars")}} preference has been removed.</strong></dd>
+ <dd><a href="#Note_on_scrollbars">Note on scrollbars</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<h3 id="Features_requiring_privileges">Features requiring privileges</h3>
+
+<p>The following features require the <code>UniversalBrowserWrite</code> privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.</p>
+
+<dl>
+ <dt>chrome</dt>
+ <dd><strong>Note</strong>: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(244965)}}). Without this privilege, it is ignored.</dd>
+ <dd>If on, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>dialog</dt>
+ <dd><strong>Note</strong>: Starting with Firefox 44, this feature can only be used with chrome privileges. If content attempts to toggle this feature, it will be ignored.</dd>
+ <dd><a href="/@api/deki/files/268/=MenuSystemCommands.png" title="MenuSystemCommands.png"><img alt="MenuSystemCommands.png" class="internal lwrap" src="/@api/deki/files/268/=MenuSystemCommands.png?size=webview" style="float: left; height: 170px; width: 170px;"> </a> The <code>dialog</code> feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. Mozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>modal</dt>
+ <dd><strong>Note</strong>: Starting with Mozilla 1.2.1, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(180048)}}). Without this privilege, it is ignored.</dd>
+ <dd>If on, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the <a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert() function</a>.</dd>
+ <dd>The exact behavior of modal windows depends on the platform and on the Mozilla release version.
+ <div class="note">
+ <p><strong>Note:</strong> As of {{Gecko("1.9")}}, the Internet Explorer equivalent to this feature is the {{domxref("window.showModalDialog()")}} method. For compatibility reasons, it's now supported in Firefox. Note also that starting in {{Gecko("2.0")}}, you can use {{domxref("window.showModalDialog()")}} without UniversalBrowserWrite privileges.</p>
+ </div>
+ </dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>titlebar</dt>
+ <dd>By default, all new secondary windows have a titlebar. If set to <var>no or 0</var>, this feature removes the titlebar from the new secondary window.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the titlebar by setting<br>
+ <code>dom.disable_window_open_feature.titlebar</code><br>
+ to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>alwaysRaised</dt>
+ <dd>If on, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>alwaysLowered</dt>
+ <dd>If on, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>z-lock</dt>
+ <dd>Same as <code>alwaysLowered</code>.</dd>
+ <dt>close</dt>
+ <dd>When set to <var>no or 0</var>, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (<code>dialog</code> feature set). <code>close=no</code> will override <code>minimizable=yes</code>.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always have a close button by setting<br>
+ <code>dom.disable_window_open_feature.close</code><br>
+ to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<p>The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a <var>yes</var> or <var>no</var>; you can use <var>1</var> instead of <var>yes</var> and <var>0</var> instead of <var>no</var>. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the <var>features</var> string. If you supply the <var>features</var> parameter, then the <code>titlebar</code> and <code>close</code> are still <var>yes</var> by default, but the other features which have a <var>yes</var>/<var>no</var> choice will be <var>no</var> by default and will be turned off.</p>
+
+<p>Example:</p>
+
+<pre class="brush:js">var windowObjectReference; // global variable
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImgFile.png",
+    "DescriptiveWindowName",
+    "width=420,height=230,resizable,scrollbars=yes,status=1"
+  );
+}</pre>
+
+<p>In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), they added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.</p>
+
+<h2 id="Best_practices">Best practices</h2>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+
+function openFFPromotionPopup() {
+  if(windowObjectReference == null || windowObjectReference.closed)
+  /* if the pointer to the window object in memory does not exist
+     or if such pointer exists but the window was closed */
+
+  {
+    windowObjectReference = window.open("http://www.spreadfirefox.com/",
+   "PromoteFirefoxWindowName", "resizable,scrollbars,status");
+    /* then create it. The new window will be created and
+       will be brought on top of any other window. */
+  }
+  else
+  {
+    windowObjectReference.focus();
+    /* else the window reference must exist and the window
+       is not closed; therefore, we can bring it back on top of any other
+       window with the focus() method. There would be no need to re-create
+       the window or to reload the referenced resource. */
+  };
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindowName"
+ onclick="openFFPromotionPopup(); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>The above code solves a few usability problems related to links opening secondary window. The purpose of the <code>return false</code> in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".</p>
+
+<p>More reading on the use of the target attribute:</p>
+
+<p><a href="http://www.w3.org/TR/html401/present/frames.html#h-16.3.2">HTML 4.01 Target attribute specifications</a></p>
+
+<p><a href="http://www.htmlhelp.com/faq/html/links.html#new-window">How do I create a link that opens a new window?</a></p>
+
+<p>You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:</p>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+
+function openRequestedPopup(strUrl, strWindowName) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, strWindowName,
+           "resizable,scrollbars,status");
+  } else {
+    windowObjectReference.focus();
+  };
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindow"
+ onclick="openRequestedPopup(this.href, this.target); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:</p>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+var PreviousUrl; /* global variable which will store the
+                    url currently in the secondary window */
+
+function openRequestedSinglePopup(strUrl) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+         "resizable,scrollbars,status");
+  } else if(PreviousUrl != strUrl) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+      "resizable=yes,scrollbars=yes,status=yes");
+    /* if the resource to load is different,
+       then we load it in the already opened secondary window and then
+       we bring such window back on top/in front of its parent window. */
+    windowObjectReference.focus();
+  } else {
+    windowObjectReference.focus();
+  };
+
+  PreviousUrl = strUrl;
+  /* explanation: we store the current url in order to compare url
+     in the event of another call of this function. */
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a
+ href="http://www.mozilla.org/support/firefox/faq"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Firefox FAQ&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<h2 id="FAQ">FAQ</h2>
+
+<dl>
+ <dt>How can I prevent the confirmation message asking the user whether they want to close the window?</dt>
+ <dd>You can not. <strong>New windows not opened by javascript can not as a rule be closed by JavaScript.</strong> The JavaScript Console in Mozilla-based browsers will report the warning message: <code>"Scripts may not close windows that were not opened by script."</code> Otherwise the history of URLs visited during the browser session would be lost.</dd>
+ <dd><a href="/en-US/docs/DOM/window.close" title="DOM/window.close">More on the window.close()</a> method</dd>
+ <dt>How can I bring back the window if it is minimized or behind another window?</dt>
+ <dd>First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the <a href="/en-US/docs/DOM/window.focus" title="DOM/window.focus">focus()</a> method. There is no other reliable way. You can examine an <a href="#Best_practices">example explaining how to use the focus() method</a>.</dd>
+ <dt>How do I force a maximized window?</dt>
+ <dd>You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.</dd>
+ <dt>How do I turn off window resizability or remove toolbars?</dt>
+ <dd>You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in <code>about:config</code>. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.</dd>
+ <dt>How do I resize a window to fit its content?</dt>
+ <dd>You can not reliably because the users can prevent the window from being resized by unchecking the <code>Edit/Preferences/Advanced/Scripts &amp; Plug-ins/Allow Scripts to/ Move or resize existing windows</code> checkbox in Mozilla or <code>Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows</code> checkbox in Firefox or by setting <code>dom.disable_window_move_resize</code> to <var>true</var> in <code>about:config</code> or by editing accordingly their <a href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd>
+ <dd>In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.</dd>
+ <dd>The window method <a href="/en-US/docs/DOM/window.sizeToContent" title="DOM/window.sizeToContent">sizeToContent()</a> is also disabled if the user unchecks the preference <code>Move or resize existing windows</code> checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.</dd>
+ <dt>How do I open a referenced resource of a link in a new tab? or in a specific tab?</dt>
+ <dd>To open a resource in a new tab see <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">Tabbed browser</a>. Some <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&amp;redirectslug=Code_snippets%2FTabbed_browser">Code snippets</a> are available. If you are using the SDK, tabs are <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">handled a bit differently</a></dd>
+ <dd><a href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Only the user can set his advanced preferences to do that. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.</dd>
+ <dd>In a few years, the <a href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">target property of the CSS3 hyperlink module</a> may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.</dd>
+ <dt>How do I know whether a window I opened is still open?</dt>
+ <dd>You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that <var>windowObjectReference</var>.closed return value is <var>false</var>.</dd>
+ <dt>How can I tell when my window was blocked by a popup blocker?</dt>
+ <dd>With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of <code>window.open()</code>: it will be <var>null</var> if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.</dd>
+ <dt>What is the JavaScript relationship between the main window and the secondary window?</dt>
+ <dd>The <code>window.open()</code> method gives a main window a reference to a secondary window; the <a href="/en-US/docs/DOM/window.opener" title="DOM/window.opener">opener</a> property gives a secondary window a reference to its main window.</dd>
+ <dt>I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error<span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property &lt;property_name or method_name&gt;. Why is that?</dt>
+ <dd>It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) <strong>cannot get nor set</strong> properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.</dd>
+ <dd>More reading on the cross-domain script security restriction: <a href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd>
+</dl>
+
+<h2 id="Usability_issues">Usability issues</h2>
+
+<h3 id="Avoid_resorting_to_window.open()">Avoid resorting to <code>window.open()</code></h3>
+
+<p>Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:</p>
+
+<ul>
+ <li>All Mozilla-based browsers offer <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">tab-browsing</a> and this is the preferred mode of <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&amp;redirectslug=Code_snippets%2FTabbed_browser">opening referenced resources</a> (<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">SDK</a>)... not just in Mozilla-based browsers but in all other browsers offering tab-browsing. In other words, tab-capable browser users overall prefer opening new tabs than opening new windows in a majority of webpage situations. Tab-capable browsers have rapidly gained support and enthusiasm on internet in the last 3 years; this trend will not revert back. MSIE 7, released in October 2006, has full support for tab browsing.</li>
+ <li>There are now <a href="https://addons.mozilla.org/seamonkey/browse/type:1/cat:48/sort:updated">several Mozilla extensions</a> (like Multizilla) and <a href="https://addons.update.mozilla.org/firefox/browse/type:1/cat:14/sort:updated">Firefox extensions</a> (like <a href="https://addons.mozilla.org/firefox/addon/158">Tabbrowser preferences</a>), features, settings and advanced preferences based on tab-browsing and based on converting window.open() calls into opening tabs, based on neutralizing window.open() calls, in particular in neutralizing unrequested openings of new windows (often referred as blocking unrequested popups or as blocking script-initiated windows opening automatically). Such features found in extensions include opening a link in a new window or not, in the same window, in a new tab or not, in "background" or not. Coding carelessly to open new windows can no longer be assured of success, can not succeed by force and, if it does, it will annoy a majority of users.</li>
+ <li>New windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs can not be missing those functionalities or toolbars (or at least, the toolbars which are present by default). Therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains stable.</li>
+ <li>Opening new windows, even with reduced features, uses considerably a lot of the user's system resources (cpu, RAM) and involves considerably a lot of coding in the source code (security management, memory management, various code branchings sometimes quite complex, window frame/chrome/toolbars building, window positioning and sizing, etc.). Opening new tabs is less demanding on the user's system resources (and faster to achieve) than opening new windows.</li>
+</ul>
+
+<h3 id="Offer_to_open_a_link_in_a_new_window_using_these_guidelines">Offer to open a link in a new window, using these guidelines</h3>
+
+<p>If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:</p>
+
+<h4 id="Never_use_this_form_of_code_for_links_&lt;a_hrefjavascriptwindow.open(...)_...>"><em>Never</em> use this form of code for links: <code>&lt;a href="javascript:window.open(...)" ...&gt;</code></h4>
+
+<p>"javascript:" links break accessibility and usability of webpages in every browser.</p>
+
+<ul>
+ <li>"javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. Several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activeX, no Flash. For various reasons (security, public access, text browsers, etc..), about 5% to 10% of users on the web surf with javascript disabled.</li>
+ <li>"javascript:" links will interfere with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, tab-browsing features in extensions, etc.</li>
+ <li>"javascript:" links will interfere with the process of indexing webpages by search engines.</li>
+ <li>"javascript:" links interfere with assistive technologies (e.g. voice browsers) and several web-aware applications (e.g. <abbr title="Personal Digital Assistant">PDAs</abbr> and mobile browsers).</li>
+ <li>"javascript:" links also interfere with "mouse gestures" features implemented in browsers.</li>
+ <li>Protocol scheme "javascript:" will be reported as an error by link validators and link checkers.</li>
+</ul>
+
+<p><strong>Further reading:</strong></p>
+
+<ul>
+ <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, December 2002</li>
+ <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a>, Jeff Howden, February 2002</li>
+ <li><a href="http://jibbering.com/faq/#FAQ4_24">comp.lang.javascript newsgroup discussion FAQ on "javascript:" links</a></li>
+</ul>
+
+<h4 id="Never_use_&lt;a_href_onclickwindow.open(...)>">Never use <code>&lt;a href="#" onclick="window.open(...);"&gt;</code></h4>
+
+<p>Such pseudo-link also breaks accessibility of links. <strong>Always use a real URL for the href attribute value</strong> so that if javascript support is disabled or inexistent or if the user agent does not support opening of secondary window (like MS-Web TV, text browsers, etc), then such user agents will still be able to load the referenced resource according to its default mode of opening/handling a referenced resource. This form of code also interferes with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, Ctrl+Enter on links, "mouse gestures" features.</p>
+
+<h4 id="Always_identify_links_which_will_create_(or_will_re-use)_a_new_secondary_window">Always identify links which will create (or will re-use) a new, secondary window</h4>
+
+<p>Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.</p>
+
+<p>The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).</p>
+
+<blockquote>
+<p>"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out <em>Back</em> button."<br>
+ quote from <a href="http://www.useit.com/alertbox/990530.html">The Top Ten <em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, May 1999</p>
+</blockquote>
+
+<p>When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).</p>
+
+<p><strong>References</strong></p>
+
+<ul>
+ <li>"If your link spawns a new window, or causes another windows to 'pop up' on your display, or move the focus of the system to a new FRAME or Window, then the nice thing to do is to tell the user that something like that will happen." <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li>
+ <li>"Use link titles to provide users with a preview of where each link will take them, before they have clicked on it." <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, October 1999</li>
+ <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, January 1998</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="4">Example "New Window" Icons &amp; Cursors</td>
+  </tr>
+  <tr>
+   <td><img alt="New window icon from yahoo.com" src="/@api/deki/files/782/=NewwindowYahoo.png"></td>
+   <td><img alt="New window icon from microsoft.com" src="/@api/deki/files/780/=NewwinMSIE.gif"></td>
+   <td><img alt="New window icon from webaim.org" src="/@api/deki/files/296/=Popup_requested_new_window.gif"></td>
+   <td><img alt="New window icon from sun.com" src="/@api/deki/files/811/=PopupImageSun.gif"></td>
+  </tr>
+  <tr>
+   <td><img alt="New window icon from bbc.co.uk" src="/@api/deki/files/795/=Opennews_rb.gif"></td>
+   <td><img alt="New window icon from Accessible Internet Solutions" src="/@api/deki/files/15/=AIS_NewWindowIcon.png"></td>
+   <td><img alt="New window icon from accessify.com" src="/@api/deki/files/809/=Pop-up-launcher.gif"></td>
+   <td><img alt="New window icon from webstyleguide.com" src="/@api/deki/files/417/=Webstyleguide_com_newwind.gif"></td>
+  </tr>
+  <tr>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/810/=Popicon_1.gif"></td>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/779/=New.gif"></td>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/419/=WillCreateOrRecycleNewWindow.gif"></td>
+   <td><img alt="New window icon from gtalbot.org" src="/@api/deki/files/287/=OpenRequestedPopup.png"></td>
+  </tr>
+  <tr>
+   <td colspan="2"><img alt="New window cursor from draig.de" src="/@api/deki/files/169/=Cursor_LinkNewWindowTargetBlank.png"></td>
+   <td colspan="2"><img alt="New window cursor from mithgol.ru" src="/@api/deki/files/170/=Cursor_newwindowSergeySokoloff.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Always_use_the_target_attribute">Always use the target attribute</h4>
+
+<p>If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - <strong>not impose</strong> - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.</p>
+
+<h4 id="Do_not_use_target_blank">Do not use <code>target="_blank"</code></h4>
+
+<p>Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it should not interfere with the user's final choice but rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).</p>
+
+<h2 id="Glossary">Glossary</h2>
+
+<dl>
+ <dt>Opener window, parent window, main window, first window</dt>
+ <dd>Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.</dd>
+ <dt>Sub-window, child window, secondary window, second window</dt>
+ <dd>Terms often used to describe or to identify the same window. It is the new window which was created.</dd>
+ <dt>Unrequested popup windows</dt>
+ <dd>Script-initiated windows opening automatically without the user's consent.</dd>
+</dl>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'window-object.html#dom-open', 'Window.open()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#the-features-argument-to-the-open()-method', 'The features argument to the open() method') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Defines the effect of the <code>features</code> argument</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.open")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Note_on_precedence">Note on precedence</h3>
+
+<p>In cases where <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) have conflicting values, then <code>left</code> and <code>top</code> have precedence over <code>screenX</code> and <code>screenY</code> respectively. If <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) are defined in the <var>features</var> list, then <code>left</code> (and/or <code>top</code>) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.</p>
+
+<pre class="brush:js">windowObjectReference = window.open(
+  "http://news.bbc.co.uk/",
+  "BBCWorldNewsWindowName",
+  "left=100,screenX=200,resizable,scrollbars,status"
+);</pre>
+
+<p>If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.</p>
+
+<p>outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.</p>
+
+<pre class="brush:js">windowObjectReference = window.open(
+  "http://www.wwf.org/",
+  "WWildlifeOrgWindowName",
+  "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"
+);</pre>
+
+<h3 id="Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</h3>
+
+<p>Requested position and requested dimension values in the <var>features</var> list will not be honored and <strong>will be corrected</strong> if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. <strong>No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.</strong></p>
+
+<p><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">MSIE 6 SP2 has a similar error correction mechanism</a> but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.</p>
+
+<h3 id="Note_on_scrollbars">Note on scrollbars</h3>
+
+<p>When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:</p>
+
+<ul>
+ <li>user resizes the window</li>
+ <li>user increases the text size of fonts via View/Text Zoom (%) menuitem in Mozilla or View/Text Size/Increase or Decrease in Firefox</li>
+ <li>user sets a minimum font size for pages which is bigger than the font-size the web author requested. People over 40 years old or with particular viewing habit or reading preference often set a minimal font size in Mozilla-based browsers.</li>
+ <li>web author is not aware of default margin (and/or border and/or padding) values applying to root element or body node in various browsers and various browser versions</li>
+ <li>user uses an user stylesheet (<a href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) for his viewing habits which increases document box dimensions (margin, padding, default font size)</li>
+ <li>user can customize individually the size (height or width) of most toolbars via operating system settings. E.g. window resizing borders, height of browser titlebar, menubar, scrollbars, font size are entirely customizable by the user in Windows XP operating system. These toolbars dimensions can also be set via browser themes and skins or by operating system themes</li>
+ <li>web author is unaware that the user default browser window has custom toolbar(s) for specific purpose(s); e.g.: prefs bar, web developer bar, accessibility toolbar, popup blocking and search toolbar, multi-feature toolbar, etc.</li>
+ <li>user uses assistive technologies or add-on features which modify the operating system's work area for applications: e.g. MS-Magnifier</li>
+ <li>user repositions and/or resizes directly or indirectly the operating system's work area for applications: e.g. user resizes the Windows taskbar, user positions the Windows taskbar on the left side (arabic language based) or right side (Hebrew language), user has a permanent MS-Office quick launch toolbar, etc.</li>
+ <li>some operating system (Mac OS X) forces presence of toolbars which can then fool the web author's anticipations, calculations of the effective dimensions of the browser window</li>
+</ul>
+
+<h3 id="Note_on_status_bar">Note on status bar</h3>
+
+<p>You should assume that a large majority of browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with <abbr title="Secure Socket Layer">SSL</abbr> connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. <strong>Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.</strong></p>
+
+<h3 id="Note_on_security_issues_of_the_status_bar_presence">Note on security issues of the status bar presence</h3>
+
+<p>In MSIE 6 for XP SP2: For windows opened using <code>window.open()</code>:</p>
+
+<blockquote>
+<p>"For windows opened using window.open():<br>
+ Expect the status bar to be present, and code for it. <strong>The status bar will be on by default</strong> and is 20-25 pixels in height. (...)"<br>
+ quote from <a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p>
+</blockquote>
+
+<blockquote>
+<p>"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.<br>
+ Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)<br>
+ <strong>Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar.</strong> (...)<br>
+ Script management of Internet Explorer status bar<br>
+ Detailed description<br>
+ <strong>Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows.</strong> (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.<br>
+ The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"<br>
+ quote from <a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p>
+</blockquote>
+
+<h3 id="Note_on_fullscreen">Note on fullscreen</h3>
+
+<p>In MSIE 6 for XP SP2:</p>
+
+<ul>
+ <li>"window.open() with fullscreen=yes will now result in a maximized window, not a kiosk mode window."</li>
+ <li>"The definition of the fullscreen=yes specification is changed to mean 'show the window as maximized,' which will keep the title bar, address bar, and status bar visible."</li>
+</ul>
+
+<h4 id="References">References:</h4>
+
+<ul>
+ <li><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li>
+ <li><a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li>
+</ul>
+
+<h3 id="Note_on_outerHeight_versus_height">Note on outerHeight versus height</h3>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/212/=FirefoxInnerVsOuterHeight.png"></p>
+
+<h3 id="Note_on_refreshing_vs._opening_a_new_windowtab">Note on refreshing vs. opening a new window/tab</h3>
+
+<p>If the <code>strWindowName</code> parameter is omitted, a new window or tab is opened. If a window with the same name already exists, the existing window is refreshed.</p>
+
+<pre class="brush:js">//Always opens a new window/tab
+window.open("map.php");
+
+//Refreshes an existing window/tab that was opened with the same name, if one exists
+window.open("map.php", "BiggerMap");</pre>
+
+<h2 id="Tutorials">Tutorials</h2>
+
+<ul>
+ <li><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> by Lasse Reichstein Nielsen</li>
+ <li><a href="http://accessify.com/features/tutorials/the-perfect-popup/" title="http://accessify.com/features/tutorials/the-perfect-popup/">The perfect pop-up (tutorial)</a> by Ian Lloyd</li>
+ <li><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> by Gérard Talbot</li>
+</ul>
+
+<h2 id="References_2">References</h2>
+
+<ul>
+ <li><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</li>
+ <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a> by Jeff Howden</li>
+</ul>
diff --git a/files/ko/web/api/window/opener/index.html b/files/ko/web/api/window/opener/index.html
new file mode 100644
index 0000000000..78dc86c861
--- /dev/null
+++ b/files/ko/web/api/window/opener/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.opener
+slug: Web/API/Window/opener
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/opener
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <code><strong>opener</strong></code> 속성은 {{domxref("Window.open", "open()")}}을 사용해 현재 창을 열었던 창의 참조를 반환합니다.</span></p>
+
+<p>예제로 설명하자면, 창 <code>A</code>가 창 <code>B</code>를 열었을 때 <code>B.opener</code>는 <code>A</code>를 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox notranslate">const <var>openerWindow</var> = window.opener
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("window.open()")}}을 사용하거나 {{htmlattrxref("target", "a")}} 특성을 지정한 링크로 현재 창을 연 {{domxref("Window")}}. 현재 창이 다른 창에 의해 생성됐거나 링크로 열리지 않았다면 {{jsxref("null")}}.</p>
+
+<p><a href="https://caniuse.com/#search=noopener">최근 브라우저</a>에서는 {{htmlelement("a")}} 요소에 <code>rel="noopener noreferrer"</code> 특성을 지정하면 <code>window.opener</code> 참조 설정을 방지합니다. 따라서 생성된 창의 <code>opener</code> 속성에 접근해도 <code>null</code>을 반환합니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-opener', 'window.opener')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.opener")}}</p>
diff --git a/files/ko/web/api/window/orientationchange_event/index.html b/files/ko/web/api/window/orientationchange_event/index.html
new file mode 100644
index 0000000000..6426f678f7
--- /dev/null
+++ b/files/ko/web/api/window/orientationchange_event/index.html
@@ -0,0 +1,66 @@
+---
+title: orientationchange
+slug: Web/API/Window/orientationchange_event
+translation_of: Web/API/Window/orientationchange_event
+---
+<p><code>orientationchange</code> 이벤트는 장치의 방향이 바뀔 때 호출 된다.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/screen-orientation/#event-handlers">Screen Orientation</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Screen</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: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);
+});
+</pre>
diff --git a/files/ko/web/api/window/outerwidth/index.html b/files/ko/web/api/window/outerwidth/index.html
new file mode 100644
index 0000000000..272c415bb7
--- /dev/null
+++ b/files/ko/web/api/window/outerwidth/index.html
@@ -0,0 +1,101 @@
+---
+title: Window.outerWidth
+slug: Web/API/Window/outerWidth
+translation_of: Web/API/Window/outerWidth
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>Window.outerWidth 는 브라우저 윈도우 바깥쪽의 폭을 얻어온다. 이것은 브라우저 윈도우의 사이드바와 가장자리 경계선을 포함한 폭을 나타내어 준다.</p>
+
+<p>이 값은 읽기전용이다. 그리고 기본값이 없다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><var>outWindowWidth</var> = window.outerWidth;
+</pre>
+
+<p>반환이 끝나면 outWindowWidth는 윈도우의 바깥경계를 포함한 너비(폭)를 담고 있다.</p>
+
+<h2 id="Notes" name="Notes">노트</h2>
+
+<p>이 사이즈를 변경하기 위해서는, {{domxref("window.resizeBy()")}} 또는 {{domxref("window.resizeTo()")}}를 참조하세요.</p>
+
+<p>윈도우의 안쪽 폭 즉, 현재 표시되고있는 창의 폭을 얻으려면  {{domxref("window.innerWidth")}}를 참조하세요.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>크롬</th>
+   <th>파이어폭스 (Gecko)</th>
+   <th>인터넷 익스플로러</th>
+   <th>오페라</th>
+   <th>사파리</th>
+  </tr>
+  <tr>
+   <td>기초 지원</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>기초 지원</td>
+   <td>1</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/pageyoffset/index.html b/files/ko/web/api/window/pageyoffset/index.html
new file mode 100644
index 0000000000..4579abd3f8
--- /dev/null
+++ b/files/ko/web/api/window/pageyoffset/index.html
@@ -0,0 +1,164 @@
+---
+title: Window.pageYOffset
+slug: Web/API/Window/pageYOffset
+tags:
+  - API
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/pageYOffset
+---
+<div>{{ APIRef("CSSOM View") }}</div>
+
+<p>{{domxref("Window")}} 인터페이스의 <strong><code>pageYOffset</code></strong> 읽기 전용 속성은 {{domxref("Window.scrollY", "scrollY")}}의 다른 이름으로, 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다.</p>
+
+<p>일부 오래된 브라우저는 <code>scrollY</code> 대신 <code>pageYOffset</code>만 지원하는 경우가 있지만, 노후 환경을 신경쓰지 않아도 된다면 둘 중 아무거나 사용해도 괜찮습니다.</p>
+
+<p>수평 스크롤을 나타내는 {{domxref("Window.pageXOffset", "pageXOffset")}} 속성 역시 {{domxref("Window.scrollX", "scrollX")}}의 다른 이름입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>yOffset</em> = window.pageYOffset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("Window")}} 안의 {{domxref("Document")}}가 수직 방향으로 스크롤된 거리를 픽셀 단위로 나타낸 부동소숫점 수. 단일 픽셀보다 높은 수준의 정밀도를 가지므로 정수가 아닐 수 있습니다. <code>0.0</code>은 창의 콘텐츠 영역과 문서의 위쪽 모서리 위치가 일치함을 나타냅니다.</p>
+
+<p><code>pageYOffset</code>은 {{domxref("Window.scrollY")}}의 다른 이름이므로, 값에 대한 더 자세한 정보는 해당 문서를 방문해주세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<div class="hidden">
+<pre class="brush: js">var contentHTML = `
+    &lt;h2 id="introduction"&gt;Introduction&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Aenean volutpat vitae felis non dictum. Ut auctor
+eros tortor, vel elementum arcu rhoncus nec. Donec non
+laoreet massa. Donec pretium nisi et condimentum convallis.
+Nullam dictum molestie finibus. Nullam vitae lorem non
+augue mattis cursus.&lt;/p&gt;
+  &lt;p&gt;Maecenas nec tortor tincidunt, sollicitudin mi eget,
+fermentum turpis. Vestibulum ac ante et libero efficitur
+faucibus id eget ex. Pellentesque tempor pharetra
+tincidunt. Suspendisse potenti. Nulla vulputate nunc sit
+amet hendrerit faucibus. Nullam metus dui, venenatis
+lacinia nunc nec, vestibulum viverra nunc. Quisque interdum
+quam tortor, sit amet varius neque consectetur at. Quisque
+vel turpis justo.&lt;/p&gt;
+  &lt;h2 id="overview"&gt;Overview&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Etiam dui dolor, pulvinar sed diam id, eleifend
+dapibus odio. Duis vitae ante nibh. Integer bibendum
+imperdiet suscipit. Fusce ligula leo, consectetur ac ante
+eget, gravida laoreet purus. Cras sodales efficitur risus,
+sed feugiat sem. Pellentesque justo augue, placerat non leo
+sit amet, laoreet fringilla arcu.&lt;/p&gt;
+  &lt;p&gt;Class aptent taciti sociosqu ad litora torquent per
+conubia nostra, per inceptos himenaeos. Proin in gravida
+libero. Vivamus placerat, lacus eget condimentum sagittis,
+enim nunc bibendum nisi, quis varius erat felis sit amet
+risus.&lt;/p&gt;
+&lt;p&gt;Sed non finibus ligula. Fusce a magna auctor, molestie
+nibh eget, sodales felis. Donec imperdiet facilisis mi ut
+aliquam. Etiam sodales suscipit urna, eget hendrerit neque
+elementum a. Vivamus fringilla sodales est ut ultricies.
+Nulla convallis congue maximus. Nullam consectetur felis
+vitae ultricies accumsan. Mauris at aliquam felis. Mauris
+efficitur tellus massa, id ullamcorper ipsum fermentum eu.
+Aenean mollis dignissim ultrices. Nunc gravida, sem sit
+amet lobortis iaculis, dolor ligula convallis nibh, id
+condimentum metus libero nec odio. Quisque nec ante
+pretium, viverra neque nec, facilisis risus. Duis
+condimentum sapien non felis cursus blandit. Integer
+euismod lectus a ipsum pellentesque lacinia.&lt;/p&gt;
+`;
+
+document.getElementById("frame").contentDocument
+        .body.innerHTML = contentHTML;
+</pre>
+</div>
+
+<p>In this example, an {{HTMLElement("iframe")}} is created and filled with content, then a specific element within the document is scrolled into view in the frame. Once that's done, the vertical scroll position is checked by looking at the value of <code>pageYOffset</code> in the frame's {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML은 단 두 개의 요소를 가진 짧은 코드입니다. 하나는 스크롤할 문서를 담은 {{HTMLElement("iframe")}}이고, 다른 하나는 스크롤을 끝냈을 때 <code>pageYOffset</code>의 값을 기록할 {{HTMLElement("div")}}입니다.</p>
+
+<pre class="brush: html">&lt;iframe id="frame"&gt;
+&lt;/iframe&gt;
+
+&lt;div id="info"&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var frame = document.getElementById("frame");
+var frameDoc = frame.contentDocument;
+var info = document.getElementById("info");
+
+var target = frameDoc.getElementById("overview");
+frameDoc.scrollingElement.scrollTop = target.offsetTop;
+
+info.innerText = "스크롤 후 Y축 차이: " +
+                 frame.contentWindow.pageYOffset + " 픽셀";</pre>
+
+<p>The JavaScript code begins by getting into <code>frame</code> and <code>info</code> the <code>&lt;iframe&gt;</code> element that contains our content as well as the <code>&lt;div&gt;</code> element into which we'll output the result of our scroll position check. It then gets a reference to the element we want to scroll into view calling {{domxref("Document.getElementById", "getElementById()")}} on the frame's {{domxref("HTMLIFrameElement.contentDocument")}}.</p>
+
+<p>With the target element in hand, we set the {{domxref("Element.scrollTop", "scrollTop")}} of the frame's {{domxref("Document.scrollingElement", "scrollingElement")}} to the {{domxref("Element.offsetTop", "offsetTop")}} of the target element. By doing so, we set the vertical scrolling position of the frame's document so that it's the same as the top edge of the target element.</p>
+
+<p>This will automatically set the scrolling position to the maximum possible value if the attempted scroll would exceed the maximum. This prevents us from falling off the edge of the document. Nobody wants to know what's out there. There might be dragons.</p>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">iframe {
+  width: 620px;
+  height: 450px;
+  border: 1px solid black;
+}
+
+#info {
+  margin-top: 20px;
+  font: 16px "Open Sans", "Helvetica", "Arial";
+}</pre>
+</div>
+
+<h3 id="결과">결과</h3>
+
+<p>The result follows. Note that the frame's contents have been scrolled to show the section named "Overview", and that the value of the <code>pageYOffset</code> property is shown with the corresponding value.</p>
+
+<p>{{EmbedLiveSample("예제", 650, 500)}}</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-pageyoffset', 'window.pageYOffset') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.pageYOffset")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Window.pageXOffset", "pageXOffset")}}</li>
+ <li>{{domxref("Window.scrollY", "scrollY")}} and {{domxref("Window.scrollX", "scrollX")}}</li>
+ <li>{{domxref("Window.scroll", "scroll()")}}, {{domxref("Window.scrollBy", "scrollBy()")}}, and {{domxref("window.scrollTo", "scrollTo()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/popstate_event/index.html b/files/ko/web/api/window/popstate_event/index.html
new file mode 100644
index 0000000000..5012c22d1b
--- /dev/null
+++ b/files/ko/web/api/window/popstate_event/index.html
@@ -0,0 +1,66 @@
+---
+title: popstate
+slug: Web/API/Window/popstate_event
+tags:
+  - API
+  - Event
+  - History
+  - History API
+  - Reference
+translation_of: Web/API/Window/popstate_event
+---
+<div>{{APIRef}}</div>
+
+<p>{{domxref("Window")}} 인터페이스의 <strong><code>popstate</code></strong> 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 됩니다.</p>
+
+<p>history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의합니다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. </p>
+
+<p>브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리합니다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킵니다. 하지만 Firefox 는 그렇지 않습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("PopStateEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("WindowEventHandlers.onpopstate", "onpopstate")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Window.popstate_event")}}</p>
+
+<h2 id="Example">Example</h2>
+
+<p>예시를 보자, 다음의 코드를 실행하는 <code><var>http://example.com/example.html </var></code>의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.</p>
+
+<pre class="brush: 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}
+</pre>
+
+<p>원래의 히스토리 엔트리인 (<code><var>http://example.com/example.html</var></code>) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">Manipulating the browser history (the History API) </a></li>
+</ul>
diff --git a/files/ko/web/api/window/postmessage/index.html b/files/ko/web/api/window/postmessage/index.html
new file mode 100644
index 0000000000..34aa8a67fe
--- /dev/null
+++ b/files/ko/web/api/window/postmessage/index.html
@@ -0,0 +1,183 @@
+---
+title: Window.postMessage()
+slug: Web/API/Window/postMessage
+translation_of: Web/API/Window/postMessage
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><code><strong>window.postMessage()</strong></code> 메소드는 {{domxref("Window")}} 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 합니다. 예시로, 페이지와 생성된 팝업 간의 통신이나, 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있습니다.</p>
+
+<p>일반적으로, 다른 페이지 간의 스크립트는 각 페이지가 같은 프로토콜, 포트 번호와 호스트을 공유하고 있을 때에("<a href="/en-US/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>"으로도 불려 집니다.) 서로 접근할 수 있습니다. <code><strong>window.postMessage()</strong></code>는 이 제약 조건을 안전하게 우회하는 기능을 제공합니다.</p>
+
+<p>대체로, 한 window는 다른 window를 참조할 수 있고(<em>예시,</em> <code>targetWindow = window.opener</code>), <code>targetWindow.postMessage()</code>를 통해 다른 window에 {{domxref("MessageEvent")}}를 전송할 수 있습니다. 이벤트를 받는 window는 이를 통해 필요에 따라 <a href="/ko/docs/Web/Guide/Events">이벤트를 처리</a>할 수 있습니다. <code><strong>window.postMessage()</strong></code>를 통해 전달된 인자(예시, "message")는 <a href="#The_dispatched_event">이벤트 객체를 통해 이벤트를 받는 window에서 사용</a>할 수 있습니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>targetWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre>
+
+<dl>
+ <dt><code><em>targetWindow</em></code></dt>
+ <dd>메세지를 전달 받을 window의 참조. 참조를 취득할 방법으로는 다음과 같은 것이 있습니다:
+ <ul>
+  <li>{{domxref("Window.open")}} (새 창을 만들고 새 창을 참조할 때),</li>
+  <li>{{domxref("Window.opener")}} (새 창을 만든 window를 참조할 때),</li>
+  <li>{{domxref("HTMLIFrameElement.contentWindow")}} (부모 window에서 임베디드된 {{HTMLElement("iframe")}}을 참조할 때),</li>
+  <li>{{domxref("Window.parent")}} (임베디드된 {{HTMLElement("iframe")}}에서 부모 window를 참조할 때),</li>
+  <li>{{domxref("Window.frames")}} + an index value (named or numeric).</li>
+ </ul>
+ </dd>
+ <dt><code><em>message</em></code></dt>
+ <dd>다른 window에 보내질 데이터. 데이터는 <a href="/en-US/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>을 이용해 직렬화됩니다. 이를 통해 직렬화를 직접할 필요 없이 대상 window에 다양한 데이터 객체를 안전하게 전송할 수 있습니다. [<a href="/en-US/docs/">1</a>]</dd>
+ <dt><code><em>targetOrigin</em></code></dt>
+ <dd><code>targetWindow</code>의 origin을 지정합니다. 이는 전송되는 이벤트에서 사용되며, 문자열 <code>"*"</code>(별도로 지정하지 않음을 나타냄) 혹은 URI이어야 합니다. 이벤트를 전송하려 할 때에 <code>targetWindow</code>의 스키마, 호스트 이름, 포트가 <code>targetOrigin</code>의 정보와 맞지 않다면, 이벤트는 전송되지 않습니다. 세 가지 모두 일치해야 이벤트가 전송됩니다. 이는 메세지를 보내는 곳을 제안하기 위함입니다. 예를 들어, <code>postMessage()</code>를 통해 비밀번호가 전송된다면, 악의적인 제 3자가 가로채지 못하도록, <code>targetOrigin</code>을 반드시 지정한 수신자와 동일한 URI를 가지도록 설정하는 것이 정말 중요합니다. <strong>다른 window의 document의 위치를 알고 있다면, 항상 <code>targetOrigin</code>에 <code>*</code> 말고 특정한 값을 설정하세요. 특정한 대상을 지정하지 않으면 악의적인 사이트에 전송하는 데이터가 공개되어 버립니다.</strong></dd>
+ <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt>
+ <dd>일련의 {{domxref("Transferable")}} 객체들. 메세지와 함께 전송됩니다. 이 객체들의 소유권은 수신 측에게 전달되며, 더 이상 송신 측에서 사용할 수 없습니다.</dd>
+</dl>
+
+<h2 id="디스페치_이벤트The_dispatched_event">디스페치 이벤트(The dispatched event)</h2>
+
+<p> 이하의 JavaScript를 실행하면 <code>otherWindow</code> 에서 전달된 메시지를 받을 수 있습니다:</p>
+
+<pre class="brush: js">window.addEventListener("message", receiveMessage, false);
+
+function receiveMessage(event)
+{
+  if (event.origin !== "http://example.org:8080")
+    return;
+
+  // ...
+}
+</pre>
+
+<p>전달된 메시지의 프로퍼티는 다음과 같습니다:</p>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>다른 윈도우에서 온 오브젝트.</dd>
+ <dt><code>origin</code></dt>
+ <dd><code>postMessage</code> 가 호출될 때 메시지를 보내는 윈도우의 <a href="/en-US/docs/Origin">origin</a>.<br>
+ 이 문자열은 프로토콜과 "://", 호스트 명(존재할 경우), 그리고 ":"의 뒤에 이어 지는 포트 번호가 연결된 것입니다. (포트 번호는 포트 번호가 명기되었거나 주어진 프로토콜의 디폴트 포트와 다를 경우). 전형적인 origin의 예로 <code class="nowiki">https://example.org</code> (이 경우 port <code>443</code>), <code class="nowiki">http://example.net</code> (이 경우 port <code>80</code>), and <code class="nowiki">http://example.com:8080</code>가 있습니다. 이  origin은 <code>postMessage</code> 호출 이후 다른 위치로 이동되었을 수 있는 해당 윈도우의 현재 또는 미래의  origin 이 보장되지 <em>않는다</em>는 점에 주의하세요.</dd>
+ <dt><code>source</code></dt>
+ <dd>메시지를 보낸  <code><a href="/en-US/docs/DOM/window">window</a></code> 오브젝트에 대한 참조.<br>
+ 이것을 사용함으로 다른 orign에 있는 두 개의 윈도우에서 쌍방향 통신을 확립할 수 있습니다.</dd>
+</dl>
+
+<h2 id="보안_문제Security_concerns">보안 문제(Security concerns)</h2>
+
+<p><strong>다른 사이트로부터 메시지를 받고 싶지 않다면,  <code>message</code> 이벤트를 위해 어떠한 이벤트 리스너도 추가하지 <em>마세요</em>.</strong> 이것은 보안 문제를 피할 수 있는 단순명료한 방법입니다.</p>
+
+<p>다른 사이트로부터 메시지를 받고자 한다면, <code>origin</code>과 추가로 <code>source</code> 프로퍼티를 이용해 <strong>항상 보내는 쪽의 신원을 확인하세요</strong>. 임의의 어떤 윈도우(예: <code class="nowiki">http://evil.example.com</code>를 포함)는 다른 윈도우에 메시지를 보낼 수 있으며, 알 수 없는 발신자가 악의적인 메시지를 보내지 않는다는 보장이 없습니다. 그러나 신원을 확인했더라도 <strong>수신된 메시지의 구문을 항상 확인해야 합니다</strong>. 그렇지 않으면 신뢰할 수 있는 메시지만 전송할 것으로 기대한 사이트의 보안 구멍으로 인해 크로스 사이트 스크립트 빈틈이 생길 수 있습니다.</p>
+
+<p><strong><code>postMessage</code> 를 이용해 다른 윈도우로 데이터를 보낼 때, 항상 정확한 타겟 origin (<code>*</code>가 아니라) 을 지정하세요.</strong> 악의적인 사이트는 당신이 모르는 사이에 윈도우의 위치를 변경할 수 있고, 따라서 <code>postMessage</code>를 사용하여 전송된 데이터를 가로챌 수 있습니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">/*
+ * &lt;http://example.com:8080&gt;에 있는 윈도우 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);
+</pre>
+
+<pre class="brush: js">/*
+ * In the popup's scripts, running on &lt;http://example.com&gt;:
+ */
+
+// 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);
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p>윈도우 document의 장소와 무관하게, 임의의 윈도우는 언제든지 메시지를 보내기 위해 임의의 다른 윈도우에 있는 함수에 접근할 수도 있습니다. 그래서 이벤트 리스너는 메시지를 취득할 때, <code>origin</code> 또는 <code>source</code> 프로퍼티를 이용해, 먼저 메시지 송신자의 식별 정보를 <strong>체크해야만 합니다</strong>. 이것은 아무리 강조해도 지나치지 않습니다. 왜냐하면,<strong> <code>origin</code> 또는 <code>source</code> 프로퍼티의 체크 실패는 크로스 사이트 스크립팅 공격을 가능하게 하기 때문입니다.</strong></p>
+
+<p>비동기로 전달된 스크립트(타임아웃, 유저 생성 이벤트)에서, <code>postMessage</code>의 호출자의 판별이 불가능할 때, <code>postMessage</code>에 의해 보내진 이벤트를 기다리는 이벤트 핸들러는 예외를 발생시킵니다.</p>
+
+<p><code>postMessage()</code>는 <em>보류 중인 모든 실행 컨텍스트가 완료된 후에만</em> {{domxref("MessageEvent")}}을 발송하도록 스케줄합니다. 예를 들어, 이벤트 핸들러에서 <code>postMessage()</code>가 호출되는 경우, {{domxref("MessageEvent")}}가 발송되기 전에 해당 이벤트에 대한 나머지 핸들러와 마찬가지로 이벤트 핸들러는 완료까지 실행된다.</p>
+
+<p>전달된 이벤트의 <code>origin</code> 프로퍼티의 값은 호출하는 윈도우의 <code>document.domain</code> 현재 값에 영향을 받지 않습니다.</p>
+
+<p>IDN 호스트 명에 한하여, <code>origin</code> 프로퍼티 값은 일관되게 Unicode 또는 punycode가 아닙니다. 그래서, IDN 사이트로 부터 메시지를 기대하는 경우 최상의 호환성 체크를 하기위해, IDN과 Punycode의 값 모두를 체크하세요. 이 값은 결국 일관되게 IDN이 될 것이지만, 현재로서는 IDN과 Punycode 양식을 모두 처리해야 합니다.</p>
+
+<p>송신 창에 <code>javascript:</code> 또는<code>data:</code> URL이 있을 때의 <code>origin</code> 프로퍼티의 값은 URL을 로드한 스크립트의 origin입니다.</p>
+
+<h3 id="Using_window.postMessage_in_extensions_Non-standard_inline">Using window.postMessage in extensions {{Non-standard_inline}}</h3>
+
+<p><code>window.postMessage</code>는 크롬 코드(예: 확장 코드 및 권한 코드)로 실행되는 JavaScript에서 사용할 수 있지만, 발송된 이벤트의 <code>source</code> 프로퍼티는 보안 제한으로 항상 <code>null</code>입니다. (다른 프로퍼티에는 예상 값이 있습니다.)</p>
+
+<p>콘텐츠 또는 웹 컨텍스트 스크립트가 <code>targetOrigin</code>을 지정하여 확장 스크립트(백그라운드 스크립트 또는 콘텐츠 스크립트)와 직접 통신하는 것은 불가능합니다. 웹 또는 콘텐츠 스크립트는 <code>"*"</code>의 <code>targetOrigin</code>이 포함된 <code>window.postMessage</code>를 사용하여 모든 리스너에게 브로드캐스트할 수 있지만, 확장은 이러한 메시지의 발신지를 확인할 수 없고 다른 리스너(제어하지 않는 수신자 포함)가 수신할 수 있기 때문에 이 작업은 중지됩니다. </p>
+
+<p>컨텐츠 스크립트는 <a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime.sendMessage</a> 를 사용하여 백그라운드 스크립트와 통신해야 합니다. 웹 컨텍스트 스크립트는 사용자 지정 이벤트를 사용하여 컨텐츠 스크립트(필요한 경우 게스트 페이지에서 스누핑을 방지하기 위해 임의로 생성된 이벤트 이름 포함)와 통신할 수 있습니다.</p>
+
+<p>마지막으로, <code>file:</code> URL의 페이지의 메시지를 보낼 경우 <code>targetOrigin</code> 파라미터를 <code>"*"</code>로 할 필요가 있습니다. <code>file://</code> 은 보안 제한으로 사용할 수 없으며 이 제한은 향후 수정될 수 있습니다.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><strong>Specification</strong></th>
+   <th><strong>Status</strong></th>
+   <th><strong>Comment</strong></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "web-messaging.html#dom-window-postmessage", "postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.postMessage")}} </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Document.domain")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
+</ul>
diff --git a/files/ko/web/api/window/prompt/index.html b/files/ko/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..7817f6e8b3
--- /dev/null
+++ b/files/ko/web/api/window/prompt/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.prompt()
+slug: Web/API/Window/prompt
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p><code>Window.prompt()</code>는 사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자를 띄웁니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em>result</em> = window.prompt(<em>message</em>, <em>default</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>사용자에게 보여줄 문자열. 프롬프트 창에 표시할 메세지가 없으면 생략할 수 있습니다.</dd>
+ <dt><code>default</code> {{optional_inline}}</dt>
+ <dd>텍스트 입력 필드에 기본으로 채워 넣을 문자열. Internet Explorer 7과 8에서는 이 인자에 값을 지정하지 않으면 문자열 <code>"undefined"</code>가 지정됨에 유의하세요.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>사용자가 입력한 문자열, 또는 <code>null</code>.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">let sign = prompt("당신의 별자리는 무엇입니까?");
+
+if (sign.toLowerCase() === "전갈자리") {
+  alert("와! 저도 전갈자리예요!");
+}
+
+// prompt 기능을 쓰는 방법은 다양합니다.
+sign = window.prompt(); // 빈 대화 상자를 엽니다.
+sign = prompt(); // 빈 대화 상자를 엽니다.
+sign = window.prompt("님 지금 기분 좋아요?"); // 안내 문구 "님 지금 기분 좋아요?"가 보이는 창을 띄웁니다.
+sign = window.prompt("님 지금 기분 좋아요?", "네."); // 안내 문구 "님 지금 기분 좋아요?"가 보이는 창을 띄우되 기본적으로 입력되어 있는 값은 "네."로 합니다.</pre>
+
+<p>사용자가 확인 버튼을 누르면 입력부의 문자열을 반환합니다. 만약 사용자가 아무것도 입력하지 않고 확인 버튼을 누르면 빈 문자열을 반환합니다. 만약 사용자가 취소 버튼을 누르면 <code>null</code>을 반환합니다.</p>
+
+<p>상기의 대화 상자는 OS X 상의 Chrome에서 다음과 같이 보입니다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p>
+
+<h2 id="Notes" name="Notes">비고</h2>
+
+<p>대화 상자는 한 줄의 텍스트 상자, 한 개의 취소 버튼과 한 개의 확인 버튼을 갖고, 사용자가 텍스트 상자에 입력한 문자열(빈 문자열일 수 있음)을 반환합니다.</p>
+
+<p>대화 상자는 modal window(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)로, 사용자는 대화 상자가 닫힐 때까지 나머지 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 modal window)를 만드는 함수를 남용하면 안 됩니다.</p>
+
+<p>이 함수가 반환하는 값은 문자열이라는 점에 유의하세요. 이는 사용자가 입력한 값을 다른 자료형으로 바꿔야 할 때가 있음을 뜻합니다. 예를 들어, 만약 사용자의 대답이 <code>Number</code>가 되어야 한다면 반환 값을 직접 변환해야 합니다.</p>
+
+<p> </p>
+
+<pre class="brush: js"><code>const aNumber = Number(window.prompt("Type a number", ""));</code></pre>
+
+<p> </p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">브라우저 호환성</h2>
+
+<p>{{Compat("api.Window.prompt")}}</p>
+
+<h2 id="See_also" name="See_also">관련 문서</h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/requestanimationframe/index.html b/files/ko/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..d85946dee3
--- /dev/null
+++ b/files/ko/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,112 @@
+---
+title: window.requestAnimationFrame()
+slug: Web/API/Window/requestAnimationFrame
+tags:
+  - API
+  - Animations
+  - DOM
+  - DOM 레퍼런스
+  - requestAnimationFrame
+  - 게임
+  - 그래픽
+  - 그리기
+  - 레퍼런스
+  - 메소드
+  - 성능
+  - 스케줄링
+  - 윈도우
+  - 자바스크립트 타이머
+  - 중급
+translation_of: Web/API/window/requestAnimationFrame
+---
+<p>{{APIRef}}<br>
+ <strong><code>window.requestAnimationFrame()</code></strong>은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다.</p>
+
+<div class="note"><strong>노트:</strong> 다음 리페인트에서 그 다음 프레임을 애니메이트하려면 콜백 루틴이 반드시 스스로 <code>requestAnimationFrame()</code>을 호출해야합니다.</div>
+
+<p>화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 브라우저에서는 W3C 권장사항에 따라 그 수가 디스플레이 주사율과 일치하게됩니다. 대부분의 최신 브라우저에서는 성능과 배터리 수명 향상을 위해 <code>requestAnimationFrame()</code> 호출은 백그라운드 탭이나 hidden {{ HTMLElement("iframe") }}에서 실행이 중단됩니다.</p>
+
+<p>콜백 메소드에는 <code>requestAnimationFrame()</code>이 대기된 콜백을 실행하는 시점을 나타내는 단일 인자 {{domxref("DOMHighResTimeStamp")}}가 전달됩니다. 따라서, 모든 이전 콜백의 작업 부하를 계산하는동안 시간이 지나갔음에도 불구하고 단일 프레임에서의 다중 콜백은 각각 동일한 타임스탬프를 받습니다. 이 타임스탬프는 밀리초 단위의 십진수지만, 최소 정밀도는 1ms (1000 µs) 입니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">window.requestAnimationFrame(callback);
+</pre>
+
+<h3 id="Parameters" name="Parameters">파라미터</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>다음 리페인트를 위한 애니메이션을 업데이트할 때 호출할 함수입니다. 콜백 함수에는 <code>requestAnimationFrame()</code>이 콜백 함수 실행을 시작할 때의 시점을 나타내는 {{domxref('performance.now()')}} 에 의해 반환되는 것과 유사한 {{domxref("DOMHighResTimeStamp")}} 단일 인자가 전달됩니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>콜백 리스트의 항목을 정의하는 고유한 요청 id 인 <code>long</code> 정수 값. 0 이 아니라는것 외에는 다른 추측을 할 수가 없는 값입니다. 이 값을 {{domxref("window.cancelAnimationFrame()")}} 에 전달해 콜백 요청을 취소할 수 있습니다.</p>
+
+<h2 id="Notes" name="Notes">예시</h2>
+
+<pre class="brush: js">var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+element.style.position = 'absolute';
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress &lt; 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+</pre>
+
+<h2 id="노트">노트</h2>
+
+<p>인터넷 익스플로러와 Edge 17 버전 이하는 페인트 사이클 이전에 <code>requestAnimationFrame</code> 실행을 보장하지 않습니다.</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>변경 사항 없음, 이 전 것을 대체.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('RequestAnimationFrame')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("Window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("Window.cancelAnimationFrame()")}}</li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - 블로그 포스트</li>
+ <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - 블로그 포스트</li>
+ <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - 블로그 포스트</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - 블로그 포스트</li>
+ <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
+ <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li>
+</ul>
diff --git a/files/ko/web/api/window/requestidlecallback/index.html b/files/ko/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..e691bf3f07
--- /dev/null
+++ b/files/ko/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,76 @@
+---
+title: window.requestIdleCallback()
+slug: Web/API/Window/requestIdleCallback
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - JavaScript timers
+  - Method
+  - Reference
+  - Window
+  - requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>window.requestIdleCallback()</strong></code> 메서드는 브라우저의 idle 상태에 호출될 함수를 대기열에 넣습니다. 이를 통해 개발자는 애니메이션 및 입력 응답과 같은 대기 시간이 중요한 이벤트에 영향을 미치지 않고 메인 이벤트 루프에서 백그라운드 및 우선 순위가 낮은 작업을 수행 할 수 있습니다. 함수는 일반적으로 first-in-first-out(FIFO) 순서로 호출됩니다. 하지만, <code>timeout</code> 옵션이 지정된 callback은 제한 시간이 지나기 전에 이들을 실행하기 위해 순서에 맞지 않게 호출될 수 있습니다.</p>
+
+<p>idle callback 안에서  <code>requestIdleCallback()</code> 을 호출하여 다음 패스가 이벤트 루프를 통과하는 즉시 다른 callback을 예약할 수 있습니다.</p>
+
+<div class="note">필수적인 작업이라면 <code>timeout</code> 옵션을 사용하는 것을 강력히 권장합니다.  사용하지 않을 경우 callback이 실행되기전에 몇 초 이상 소요될 수 있습니다.</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>var <em>handle</em> = <em>window</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre>
+
+<h3 id="Returns" name="Returns">Return value</h3>
+
+<p>실행 ID. {{domxref("window.cancelIdleCallback()")}} 메서드에 인자로 전달하여 callback 실행을 취소할 수 있습니다.</p>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>이벤트 루프가 유휴 상태가 될 때 호출되어야 하는 함수. callback 함수는 {{domxref("IdleDeadline")}} 객체를 인자로 전달받습으며 이 객체를 통해 타임아웃 기간이 만료되어 callback이 실행되었는지 여부를 알 수 있습니다.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>선택적으로 사용가능한 option 설정. 현재는 하나의 property만 정의 되어 있습니다 :
+ <ul>
+  <li><code>timeout</code>: 만약<code>timeout</code> 이 지정되어 있고 양수일 경우,  <em>timeout</em> 밀리세컨드가 지날 때까지 callback이 실행되지 않았다면 성능상에 부정적인 영향을 미치는 위험이 있더라도 다음 idle 상태에 callback이 호출됩니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a> 포스트의 <a href="/en-US/docs/Web/API/Background_Tasks_API#Example">complete example</a> 예제를 참조해 주십시오.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Window.requestIdleCallback")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+ <li>{{domxref("window.setTimeout()")}}</li>
+ <li>{{domxref("window.setInterval()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/resize_event/index.html b/files/ko/web/api/window/resize_event/index.html
new file mode 100644
index 0000000000..f2c38b598b
--- /dev/null
+++ b/files/ko/web/api/window/resize_event/index.html
@@ -0,0 +1,192 @@
+---
+title: resize
+slug: Web/API/Window/resize_event
+translation_of: Web/API/Window/resize_event
+---
+<p> </p>
+
+<p><span class="seoSummary"><strong><code>resize</code></strong> 이벤트는 document view의 크기가 변경될 때 발생합니다.</span></p>
+
+<p><code>window.onresize</code> 속성(어트리뷰트)을 사용하거나,<code>window.addEventListener('resize', ...)</code>를 사용하여, 이벤트 핸들러에 <code>resize</code> 이벤트를 등록할 수 있습니다.</p>
+
+<p>일부 브라우저의 이전 버전에서는 모든 HTML 요소(엘리먼트)에 <code>resize</code> 이벤트 핸들러를 등록 할 수 있었습니다. 여전히 <code>onresize</code> 속성을 사용하거나, {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용하여 모든 요소에 핸들러를 설정할 수 있습니다. 그러나 <code>resize</code> 이벤트는 오직 {{domxref("Window", "window")}}객체({{domxref("document.defaultView")}})에서만 발생합니다(전달합니다). <code>window</code> 객체에 등록된 핸들러만 이벤트를 수신합니다.</p>
+
+<p>모든 요소가 resize 변경을 알림받을 수 있도록 하는 새로운 제안(proposal 2017)이 있습니다. 드래프트문서를 읽으려면 <a href="https://wicg.github.io/ResizeObserver/">Resize Observer</a>를 참조하고, 진행중인 토론을 읽으려면 <a href="https://github.com/WICG/ResizeObserver/issues">Github issues</a> 문서를 참조하세요.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specifications</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#resizing-viewports">CSSOM View</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView (window)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/ko/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>이벤트 타겟(DOM 트리의 최상위 타겟).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/ko/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>이벤트의 타입.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/ko/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>이벤트가 정상적으로 버블이 발생하는지 여부.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/ko/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>이벤트 취소 가능 여부.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/ko/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/ko/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (문서의 <code>window</code>)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p><code>resize</code> 이벤트는 빈번하게 발생될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같은 계산이 많이 필요한 연산을 실행하지 않아야 합니다. 대신에 다음과 같이 <a href="/ko/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/ko/docs/Web/API/WindowTimers/setTimeout">setTimeout</a>, <a href="/ko/docs/Web/API/CustomEvent">customEvent</a>* 등을 사용해 이벤트를 스로틀(throttle) 하는것이 좋습니다:<br>
+ <br>
+ <strong>* 주의: </strong>IE11은 제대로 작동하려면 <a href="https://developer.mozilla.org/ko/docs/Web/API/CustomEvent/CustomEvent#Polyfill">customEvent</a> 폴리필(polyfill)이 필요합니다.</p>
+
+<h3 id="requestAnimationFrame_customEvent">requestAnimationFrame + customEvent</h3>
+
+<pre class="brush: 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!");
+});
+</pre>
+
+<h3 id="requestAnimationFrame">requestAnimationFrame</h3>
+
+<pre class="brush: 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!')
+});
+</pre>
+
+<h3 id="setTimeout">setTimeout</h3>
+
+<pre class="brush: 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
+    ...
+  }
+
+}());</pre>
diff --git a/files/ko/web/api/window/resizeto/index.html b/files/ko/web/api/window/resizeto/index.html
new file mode 100644
index 0000000000..a00b232297
--- /dev/null
+++ b/files/ko/web/api/window/resizeto/index.html
@@ -0,0 +1,73 @@
+---
+title: Window.resizeTo()
+slug: Web/API/Window/resizeTo
+tags:
+  - API
+  - CSSOM View
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/resizeTo
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Window.resizeTo()</code></strong> 메서드는 동적으로 창의 크기를 변경합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox notranslate">window.resizeTo(<em>width</em>, <em>height</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>새로운 {{domxref("window.outerWidth","outerWidth")}}를 나타내는 픽셀 단위 정수. 스크롤 바, 제목 표시줄 등을 모두 포함한 너비입니다.</dd>
+ <dt><code>height</code></dt>
+ <dd>새로운 {{domxref("window.outerHeight","outerHeight")}}를 나타내는 픽셀 단위 정수. 스크롤 바, 제목 표시줄 등을 모두 포함한 높이입니다.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>다음 함수는 창의 크기를 화면에서 사용 가능한 크기의 1/4로 설정합니다. {{domxref("Screen.availWidth")}}, {{domxref("Screen.availHeight")}} 속성도 참고하세요.</p>
+
+<pre class="brush:js notranslate">function quarter() {
+  window.resizeTo(
+    window.screen.availWidth / 2,
+    window.screen.availHeight / 2
+  );
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-resizeto', 'window.resizeTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.resizeTo")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.resizeBy()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/scrollto/index.html b/files/ko/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..10fa9652f2
--- /dev/null
+++ b/files/ko/web/api/window/scrollto/index.html
@@ -0,0 +1,48 @@
+---
+title: Window.scrollTo()
+slug: Web/API/Window/scrollTo
+translation_of: Web/API/Window/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p><span class="sentence" id="mt1">문서의 지정된 위치로 스크롤합니다.</span></p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><code>window.scrollTo(<em>x-좌표</em>, <em>y-좌표</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<ul>
+ <li><code>x-좌표는 문서의 왼쪽상단부터 시작하는 </code>픽셀단위의 <code>가로축</code>입니다.</li>
+ <li><code>y-좌표는 문서의 왼쪽상단부터 시작하는 </code>픽셀단위의 세로축입니다.</li>
+</ul>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">window.scrollTo( 0, 1000 );</pre>
+
+<h2 id="Notes" name="Notes">노트</h2>
+
+<p>이 함수는 <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a>과 효과적으로 같습니다. 스크롤링 관련 정보는 <a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a>, <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, 그리고 <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a>가 있습니다.</p>
+
+<h2 id="Specification" name="Specification">사양</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양</th>
+   <th scope="col">상태</th>
+   <th scope="col">주해</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/window/scrollx/index.html b/files/ko/web/api/window/scrollx/index.html
new file mode 100644
index 0000000000..e967d100e0
--- /dev/null
+++ b/files/ko/web/api/window/scrollx/index.html
@@ -0,0 +1,82 @@
+---
+title: Window.scrollX
+slug: Web/API/Window/scrollX
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+  - 스크롤
+translation_of: Web/API/Window/scrollX
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <code><strong>scrollX</strong></code> 읽기 전용 속성은 문서가 수평으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다.</span> 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아닙니다. 수직 스크롤은 {{domxref("Window.scrollY", "scrollY")}} 속성을 사용하여 가져올 수 있습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">var x = window.scrollX</pre>
+
+<h3 id="값">값</h3>
+
+<p>반환하는 값은 문서가 원점으로부터 수평방향으로 스크롤한 픽셀의 수를 나타내는 배정밀도 부동소수점 값입니다. 양의 값이 왼쪽 스크롤을 의미합니다. 문서를 픽셀보다 작은 정밀도의 장치에서 렌더링한 경우 반환값의 정밀도도 높아져 소숫값을 반환할 수 있습니다. 문서가 좌우로 전혀 움직이지 않은 상태면 <code>0</code>을 반환합니다.</p>
+
+<div class="note">
+<p>정숫값이 필요하면 {{jsxref("Math.round()")}}를 사용해 반올림할 수 있습니다.</p>
+</div>
+
+<p>더 기술적인 용어로, <code>scrollX</code>는 현재 {{Glossary("viewport", "뷰포트")}} 왼쪽 모서리의 X좌표를 반환하고, 뷰포트가 없으면 0을 반환합니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>다음 예제는 문서의 현재 스크롤 위치가 400픽셀이 넘으면 맨 처음으로 돌아갑니다.</p>
+
+<pre class="brush: js">if (window.scrollX &gt; 400) {
+  window.scroll(0,0);
+}</pre>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p><code>pageXOffset</code> 속성은 <code>scrollX</code> 의 다른 이름입니다.</p>
+
+<pre class="brush: js">window.pageXOffset === window.scrollX; // 항상 true</pre>
+
+<p>브라우저 호환성을 위해서는 <code>window.scrollX</code> 대신 <code>window.pageXOffset</code>을 사용하세요. 이에 더해, Internet Explorer 9 미만에서는 두 속성 모두 지원하지 않으므로 다른 비표준 속성을 사용해야 합니다. 다음은 완벽히 호환되는 코드의 예시입니다.</p>
+
+<pre class="brush: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;
+</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-window-scrollx', 'window.scrollX')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.scrollX")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.scrollY")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/scrolly/index.html b/files/ko/web/api/window/scrolly/index.html
new file mode 100644
index 0000000000..311a1eed05
--- /dev/null
+++ b/files/ko/web/api/window/scrolly/index.html
@@ -0,0 +1,86 @@
+---
+title: Window.scrollY
+slug: Web/API/Window/scrollY
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+  - Window
+  - 스크롤
+translation_of: Web/API/Window/scrollY
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <code><strong>scrollY</strong></code> 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다.</span> 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아닙니다. 수평 스크롤은 {{domxref("Window.scrollX", "scrollX")}} 속성을 사용하여 가져올 수 있습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">var <em>y</em> = window.scrollY</pre>
+
+<h3 id="값">값</h3>
+
+<p>원점으로부터 문서를 수직방향으로 스크롤한 픽셀의 수를 나타내는, 배정밀도 부동소수점 값. 양의 값이 위쪽 스크롤을 의미합니다. 문서를 단일 픽셀보다 높은 정밀도의 장치에서 렌더링한 경우 반환값의 정밀도도 높아져 소숫값을 반환할 수 있습니다. 문서가 위나 아래로 전혀 움직이지 않은 상태면 <code>0</code>을 반환합니다.</p>
+
+<div class="note">
+<p>정숫값이 필요하면 {{jsxref("Math.round()")}}를 사용해 반올림할 수 있습니다.</p>
+</div>
+
+<p>더 기술적인 용어로, <code>scrollY</code>는 현재 {{Glossary("viewport", "뷰포트")}} 위쪽 모서리의 Y좌표를 반환하고, 뷰포트가 없으면 0을 반환합니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: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);</pre>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p><code>scrollY</code> 속성을 사용하면 {{domxref("window.scrollBy", "scrollBy()")}}, {{domxref("window.scrollByLines", "scrollByLines()")}}, {{domxref("window.scrollByPages", "scrollByPages()")}}와 같은 상대적 스크롤 함수를 사용할 때, 문서가 이미 스크롤되지는 않았는지 판별할 수 있습니다.</p>
+
+<p>{{domxref("Window.pageYOffset", "pageYOffset")}} 속성은 <code>scrollY</code>의 다른 이름입니다.</p>
+
+<pre class="brush: js">window.pageYOffset === window.scrollY; // 항상 true</pre>
+
+<p>브라우저간 호환성을 위해서는 <code>window.scrollY</code> 대신 <code>window.pageYOffset</code>을 사용하세요. 이에 더해, Internet Explorer 9 미만의 구형 환경에서는 두 속성 모두 지원하지 않으므로 또 다른 비표준 속성을 사용해야 합니다. 다음은 완벽히 호환되는 코드의 예시입니다.</p>
+
+<pre class="brush: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;
+</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.scrollY")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.scrollX")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/self/index.html b/files/ko/web/api/window/self/index.html
new file mode 100644
index 0000000000..0e22bd94ed
--- /dev/null
+++ b/files/ko/web/api/window/self/index.html
@@ -0,0 +1,72 @@
+---
+title: Window.self
+slug: Web/API/Window/self
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Read-only
+  - Reference
+  - Window
+translation_of: Web/API/Window/self
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>Window.self</strong></code> 읽기전용 속성은 자기 자신을 {{domxref("WindowProxy")}}로써 반환합니다. <code>window.self</code>로도 사용할 수 있고, <code>self</code>만 독립적으로 사용해 접근할 수 있습니다. 독립적으로 접근했을 때의 이점은 비 {{jsxref("Window")}} 환경인 {{domxref("Worker", "웹 워커", "", 0)}} 등도 비슷한 표기법을 사용한다는 것입니다. 이 때 <code>self</code>는 <code>Window</code> 문맥에서는 <code>window.self</code>, 워커 문맥에서는 {{domxref("WorkerGlobalScope.self")}}와 같습니다.</p>
+
+<h2 id="Notes" name="Notes">예제</h2>
+
+<p>아래와 같이 쓴 <code>window.self</code>는 그냥 <code>window</code>로 바꿨을 때와 동일합니다.</p>
+
+<pre class="brush:js">if (window.parent.frames[0] != window.self) {
+    // this window is not the first frame in the list
+}
+</pre>
+
+<p>이에 더해 브라우징 문맥의 현재 활성확된 문서에서는 <code>window</code>가 현재 전역 객체를 가리키므로 다음 네 줄의 코드는 모두 동일합니다.</p>
+
+<pre class="brush:js">var w1 = window;
+var w2 = self;
+var w3 = window.window;
+var w4 = window.self;
+// w1, w2, w3, w4 모두 일치. 그러나 워커에서는 w2만 작동함
+</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No difference from the latest snapshot {{SpecName("HTML5.1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No difference from the {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>First snapshot containing the definition of <code>Window.self</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.self")}}</p>
+
+<h2 class="noinclude" id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}에서 같은 역할을 하는 {{domxref("WorkerGlobalScope.self")}}.</li>
+</ul>
diff --git a/files/ko/web/api/window/sessionstorage/index.html b/files/ko/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..7ae76ce298
--- /dev/null
+++ b/files/ko/web/api/window/sessionstorage/index.html
@@ -0,0 +1,101 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - API
+  - Property
+  - Reference
+  - Storage
+  - Window
+  - WindowSessionStorage
+  - 세션스토리지
+translation_of: Web/API/Window/sessionStorage
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p><strong><code>sessionStorage</code></strong> 읽기 전용 속성은 현재 {{glossary("origin", "출처")}} 세션의 {{domxref("Storage")}} 객체에 접근합니다. <code>sessionStorage</code>는 {{domxref("Window.localStorage", "localStorage")}}와 비슷하지만, <code>localStorage</code>의 데이터는 만료되지 않고, <code>sessionStorage</code>의 데이터는 <u>페이지 세션</u>이 끝날 때 제거되는 차이가 있습니다.</p>
+
+<ul>
+ <li>페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다.</li>
+ <li><strong>페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성합니다.</strong></li>
+ <li>같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 <code>sessionStorage</code>를 생성합니다.</li>
+ <li>탭/창을 닫으면 세션이 끝나고 <code>sessionStorage</code> 안의 객체를 초기화합니다.</li>
+</ul>
+
+<p><code>sessionStorage</code>에 저장한 자료는 <strong>페이지 프로토콜별로 구분</strong>합니다. 특히 HTTP(<a href="http://example.com">http://example.com</a>)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(<a href="https://example.com">https://example.com</a>)와는 다른 <code>sessionStorage</code>에 저장됩니다.</p>
+
+<p>키와 값은 <u>항상</u> 각 문자에 2바이트를 할당하는 UTF-16 {{domxref("DOMString")}}의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em>myStorage</em> = <em>window</em>.sessionStorage;</pre>
+
+<h3 id="값">값</h3>
+
+<p>현재 {{glossary("origin", "출처")}}의 세션 저장 공간에 접근할 수 있는 {{domxref("Storage")}} 객체.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>요청이 정책의 결정을 위반했거나, 출처가 <a href="/ko/docs/Web/Security/Same-origin_policy#출처의_정의">유효한 스킴/호스트/포트 튜플</a>이 아닌 경우. 유효하지 않은 튜플은 출처가 <code>file:</code>이나 <code>data:</code> 스킴을 사용했을 때 발생할 수 있습니다. 예외의 예를 들자면 사용자가 특정 출처의 지속성 데이터를 거부하도록 브라우저를 설정하는 경우가 있습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 코드는 현재 출처의 세션 {{domxref("Storage")}} 객체에 접근한 후, {{domxref("Storage.setItem()")}}을 사용해 항목 하나를 추가합니다.</p>
+
+<pre class="brush: js notranslate">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>다음 예제는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 합니다.</p>
+
+<pre class="brush: js notranslate">// 추적할 텍스트 입력 칸 가져오기
+let field = document.getElementById("field");
+
+// 자동저장 값이 존재하는지 판별
+// (의도치 않게 페이지를 새로 불러올 경우에만 발생)
+if (sessionStorage.getItem("autosave")) {
+  // 입력 칸의 콘텐츠 복구
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// 텍스트 입력 칸의 변화 수신
+field.addEventListener("change", function() {
+  // 결과를 세션에 저장
+  sessionStorage.setItem("autosave", field.value);
+});
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a> 문서에서 전체 예제를 살펴보세요.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/status/index.html b/files/ko/web/api/window/status/index.html
new file mode 100644
index 0000000000..2dd40aa3fd
--- /dev/null
+++ b/files/ko/web/api/window/status/index.html
@@ -0,0 +1,25 @@
+---
+title: Window.status
+slug: Web/API/Window/status
+translation_of: Web/API/Window/status
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>브라우저 하단의 상태 표시줄에 텍스트를 바꾸거나, 기존 텍스트를 얻을 수 있다.</p>
+
+<p>이 프로퍼티는 파이어폭스나 기타 브라우저의 기본 설정값에서는 동작하지 않는다. window.status를 변경한다고 하더라도 상태 표시줄의 메시지에 출력되지 않을 것이다. 상태바 텍스트를 변경할 수 있게 하려면 유저가 about:config 창에서 dom.disable_window_status_change 를 허용해 주어야 한다.(인터넷 익스플로러의 경우 [인터넷 옵션 - 보안 - 사용자 지정 수준 - 스크립트를 통해 상태 표시줄 업데이트 허용]을 '사용'으로 바꾸어야 한다.)</p>
+
+<div class="note">
+<p><strong>Note:</strong> 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.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>window</em>.status = <em>string;
+var value = window.status;</em></pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>HTML5</p>
diff --git a/files/ko/web/api/window/stop/index.html b/files/ko/web/api/window/stop/index.html
new file mode 100644
index 0000000000..9ad0b6d546
--- /dev/null
+++ b/files/ko/web/api/window/stop/index.html
@@ -0,0 +1,50 @@
+---
+title: Window.stop()
+slug: Web/API/Window/stop
+translation_of: Web/API/Window/stop
+---
+<div> {{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>Window.stop()메서드는 window 객체의 로딩을 취소하는 메서드입니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox">window.stop()
+</pre>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<pre class="brush:js">window.stop();
+</pre>
+
+<h2 id="Notes" name="Notes">본문</h2>
+
+<p>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.</p>
+
+<h2 id="Specification" name="Specification">설명</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility">Compatibility</h2>
+
+<p>stop()메서드는 인터넷 익스플로러에서 지원하지 않습니다.</p>
diff --git a/files/ko/web/api/window/toolbar/index.html b/files/ko/web/api/window/toolbar/index.html
new file mode 100644
index 0000000000..37e6a6cce0
--- /dev/null
+++ b/files/ko/web/api/window/toolbar/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.toolbar
+slug: Web/API/Window/toolbar
+tags:
+  - 참고
+  - 창
+translation_of: Web/API/Window/toolbar
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>창에서 끌 수 있는, 눈에 보이는 toolbar 문제를 해결합니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>objRef</em> = window.toolbar</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>{{deprecated_inline()}} 주어진 HTML 예제는 다양한 "바" 객체의 visible 프로퍼티의 사용방법과, 권한상승 역시 현재창에서 어떠한 bar의 visible 프로퍼티로 쓰여지는것을 필요로한다는 것을 보여주고 있습니다. 하지만 <a href="/en-US/docs/Bypassing_Security_Restrictions_and_Signing_Code" title="Bypassing_Security_Restrictions_and_Signing_Code">deprecation of enablePrivilege</a> 때문에 이 기능은 웹 페이지에서 사용할 수 없습니다. EnablePrivilege는 Firefox 15 에서 작동하지 않고, Firefox 17 에서 삭제 될 것입니다.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Various DOM Tests&lt;/title&gt;
+&lt;script&gt;
+
+// 현재창에서 존재하는 바의 상태를 변경
+netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
+window.toolbar.visible=!window.toolbar.visible;
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;Various DOM Tests&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes" name="Notes">설명</h2>
+
+<p>페이지를 띄울때, 브라우저는 다음과 같은 dialog를 출력할 것입니다. : <img alt="Image:Modify_any_open_window_dialog.png"></p>
+
+<p>이러한 눈에 보이는 바들을 끄기 위해서, 당신의 스크립트를 확인하거나 위의 예제처럼 적절한 권한을 활성화 시켜야 합니다. 또한 주의해야 할 점은 동적으로 업데이트 되는 다양한 보이는 toolbar는 창의 크기에 따라 동적으로 업데이트 될 수 있고, 당신의 페이지의 레이아웃에 영향을 끼칠 수 있습니다.</p>
+
+<p>See also: <a href="/en-US/docs/Window.locationbar">window.locationbar</a>, <a href="/en-US/docs/Window.menubar">window.menubar</a>, <a href="/en-US/docs/Window.personalbar">window.personalbar</a>, <a href="/en-US/docs/Window.scrollbars">window.scrollbars</a>, <a href="/en-US/docs/Window.statusbar">window.statusbar</a></p>
+
+<h2 id="Specification" name="Specification">사양</h2>
+
+<p>HTML5</p>
diff --git a/files/ko/web/api/window/top/index.html b/files/ko/web/api/window/top/index.html
new file mode 100644
index 0000000000..d499281395
--- /dev/null
+++ b/files/ko/web/api/window/top/index.html
@@ -0,0 +1,55 @@
+---
+title: Window.top
+slug: Web/API/Window/top
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/top
+---
+<div>{{APIRef}}</div>
+
+<p>Returns a reference to the topmost window in the window hierarchy.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>topWindow</var> = window.top;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Where the {{domxref("window.parent")}} property returns the immediate parent of the current window, <code>window.top</code> returns the topmost window in the hierarchy of window objects.</p>
+
+<p>This property is especially useful when you are dealing with a window that is in a subframe of a parent or parents, and you want to get to the top-level frameset.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.top")}}</p>
diff --git a/files/ko/web/api/window/unload_event/index.html b/files/ko/web/api/window/unload_event/index.html
new file mode 100644
index 0000000000..8cf741a9ae
--- /dev/null
+++ b/files/ko/web/api/window/unload_event/index.html
@@ -0,0 +1,126 @@
+---
+title: 'Window: unload 이벤트'
+slug: Web/API/Window/unload_event
+tags:
+  - Event
+  - Reference
+  - Window
+  - 이벤트
+translation_of: Web/API/Window/unload_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>unload</code></strong> 이벤트는 문서나 하위 리소스가 언로딩 중일 때 발생합니다.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">확산</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">취소 가능</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 처리기 속성</th>
+   <td>{{domxref("WindowEventHandlers/onunload", "onunload")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>unload</code>는 다음 이벤트 이후 발생합니다.</p>
+
+<ul>
+ <li>{{domxref("Window/beforeunload_event", "beforeunload")}} (취소 가능한 이벤트)</li>
+ <li>{{domxref("Window/pagehide_event", "pagehide")}}</li>
+</ul>
+
+<p><code>unload</code> 시점의 문서는 다음과 같은 상태입니다.</p>
+
+<ul>
+ <li>이미지, IFrame 등 모든 리소스는 여전히 존재합니다.</li>
+ <li>최종 사용자는 아무것도 볼 수 없습니다.</li>
+ <li>UI 상호작용은 아무 효과도 없습니다. ({{domxref("window.open()")}}, {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, 등등)</li>
+ <li>오류가 발생해도 언로딩 절차는 중단되지 않습니다.</li>
+</ul>
+
+<p>참고로 <code>unload</code> 이벤트 역시 문서 트리의 순서를 따라갑니다. 즉 부모 프레임의 <code>unload</code>가 자식 프레임의 <code>unload</code> <strong>이전에</strong> 발생합니다. 아래 예제를 확인하세요</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Parent Frame&lt;/title&gt;
+    &lt;script&gt;
+      window.addEventListener('beforeunload', function(event) {
+        console.log('I am the 1st one.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('I am the 3rd one.');
+      });
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe src="child-frame.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>아래는 <code>child-frame.html</code>의 내용입니다.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Child Frame&lt;/title&gt;
+    &lt;script&gt;
+      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…');
+      });
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      ☻
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>부모 프레임이 언로딩 될 때, <code>console.log()</code> 메시지를 통해 순서를 확인할 수 있습니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-unload', 'unload')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.unload_event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>관련 이벤트: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}</li>
+ <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li>
+</ul>
diff --git a/files/ko/web/api/window/window/index.html b/files/ko/web/api/window/window/index.html
new file mode 100644
index 0000000000..16109243f1
--- /dev/null
+++ b/files/ko/web/api/window/window/index.html
@@ -0,0 +1,43 @@
+---
+title: Window.window
+slug: Web/API/Window/window
+translation_of: Web/API/Window/window
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>window 객체의 window 프로퍼티는 자기 자신의 window 객체를 가리킨다. 즉, 아래의 표현들은 같은 window 객체를 반환하게 된다:</p>
+
+<pre class="syntaxbox">window.window
+window.window.window
+window.window.window.window
+  ...
+</pre>
+
+<p>웹페이지에서 window 객체는 전역 객체이기도 하다. 다시 말해서:</p>
+
+<ol>
+ <li>스크립트의 전역 변수는 사실 window 객체의 프로퍼티이다.
+  <pre class="brush:js">var global = {data: 0};
+alert(global === window.global); // true를 반환한다.
+</pre>
+ </li>
+ <li>window 객체의 내장된 프로퍼티들은 window. 접두사 없이도 참조가 가능하다.
+  <pre class="brush:js">setTimeout("alert('Hi!')", 50); // window.setTimeout. 을 사용한 것과 동일하다.
+alert(window === window.window); // true를 반환한다.
+</pre>
+ </li>
+</ol>
+
+<p>자기 자신을 참조하는 window 라는 프로퍼티가 있다는 것은 (아마도) 전역 객체를 쉽게 참조하기 위함으로 생각된다.(없다면 스크립트 첫 부분에 다음과 같이 직접 만들어주었어야 했다. var window = this;)</p>
+
+<p>다른 이유로는, 만약 이 프로퍼티가 없다면 다음과 같이 작성이 불가능하기 때문이다: "{{domxref("window.open","window.open('http://google.com/')")}}" - 대신 다음과 같이 적어야 할 것이다. "open('http://google.com/')"</p>
+
+<p>Yet another reason to use this property is for libraries which wish to offer OOP-versions and non-OOP versions (especially JavaScript modules). If, for example, we refer to "this.window.location.href", a <a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript module</a> could define a property called "window" inside of a class it defined (since no global "window" variable exists for it by default) which, could be created, for example, after passing in a window object to the module class' constructor.  Thus, "this.window" inside of its functions would refer to that window object. In the non-namespaced version, "this.window" would simply refer back to "window", and also be able to get the document location without trouble. Another advantage is that the objects of such a class (even if the class were defined outside of a module) could change their reference to the window at will, as they would not be able to do if they had hard-coded a reference to "window" (yet the default in the class could still be set as the current window object).</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-window">HTML Standard</a></li>
+</ul>