diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/api/history | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/web/api/history')
-rw-r--r-- | files/ko/web/api/history/back/index.html | 70 | ||||
-rw-r--r-- | files/ko/web/api/history/forward/index.html | 69 | ||||
-rw-r--r-- | files/ko/web/api/history/go/index.html | 82 | ||||
-rw-r--r-- | files/ko/web/api/history/index.html | 85 | ||||
-rw-r--r-- | files/ko/web/api/history/length/index.html | 50 | ||||
-rw-r--r-- | files/ko/web/api/history/pushstate/index.html | 84 | ||||
-rw-r--r-- | files/ko/web/api/history/replacestate/index.html | 68 | ||||
-rw-r--r-- | files/ko/web/api/history/scrollrestoration/index.html | 72 | ||||
-rw-r--r-- | files/ko/web/api/history/state/index.html | 67 |
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"><button id="go-back">뒤로 가기!</button></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.getElementById('go-back').addEventListener('click', () => { + 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"><button id='go-forward'>앞으로 가기!</button></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">=></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> |