initial commit

1 files changed, 117 insertions, 0 deletions

diff --git a/files/ko/web/api/history_api/index.html b/files/ko/web/api/history_api/index.html
new file mode 100644
index 0000000000..3396a23460
--- /dev/null
+++ b/files/ko/web/api/history_api/index.html
@@ -0,0 +1,117 @@
+---
+title: History API
+slug: Web/API/History_API
+tags:
+  - API
+  - Advanced
+  - DOM
+  - History
+  - 기록
+  - 브라우저 히스토리
+  - 히스토리
+translation_of: Web/API/History_API
+---
+<div>{{DefaultAPISidebar("History API")}}</div>
+
+<p>DOM의 {{domxref("Window")}} 객체는 {{domxref("Window.history", "history")}} 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. {{domxref("History", "history")}}는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가집니다.</p>
+
+<h2 id="개념과_사용_방법">개념과 사용 방법</h2>
+
+<p>사용자 방문 기록에서 앞뒤로 이동할 땐 {{domxref("History.back","back()")}}, {{domxref("History.forward","forward()")}}, {{domxref("History.go","go()")}} 메서드를 사용합니다.</p>
+
+<h3 id="앞으로_가기와_뒤로_가기">앞으로 가기와 뒤로 가기</h3>
+
+<p>방문 기록의 뒤로 이동하려면 다음과 같이 사용합니다.</p>
+
+<pre class="brush: js">history.back()</pre>
+
+<p>위의 코드는 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같습니다.</p>
+
+<p>이와 비슷하게, 기록의 앞으로 (도구 모음의 앞으로 가기 버튼) 가는 것도 할 수 있습니다.</p>
+
+<pre class="brush: js">history.forward()</pre>
+
+<h3 id="기록의_특정_지점으로_이동">기록의 특정 지점으로 이동</h3>
+
+<p>{{domxref("History.go", "go()")}} 메서드를 사용하면 세션 기록에서 현재 페이지의 위치를 기준으로, 상대적인 거리에 위치한 특정 지점까지 이동할 수 있습니다.</p>
+
+<p>한 페이지 뒤로 이동하려면  다음과 같이 사용합니다. ({{domxref("History.back", "back()")}}과 동일)</p>
+
+<pre class="brush: js">history.go(-1)</pre>
+
+<p>한 페이지 앞으로 이동하려면  다음과 같이 사용합니다. ({{domxref("History.forward", "forward()")}}와 동일)</p>
+
+<pre class="brush: js">history.go(1)</pre>
+
+<p>매개변수로 지정한 숫자를 바꾸면 2 페이지씩 이동하는 것도 가능합니다.</p>
+
+<p><code>go()</code>의 다른 사용법은 매개변수를 제공하지 않거나 0을 제공해 현재 페이지를 다시 불러오는 것입니다.</p>
+
+<pre class="brush: js">// The following statements
+// both have the effect of
+// refreshing the page
+history.go(0)
+history.go()</pre>
+
+<p>{{domxref("History.length", "length")}} 속성을 사용해 방문 기록 스택의 크기도 알아낼 수 있습니다.</p>
+
+<pre class="brush: js">let numberOfEntries = window.history.length</pre>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("History")}}</dt>
+ <dd>브라우저의 세션 기록에 접근할 수 있는 방법을 제공하는 인터페이스입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 {{domxref("window.onpopstate")}} 속성에 이벤트 처리기를 부착한 후, {{domxref("window.history", "history")}} 객체를 사용해 브라우저 방문 기록을 추가하거나 대체한 후 탐색하는 코드입니다.</p>
+
+<pre class="brush:js line-numbers language-js">window.onpopstate = function(event) {
+  alert(`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() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back() // alerts "location: http://example.com/example.html, state: null"
+history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"</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#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li>{{domxref("window.onpopstate")}}</li>
+</ul>