aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/api/history
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/api/history')
-rw-r--r--files/ko/web/api/history/back/index.html70
-rw-r--r--files/ko/web/api/history/forward/index.html69
-rw-r--r--files/ko/web/api/history/go/index.html82
-rw-r--r--files/ko/web/api/history/index.html85
-rw-r--r--files/ko/web/api/history/length/index.html50
-rw-r--r--files/ko/web/api/history/pushstate/index.html84
-rw-r--r--files/ko/web/api/history/replacestate/index.html68
-rw-r--r--files/ko/web/api/history/scrollrestoration/index.html72
-rw-r--r--files/ko/web/api/history/state/index.html67
9 files changed, 647 insertions, 0 deletions
diff --git a/files/ko/web/api/history/back/index.html b/files/ko/web/api/history/back/index.html
new file mode 100644
index 0000000000..2b5ee8475a
--- /dev/null
+++ b/files/ko/web/api/history/back/index.html
@@ -0,0 +1,70 @@
+---
+title: History.back()
+slug: Web/API/History/back
+tags:
+ - API
+ - HTML DOM
+ - History
+ - History API
+ - Method
+ - Reference
+ - Web
+translation_of: Web/API/History/back
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>History.back()</code></strong> 메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시합니다.</span> {{domxref("History.go", "history.go(-1)")}}와 같습니다. 이전 페이지가 없는 경우 아무것도 하지 않습니다.</p>
+
+<p>이 메서드는 비동기적입니다. {{event("popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.back()</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 클릭했을 때 뒤로 가는 버튼을 생성합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id="go-back"&gt;뒤로 가기!&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById('go-back').addEventListener('click', () =&gt; {
+ window.history.back();
+});</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", "history.html#history", "History.back()")}}</td>
+ <td>{{Spec2("HTML WHATWG")}}</td>
+ <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-back", "History.back()")}}</td>
+ <td>{{Spec2("HTML5 W3C")}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.back")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+</ul>
diff --git a/files/ko/web/api/history/forward/index.html b/files/ko/web/api/history/forward/index.html
new file mode 100644
index 0000000000..52ab61f70b
--- /dev/null
+++ b/files/ko/web/api/history/forward/index.html
@@ -0,0 +1,69 @@
+---
+title: History.forward()
+slug: Web/API/History/forward
+tags:
+ - API
+ - HTML DOM
+ - History
+ - History API
+ - Method
+ - Reference
+translation_of: Web/API/History/forward
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>History.forward()</code></strong> 메서드는 브라우저가 세션 기록의 바로 앞 페이지로 이동하도록 지시합니다.</span> {{domxref("History.go", "history.go(1)")}}과 같습니다. 다음 페이지가 없는 경우 아무것도 하지 않습니다.</p>
+
+<p>이 메서드는 비동기적입니다. {{event("popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.forward()</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 클릭했을 때 앞으로 가는 버튼을 생성합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id='go-forward'&gt;앞으로 가기!&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'go-forward'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="parameter token">e</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+ window<span class="punctuation token">.</span>history<span class="punctuation token">.forward</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span></code></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", "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.forward")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+</ul>
diff --git a/files/ko/web/api/history/go/index.html b/files/ko/web/api/history/go/index.html
new file mode 100644
index 0000000000..3f90100ea8
--- /dev/null
+++ b/files/ko/web/api/history/go/index.html
@@ -0,0 +1,82 @@
+---
+title: History.go()
+slug: Web/API/History/go
+translation_of: Web/API/History/go
+---
+<div>{{APIRef("History API")}}</div>
+
+<p><strong><code>History.go()</code></strong> 메서드는 history 세션에서 특정한 페이지를 로딩합니다. 인자로 전달하는 파라미터 값에 따라 history를 통해서 페이지를 앞 뒤로 이동할 수 있습니다. </p>
+
+<p>이 메서드는 {{glossary("asynchronous")}}(비동기)로 동작합니다. 페이지 앞, 뒤 이동이 언제 이뤄지는지 알려면 {{event("popstate")}} event에 대한 listener를 등록합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.go([<em>delta</em>])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>delta</code> {{optional_inline}}</dt>
+ <dd>현재 페이지에서 상대적으로 이동하려고 하는 history의 위치 값. 음수 값은 뒤로 이동하고, 양수 값은 앞으로 이동합니다. 예를 들면 <code>history.go(2)</code> 는 현재 페이지에서 2 페이지 앞으로 이동하고, <code>history.go(-2)</code> 는 현재 페이지에서 2 페이지 뒤로 이동합니다. 만약 값을 전달하지 않거나, <code>delta</code> 값을 0으로 전달한다면, 이는 <code>location.reload()</code>를 동작시켰을 때와 동일한 결과를 보입니다. (새로고침)</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>한 페이지 뒤로 가기 ({{domxref("History.back", "back()")}}를 호출한 것과 동일):</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>{{domxref("History.forward", "forward()")}}와 동일한 한 페이지 앞으로 가기:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>두 페이지 앞으로 가기:</p>
+
+<pre class="brush: js">history.go(2);</pre>
+
+<p>두 페이지 뒤로 가기:</p>
+
+<pre class="brush: js">history.go(-2);</pre>
+
+<p>마지막으로, 아래 구문들은 현재 페이지를 새로고침 합니다:</p>
+
+<pre class="brush: js">history.go();
+history.go(0);</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", "history.html#dom-history-go", "History.go()")}}</td>
+ <td>{{Spec2("HTML WHATWG")}}</td>
+ <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-go", "History.go()")}}</td>
+ <td>{{Spec2("HTML5 W3C")}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.go")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+ <li>{{DOMxRef("History.back","back()")}}</li>
+ <li>{{DOMxRef("History.forward","forward()")}}</li>
+ <li>{{event("popstate")}} event</li>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ko/web/api/history/index.html b/files/ko/web/api/history/index.html
new file mode 100644
index 0000000000..37fabc2c98
--- /dev/null
+++ b/files/ko/web/api/history/index.html
@@ -0,0 +1,85 @@
+---
+title: History
+slug: Web/API/History
+tags:
+ - API
+ - HTML DOM
+ - History API
+ - Interface
+ - Reference
+ - Web
+translation_of: Web/API/History
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>History</code></strong> 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p><em><code>History</code> 인터페이스는 어떤 속성도 상속하지 않습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다.</dd>
+ <dt>{{domxref("History.scrollRestoration")}}</dt>
+ <dd>기록 탐색 시 스크롤 위치 복원 여부를 명시할 수 있습니다. 가능한 값은 <code>auto</code>와 <code>manual</code>입니다.</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}}</dt>
+ <dd>기록 스택 최상단의 스테이트를 나타내는 값을 반환합니다. {{event("popstate")}} 이벤트를 기다리지 않고 현재 기록의 스테이트를 볼 수 있는 방법입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em><code>History</code> 인터페이스는 어떤 메서드도 상속하지 않습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드입니다. 브라우저의 <kbd>뒤로 가기</kbd> 버튼을 눌렀을 때, 그리고 <code>history.go(-1)</code>을 사용했을 때와 같습니다.
+ <div class="note"><strong>참고:</strong> 세션 기록의 제일 첫 번째 페이지에서 호출해도 오류는 발생하지 않습니다.</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드입니다. 브라우저의 <kbd>앞으로 가기</kbd> 버튼을 눌렀을 때, 그리고 <code>history.go(1)</code>을 사용했을 때와 같습니다.
+ <div class="note"><strong>참고:</strong> 세션 기록의 제일 마지막 페이지에서 호출해도 오류는 발생하지 않습니다.</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>현재 페이지를 기준으로, 상대적인 위치에 존재하는 세션 기록 내 페이지로 이동하는 비동기 메서드입니다. 예를 들어, 매개변수로 <code>-1</code>을 제공하면 바로 뒤로, <code>1</code>을 제공하면 바로 앞으로 이동합니다. 세션 기록의 범위를 벗어나는 값을 제공하면 아무 일도 일어나지 않습니다. 매개변수를 제공하지 않거나, <code>0</code>을 제공하면 현재 페이지를 다시 불러옵니다.</dd>
+ <dt>{{domxref("History.pushState()")}}</dt>
+ <dd>주어진 데이터를 지정한 제목(제공한 경우 URL도)으로 세션 기록 스택에 넣습니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 <code>title</code> 매개변수를 무시합니다.</dd>
+ <dt>{{domxref("History.replaceState()")}}</dt>
+ <dd>세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체합니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 <code>title</code> 매개변수를 무시합니다.</dd>
+</dl>
+
+<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#the-history-interface", "History")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Adds the <code>scrollRestoration</code> attribute.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "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><code>History</code> 객체 참조를 반환하는 {{domxref("Window.history")}} 속성.</li>
+</ul>
diff --git a/files/ko/web/api/history/length/index.html b/files/ko/web/api/history/length/index.html
new file mode 100644
index 0000000000..0e26279b5c
--- /dev/null
+++ b/files/ko/web/api/history/length/index.html
@@ -0,0 +1,50 @@
+---
+title: History.length
+slug: Web/API/History/length
+tags:
+ - API
+ - HTML
+ - HTML DOM
+ - History API
+ - Property
+ - Read-only
+ - Reference
+translation_of: Web/API/History/length
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><code><strong>History.length</strong></code> 읽기 전용 속성은 현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다.</span> 예를 들어, 새로운 탭에 막 불러온 페이지의 세션 기록 길이는 <code>1</code>입니다.</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', "history.html#dom-history-length", "History.length")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.length")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("History")}} 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/history/pushstate/index.html b/files/ko/web/api/history/pushstate/index.html
new file mode 100644
index 0000000000..a4e7af47df
--- /dev/null
+++ b/files/ko/web/api/history/pushstate/index.html
@@ -0,0 +1,84 @@
+---
+title: History.pushState()
+slug: Web/API/History/pushState
+tags:
+ - API
+ - DOM
+ - History
+ - History API
+ - Method
+ - Reference
+ - Web
+translation_of: Web/API/History/pushState
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a> 문서에서, <strong><code>history.pushState()</code></strong> 메서드는 브라우저의 세션 기록 스택에 상태를 추가합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>state</code></dt>
+ <dd>새로운 세션 기록 항목에 연결할 상태 객체. 사용자가 새로운 상태로 이동할 때마다 {{event("popstate")}} 이벤트가 발생하는데, 이 때 이벤트 객체의 <code>state</code> 속성에 해당 상태의 복제본이 담겨 있습니다.</dd>
+ <dd>상태 객체는 직렬화 가능한 객체라면 모두 가능합니다.</dd>
+ <dt><code>title</code></dt>
+ <dd><a href="https://github.com/whatwg/html/issues/2174">지금은 대부분의 브라우저가 <code>title</code> 매개변수를 무시하지만</a>, 미래에 쓰일 수도 있습니다. 빈 문자열을 지정하면 나중의 변경사항에도 안전할 것입니다. 아니면, 상태에 대한 짧은 제목을 제공할 수도 있습니다.</dd>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>새로운 세션 기록 항목의 URL. <code>pushState()</code> 호출 이후에 브라우저는 주어진 URL로 탐색하지 않습니다. 그러나 이후, 예컨대 브라우저를 재시작할 경우 탐색을 시도할 수도 있습니다. 상대 URL을 지정할 수 있으며, 이 땐 현재 URL을 기준으로 사용합니다. 새로운 URL은 현재 URL과 같은 {{glossary("origin", "출처")}}를 가져야 하며, 그렇지 않을 경우 예외가 발생합니다. 지정하지 않은 경우 문서의 현재 URL을 사용합니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>어떤 면에선 <code>pushState()</code>와 <code>window.location = "#foo"</code>가 비슷합니다. 둘 다 새로운 세션 기록 항목을 생성하고 활성화하기 때문입니다. 그러나 <code>pushState()</code>에는 몇 가지 장점이 있습니다.</p>
+
+<ul>
+ <li>새로운 URL은 같은 출처에 한해서 아무 URL이나 가능합니다. 반면 {{domxref("window.location")}} 설정은 해시만 수정해야 같은 문서에 머무릅니다.</li>
+ <li>원할 경우 URL을 바꾸지 않을 수도 있습니다. 그러나 <code>window.location = "#foo"</code>는 현재 해시가 <code>#foo</code>가 아닐 때만 새로운 기록 항목을 생성합니다.</li>
+ <li><code>pushState()</code>는 임의의 데이터를 세션 기록 항목에 연결할 수 있습니다. 해시 기반 방식에서는 필요한 모든 데이터를 인코딩 해 짧은 문자열로 만들어야 합니다.</li>
+</ul>
+
+<p>다만 <code>pushState()</code>는 이전 URL과 신규 URL의 해시가 다르더라도 절대 {{event("hashchange")}} 이벤트를 유발하지 않습니다.</p>
+
+<p>HTML 외의 문서에서는 이름공간 URI가 <code>null</code>인 요소를 생성합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 주어진 상태, 제목, URL을 사용해 새로운 세션 기록을 생성합니다.</p>
+
+<pre class="brush: js">const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)</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', "browsers.html#dom-history-pushstate", "History.pushState()")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-pushstate", "History.pushState()")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.pushState")}}</p>
diff --git a/files/ko/web/api/history/replacestate/index.html b/files/ko/web/api/history/replacestate/index.html
new file mode 100644
index 0000000000..3b9f92ba8d
--- /dev/null
+++ b/files/ko/web/api/history/replacestate/index.html
@@ -0,0 +1,68 @@
+---
+title: History.replaceState()
+slug: Web/API/History/replaceState
+translation_of: Web/API/History/replaceState
+---
+<div>{{APIRef("History API")}}</div>
+
+<div></div>
+
+<p><strong><code>History.replaceState()</code></strong> 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 <code>stateObj</code>, <code>title</code>, <code>URL</code>로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history의 URL을 업데이트하려는 경우에 유용합니다. </p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.replaceState(<em>stateObj</em>, <em>title</em>[, <em>url</em>])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>stateObj</code></dt>
+ <dd>state 객체는 <code>replaceState</code>에 전달된 history 항목과 연관된 JavaScript 객체입니다. state object는 <code>null</code>일 수 있습니다.</dd>
+ <dt><code>title</code></dt>
+ <dd>나중에는 사용할 수도 있지만, <a href="https://github.com/whatwg/html/issues/2174">대부분의 브라우저는 현재 이 파라미터를 무시하고 있습니다.</a> 이 부분에 빈 String을 전달하면 나중에 메소드가 변화하더라도 안전합니다. 또는, state에 짧은 title을 전달할 수도 있습니다.</dd>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>history 항목의 URL 입니다. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다. 그렇지 않으면 replaceState에서 예외가 발생합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>https://www.mozilla.org/ 에서 아래 JavaScript를 실행한다고 가정합시다: </p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const </span>stateObj <span class="operator token">=</span> <span class="punctuation token">{</span> foo<span class="punctuation token">:</span> '<span class="string token">bar'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+history<span class="punctuation token">.</span><span class="function token">pushState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">''</span><span class="punctuation token">,</span> '<span class="string token">bar.html'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>위 두 줄에 대한 설명은 <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a> 문서의 <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API#Example_of_pushState_method">Example of <code>pushState()</code> method</a>에서 확인할 수 있습니다. 그 다음, <span class="nowiki">https://www.mozilla.org/bar.html</span>에서 아래와 같은 JavaScript를 실행한다고 가정해보세요:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">replaceState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">''</span><span class="punctuation token">,</span> '<span class="string token">bar2.html'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>이렇게하면 URL 표시줄에 <span class="nowiki">https://www.mozilla.org/bar2.html이라고 표시되지만</span>, 브라우저가 <code>bar2.html<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">을 로드하거나 </span></font></code><code>bar2.html</code>파일이 있는지 확인하지는 않습니다.</p>
+
+<p>이제 사용자가 <span class="nowiki">https://www.microsoft.com으로 이동한 다음</span>, 뒤로가기 버튼을 누른다고 가정해봅시다. 이 때, URL 표시줄에는<span class="nowiki">https://www.mozilla.org/bar2.html이 표시됩니다. 사용자가 다시 뒤로가기 버튼을 누르면, URL 표시줄에는 https://www.mozilla.org/foo.html이 표시되고, bar.html은 완전히 무시되어 표시되지 않습니다.</span></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", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
+ <td>{{Spec2("HTML WHATWG")}}</td>
+ <td>{{SpecName("HTML5 W3C")}} 이후 변화 없음.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
+ <td>{{Spec2("HTML5 W3C")}}</td>
+ <td>초기 정의.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.replaceState")}}</p>
diff --git a/files/ko/web/api/history/scrollrestoration/index.html b/files/ko/web/api/history/scrollrestoration/index.html
new file mode 100644
index 0000000000..a9a4923bd7
--- /dev/null
+++ b/files/ko/web/api/history/scrollrestoration/index.html
@@ -0,0 +1,72 @@
+---
+title: History.scrollRestoration
+slug: Web/API/History/scrollRestoration
+tags:
+ - API
+ - HTML DOM
+ - History API
+ - Property
+ - Reference
+translation_of: Web/API/History/scrollRestoration
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>History.scrollRestoration</code></strong> 속성을 사용하면 기록 탐색 시 사용할 스크롤 위치 복원 기능의 기본값을 웹 애플리케이션이 지정할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">let scrollRestore = history.scrollRestoration;</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>"auto"</code></dt>
+ <dd>페이지 내에서 사용자의 스크롤이 위치했던 장소로 복원합니다.</dd>
+ <dt><code>"manual"</code></dt>
+ <dd>스크롤을 복원하지 않습니다. 사용자가 직접 스크롤해야 합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="현재_스크롤_복원_여부_알아내기">현재 스크롤 복원 여부 알아내기</h3>
+
+<pre class="brush: js">const scrollRestoration = history.scrollRestoration
+if (scrollRestoration === 'manual') {
+ console.log('The location on the page is not restored, user will need to scroll manually.');
+}
+</pre>
+
+<h3 id="스크롤_복원_비활성화">스크롤 복원 비활성화</h3>
+
+<pre class="brush: js">if (history.scrollRestoration) {
+ window.history.scrollRestoration = 'manual';
+}
+</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", " #scroll-restoration-mode", "History.scrollRestoration")}}</td>
+ <td>{{Spec2("HTML WHATWG")}}</td>
+ <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-scrollrestoration", "History.scrollRestoration")}}</td>
+ <td>{{Spec2("HTML5 W3C")}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.scrollRestoration")}}</p>
diff --git a/files/ko/web/api/history/state/index.html b/files/ko/web/api/history/state/index.html
new file mode 100644
index 0000000000..0f889665c7
--- /dev/null
+++ b/files/ko/web/api/history/state/index.html
@@ -0,0 +1,67 @@
+---
+title: History.state
+slug: Web/API/History/state
+translation_of: Web/API/History/state
+---
+<div>{{APIRef("History API")}}</div>
+
+<p><span class="seoSummary"><strong><code>History.state</code></strong> 속성은 현 history에 해당하는 state값을 나타냅니다.</span></p>
+
+<p>{{event("popstate")}} 이벤트가 트리거될때가 아닌 상태에서 state값을 볼 수 있는 방법입니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">const <em>currentState</em> = history.state</pre>
+
+<h3 id="값">값</h3>
+
+<p>현 history에 위치한 값입니다. 이 값은 {{domxref("History.pushState","pushState()")}} 또는 {{domxref("History.replaceState","replaceState()")}}을 사용할때까지 {{jsxref("null")}} 값을 가집니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><code>history.state</code> 로 초기값을 보여준 후 {{domxref("History.pushState","pushState()")}}를 사용하여 State를 푸시합니다.</p>
+
+<p>다음 코드 줄은 <code>history.state</code> 를 사용하여 콘솔에다 값이 푸시되었음을 보여줍니다.</p>
+
+<pre class="brush: js">// Should be null because we haven't modified the history stack yet
+console.log(`History.state before pushState: ${history.state}`);
+
+// Now push something on the stack
+history.pushState({name: 'Example'}, "pushState example", 'page3.html');
+
+// Now state has a value.
+console.log(`History.state after pushState: ${history.state}`);</pre>
+
+<h2 id="SpecificationsE">Specifications<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/API/History$edit#Specifications" rel="nofollow, noindex"><span>E</span></a></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-history-state", "History.state")}}</td>
+ <td>{{Spec2("HTML WHATWG")}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-state", "History.state")}}</td>
+ <td>{{Spec2("HTML5 W3C")}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.History.state")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-11-14 00:18:56 +0000