diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-07 21:57:08 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-08 10:57:08 +0900 |
| commit | 0d13feed6a627047449d99af02d1fb55bbfad1a9 (patch) | |
| tree | bb7efedc3137bfea1c69f510617b602009d58b3d /files/ko/orphaned/web | |
| parent | ff9ea0cf9f0ea6217deefa7ad0dba35bf7f6c45e (diff) | |
| download | translated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.tar.gz translated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.tar.bz2 translated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.zip | |
delete conflicting/orphaned in ko (#1423)
* delete conflicting/orphaned in ko
* forgot the redirects
Diffstat (limited to 'files/ko/orphaned/web')
68 files changed, 0 insertions, 5932 deletions
diff --git a/files/ko/orphaned/web/api/abstractworker/index.html b/files/ko/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index a0a80f641c..0000000000 --- a/files/ko/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -tags: - - API - - Abstract - - AbstractWorker - - Interface - - Reference - - Web Workers - - Web Workers API - - Worker - - 워커 - - 웹 워커 -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -<div>{{ APIRef("Web Workers API") }}</div> - -<p><a href="/ko/docs/Web/API/Web_Workers_API">Web Workers API</a>의 <strong><code>AbstractWorker</code></strong> 인터페이스는 기본적인 {{domxref("Worker")}}에 더해 {{domxref("ServiceWorker")}}와 {{domxref("SharedWorker")}}까지, 모든 유형의 워커에 공통된 속성과 메서드를 정의하는 추상 인터페이스입니다.</p> - -<h2 id="속성">속성</h2> - -<p><code>AbstractWorker</code> 인터페이스는 어떠한 속성도 상속하지 않습니다.</p> - -<h3 id="이벤트_처리기">이벤트 처리기</h3> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd><span style="line-height: 1.5;"><code>error</code> 유형의 {{domxref("ErrorEvent")}}가 워커로 확산되면 호출할 {{domxref("EventListener")}}입니다.</span></dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<p><code>AbstractWorker</code> 인터페이스는 어떠한 메서드도 구현하거나 상속하지 않습니다.</p> - -<h2 id="예제">예제</h2> - -<p><code>AbstractWorker</code>는 추상 인터페이스므로 코드 내에서 직접 사용할 일은 없습니다. 대신, <code>AbstractWorker</code>를 상속하는 {{domxref("Worker")}} 또는 {{domxref("SharedWorker")}}를 사용할 것입니다.</p> - -<p>다음 코드는 {{domxref("Worker.Worker", "Worker()")}} 생성자를 사용해 새로운 <code>Worker</code>를 생성한 후 워커로 메시지를 전송하는 것을 보입니다.</p> - -<pre class="brush: js notranslate">var myWorker = new Worker('worker.js'); - -first.onchange = function() { - myWorker.postMessage([first.value, second.value]); - console.log('Message posted to worker'); -}</pre> - -<p>위 워커의 코드는 "<code>worker.js</code>" 파일에서 불러오며, <code>first</code>로 표현한 {{htmlelement("input")}} 요소가 존재하는 상황을 가정하여, {{event("change")}} 이벤트 처리기를 부착해 사용자가 <code>first</code>의 값을 바꿀 때마다 워커에 메시지를 전송해 바뀐 값을 알려줍니다.</p> - -<p>MDN 웹 문서 GitHub 저장소에 더 많은 예제가 준비돼있습니다.</p> - -<ul> - <li><a href="https://github.com/mdn/simple-web-worker">기본적인 전용 워커 예제</a> (<a href="http://mdn.github.io/simple-web-worker/">실행</a>)</li> - <li><a href="https://github.com/mdn/simple-shared-worker">기본적인 공유 워커 예제</a> (<a href="http://mdn.github.io/simple-shared-worker/">실행</a>)</li> -</ul> - -<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", "#abstractworker", "AbstractWorker")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div>{{Compat("api.AbstractWorker")}}</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{domxref("Worker")}}와 {{domxref("SharedWorker")}} 이런 특징을 물려받고 있습니다.</li> -</ul> diff --git a/files/ko/orphaned/web/api/ambient_light_events/index.html b/files/ko/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 81046f2e85..0000000000 --- a/files/ko/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Using Light Events -slug: orphaned/Web/API/Ambient_Light_Events -tags: - - Ambient Light -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>주변의 빛을 감지하는 이벤트를 활용해서 웹페이지나 어플리케이션이 주변 빛의 세기를 감지할 수 있습니다. 사용자 인터페이스의 색상 대비나 사진의 노출을 변경하는 용도로 사용할 수 있습니다.</p> - -<h2 id="빛_이벤트">빛 이벤트</h2> - -<p>기기의 빛 센서가 빛의 변화를 감지하면 브라우저에 변화를 전달합니다. 브라우저가 이러한 알림을 받으면 정확한 빛의 세기를 알려주는 {{domxref("DeviceLightEvent")}} 이벤트를 발생시킵니다.</p> - -<p>이 이벤트는 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드 ({{event("devicelight")}} 이벤트 이름 사용)를 사용하거나 {{domxref("window.ondevicelight")}} 속성에 이벤트 핸들러를 사용함으로서 <code>window</code> 객체 수준에서 캡춰됩니다.</p> - -<p>캡춰가 되면 이벤트 객체의 {{domxref("DeviceLightEvent.value")}} 속성을 통해서 럭스(lux) 단위의 빛의 세기를 사용할 수 있습니다.</p> - -<h2 id="예제">예제</h2> - -<pre class="brush: js">window.addEventListener('devicelight', function(event) { - var html = document.getElementsByTagName('html')[0]; - - if (event.value < 50) { - html.classList.add('darklight'); - html.classList.remove('brightlight'); - } else { - html.classList.add('brightlight'); - html.classList.remove('darklight'); - } -});</pre> - -<h2 id="Specifications" name="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('AmbientLight', '', 'Ambient Light Events') }}</td> - <td>{{ Spec2('AmbientLight') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/body/index.html b/files/ko/orphaned/web/api/body/index.html deleted file mode 100644 index 8d315725a1..0000000000 --- a/files/ko/orphaned/web/api/body/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - Reference - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<div>{{ APIRef("Fetch") }}</div> - -<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p> - -<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content">JS Content</h3> - -<pre class="brush: js">const myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') - .then(res => res.blob()) - .then(res => { - const objectURL = URL.createObjectURL(res); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> - -<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('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> diff --git a/files/ko/orphaned/web/api/body/json/index.html b/files/ko/orphaned/web/api/body/json/index.html deleted file mode 100644 index c3c0fa14cc..0000000000 --- a/files/ko/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} mixin의 <strong><code>json()</code></strong> 매서드는 {{domxref("Response")}} 스트림을 가져와 스트림이 완료될때까지 읽는다. 이 메서드는 body 텍스트를 {{jsxref("JSON")}}으로 바꾸는 결과로 해결되는 promise를 반환한다.</p> - -<h2 id="구문">구문</h2> - -<pre class="brush: js">response.json().then(function(data) { - // do something with your data -});</pre> - -<h3 id="매개변수">매개변수</h3> - -<p>없음.</p> - -<h3 id="반환값">반환값</h3> - -<p>A promise that resolves with the result of parsing the body text as JSON. This could be anything that can be represented by JSON — an object, an array, a string, a number...</p> - -<h2 id="Example">Example</h2> - -<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), we create a new request using the {{domxref("Request.Request")}} constructor, then use it to fetch a <code>.json</code> file. When the fetch is successful, we read and parse the data using <code>json()</code>, then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.</p> - -<pre class="brush: js">var myList = document.querySelector('ul'); - -var myRequest = new Request('products.json'); - -fetch(myRequest) - .then(function(response) { return response.json(); }) - .then(function(data) { - for (var i = 0; i < data.products.length; i++) { - var listItem = document.createElement('li'); - listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> can be found in ' + - data.products[i].Location + - '. Cost: <strong>£' + data.products[i].Price + '</strong>'; - myList.appendChild(listItem); - } - });</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('Fetch','#dom-body-json','json()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/childnode/before/index.html b/files/ko/orphaned/web/api/childnode/before/index.html deleted file mode 100644 index e0c01c2a02..0000000000 --- a/files/ko/orphaned/web/api/childnode/before/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: ChildNode.before() -slug: orphaned/Web/API/ChildNode/before -tags: - - API - - DOM - - 노드 - - 레퍼런스 - - 메소드 - - 실험중 -translation_of: Web/API/ChildNode/before -original_slug: Web/API/ChildNode/before ---- -<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> - -<p><code><strong>ChildNode.before</strong></code> 메소드는 <code>ChildNode</code> 의 부모가 가진 자식의 <code>ChildNode</code> 바로 이전에 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 삽입합니다.{{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.</p> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.before((Node or DOMString)... nodes); -</pre> - -<h3 id="파라미터">파라미터</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>삽입할 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합입니다.</dd> -</dl> - -<h3 id="예외">예외</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 노드는 계층 구조의 특정 지점에 삽입될 수 없습니다.</li> -</ul> - -<h2 id="예제">예제</h2> - -<h3 id="엘리먼트_삽입하기">엘리먼트 삽입하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span); - -console.log(parent.outerHTML); -// "<div><span></span><p></p></div>" -</pre> - -<h3 id="텍스트_삽입하기">텍스트 삽입하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.before("Text"); - -console.log(parent.outerHTML); -// "<div>Text<p></p></div>"</pre> - -<h3 id="엘리먼트와_텍스트_삽입하기">엘리먼트와 텍스트 삽입하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span, "Text"); - -console.log(parent.outerHTML); -// "<div><span></span>Text<p></p></div>"</pre> - -<h3 id="ChildNode.before()_는_범위를_지정할_수_없습니다"><code>ChildNode.before()</code> 는 범위를 지정할 수 없습니다</h3> - -<p><code>before()</code> 메소드는 <code>with</code> 구문으로 범위를 지정할 수 없습니다. 자세한 내용은 {{jsxref("Symbol.unscopables")}} 문서를 확인하세요.</p> - -<pre class="brush: js">with(node) { - before("foo"); -} -// ReferenceError: before is not defined </pre> - -<h2 id="폴리필">폴리필</h2> - -<p>다음 코드를 사용해 인터넷 익스플로러 9 이상에서 <code>before() 메소드</code> 를 폴리필링할 수 있습니다.</p> - -<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('before')) { - return; - } - Object.defineProperty(item, 'before', { - configurable: true, - enumerable: true, - writable: true, - value: function before() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.insertBefore(docFrag, this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<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('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>초기 정의.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.ChildNode.before")}}</p> - -<h2 id="함께_보기">함께 보기</h2> - -<ul> - <li>{{domxref("ChildNode")}} 와 {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/childnode/index.html b/files/ko/orphaned/web/api/childnode/index.html deleted file mode 100644 index f02d307e2a..0000000000 --- a/files/ko/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - 노드 - - 실험중 - - 인터페이스 -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>ChildNode</strong></code> 인터페이스는 부모를 가질 수 있는 {{domxref("Node")}} 객체에 고유한 메소드를 포함합니다.</p> - -<p><code>ChildNode</code>는 원시 인터페이스이며 이 타입의 객체는 생성할 수 없습니다. 이는 {{domxref("Element")}}, {{domxref("DocumentType")}} 및 {{domxref("CharacterData")}} 객체로 구현되었습니다.</p> - -<h2 id="프로퍼티">프로퍼티</h2> - -<p><em>상속 및 특정 프로퍼티가 없습니다.</em></p> - -<h2 id="메소드">메소드</h2> - -<p><em>상속된 메소드가 없습니다.</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd><code>ChildNode</code>를 부모의 자식 목록으로부터 제거합니다.</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>{{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 부모의 자식 목록에서 <code>ChildNode</code>의 바로 앞에 삽입합니다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>{{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 부모의 자식 목록에서 <code>ChildNode</code>의 바로 뒤에 삽입합니다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>부모의 자식 목록에 있는 <code>ChildNode</code>를 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합으로 대체합니다.{{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.</dd> -</dl> - -<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('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> 인터페이스를 {{domxref("ParentNode")}}와 <code>ChildNode</code>로 분리합니다. <code>previousElementSibling</code>과 <code>nextElementSibling</code>은 이제 마지막에 정의됩니다. {{domxref("CharacterData")}}와 {{domxref("DocumentType")}}은 새 인터페이스를 구현했습니다. <code>remove()</code>, <code>before()</code>, <code>after()</code> 및 <code>replaceWith()</code> 메소드가 추가되었습니다.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>프로퍼티의 초기 정의가 <code>ElementTraversal</code> 순수 인터페이스에 추가되었고 {{domxref("Element")}}에서 사용합니다.</td> - </tr> - </tbody> -</table> - -<h2 id="폴리필">폴리필</h2> - -<p>github의 외부 코드: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.ChildNode")}}</p> - -<h2 id="참고">참고</h2> - -<ul> - <li>{{domxref("ParentNode")}} 순수 인터페이스.</li> - <li> - <div class="syntaxbox">순수 인터페이스를 구현한 객체 타입: {{domxref("CharacterData")}}, {{domxref("Element")}} 및 {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/ko/orphaned/web/api/childnode/remove/index.html b/files/ko/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index 2b22e4aaaa..0000000000 --- a/files/ko/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: ChildNode.remove() -slug: orphaned/Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - 메소드 - - 실험중 -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>ChildNode.remove()</strong></code> 메소드는 이를 포함하는 트리로부터 객체를 제거합니다.</p> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox"><em>node</em>.remove(); -</pre> - -<h2 id="예제">예제</h2> - -<h3 id="remove()_사용하기"><code>remove()</code> 사용하기</h3> - -<pre class="brush: html"><div id="div-01">div-01 입니다</div> -<div id="div-02">div-02 입니다</div> -<div id="div-03">div-03 입니다</div> -</pre> - -<pre class="brush: js">var el = document.getElementById('div-02'); -el.remove(); // id가 'div-02' 인 div를 제거합니다 -</pre> - -<h3 id="ChildNode.remove()_는_스코프_지정_불가"><code>ChildNode.remove()</code> 는 스코프 지정 불가</h3> - -<p><code>remove()</code> 메소드는 <code>with</code> 구문으로 스코프를 지정할 수 없습니다. 자세한 내용은 {{jsxref("Symbol.unscopables")}} 을 확인하세요.</p> - -<pre class="brush: js">with(node) { - remove(); -} -// ReferenceError: remove is not defined </pre> - -<h2 id="폴리필">폴리필</h2> - -<p>인터넷 익스플로러 9 이상에서는 다음 코드를 사용해 <code>remove() 메소드</code> 를 폴리필링할 수 있습니다.</p> - -<pre class="brush: js">// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('remove')) { - return; - } - Object.defineProperty(item, 'remove', { - configurable: true, - enumerable: true, - writable: true, - value: function remove() { - if (this.parentNode !== null) - this.parentNode.removeChild(this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<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('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>초기 정의.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("api.ChildNode.remove")}}</p> -</div> - -<h2 id="함께_보기">함께 보기</h2> - -<ul> - <li>{{domxref("ChildNode")}} 순수 인터페이스.</li> - <li> - <div class="syntaxbox">이 순수 인터페이스를 구현하는 객체 타입: {{domxref("CharacterData")}}, {{domxref("Element")}}, {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/ko/orphaned/web/api/detecting_device_orientation/index.html b/files/ko/orphaned/web/api/detecting_device_orientation/index.html deleted file mode 100644 index 1fd9fe3e91..0000000000 --- a/files/ko/orphaned/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: 기기 방향 감지하기 -slug: orphaned/Web/API/Detecting_device_orientation -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation ---- -<div>{{SeeCompatTable}}</div> - -<h2 id="요약">요약</h2> - -<p>웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.</p> - -<p>방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 {{domxref("DeviceOrientationEvent")}}로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다. 이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.</p> - -<p>두 번째 이벤트는 {{domxref("DeviceMotionEvent")}}로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 {{domxref("DeviceOrientationEvent")}}와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로{{domxref("DeviceMotionEvent")}}를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. {{domxref("DeviceOrientationEvent")}}는 모바일 기기에서 주로 더 많이 나타난다.</p> - -<h2 id="방향_이벤트_처리하기">방향 이벤트 처리하기</h2> - -<p>방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:</p> - -<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true); -</pre> - -<p>이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.</p> - -<p>방향 이벤트는 다음 네 개의 값을 가진다:</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li> - <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }}</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li> -</ul> - -<p>이벤트 핸들러 함수는 보통 다음과 같다:</p> - -<pre class="brush: js">function handleOrientation(event) { - var absolute = event.absolute; - var alpha = event.alpha; - var beta = event.beta; - var gamma = event.gamma; - - // Do stuff with the new orientation data -} -</pre> - -<h3 id="방향_값_설명">방향 값 설명</h3> - -<p>각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a> 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.alpha") }} 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }} 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }} 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.</li> -</ul> - -<h3 id="방향_예제">방향 예제</h3> - -<p>이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.</p> - -<p>자 그럼, 정원에 공이 하나 있다고 상상해보자:</p> - -<pre class="brush: html"><div class="garden"> - <div class="ball"></div> -</div> - -<pre class="output"></pre> -</pre> - -<p>이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:</p> - -<pre class="brush: css">.garden { - position: relative; - width : 200px; - height: 200px; - border: 5px solid #CCC; - border-radius: 10px; -} - -.ball { - position: absolute; - top : 90px; - left : 90px; - width : 20px; - height: 20px; - background: green; - border-radius: 100%; -} -</pre> - -<p>이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:</p> - -<pre class="brush: js">var ball = document.querySelector('.ball'); -var garden = document.querySelector('.garden'); -var output = document.querySelector('.output'); - -var maxX = garden.clientWidth - ball.clientWidth; -var maxY = garden.clientHeight - ball.clientHeight; - -function handleOrientation(event) { - var x = event.beta; // In degree in the range [-180,180] - var y = event.gamma; // In degree in the range [-90,90] - - output.innerHTML = "beta : " + x + "\n"; - output.innerHTML += "gamma: " + y + "\n"; - - // Because we don't want to have the device upside down - // We constrain the x value to the range [-90,90] - if (x > 90) { x = 90}; - if (x < -90) { x = -90}; - - // To make computation easier we shift the range of - // x and y to [0,180] - x += 90; - y += 90; - - // 10 is half the size of the ball - // It center the positionning point to the center of the ball - ball.style.top = (maxX*x/180 - 10) + "px"; - ball.style.left = (maxY*y/180 - 10) + "px"; -} - -window.addEventListener('deviceorientation', handleOrientation); -</pre> - -<p>여기 실제로 실행해 볼 수 있는 예제이다:</p> - -<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div> - -<div class="warning"> -<p><strong>경고:</strong> Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.</p> -</div> - -<h2 id="모션_이벤트_처리하기">모션 이벤트 처리하기</h2> - -<p>모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.</p> - -<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre> - -<p><em>HandleMotion</em> 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.</p> - -<p>모션 이벤트는 다음 네 가지 속성을 가진다:</p> - -<ul> - <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> - <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li> - <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li> - <li>{{ domxref("DeviceMotionEvent.interval") }}</li> -</ul> - -<h3 id="모션_값_설명">모션 값 설명</h3> - -<p>{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a> 문서를 참조).</p> - -<p>{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:</p> - -<ul> - <li><code>x</code>: 서쪽에서 동쪽으로 나타나는 축을 의미한다</li> - <li><code>y</code>: 남쪽에서 북쪽으로 나타나는 축을 의미한다</li> - <li><code>z</code>: 땅에서 수직으로 나타나는 축을 의미한다</li> -</ul> - -<p>{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:</p> - -<ul> - <li><code>alpha</code>: 화면(또는 데스크탑의 키보드)에 수직인 축을 따른 회전율을 의미한다</li> - <li><code>beta</code>: 화면(또는 데스크탑의 키보드)의 평면의 왼쪽에서 오른쪽으로 나타나는 축을 따른 회전율을 의미한다</li> - <li><code>gamma</code>: 화면(또는 데스크탑의 키보드)의 평면의 아래에서 위쪽으로 나타나는 축을 따른 회전율을 의미한다</li> -</ul> - -<p>마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.</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('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</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 (WebKit)</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>7.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</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 Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>3.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.2</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 18px;">4.2</span></td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Gecko_구현_참고_사항">Gecko 구현 참고 사항</h3> - -<ol> - <li>Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>을 지원한다</li> -</ol> - -<h2 id="참고_자료">참고 자료</h2> - -<ul> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/document_object_model/events/index.html b/files/ko/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index 84152bbfbc..0000000000 --- a/files/ko/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Events and the DOM -slug: orphaned/Web/API/Document_Object_Model/Events -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -<div>{{DefaultAPISidebar("DOM")}}</div> - -<h2 id="Introduction" name="Introduction">소개</h2> - -<p>이 장에서는 DOM 이벤트 모델을 설명한다. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> 인터페이스는 DOM의 노드에서 이벤트 등록 및 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>를 위한 인터페이스와 더불어 다양한 이벤트 인터페이스가 서로 어떻게 관련되는지 보여주는 몇 가지 더 긴 예와 함께 설명된다.</p> - -<p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p> - -<p>Also see <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a> in the Examples chapter for a more detailed example of how events move through the DOM.</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Event listener등록</h2> - -<p>DOM 요소에 대한 이벤트 핸들러를 등록하는 방법에는 3가지가 있다.</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> - -<pre class="brush: js notranslate">// Assuming myButton is a button element -myButton.addEventListener('click', greet, false) -function greet(event){ - // print and have a look at the event object - // always print arguments in case of overlooking any other arguments - console.log('greet:', arguments) - alert('hello world') -} -</pre> - -<p>이 방식은 근대의 웹페이지에서 사용해야하는 방법이다.</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Internet Explorer 6–8 didn't support this method, offering a similar {{domxref("EventTarget.attachEvent")}} API instead. For cross-browser compatibility, use one of the many JavaScript libraries available.</p> -</div> - -<p>더 자세한 내용은{{domxref("EventTarget.addEventListener")}}를 참조하세요.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">HTML </a>속성</h3> - -<pre class="brush: html notranslate"><button onclick="alert('Hello world!')"> -</pre> - -<p>속성에서 JavaScript 코드는 이벤트 매개변수를 통해 이벤트 객체를 통과합니다. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">반환 값은 HTML 사양에 설명된 특별한 방법으로 처리됩니다.</a></p> - -<div class="blockIndicator warning"> -<p><strong>경고:</strong> 이 방법은 피해야 합니다! 그것은 마크업을 부풀리고, 읽기 어렵게 만듭니다. 내용/구조와 행동에 대한 우려는 잘 분리되어 있지 않아 버그를 찾기가 더 어려워집니다.</p> -</div> - -<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 요소 특성</h3> - -<pre class="brush: js notranslate">// Assuming myButton is a button element -myButton.onclick = function(event){alert('Hello world')} -</pre> - -<p>The function can be defined to take an <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p> - -<p>The problem with this method is that only one handler can be set per element and per event.</p> - -<h2 id="Accessing_Event_interfaces">Accessing Event interfaces</h2> - -<p>Event handlers may be attached to various objects (including DOM elements, document, the {{domxref("window")}} object, etc.). When an event occurs, an event object is created and passed sequentially to the event listeners.</p> - -<p>The {{domxref("Event")}} interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p> - -<pre class="brush: js notranslate">function print(evt) { - // the evt parameter is automatically assigned the event object - // take care of the differences between console.log & alert - console.log('print:', evt) - alert(evt) -} -// any function should have an appropriate name, that's what called semantic -table_el.onclick = print -</pre> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/documentorshadowroot/index.html b/files/ko/orphaned/web/api/documentorshadowroot/index.html deleted file mode 100644 index 526f6687ad..0000000000 --- a/files/ko/orphaned/web/api/documentorshadowroot/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: DocumentOrShadowRoot -slug: orphaned/Web/API/DocumentOrShadowRoot -tags: - - API - - Document - - DocumentOrShadowRoot - - Interface - - NeedsTranslation - - Reference - - ShadowRoot - - TopicStub - - shadow dom -translation_of: Web/API/DocumentOrShadowRoot -original_slug: Web/API/DocumentOrShadowRoot ---- -<div>{{APIRef("Web Components")}}</div> - -<p><span class="seoSummary"><a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM API</a> 의 <strong><code>DocumentOrShadowRoot</code></strong> 믹스인(mixin)은 문서와 섀도우 루트간에 공유되는 API를 제공합니다. 다음 기능은 문서{{DOMxRef("Document")}}와 {{DOMxRef("ShadowRoot")}}에 모두 포함되어 있습니다.</span></p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt> - <dd>포커스를 가지는 섀도우 루트 내의 요소{{DOMxRef('Element')}}를 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt> - <dd>현재 이 문서에서 full screen mode인 요소{{DOMxRef('Element')}}를 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> - <dd>포인터가 잠겨있는 동안 마우스 이벤트의 대상으로 설정된 요소를 반환합니다. 잠금이 보류중이거나 포인터가 잠금 해제되어 있거나, 대상이 다른 문서(document)에 있으면 <code>null</code>을 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt> - <dd>문서에 명시적으로 링크되었거나 포함하고 있는 스타일 시트의 {{DOMxRef('CSSStyleSheet')}} 객체의 {{DOMxRef('StyleSheetList')}}를 반환합니다.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt> - <dd>유저가 선택한 텍스트의 범위, 또는 캐럿(caret - 텍스트 커서)의 현재 위치를 나타내는 {{DOMxRef('Selection')}}객체를 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt> - <dd>지정된 좌표의 최상위 요소를 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> - <dd>지정된 자표에 있는 모든 요소의 배열을 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> - <dd>캐럿을 포함한 DOM 노드와 그 노드 내에서 캐럿의 문자 오프셋을 포함한 {{DOMxRef('CaretPosition')}}를 반환합니다.</dd> -</dl> - -<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('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td>Implementation in Shadow DOM.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility">Browser Compatibility</h2> - - - -<p>{{Compat("api.DocumentOrShadowRoot")}}</p> - -<p>[1] This interface's features are still implemented on the {{DOMxRef("Document")}} object.</p> diff --git a/files/ko/orphaned/web/api/element/currentstyle/index.html b/files/ko/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index 04b0adabcc..0000000000 --- a/files/ko/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -tags: - - 돔 - - 속성 추출 - - 요소 속성 -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Summary">Summary</h2> - -<p><strong><code>Element.currentStyle</code></strong> 은 표준화된 {{domxref("window.getComputedStyle")}} 메서드의 인터넷 익스플로러 전용 대체 프로퍼티입니다. 오래된 버젼의 인터넷 익스플로러에서 사용 가능합니다.</p> - -<h2 id="Specification">Specification</h2> - -<p>명세에 포함 되는 부분이 아닙니다.</p> - -<p>마이크로소프트 <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">MSDN에 설명이 있습니다</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<p>{{Compat("api.Element.currentStyle")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Element.runtimeStyle")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/ko/orphaned/web/api/elementcssinlinestyle/style/index.html deleted file mode 100644 index ef9d2c90e0..0000000000 --- a/files/ko/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: element.style -slug: orphaned/Web/API/ElementCSSInlineStyle/style -tags: - - API - - HTML DOM - - HTMLElement - - Property - - Reference - - Style -translation_of: Web/API/ElementCSSInlineStyle/style -original_slug: Web/API/ElementCSSInlineStyle/style ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><code><strong>HTMLElement.style</strong></code> 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 <a href="/ko/docs/Web/HTML/Global_attributes/style"><code>style</code> 속성</a>이 포함한 CSS 선언을 담은 {{domxref("CSSStyleDeclaration")}} 객체를 반환합니다</p> - -<h2 id="예제">예제</h2> - -<pre class="brush: js">// Set multiple styles in a single statement -elt.style.cssText = "color: blue; border: 1px solid black"; -// Or -elt.setAttribute("style", "color:red; border: 1px solid blue;"); - -// Set specific style while leaving other inline style values untouched -elt.style.color = "blue";</pre> - -<h2 id="명세">명세</h2> - -<p><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> - -<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("api.HTMLElement.style")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/htmlhyperlinkelementutils/index.html b/files/ko/orphaned/web/api/htmlhyperlinkelementutils/index.html deleted file mode 100644 index 6ae4afa92f..0000000000 --- a/files/ko/orphaned/web/api/htmlhyperlinkelementutils/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: HTMLHyperlinkElementUtils -slug: orphaned/Web/API/HTMLHyperlinkElementUtils -tags: - - API - - Experimental - - Mixin - - NeedsTranslation - - TopicStub - - URL API -translation_of: Web/API/HTMLHyperlinkElementUtils -original_slug: Web/API/HTMLHyperlinkElementUtils ---- -<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> - -<p>The <strong><code>HTMLHyperlinkElementUtils</code></strong> mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.</p> - -<p>There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.</p> - -<h2 id="Properties">Properties</h2> - -<div class="note"> -<p><strong>Note: </strong>This interface doesn't inherit any property.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the whole URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the domain of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the port number of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the username specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the password specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt> - <dd>This returns a {{domxref("USVString")}} containing the origin of the URL (that is its scheme, its domain and its port).</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<div class="note"> -<p><strong>Note: </strong>This interface doesn't inherit any method.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt> - <dd>This returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.</dd> -</dl> - -<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', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLHyperlinkElementUtils")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Interfaces implementing this one: {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}} - </li> -</ul> diff --git a/files/ko/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/ko/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index e452583781..0000000000 --- a/files/ko/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - HTMLOrForeignElement - - Property - - Read-only - - Reference -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary"><code><strong>HTMLElement.dataset</strong></code> 읽기 전용 속성은 요소의 <a href="/ko/docs/Web/HTML/Global_attributes/data-*">사용자 지정 데이터 특성</a>(<code>data-*</code>)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다.</span> 반환하는 값은 {{domxref("DOMStringMap")}}으로, 각 데이터 특성마다 하나의 항목을 가집니다. <code>dataset</code> 속성 자체는 읽기 전용이라는 점에 주의하세요. 모든 쓰기 작업은 <code>dataset</code> 안의, 데이터 특성을 나타내는 각각의 속성에 수행해야 합니다. 또한 HTML의 <code>data-이름</code>과, 이에 대응하는 DOM <code>dataset['이름']</code>의 <code>이름</code>은 서로 일치하지 않으나, 다음 규칙에 따라 유사함을 기억하세요.</p> - -<ul> - <li>HTML의 사용자 지정 특성 이름은 <code>data-</code>로 시작합니다. 또한 문자, 숫자, 대시(<code>-</code>), 점(<code>.</code>), 콜론(<code>:</code>), 언더스코어(<code>_</code>)만 사용할 수 있고, ASCII 대문자(<code>A</code>-<code>Z</code>)는 사용할 수 없습니다.</li> - <li>JavaScript의 사용자 지정 특성 이름은 HTML 이름을 카멜 표기법으로 변환한 형태로, 대시, 점 등을 모두 제거합니다.</li> -</ul> - -<p>아래의 내용과 함께, <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a> 아티클에서는 HTML 데이터 속성을 어떻게 쓰는지 안내를 찾을 수 있습니다. </p> - -<h3 id="Name_conversion">Name conversion</h3> - -<p>dash-style 에서 camelCase로 변환: 커스텀 데이터 속성의 이름은 아래의 규칙에 따라 {{ domxref("DOMStringMap") }}의 key로 변환됩니다. </p> - -<ul> - <li>접두사 <code>data-</code> 는 삭제됩니다. (대시 포함);</li> - <li><code>a</code><span style="line-height: 1.5;"> 부터 </span><code>z</code> 까지 <span style="line-height: 1.5;">ASCII 소문자 앞에 오는</span> 모든 대시(<code>U+002D</code>)는 삭제되고 해당 소문자는 대문자로 변환됩니다.</li> - <li>다른 기호는(다른 대시들을 포함한) 바뀌지 않습니다.</li> -</ul> - -<p>camelCase 에서 dash-style로 변환: key를 속성 이름으로 매핑하는 반대의 변환은 아래의 규칙을 따릅니다.:</p> - -<ul> - <li>제약 조건: 대시 바로 뒤에는 <code>a</code> 에서 <code>z</code> 까지 ASCII 소문자를 쓸 수 없습니다 (변환 전);</li> - <li>접두사 <code>data-</code> 가 추가됩니다;</li> - <li><code>A</code> 에서 <code>Z</code> 까지 모든 ASCII 대문자는 대시와 해당 소문자로 변환됩니다;</li> - <li>다른 문자는 변하지 않습니다.</li> -</ul> - -<p>이러한 제약 조건은 반드시 두 변환이 서로의 역이 되도록 합니다.</p> - -<p>예를 들어, <code>data-abc-def</code> 라는 이름의 속성은 <code>abcDef</code> 라는 키에 대응합니다.</p> - -<h3 id="Accessing_values">Accessing values</h3> - -<ul> - <li>속성들은 <code>element.dataset.keyname</code><em>과 같이</em> dataset의 객체 속성처럼 camelCase 이름(키)을 사용해서 설정하거나 읽을 수 있습니다</li> - <li>속성들은 또한 <code>element.dataset[keyname]</code>과 같이 객체 속성의 괄호 신택스로 설정하거나 읽을 수 있습니다.</li> -</ul> - -<h2 id="Syntax">Syntax</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> - <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> - <li> - <p>HTML elements에서 사용자가 지정한 data attribute에 직접 설정할 수 있으나 attribute names는 위의 데이터 문법을 반드시 사용해야 합니다.</p> - </li> -</ul> - -<h2 id="예시">예시</h2> - -<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> - -<pre class="brush: js">const el = document.querySelector('#user'); - -// el.id === 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -// set the data attribute -el.dataset.dateOfBirth = '1960-10-03'; -// Result: el.dataset.dateOfBirth === 1960-10-03 - -delete el.dataset.dateOfBirth; -// Result: el.dataset.dateOfBirth === undefined - -// 'someDataAttr' in el.dataset === false -el.dataset.someDataAttr = 'mydata'; -// Result: 'someDataAttr' in el.dataset === true -</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', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> class of global attributes.</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/htmlorforeignelement/tabindex/index.html b/files/ko/orphaned/web/api/htmlorforeignelement/tabindex/index.html deleted file mode 100644 index b159239155..0000000000 --- a/files/ko/orphaned/web/api/htmlorforeignelement/tabindex/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: element.tabIndex -slug: orphaned/Web/API/HTMLOrForeignElement/tabIndex -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/HTMLOrForeignElement/tabIndex -original_slug: Web/API/HTMLOrForeignElement/tabIndex ---- -<p>{{ ApiRef() }}</p> -<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> -<p>현재 요소의 탭 순서를 get/set.</p> -<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3> -<pre class="eval">element.tabIndex =<i>iIndex</i> -</pre> -<h3 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98">매개변수</h3> -<ul> - <li><code>iIndex</code>는 숫자</li> -</ul> -<h3 id=".EC.98.88" name=".EC.98.88">예</h3> -<pre>b1 = document.getElementById("button1"); -b1.tabIndex = 1; -</pre> -<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-40676705">tabIndex </a></p> -<p>{{ languages( { "en": "en/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" } ) }}</p> diff --git a/files/ko/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ko/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 637c74a373..0000000000 --- a/files/ko/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: 기본 개념 -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -tags: - - Advanced - - IndexedDB -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -<p>{{DefaultAPISidebar("IndexedDB")}}</p> - -<div class="summary"> -<p><strong>IndexedDB</strong>는 사용자의 브라우저 안에 데이터를 영구적으로 저장하게 해주는 방법 중 하나입니다. 그것은 네트워크 가능 여부에 상관없이, 풍부한 쿼리 작성 능력으로 웹 애플리케이션을 만들게 해주고, 이 애플리케이션은 온라인과 오프라인 모두에서 동작할 수 있습니다. IndexedDB는 예를 들면, 도서관의 DVD 목록처럼 대용량 데이터를 저장하는 애플리케이션, 그리고 메일 클라이언트, to-do 리스트, 노트패드처럼 동작에 지속적인 인터넷 연결이 필요하지 않은 애플리케이션에 유용합니다.</p> -</div> - -<h2 id="이_문서에_대하여">이 문서에 대하여</h2> - -<p>이 소개글은 IndexedDB의 필수 개념과 용어에 대해 논의합니다. 큰 그림을 제공하고 핵심 개념들을 설명합니다.</p> - -<p>다음과 같은 유용한 정보를 찾을 수 있을 것입니다.</p> - -<ul> - <li>IndexedDB 용어들에 대해 더 배우기 위해, <a href="#definitions">정의</a> 섹션을 보세요.</li> - <li>API 사용법에 대한 자세한 강좌는, <a href="/ko/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">IndexedDB 사용하기</a>를 보세요.</li> - <li>IndexedDB API에 대한 레퍼런스 문서는, <a href="/ko/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> 글과 그 하위 페이지에 있는 IndexedDB에 사용되는 객체의 타입들에 대한 설명을 보세요.</li> - <li>브라우저가 뒷단에서 데이터를 어떻게 저장하는지에 대한 좀 더 많은 정보는 <a href="/ko/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a>를 읽어보세요.</li> -</ul> - -<h2 id="IndexedDB_개요">IndexedDB 개요</h2> - -<p>IndexedDB는 "키(key)"로 지정된 객체를 저장하고 검색할 수 있도록 도와줍니다. 데이터베이스에 적용하는 모든 변경은 트렌잭션 안에서 일어납니다. 대부분의 웹 스토리지 솔루션과 마찬가지로, IndexedDB는 동일 출처 정책 (<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>)을 따릅니다. 따라서 당신이 한 도메인의 데이터에 접근하고 있는 동안, 다른 도메인의 데이터에 접근할 수 없습니다.</p> - -<p>IndexedDB는 <a href="/ko/docs/Web/API/Web_Workers_API/basic_usage">웹 워커</a>를 포함하는 대부분의 문맥(컨텍스트)에 사용될 수 있는 비동기(<a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asynchronous</a>) API입니다. 웹 워커에서 사용하기 위해 동기(<a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">synchronous</a>) 버전도 존재했지만, 웹 커뮤니티의 관심부족으로 웹 스펙에서 제거되었습니다.</p> - -<p>IndexedDB는 WebSQL 데이터베이스와 경쟁 관계에 있었지만, W3C는 2010 11월 8일에 WebSQL을 폐기(deprecated)하였습니다. IndexedDB와 WebSQL 모두 데이터 저장을 위한 솔루션이지만, 동일한 기능을 제공하지는 않습니다. WebSQL Database는 관계형 데이터베이스 접근 시스템인 반면, IndexedDB는 인덱스 테이블 시스템입니다.</p> - -<h2 id="concepts" name="concepts">주요 개념들</h2> - -<p>만약 당신이 다른 DB 시스템을 사용해봤던 경험이 있다면 오히려 잘못된 추측으로 인해 IndexedDB로 작업할 때 힘들어질 수도 있습니다. 그러므로 다음의 중요한 개념들을 잘 정리해 두어야 합니다.</p> - -<ul> - <li> - <p><strong>IndexedDB 데이터베이스는 키(key)-값(value) 한 쌍을 저장합니다.</strong> 값은 복잡한 구조의 객체가 될 수 있고, 키는 이 객체의 프로퍼티가 될 수 있습니다. 빠른 검색을 위해 저장된 계산(sorted enumeration)뿐만 아니라, 객체의 속성을 사용하는 인덱스를 만들 수 있습니다. 키는 바이너리 객체도 될 수 있습니다.</p> - </li> - <li> - <p><strong>IndexedDB는 트랜젝션 데이터베이스 모델을 기반으로 만들어졌습니다</strong>. 당신이 IndexedDB에서 하는 모든 것은 언제나 트랜젝션(<a href="#gloss_transaction">transaction</a>) 문맥(컨텍스트) 내에서 발생합니다. IndexedDB API는 인덱스, 테이블, 커서, 그 외 다른 것을 나타내는 많은 객체를 제공하지만, 이들 각각은 특정 트랜젝션에 묶여있습니다. 그러므로, 당신은 트랜젝션 밖에서 명령을 실행하거나 커서를 열 수 없습니다. 트랜젝션은 명확한 수명(well-defined lifetime)을 가지고 있어서 트랜젝션이 완료된 후에 트랜젝션을 사용하려고 시도하면 예외가 발생합니다. 또한, 트랜젝션은 오토 커밋이고, 수동으로 커밋될 수 없습니다.</p> - - <p>한 사용자가 당신이 만든 웹앱 인스턴스를 두 개의 다른 tabs에서 각각 동시에 열면 어떤 일이 일어날 수 있는지 생각해본다면, 이 트랜젝션 모델이 얼마나 유용한지 알 수 있습니다. 이러한 상황에서 트랜젝션 작업이 없다면, 두 개의 웹앱 인스턴스는 각각의 변경사항으로 인해 충돌할 수도 있습니다. 만약 데이터베이스의 트랜젝션에 익숙하지 않다면, <a href="https://en.wikipedia.org/wiki/Database_transaction">트랜젝션에 대한 위키피디아의 글</a>을 읽어 보세요. 또 정의 섹션의 <a href="#gloss_transaction">transaction</a>을 보세요.</p> - </li> - <li> - <p><strong>The IndexedDB API는 대부분 비동기 방식입니다.</strong> API는 값을 반환하는 방식으로 데이터를 주지 않습니다. 데이터를 받으려면 콜백 함수를 전달해야 합니다. 동기(synchronous) 방식으로는 하나의 값을 데이터베이스에 "저장"하거나 데이터베이스로부터 값을 "조회"할 수 없습니다. 대신, 데이터베이스 작업이 발생하도록 "요청(request)"을 해야 합니다. 작업이 완료되면 DOM 이벤트를 통해 알림을 받고, 이벤트트의 종류를 보면 그 동작이 성공했는지 아닌지를 알 수 있습니다. 처음에는 조금 복잡하게 들릴 수도 있지만, 사실은 <a href="/ko/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a>이 작동하는 방식과 크게 다르지 않습니다.</p> - </li> - <li> - <p><strong>IndexedDB는 많은 request를 사용합니다. </strong>Request는 앞서서 언급되었던 성공 또는 실패 DOM 이벤트를 받는 객체입니다. Request는 <code style="font-size: 14px;">onsucces</code> 와 <code style="font-size: 14px;">onerror</code> 프로퍼티를 가지고 있고, 각각의 프로퍼티에 대해 <code style="font-size: 14px;">addEventListener()</code> 와<code style="font-size: 14px;">removeEventListener()</code>를 호출할 수 있습니다. 또한 request는 request의 상태를 알려주는 <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, 그리고 <code style="font-size: 14px;">errorCode</code> 프로퍼티를 가집니다. 특히 <code style="font-size: 14px;">result</code> 프로퍼티는 request의 생성 방식에 따라 그 값이 매우 다양합니다(예를 들면 <code style="font-size: 14px;">IDBCursor</code> 인스턴스가 될 수도 있고, 데이터베이스에 방금 입력한 값의 키(key)가 될 수도 있습니다.)</p> - </li> - <li> - <p><strong>IndexedDB는 DOM 이벤트를 사용하여 결과가 준비되었음을 알립니다. </strong>DOM 이벤트는 항상 <code style="font-size: 14px;">type</code> 프로퍼티를 가집니다(대체로 <code style="font-size: 14px;">"success"</code> 또는 <code style="font-size: 14px;">"error"</code>로 설정되어 있습니다). 또한 DOM 이벤트는 이벤트가 어디를 향하고 있는지 알려주는 <code style="font-size: 14px;">target</code> 프로퍼티를 가집니다. 대부분의 경우, 이벤트의 <code style="font-size: 14px;">target</code>은 데이터베이스 작업 결과로 생성된 <code style="font-size: 14px;">IDBRequest</code> 객체입니다. Success 이벤트는 버블링 하지 않고, 취소될 수도 없습니다. 반면 Error 이벤트는 버블링되며 취소될 수도 있습니다. error 이벤트는 취소되지 않는 한 자신이 실행되고 있는 트랜잭션은 뭐든지 중단하므로, 이를 알고 있는 것이 중요합니다.</p> - </li> - <li> - <p><strong>IndexedDB는 객체 지향입니다.</strong> IndexedDB는 행열의 모음으로 구성된 테이블을 갖고 있는 관계형 데이터베이스가 아닙니다. 이는 어플리케이션을 설계하고 구축하는 방식에 영향을 끼치는 중요하고 근본적인 차이점입니다.</p> - - <p>전통적인 관계형 데이터베이스 저장소는 데이터의 행과 명시된 데이터 타입을 가진 열의 모음을 저장하고 있습니다. 반면 IndexedDB는 특정 데이터 타입을 저장하기 위한 객체 저장소를 형성하고 나면, 그 객체 저장소에 자바스크립트 객체를 저장하면 됩니다. 각 객체 저장소는 전반에 걸친 쿼리 작업과 반복(iteration) 작업을 효율적으로 만드는 인덱스 모음을 가질 수 있습니다. 만약 당신이 객체 지향 데이터베이스 관리 시스템에 친숙하지 않다면, <a class="external" href="https://en.wikipedia.org/wiki/Object_database" title="http://en.wikipedia.org/wiki/Object_database">Wikipedia article on object database</a>를 읽어 보세요.</p> - </li> - <li> - <p><strong>IndexedDB는 </strong><strong><abbr>SQL문을</abbr> 사용하지 않습니다.</strong> IndexedDB는 커서를 생선하는 index에 대해 쿼리를 사용하는데, 이는 전체 결과 값에 걸쳐 반복을 실행하기 위해 사용합니다. 만약 NoSQL 시스템에 친숙하지 않다면, <a class="external" href="https://en.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">Wikipedia article on NoSQL</a>를 읽어 보세요.</p> - </li> - <li> - <p><a name="origin"><strong>IndexedDB는 하나의 동일 출처 정책(same-origin policy)을 고수합니다</strong></a>. 하나의 출처(origin)는 도메인, 애플리케이션 레이어 프로토콜, 그리고 스크립트가 실행되고 있는 문서의 url 포트입니다. 각 출처는 자신의 연관된 데이터베이스 세트를 가집니다. 모든 데이터베이스는 하나의 출처 안에서 식별하기 위한 하나의 이름을 가집니다.</p> - - <p>IndexedDB의 보안 경계는 다른 출처로 데이터에 접근하는 애플리케이션을 막습니다. 예를 들어, 동일한 출처를 가지고 있는 이유로 <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> 내의 앱이나 페이지가 <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>로부터 데이터를 조회할 수 있는 데 반해, 출처가 다르기 때문에 <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a>(다른 포트) <span style="line-height: 1.5;">또는 </span><a class="link-https" href="https://www.example.com/dir/" rel="freelink" style="line-height: 1.5;">https://www.example.com/dir/</a><span style="line-height: 1.5;"> (다른 프로토콜)로부터는 데이터를 조회할 수 없습니다.</span></p> - - <div class="note"><strong>Note</strong>: 브라우저가 <a href="https://support.mozilla.org/ko/kb/disable-third-party-cookies">서드 파티의 쿠키에 접근할 수 없도록 설정</a>하지 않는 한 서드파티 창의 콘텐츠는 그 안에 임베드된 출처에 대한 IndexedDB 저장소에 접속할 수 있습니다. {{bug("1147821")}}</div> - </li> -</ul> - -<h2 id="definitions" name="definitions">정의</h2> - -<p>이 섹션은 IndexedDB API에서 사용되는 용어들을 정의하고 설명합니다.</p> - -<h3 id="database" name="database">데이터베이스</h3> - -<dl> - <dt><a name="gloss_database">데이터베이스</a></dt> - <dd>일반적으로 하나 혹은 그 이상의 <em><a href="#gloss_object_store" title="#gloss_object_store">객체 저장소</a>로 구성되는 </em>정보의 레파지토리입니다. 개별 데이터베이스는 다음의 내용을 반드시 가져야 합니다. - <ul> - <li>이름(Name). 이것은 하나의 특정 출처 내에서 database를 구별하고 데이터베이스가 존재하는 동안 일정하게 유지됩니다. 이름은 빈 문자열을 포함해서 어떤 문자열 값이라도 될 수 있습니다.</li> - <li> - <p>현재 <a href="#gloss_version"><em>버전</em></a>. 데이터베이스가 처음 만들어질 때, 따로 지정하지 않으면 버전은 정수 1입니다. 각 데이터베이스는 주어진 순간에 오직 하나의 버전을 가질 수 있습니다.</p> - </li> - </ul> - </dd> - <dt><a name="gloss_durable">지속성</a></dt> - <dd> - <p>파이어폭스에서 indexedDB는 지속성을 유지하기 위해 사용됩니다. 즉, 읽기쓰기 트랜젝션{{domxref("IDBTransaction.oncomplete")}}이 모든 데이터가 디스크로 들어갈 수 있도록 보장될 때에만 실행됩니다.</p> - - <p>파이어폭스 40에서, IndexedDB 트랜젝션은 성능을 높이기 위해 지속성 보장을 늦춰왔는데, 이는 IndexedDB를 지원하는 다른 브라우저도 동일한 방식입니다{{Bug("1112702")}}. 이 경우 {{Event("complete")}} 이벤트는 OS가 데이터 쓰기를 하라고 전달한 후, 데이터가 실제로 데이터베이스에 반영되기 전에 잠재적으로 실행됩니다. 이벤트는 이전보다 더 빠르게 전달될지도 모르지만, 만약 OS가 다운되거나 데이터가 데이터베이스에 반영되기 전에 시스템 전원이 부족하면, 전체 트랜젝션은 잃게 될 수도 있는 희박한 위험성이 존재합니다. 그런 치명적인 이벤트는 드물기 때문에, 대부분의 소비자는 더 이상 염려할 필요는 없습니다.</p> - - <div class="note"> - <p><strong>Note</strong>: 파이어폭스에서 (나중에 다시 계산 할 수 없는 까다로운 데이터를 저장하는 것)과 같은 몇 가지 이유로 지속성을 보장하고 싶다면, <code>complete</code> 이벤트가 전달되기 전에 아직 정식 표준이 아닌 실험적인 <code>readwriteflush</code> 모드를 이용하여 트랜젝션을 데이터베이스에 강제로 반영할 수 있습니다. ({{domxref("IDBDatabase.transaction")}} 참고.) 현재는 실험적으로 적용되어 있고(experimental), <code>about:config</code>에서<code>dom.indexedDB.experimental</code>값이 <code>true</code> 로 설정되어 있을 때만 사용할 수 있습니다.</p> - </div> - </dd> - <dt><a name="gloss_object_store">객체 저장소 ( Object Store )</a></dt> - <dd> - <p>데이터베이스에 데이터가 저장되는 매커니즘입니다. 객체 저장소는 키(key)와 값(value)의 쌍으로 된 레코드를 영구적으로 잡습니다. 한 객체 저장소 안의 레코드는 키(key)에 따라 오름차순으로 정렬됩니다.</p> - - <p>모든 객체 저장소는 데이터베이스 안에서 고유한 이름을 가져야 합니다. 객체 저장소는 선택적으로 <em><a href="#gloss_keygenerator">key generator</a></em>와 <em><a href="#gloss_keypath">key path</a>를 가질 수 있습니다</em>. 만약 객체 저장소가 key path를 가진다면, 그것은 <em><a href="#gloss_inline_key">in-line keys</a>를 사용합니다. </em> 아니면, 그것은 <em><a href="#gloss_outofline_key">out-of-line keys</a>를 사용하는 것입니다.</em></p> - - <p>객체 저장소에 대한 보다 자세한 정보는, <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> 또는 <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>를 참조하세요.</p> - </dd> - <dt><a name="gloss_version">version</a></dt> - <dd>Database가 처음 만들어질 때, version은 정수형 숫자로 1입니다. 각 database는 하나의 version을 집니다; 하나의 데이터베이스가 한번에 여러 version으로 존재할 수 없다. version을 바꾸는 유일한 방법은 현재 버전보다 큰 버전으로 그것을 여는 것입니다. 이렇ㄱ하면 <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>트랜잭션을 시작하고</em> <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event를 발생시킵니다. database의 schema를 변경하려면 upgradeneed 이벤트 핸들러내에서 수행해야 합니다.</dd> - <dd>Note: 이 스펙은 <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">most recent specification</a>, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> method.</dd> - <dt><a name="gloss_database_connection">database connection</a></dt> - <dd> <em><a href="#gloss_database">database</a>를 여는 것에 의해 생성되는 operation</em>. 한 주어진 database는 동시에 여러개의 connections를 가질 수 있다.</dd> - <dt><a name="gloss_transaction">transaction</a></dt> - <dd> - <p>특정 database에 대한 data-access와 data-modification operations의 원자적이고 견고한 집합. 그것이 database에서 당신이 data로 상호작용하는 방법이다. 사실, database에서의 어떠한 data의 읽기 또는 변경도 transaction 내에서 일어나야 한다.</p> - - <p>하나의 database connection은 한번에 그에 연관된 여러 active transaction을 가질 수 있다, writing transactions이 겹치는 <em><a href="#scope">scopes</a>을 갖지 않는 동안</em>. 생성에서 정의되는 transactions의 scope은 그 transaction이 어느 object stores와 상호작용할 수 있는지를 결정하고 그 transaction의 lifetime동안 일정하다. 따라서, 예를 들어, 만약 한 database connection이 <code>flyingMonkey</code> object store를 커버하는 scope의 writing transaction을 이미 가지면, 당신은 <code>unicornCentaur과</code> <code>unicornPegasus</code> object stores의 scope을 가진 두번째 transaction을 시작할 수 있다. reading transactions로서, 당신은 여러개를 가질 수 있다 — 심지어 겹치는 것들이라도.</p> - - <p>Transactions는 short-lived일 것이 기대된다, 그래서 브라우저는 너무 오래걸리는 transaction을 종료할 수 있다, 그 long-running transaction이 lock한 storage resources를 해제하기 위해. 당신은 transaction을 abort할 수 있다 , 이는 그 transaction에서 만들어진 변경들을 roll back한다. 그리고 당신은 심지어 transaction을 abort하기 위해 그것이 시작되거나 활성화되기를 기다릴 필요가 없다.</p> - - <p>Transaction의 세가지 모드는: <code>readwrite</code>, <code>readonly</code>, 그리고 <code>versionchange</code>. Object stores와 indexes를 생성하는 유일한 방법은 <a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> transaction을 이용하는 것이다. transaction types를 더 배우기 위해, <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>에 대한 reference article을 보라.</p> - - <p>모든 것은 하나의 transaction에서 일어나기 때문에, IndexedDB에서 그것은 매우 중요한 개념이다. transactions에 대해 더 배우기 위해, 특히 그것들이 어떻게 versioning과 관련되는가에 대해, <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a>를 보라, 그는 또한 reference documentation을 가진다. synchronous API에 대한 문서를 위해, <a href="../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>를 보라.</p> - </dd> - <dt><a name="gloss_request">request</a></dt> - <dd>database에 읽고 쓰기를 행하는 operation. 모든 request는 하나의 읽기 혹은 쓰기 operation을 나타낸다.</dd> - <dt><a name="gloss_index">index</a></dt> - <dd> - <p>하나의 index는 다른 object store의 records를 찾기 위한 specialized object store이다, <em>referenced object store라 불리는</em>. index는 그 records의 value part가 referenced object store의 한 record의 key part인 영구적인 key-value storage이다. 하나의 index의 records는 referenced object안에 record가 삽입되고 update되고 삭제될 때마다 자동적으로 생성된다. 하나의 index의 각 record는 그의 referenced object store의 오직 하나의 record를 가리킬 수 있다, 그러나 여러 indexes가 같은 object store를 참조할 수 있다. object store가 변할 때, 그 object store를 참조하는 모든 index는 자동으로 update된다.</p> - - <p><span style="line-height: 1.5;">다른 방법으로, </span><a href="#gloss_key" style="line-height: 1.5;">key</a><span style="line-height: 1.5;">를 사용해서 object store에서 records를 찾을 수 있다</span><em>.</em></p> - - <p>indexes 사용하기에 대해 더 배우기 위해, <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>를 보라. index에 대한 reference documentation을 위해, <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>를 보라.</p> - </dd> -</dl> - -<h3 id="key" name="key">Key and value</h3> - -<dl> - <dt><a name="gloss_key">key</a></dt> - <dd> - <p>object store에서 이에 의해 저장된 values가 조직되고 조회되는 하나의 data value. object store는 세 sources 중 하나로부터 key를 이끌어낼 수 있다: <em><a href="#gloss_keygenerator">key generator</a></em>, <em><a href="#gloss_keypath">key path</a></em>, 또는 명시적으로 지정된 value. key는 그 앞에 있는 것보다 큰 값을 지닌 한 data type의 것이어야 한다. object store의 각 record는 같은 store 내에서 유일한 key를 가져야 한다, 따라서 당신은 주어진 object store에서 같은 key의 여러 records를 가질 수 없다.</p> - - <p>하나의 key는 다음의 types 중 하나가 될 수 있다: <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float, 그리고 <a href="/en/JavaScript/Reference/Global_Objects/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a>. arrays에 대해, key는 empty value로부터 infinity의 범위가 될 수 있다. 그리고 당신은 array 내에 array를 포함할 수 있다. string 또는 integer의 key만 사용해야 한다는 요구사항은 없다.</p> - - <p>다른 방법으로, 당신은 <em><a href="#gloss_index">index</a>를 사용해서 object store에서 records를 찾을 수 있다.</em></p> - </dd> - <dt><a name="gloss_keygenerator">key generator</a></dt> - <dd>정렬 sequence로 새 keys를 생성하기 위한 mechanism. 만약 한 object store가 key generator를 가지지 않으면, application은 저장되는 records를 위한 keys를 제공해야 한다. Generators는 stores 간에 공유되지 않는다. 이것은 브라우저 구현 세부사항에 가깝다, 때문에 web 개발에서, 당신은 실제로 key generators를 만들고 접근할 필요가 없다.</dd> - <dt><a name="gloss_inline_key">in-line key</a></dt> - <dd>저장되는 value의 부분으로서 저장되는 key. <em>key path를 사용함으로써 찾아진다</em>. 하나의 in-line key는 generator를 이용해서 생성될 수 있다. key가 생성된 후에, 그것은 key path를 사용하는 value에 저장될 수 있거나 key로서 사용될 수 있다.</dd> - <dt><a name="gloss_outofline_key">out-of-line key</a></dt> - <dd>저장되는 value와는 따로 저장되는 key.</dd> - <dt><a name="gloss_keypath">key path</a></dt> - <dd>object store 또는 index에서 브라우저가 어디로부터 key를 추출해야 하는지 정의한다. 하나의 valid key path는 다음 중 하나를 포함할 수 있다: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. 그것은 spaces를 포함할 수 없다.</dd> - <dt><a name="gloss_value">value</a></dt> - <dd> - <p>각각의 record는 하나의 value를 가진다, 이는 javascript로 표현될 수 있는 어떤 것이라도 포함할 수 있다, <a href="/en/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/en/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/en/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a>, 그리고 null을 포함해서.</p> - - <p>object 또는 array가 저장될 때, 그 object 또는 array의 properties 와 values는 적합한 어떤 값이라도 될 수 있다.</p> - - <p><a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a>와 files가 저장될 수 있다, cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a>.</p> - </dd> -</dl> - -<h3 id="range" name="range">Range and scope</h3> - -<dl> - <dt>scope</dt> - <dd>한 transaction이 적용되는 object stores와 indexe. read-only transactions의 scope은 겹칠 수 있고 동시에 실행될 수 있다. 한편으로, writing transactions의 scope은 겹칠 수 없다. 당신은 여전히 동시에 같은 scope의 여러 transaction을 실행할 수 있지만 그들은 queue up하고 하나하나 차례로 실행된다.</dd> - <dt>cursor</dt> - <dd>한 key range의 여러 records에 대한 iterating을 위한 mechanism. The cursor는 그것이 iterating하는 것이 어느 index또는 object store인지 가리키는 한 source를 가진다. 그것은 그 range 내의 position을 가지고, record keys의 순서에서 증가 혹은 감소하는 한 방향으로 움직인다. cursors에 대한 reference documentation을 위해, <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> 또는 <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a>를 보라.</dd> - <dt>key range</dt> - <dd> - <p>keys를 위해 사용되는 몇몇 data type에 대한 하나의 연속 구간. Records는 keys 또는 하나의 range of keys를 사용하는 object sotres와 indexes로부터 조회될 수 있다. 당신은 lower 그리고 upper bound를 사용해서 range를 제한하거나 걸러낼 수 있다. 예를 들어, 당신은 x와 y 사이의 한 key의 모든 값에 대해 iterate할 수 있다.</p> - - <p>key range에 대한 reference documentation을 위해, <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>를 보라.</p> - </dd> -</dl> - -<h2 id="limitations" name="limitations">한계점들</h2> - -<p>IndexedDB는 client-side storage가 필요한 대부분의 경우를 해결하기 위해 만들어졌다. 하지만 그것은 다음과 같은 몇 가지 경우를 해결하진 못 한다:</p> - -<ul> - <li>Internationalized sorting. 모든 언어가 strings를 같은 방법으로 정렬하지 않기 때문에 internationalized sorting은 지원되지 않는다. database가 특정 internationalized order로 데이터를 정렬할 수 없는 반면, 당신이 스스로 database 바깥으로 data를 읽어와서 정렬할 수 있다.</li> - <li>Synchronizing. 이 API는 server-side database와의 동기화를 다루기 위해 제작되지 않았다. 당신이 스스로 client-side indexedDB database를 server-side database와 동기화시키는 코드를 작성해야 한다.</li> - <li>Full text searching. 이 API는 SQL의 <span style="direction: ltr;"><code>LIKE</code> operator의 equivalent를 가지지 않는다. </span></li> -</ul> - -<p>덧붙여서, 다음과 같은 조건에서 브라우저가 데이터베이스를 지울 수 있음을 알아두라:</p> - -<ul> - <li>유저가 삭제를 요청한다. 많은 브라우저는 유저가 주어진 웹페이지에 대해 저장된 데이터를 지울 수 있도록 한다, cookies, bookmarks, stored passwords, 그리고 IndexedDB data를 포함해서.</li> - <li>브라우저가 private browsing mode 상태에 있다. 특정 브라우저들은 (Firefox의 경우) "private browsing" 혹은 (Chrome의 경우) "incognito" modes 를 가지고 있다. 그 session의 끝에서, 브라우저는 그 데이터베이스를 지운다.</li> - <li>disk 또는 quota limit에 다다랐다.</li> - <li>데이터가 오염되었다.</li> - <li>그 feature에 호환되지 않는 변경이 이루어졌다.</li> -</ul> - -<p>정확한 삭제 시점과 브라우져의 DB 수용능력은 때때로 달라질 수 있습니다만, 브라우져 벤더가 지킬려고 노력하는 가장 기본적인 철학은 데이터를 가능한 최대한 데이터를 지킬려고 노력한다는 것입니다.</p> - -<h2 id="next" name="next">Next steps</h2> - -<p>이제 큰 그림은 이해할 수 있게 됐고 아울러 보다 복잡한 사용법을 익힐 준비가 됐네요. 실제로 어떻게 API를 사용하는지 알아보기 위해서, <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>를 살펴봅시다.</p> - -<h2 id="함께_보기">함께 보기</h2> - - - -<ul> - <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> - <li><a href="https://developer.mozilla.org/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li> - <li><a href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li> - <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> -</ul> - - - -<div id="gtx-trans" style="position: absolute; left: 225px; top: 8418px;"> -<div class="gtx-trans-icon"></div> -</div> diff --git a/files/ko/orphaned/web/api/offscreencanvas/toblob/index.html b/files/ko/orphaned/web/api/offscreencanvas/toblob/index.html deleted file mode 100644 index f3cf0b08a9..0000000000 --- a/files/ko/orphaned/web/api/offscreencanvas/toblob/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: OffscreenCanvas.convertToBlob() -slug: orphaned/Web/API/OffscreenCanvas/toBlob -tags: - - API - - Canvas - - Experimental - - Method - - OffscreenCanvas - - Reference -translation_of: Web/API/OffscreenCanvas/toBlob -original_slug: Web/API/OffscreenCanvas/toBlob ---- -<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div> - -<p><strong><code>OffscreenCanvas.convertToBlob()</code></strong> 메소드는 캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 생성합니다.</p> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">Promise<Blob> OffscreenCanvas.convertToBlob(<var>options</var>);</pre> - -<h3 id="매개_변수">매개 변수</h3> - -<dl> - <dt><code>options</code> {{optional_inline}}</dt> - <dd> - <p>객체를 {{domxref("Blob")}} 객체로 전환할 때 다양한 옵션을 줄 수 있습니다.</p> - - <pre class="brush: js">const blob = offscreenCanvas.convertToBlob({ - type: "image/jpeg", - quality: 0.95 -});</pre> - - <p>options:</p> - - <ul> - <li><strong><code>type</code></strong>: 이미지 포맷을 가리키는 {{domxref("DOMString")}}. 상세 타입은 <code>image/png</code></li> - <li><code><strong>quality</strong></code>: <code>type</code> 옵션이 <code>image/jpeg</code> 혹은 <code>image/webp</code> 일 때 이미지의 품질을 가리키는 <code>0</code>과 <code>1</code>사이의 {{jsxref("Number")}}. 이 매개 변수가 다른 값이라면, 이미지 품질의 기본 설정값이 적용됩니다. 다른 매개 변수들은 무시됩니다.</li> - </ul> - </dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 반환하는 {{jsxref("Promise")}}</p> - -<h2 id="예시">예시</h2> - -<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256); -var gl = offscreen.getContext("webgl"); - -// ... gl 컨텍스트를 이용해 무언가를 그립니다 ... - -offscreen.convertToBlob().then(function(blob) { - console.log(blob); -}); - -// Blob { size: 334, type: "image/png" }</pre> - -<h2 id="상세">상세</h2> - -<p>현재 작성되고 있는 중입니다: <a href="https://wiki.whatwg.org/wiki/OffscreenCanvas">OffscreenCanvas</a>.</p> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("api.OffscreenCanvas.convertToBlob")}}</p> -</div> - -<p> </p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li>이 메소드를 정의하는 인터페이스, {{domxref("OffscreenCanvas")}}.</li> -</ul> diff --git a/files/ko/orphaned/web/api/parentnode/append/index.html b/files/ko/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index a488b110bc..0000000000 --- a/files/ko/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>ParentNode.append()</code></strong> 메서드는 <code>ParentNode</code>의 마지막 자식 뒤에 {{domxref("Node")}} 객체 또는 {{domxref("DOMString")}} 객체를 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드처럼 삽입한다.</p> - -<p>{{domxref("Node.appendChild()")}}와 다른 점:</p> - -<ul> - <li><code>ParentNode.append()</code>는 {{domxref("DOMString")}} 객체도 추가할 수 있다. 한편 <code>Node.appendChild()</code>는 오직 {{domxref("Node")}} 객체만 허용한다.</li> - <li><code>ParentNode.append()</code>는 반환하는 값이 없다. 한편 <code>Node.appendChild()</code>는 추가한 {{domxref("Node")}} 객체를 반환한다.</li> - <li><code>ParentNode.append()</code>는 여러 개 노드와 문자를 추가할 수 있다. 한편 <code>Node.appendChild()</code>는 오직 노드 하나만 추가할 수 있다.</li> -</ul> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ParentNode.append((Node or DOMString)... nodes); -</pre> - -<h3 id="매개_변수">매개 변수</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>삽입하려고 하는 {{domxref("Node")}} 객체 집합 또는 {{domxref("DOMString")}} 객체 집합.</dd> -</dl> - -<h3 id="예외">예외</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 계층 구조의 지정된 지점에 노드를 삽입 할 수 없다.</li> -</ul> - -<h2 id="예제">예제</h2> - -<h3 id="요소element_추가하기">요소(element) 추가하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append(p); - -console.log(parent.childNodes); // NodeList [ <p> ] -</pre> - -<h3 id="문자text_추가하기">문자(text) 추가하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); - -console.log(parent.textContent); // "Some text"</pre> - -<h3 id="요소element와_문자text_함께_추가하기">요소(element)와 문자(text) 함께 추가하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.append_범위_지정_불가"><code>ParentNode.append()</code> 범위 지정 불가</h3> - -<p><code>append()</code> 메소드는 <code>with</code> 문으로 범위를 지정하지 않는다. 더 자세한 내용은 {{jsxref("Symbol.unscopables")}} 참고.</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - append("foo"); -} -// ReferenceError: append is not defined </pre> - -<h2 id="대체_구현">대체 구현</h2> - -<p>다음 코드를 이용하면 인터넷 익스플로러 9 이상에서 <code>append() method</code>를 대체하여 구현할 수 있다.</p> - -<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('append')) { - return; - } - Object.defineProperty(item, 'append', { - configurable: true, - enumerable: true, - writable: true, - value: function append() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.appendChild(docFrag); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<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('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>초기 정의</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.ParentNode.append")}}</p> - -<h2 id="참고">참고</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/parentnode/children/index.html b/files/ko/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 71dd79c408..0000000000 --- a/files/ko/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -<div>{{ APIRef("DOM") }}</div> - -<p><span class="seoSummary">{{domxref("ParentNode")}}의 속성 <code><strong>children</strong></code>은 호출된 요소의 모든 자식 노드의 {{domxref("Element","elements")}}를 담고있는 실시간 {{domxref("HTMLCollection")}}을 반환합니다.</span></p> - -<h2 id="Syntax">Syntax </h2> - -<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre> - -<h3 id="Value">Value</h3> - -<p>실시간이며, <code>node</code>의 자식 DOM 요소들의 정렬된 컬렉션인 {{ domxref("HTMLCollection") }}. 각 자식 요소를 컬렉션 안에서 접근하기 위해서 {{domxref("HTMLCollection.item", "item()")}} 메소드를 이용하거나 Javascript 배열 스타일의 문법을 사용할 수 있습니다.</p> - -<p>만약 노드가 자식요소를 갖고 있지 않나면, <code>children</code>은 0의 <code>length</code>를 가진 빈 리스트 일 것입니다.</p> - -<h2 id="Example">Example</h2> - -<pre class="brush: js">var foo = document.getElementById('foo'); -for (var i = 0; i < foo.children.length; i++) { - console.log(foo.children[i].tagName); -} -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">// Overwrites native 'children' prototype. -// Adds Document & DocumentFragment support for IE9 & Safari. -// Returns array instead of HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.children == null) { - Object.defineProperty(constructor.prototype, 'children', { - get: function() { - var i = 0, node, nodes = this.childNodes, children = []; - while (node = nodes[i++]) { - if (node.nodeType === 1) { - children.push(node); - } - } - return children; - } - }); - } -})(window.Node || window.Element); -</pre> - -<h2 id="Specification">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('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.children")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} interfaces.</li> - <li> - <div class="syntaxbox">Object types implementing this interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> - </li> - <li> - <div class="syntaxbox">{{domxref("Node.childNodes")}}</div> - </li> -</ul> diff --git a/files/ko/orphaned/web/api/parentnode/index.html b/files/ko/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 00fe1aba9d..0000000000 --- a/files/ko/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - Mixin - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><code><strong>ParentNode</strong></code> 믹스인<sup>mixin</sup>은 자식을 가질 수 있는 모든 종류의 {{domxref("Node")}} 객체가 공통으로 가지는 메서드와 속성을 가집니다.</span> {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("DocumentFragment")}} 객체가 구현합니다.</p> - -<p><a href="/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">선택자로 DOM 요소 선택하기</a> 문서를 참고하여 <a href="/ko/docs/Web/CSS/CSS_Selectors">CSS 선택자</a>로 원하는 노드나 요소를 선택하는 법을 알아보세요.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> - <dd><code>ParentNode</code>가 가진 자식 중 요소의 수를 반환합니다.</dd> - <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> - <dd><code>ParentNode</code>가 가진 모든 자식 중 요소만 모은 {{domxref("HTMLCollection")}}을 반환합니다.</dd> - <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> - <dd><code>ParentNode</code>의 자식이자 {{jsxref("Element")}}인 객체 중 첫 번째를 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.</dd> - <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> - <dd><code>ParentNode</code>의 자식이자 {{jsxref("Element")}}인 객체 중 마지막을 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> - <dd><code>ParentNode</code>의 마지막 자식 다음에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. <code>DOMString</code> 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.</dd> - <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> - <dd><code>ParentNode</code>의 첫 번째 자식 이전에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. <code>DOMString</code> 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.</dd> - <dt>{{domxref("ParentNode.querySelector()")}}</dt> - <dd>현재 <code>ParentNode</code>를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 첫 번째 {{domxref("Element")}}를 반환합니다.</dd> - <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> - <dd>현재 <code>ParentNode</code>를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 모든 요소의 {{domxref("NodeList")}}를 반환합니다.</dd> -</dl> - -<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', '#parentnode', 'ParentNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.ParentNode")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{domxref("ChildNode")}} 순수 인터페이스.</li> - <li> - <div class="syntaxbox"><code>ParentNode</code>를 구현하는 {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/ko/orphaned/web/api/parentnode/prepend/index.html b/files/ko/orphaned/web/api/parentnode/prepend/index.html deleted file mode 100644 index 989246cdc1..0000000000 --- a/files/ko/orphaned/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend -translation_of: Web/API/ParentNode/prepend -original_slug: Web/API/ParentNode/prepend ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>ParentNode.prepend()</code></strong> 메소드는 {{domxref("Node")}} 객체 또는{{domxref("DOMString")}} 객체를 {{domxref("ParentNode")}}의 첫 자식노드 앞에 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입된다.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>nodesToPrepend</code></dt> - <dd>One or more nodes to insert before the first child node currently in the <code>ParentNode</code>. Each node can be specified as either a {{domxref("Node")}} object or as a string; strings are inserted as new {{domxref("Text")}} nodes.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p><code>undefined</code>.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="Prepending_an_element">Prepending an element</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -var span = document.createElement("span"); -parent.append(p); -parent.prepend(span); - -console.log(parent.childNodes); // NodeList [ <span>, <p> ] -</pre> - -<h3 id="Prepending_text">Prepending text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); -parent.prepend("Headline: "); - -console.log(parent.textContent); // "Headline: Some text"</pre> - -<h3 id="Appending_an_element_and_text">Appending an element and text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.prepend("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.prepend()_is_unscopable"><code>ParentNode.prepend()</code> is unscopable</h3> - -<p>The <code>prepend()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - prepend("foo"); -} -// ReferenceError: prepend is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>You can polyfill the <code>prepend()</code> method if it's not available:</p> - -<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('prepend')) { - return; - } - Object.defineProperty(item, 'prepend', { - configurable: true, - enumerable: true, - writable: true, - value: function prepend() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.insertBefore(docFrag, this.firstChild); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="Specification">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('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.prepend")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html b/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html deleted file mode 100644 index ef2e3e7be4..0000000000 --- a/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: RTCPeerConnection.onidentityresult -slug: orphaned/Web/API/RTCPeerConnection/onidentityresult -translation_of: Web/API/RTCPeerConnection/onidentityresult -original_slug: Web/API/RTCPeerConnection/onidentityresult ---- -<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> - -<p><code><strong>RTCPeerConnection.onidentityresult</strong></code> 이벤트 핸들러는 {{domxref("RTCPeerConnection")}}가 {{domxref("RTCIdentityEvent")}} 타입의 {{event("identityresult")}} 이벤트를 수신하게되면 실행되는 코드를 담고 있는 속성입니다. 이러한 이벤트는 {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}} 혹은 offer 혹은 answer를 생성하는 과정에 의해 식별인자 주장이 생성되면 전송됩니다.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="eval"><em>peerconnection</em>.onidentityresult = <em>function</em>; -</pre> - -<h3 id="값">값</h3> - -<ul> - <li><code>function</code> 은 개발자가 정의한 함수로 괄호 <code>()</code>나 매개 변수 혹은 <code>function(event) {...}</code>와 같은 이름 없는 함수 정의가 필요 없습니다. 이벤트 핸들러는 항상 {{domxref("RTCIdentityEvent")}} 타입의 이벤트를 포함하는 하나의 변수를 가집니다. </li> -</ul> - -<h2 id="예시">예시</h2> - -<pre class="brush: js">pc.onidentityresult = function(ev) { alert("onidentityresult event detected!"); }; -</pre> - -<h2 id="Specifications" name="Specifications">사양서</h2> - -<table class="standard-table" style="height: 49px; width: 1000px;"> - <thead> - <tr> - <th scope="col">사양서</th> - <th scope="col">상태</th> - <th scope="col">코멘트</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onidentityresult', 'RTCPeerConnection.onidentityresult') }}</td> - <td>{{ Spec2('WebRTC 1.0') }}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.RTCPeerConnection.onidentityresult")}}</p> - -<h2 id="참조">참조</h2> - -<ul> - <li>{{event("identityresult")}} 이벤트와 해당 타입인 {{domxref("RTCIdentityEvent")}}를 참조하십시오.</li> -</ul> diff --git a/files/ko/orphaned/web/css/index/index.html b/files/ko/orphaned/web/css/index/index.html deleted file mode 100644 index 52279781f5..0000000000 --- a/files/ko/orphaned/web/css/index/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: CSS documentation index -slug: orphaned/Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index -original_slug: Web/CSS/Index ---- -<p>{{Index("/ko/docs/Web/CSS")}}</p> diff --git a/files/ko/orphaned/web/css/linear-gradient()/index.html b/files/ko/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index ba07032e05..0000000000 --- a/files/ko/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: linear-gradient -slug: orphaned/Web/CSS/linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Graphics - - Layout - - Reference - - Web - - gradient - - 그라데이션 - - 그레이디언트 -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>linear-gradient()</code></strong> 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("<image>")}}의 특별한 종류인 {{cssxref("<gradient>")}} 자료형입니다.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox notranslate">/* 45도로 기울어진 파랑 시작 빨강 종료 그레이디언트 */ -linear-gradient(45deg, blue, red); - -/* 우하단에서 좌상단으로, 파랑 시작 빨강 종료 그레이디언트 */ -linear-gradient(to left top, blue, red); - -/* 색상 정지점: 아래에서 위로, - 파랑에서 시작해 길이의 40%에서 초록으로, - 빨강 종료 그레이디언트 */ -linear-gradient(0deg, blue, green 40%, red); - -/* 색상 힌트: 왼쪽에서 오른쪽으로, - 빨강에서 시작해 길이의 10% 지점에서 중간 색상으로, - 나머지 90% 길이 동안 파랑으로 변하는 그레이디언트 */ -linear-gradient(.25turn, red, 10%, blue); - -/* 다중 위치 색상 정지점: 45도 기울어진, - 좌하단 절반 빨강, 우상단 파랑 절반에 - 두 색이 만나는 지점을 정확히 나누는 그레이디언트 */ -linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre> - -<h3 id="값">값</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>그레이디언트 축의 시작점. 지정할 경우, <code>to</code> 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있습니다. 하나는 수평 방향(<code style="font-size: 14px;">left</code> 또는 <code>right</code>)이고, 다른 하나는 수직 방향(<code>top</code> 또는 <code>bottom</code>)입니다. 방향 키워드의 순서는 상관하지 않으며, 기본값은 <code>to bottom</code>입니다.</dd> - <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> 값은 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>와 같습니다. 나머지 값은 각도로 변환됩니다.</dd> - <dt>{{cssxref("<angle>")}}</dt> - <dd>그레이디언트 축의 방향. <code>0deg</code>는 <code>to top</code>과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.</dd> - <dt><code><linear-color-stop></code></dt> - <dd>색상 정지점의 {{CSSxRef("<color>")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("<percentage>")}} 또는 {{CSSxRef("<length>")}})</dd> - <dt><code><color-hint></code></dt> - <dd><code>color-hint</code>는 두 인접한 색상 정지점 사이에서 그레이디언트가 진행하는 방식을 지정하는 보간 힌트입니다. 길이는 두 정지점 간의 길이에서 어느 지점에 그 중간 색에 도달해야 하는지 지정합니다. 생략할 경우 가운데에서 중간 색에 도달합니다.</dd> - <dd> - <div class="note"> - <p><strong>참고:</strong> <a href="#다중_위치_색상_정지점을_가진_그레이디언트">CSS 그레이디언트에서의 색상 정지점 렌더링</a>은 <a href="/ko/docs/Web/SVG/Tutorial/Gradients">SVG 그레이디언트</a>에서의 색상 정지점과 동일한 규칙을 따라갑니다.</p> - </div> - </dd> -</dl> - -<h2 id="설명">설명</h2> - -<p>다른 그레이디언트와 마찬가지로, 선형 그레이디언트는 본질 크기를 가지지 않습니다. 즉 기본 크기나 선호 크기, 선호 비율이 없으며, 실제 크기는 그레이디언트를 적용한 요소의 크기와 동일해집니다.</p> - -<p>반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 {{cssxref("repeating-linear-gradient")}} 함수를 사용하세요.</p> - -<p><code><gradient></code>는 <code><image></code>의 한 종류로서 <code><image></code>를 사용하는 곳에만 적용할 수 있습니다. 따라서 <code>linear-gradient()</code>는 {{cssxref("background-color")}}와 같은 {{cssxref("<color>")}} 자료형을 받는 속성에는 사용할 수 없습니다.</p> - -<h3 id="선형_그레이디언트의_구성">선형 그레이디언트의 구성</h3> - -<p>선형 그레이디언트는 하나의 축(그레이디언트 라인)과 두 개 이상의 색상 정지점으로 정의할 수 있습니다. 축 위의 점은 모두 고유한 색을 가집니다. <code>linear-gradient()</code> 함수는 부드러운 그레이디언트를 만들기 위해 축과 직교하는 무수한 선을 그리며, 각 수직선의 색은 축과 교차하는 점의 색과 일치합니다.</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; font-size: 13.63636302948px; height: 383px; line-height: 19.0909080505371px; width: 309px;">그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.</p> - -<p>시작점은 그레이디언트 축의 한 점으로, 첫 번째 색상이 시작하는 지점입니다. 종료점은 마지막 색상이 끝나는 지점입니다. 두 점은 직사각형에서 자신과 같은 사분면에 위치하는 꼭지점으로부터 시작하여 그레이디언트 축과 직교하는 지점으로 정의합니다. 종료점은 시작점의 대칭점으로 간단하게 알아둘 수도 있습니다. 이렇게 다소 복잡한 정의로 인해, 시작점과 가장 가까운 꼭지점이 시작점의 색을, 종료점과 가장 가까운 꼭지점이 종료점의 색을 갖는 특이한 효과를 확인할 수도 있습니다. 이 효과는 "매직 코너"라고 불리기도 합니다.</p> - -<h4 id="그레이디언트_만들기">그레이디언트 만들기</h4> - -<p>그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색 사이로 전환하는, 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 {{cssxref("<length>")}}나 {{cssxref("<percentage>")}}를 사용해 명시적으로 지정할 수 있습니다. 따로 위치를 정하지 않으면 이전 정지점과 다음 정지점의 중간 지점에 위치합니다. 다음 두 그레이디언트는 동일합니다.</p> - -<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> - -<p>기본적으로 그레이디언트에서 색상 전환은 하나의 색상 정지점에서 다른 색상 정지점으로 부드럽게 일어나고, 가운데 지점은 두 색상의 사이값을 가집니다. 그러나 두 색의 사이에 색상 힌트를 넣어서 직접 색의 중간 지점을 정할 수도 있습니다. 다음 예제의 그레이디언트는 시작점에서 10% 지점까지 완전한 빨강이고, 90% 지점까지는 빨강에서 파랑으로 서서히 전환하며, 마지막 10%는 완전한 파랑입니다. 그러나 빨강과 파랑 사이 전환의 중간 지점은 50%가 아닌 30% 지점이 됩니다.</p> - -<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre> - -<p>두 개 이상의 색상 정지점을 같은 위치에 배치하면 부드럽게 전환하는 대신 이전 색과 다음 색이 경계선을 그리며 바로 바뀝니다.</p> - -<p>색상 정지점의 순서는 오름차순이어야 합니다. 다음 정지점의 위치가 이전 정지점보다 앞이면, 이전 정지점의 위치를 재설정하고 색 전환도 경계선을 그리며 일어납니다. 다음 그레이디언트는 30% 지점에서 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환합니다.</p> - -<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%); -</pre> - -<p>색상 정지점이 여러 위치를 가질 수도 있습니다. 색상을 선언할 때 인접한 두 정지점의 위치를 모두 포함할 수 있습니다. 다음 세 그레이디언트는 모두 같습니다.</p> - -<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre> - -<p>기본적으로, 0% 지점에 색을 할당하지 않으면 처음으로 선언한 색이 0%에 배치됩니다. 비슷하게 100% 지점에 색이 없는 경우 마지막 색이 100% 지점까지 도달합니다.</p> - -<h2 id="예제">예제</h2> - -<h3 id="45도_기울어진_그레이디언트">45도 기울어진 그레이디언트</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(45deg, red, blue); -} -</pre> - -<p>{{EmbedLiveSample("45도_기울어진_그레이디언트", 120, 120)}}</p> - -<h3 id="축의_60_지점에서_시작하는_그레이디언트">축의 60% 지점에서 시작하는 그레이디언트</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(135deg, orange 60%, cyan); -}</pre> - -<p>{{EmbedLiveSample("축의_60_지점에서_시작하는_그레이디언트", 120, 120)}}</p> - -<h3 id="다중_위치_색상_정지점을_가진_그레이디언트">다중 위치 색상 정지점을 가진 그레이디언트</h3> - -<p>이 예제는 다중 위치 색상 정지점을 사용하면서, 인접한 색상 정지점의 위치를 같게 하여 줄무늬 효과를 냅니다.</p> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -}</pre> - -<p>{{EmbedLiveSample("다중_위치_색상_정지점을_가진_그레이디언트", 120, 120)}}</p> - -<h3 id="더_많은_예제">더 많은 예제</h3> - -<p><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a> 문서에서 더 많은 예제를 확인하세요.</p> - -<h2 id="Specifications" name="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('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Adds interpolation hints.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a></li> - <li>다른 그레이디언트 함수: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li> - <li>{{CSSxRef("<image>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 836db281db..0000000000 --- a/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: 이벤트 생성 및 트리거 -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - NeedsContent - - 가이드 - - 고급 - - 이벤트 - - 자바스크립트 -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 <strong>인공 이벤트(synthetic events)</strong>라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.</p> - -<h2 id="커스텀_이벤트_생성하기">커스텀 이벤트 생성하기</h2> - -<p>다음과 같이 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 생성자를 사용해 Events 를 생성할 수 있습니다.</p> - -<pre class="brush: js">var event = new Event('build'); - -// 이벤트 리슨. -elem.addEventListener('build', function (e) { /* ... */ }, false); - -// 이벤트 디스패치. -elem.dispatchEvent(event);</pre> - -<p>위 코드 예제는 <a href="/ko/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 메소드를 사용합니다.</p> - -<p>이 생성자는 대부분의 최신 브라우저(Internet Exploere 는 예외)에서 지원됩니다. 더 장황한 접근법(Internet Explorer 에서도 동작하는)은, 아래 <a href="#The_old-fashioned_way" title="#The_old-fashioned_way">옛날 방식</a> 부분을 참고하세요.</p> - -<h3 id="커스텀_데이터_추가_–_CustomEvent()">커스텀 데이터 추가 – CustomEvent()</h3> - -<p>이벤트 객체에 더 많은 데이터를 추가하려면, <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a> 인터페이스가 존재하고 <u><strong>detail</strong></u> 프로퍼티를 통해 커스텀 데이터를 전달할 수 있습니다<br> - <span style="line-height: 1.5;">예를 들면, 다음과 같이 이벤트가 생성될 수 있습니다.</span></p> - -<pre class="brush: js">var event = new CustomEvent('build', { detail: elem.dataset.time });</pre> - -<p>그럼 이벤트 리스너의 부가적인 데이터에 접근할 수 있게 됩니다.</p> - -<pre class="brush: js">function eventHandler(e) { - console.log('The time is: ' + e.detail); -} -</pre> - -<h3 id="옛날_방식">옛날 방식</h3> - -<p>생성 이벤트로의 오래된 접근법은 Java 로부터 영감을 받은 API들을 사용합니다. 다음은 그 예시를 보여줍니다.</p> - -<pre class="brush: js">// 이벤트 생성. -var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event'); - -// 이벤트 이름을 'build' 라 정의. -event.initEvent('build', true, true); - -// 이벤트 리슨. -elem.addEventListener('build', function (e) { - // e.target 은 elem 과 일치 -}, false); - -// target 은 어떤 엘리먼트나 다른 이벤트 타켓이 될 수 있음. -elem.dispatchEvent(event); - -</pre> - -<h3 id="이벤트_버블링">이벤트 버블링</h3> - -<p>자식 엘리먼트로부터 이벤트를 발생시키고 그 조상이 이를 캐치하도록 하는것은 종종 바람직합니다. 선택적으로 데이터도 함께합니다.</p> - -<pre class="brush: html"><form> - <textarea></textarea> -</form> -</pre> - -<pre class="brush: js">const form = document.querySelector('form'); -const textarea = document.querySelector('textarea'); - -// 새로운 이벤트를 생성하고, 버블링을 허용하며, "details" 프로퍼티로 전달할 데이터를 제공합니다 -const eventAwesome = new CustomEvent('awesome', { - bubbles: true, - detail: { text: () => textarea.value } -}); - -// form 엘리먼트는 커스텀 "awesome" 이벤트를 리슨한 후 전달된 text() 메소드의 결과를 콘솔에 출력합니다 -form.addEventListener('awesome', e => console.log(e.detail.text())); - -// 사용자가 입력한대로, form 내의 textarea 는 이벤트를 디스패치/트리거하여 시작점으로 사용합니다 -textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome)); -</pre> - -<h3 id="이벤트를_동적으로_생성하고_디스패칭하기">이벤트를 동적으로 생성하고 디스패칭하기</h3> - -<p>엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.</p> - -<pre class="brush: html"><form> - <textarea></textarea> -</form> -</pre> - -<pre class="brush: js">const form = document.querySelector('form'); -const textarea = document.querySelector('textarea'); - -form.addEventListener('awesome', e => console.log(e.detail.text())); - -textarea.addEventListener('input', function() { - // 이벤트 즉시 생성 및 디스패치/트리거 - // 노트: 선택적으로, 우리는 "함수 표현"("화살표 함수 표현" 대신)을 사용하므로 "this"는 엘리먼트를 나타냅니다 - this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) -}); -</pre> - -<h2 id="내장_이벤트_트리거">내장 이벤트 트리거</h2> - -<p>이 예제는 DOM 메소드를 사용해 체크박스에 클릭을 시뮬레이팅하는 것을 보여줍니다(클릭 이벤트를 프로그래밍적으로 발생시키는 것입니다). <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">동작하는 예제를 확인하세요.</a></p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - view: window, - bubbles: true, - cancelable: true - }); - var cb = document.getElementById('checkbox'); - var cancelled = !cb.dispatchEvent(event); - if (cancelled) { - // 핸들러가 preventDefault 를 호출했음. - alert("cancelled"); - } else { - // 어떤 핸들러도 preventDefault 를 호출하지 않음. - alert("not cancelled"); - } -}</pre> - -<h2 id="함께_보기">함께 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/guide/events/index.html b/files/ko/orphaned/web/guide/events/index.html deleted file mode 100644 index 596c7f932d..0000000000 --- a/files/ko/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsUpdate - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> - -<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p> - -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p> - -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p> - -<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p> - -<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> - -<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p> - -<p>The <strong>process</strong> loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p> - -<p>The <strong>user interaction</strong> with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:</p> - -<ul> - <li>the original 'click' event,</li> - <li>mouse events,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> - <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li> -</ul> - -<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> - -<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> - -<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> - -<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> - -<div class="note"> -<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p> -</div> - -<h2 id="Docs">Docs</h2> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index 3690555d42..0000000000 --- a/files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Overview of Events and Handlers -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers ---- -<div class="summary"> -<p> 이 글은 이벤트 및 이벤트 핸들링(event handling)에 대한 개요로서, 웹 페이지가 열려있는 동안 일어나는 사건(incident)에 대해 반응할 수 있도록 하는 코드 설계 패턴에 대해 설명하고, 현 세대의 웹 브라우저에서 핸들링할 수 있는 사건의 종류에 대해 요약한다.</p> -</div> - -<p> 이벤트와 이벤트 핸들링은 웹 페이지가 사용자에 의해 열린 상태를 유지하는 동안 일어나는 사건에 대한 반응을 구현하기 위한 자바스크립트의 핵심적인 기술이다. 이러한 사건에는 페이지가 전시(display)되기 위한 준비과정 중 일어나는 사건, 웹 페이지상의 컨텐츠와 사용자의 상호작용에 의한 사건, 브라우저가 실행되는 기반 장치와 관련된 사건, 매체 스트림(media stream) 재생이나 애니메이션 시간 간격 등 기타 요인에 의한 사건 등이 있다.</p> - -<p> 이벤트와 이벤트 핸들링은 자바스크립트가 처음 도입된 시점부터 중심적인 역할을 했으며, 이와 함께 브라우저의 렌더링 아키텍처 역시 단일 처리경로(single pass) 페이지 렌더링으로부터 리플로우(reflow) 기반, 이벤트 구동식(driven) 페이지 렌더링 개념으로 바뀌었다.</p> - -<p> 최초에는 브라우저는 페이지의 모든 부분에 대한 문법분석(parse), 처리(process), 그리기(draw) 및 사용자에게 표현(present)까지의 모든 과정이 끝날 때까지 대기하고, 페이지 작업이 끝나면 그 상태로 바뀌지 않고 새 페이지 요청이 있어서 가져오기(fetch)작업이 일어나기 전까지는 그대로의 모습을 유지했다. </p> - -<p> 리플로우 기반 이벤트 구동식 페이지 렌더링 개념으로 바뀐 뒤에는 브라우저는 처리, 그리기, 컨텐츠 표현(present), 반복순환작업을 다시 개시하도록 하는 이벤트 트리거에 대한 대기 등의 작업을 반복순환(loop)하여 수행한다. 이 이벤트 트리거라는 것은 이벤트를 발생하게 하는 사건을 이르는 것으로서, 네트워크상의 자원 로드 완료( 예 : 이미지가 다운로드되어 화면상에 그릴 수 있게 됨), 브라우저에 의한 자원의 문법분석 완료( 예 : HTML페이지 처리가 끝남) 페이지의 컨텐츠와 사용자와의 상호작용(예 : 버튼을 클릭한다) 등이 이러한 사건이 될 수 있다.</p> - -<p> 더글라스 크록포드는 <em>An inconvenient API : The theory of the DOM(불편한 API : DOM의 이론)</em>이라는 제목의 강연에서 이러한 변화를 여러 단원에 걸쳐 설명하였는데, 본래의 작업 흐름에서 이벤트 구동식 브라우저의 작업 흐름으로 바뀌는 것을 다음과 같이 보여주었다.</p> - -<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> - -<p> 두 번째 그림에 보이는 처리방식은 마지막 단계의 작업흐름을 변화시킴으로써 첫 번째 그림의 단일 경로 처리흐름에서 반복순환 흐름으로 바뀐 것을 보여준다. 두 번째 그림은 Paint작업이 끝나면 새로운 이벤트 발생에 대한 처리(이벤트 핸들링)를 하기 위해 이벤트를 기다리게 된다. 이 혁신적인 개념을 이용하면 자원을 다 획득하지 않았더라도 페이지를 부분적으로 렌더링하는 것이 가능하며, 최초에는 자바스크립트에 의해 발전된 이벤트 구동에 의한 동작 효과적으로 구현할 수 있다. (이 강의는 <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">여기</a>를 포함한 다양한 경로로 볼 수 있다) 현재 모든 자바스크립트 코드 실행 환경에서는 이벤트와 이벤트 핸들링을 사용한다.</p> - -<h2 id="이벤트_설계_패턴">이벤트 설계 패턴</h2> - -<p>이벤트 시스템은 근본적으로는 단순한 프로그래밍 설계 패턴이다. 이 패턴는 기본적으로 이벤트의 종류와 다음 사항에 대해 합의된 약속을 기반으로 한다.</p> - -<ul> - <li>각 이벤트를 가리키는 이벤트명 문자열</li> - <li>각 이벤트의 핵심 프로퍼티를 나타내기 위한 자료구조의 형식</li> - <li>각 이벤트를 발동할 자바스크립트 객체</li> -</ul> - -<p>패턴을 구현하기 위해서는 다음이 필요하다.</p> - -<ul> - <li>위에서 약속된 자료구조를 인수로 받는 자바스크립트 함수를 정의한다.</li> - <li>이벤트를 발동할 객체에 약속된 해당 이벤트의 이벤트명을 사용하여 위의 함수를 등록한다.</li> -</ul> - -<p>이 함수는 리스너(listener) 또는 핸들러(handler)라는 혼용된 명칭으로 불린다. 이 패턴은 <a href="/ko/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">커스텀 이벤트에 관한 글</a>에서 설명한 대로의 완전한 커스텀 이벤트를 사용하여 쉽게 구현할 수 있다. 이 패턴은 사용자 입력, 브라우저 활동 등에 의해 발동되는 다양한 이벤트를 정의하는 최신 웹 브라우저에서도 많이 사용한다.</p> - -<p> 최신 웹 브라우저는 이 이벤트 패턴을 표준화된 방식으로 구현한다. 브라우저는 어떤 이벤트의 프로퍼티를 나타내는 자료 구조로서 <code>EventPrototype</code> 객체를 원천으로 하는 어떤 객체를 사용한다. 또한 이러한 자료구조를 핸들링할 함수에 대한 등록 메소드로서 <code>addEventListener </code>메소드를 사용하는데 이것은 인수로서 이벤트명과 핸들러 함수를 받는다<code>.</code> 마지막으로 브라우저는 이벤트 발동자(emitter)로 수많은 객체를 정의하며 또한 이 객체들에 의해 생성되는 여러 이벤트형(event type)을 정의한다.</p> - -<h2 id="Button_Event_Handler" name="Button_Event_Handler">버튼 이벤트 핸들러 데모</h2> - -<p>하나의 예시로서 브라우저 <code>button 요소(element)는 'click'이라는 이름의 이벤트를 마우스 클릭 또는 터치스크린의 경우 손가락 터치에 반응하여 발동시킨다.</code> 버튼은 HTML 페이지에서 다음과 같이 정의할 수 있다.</p> - -<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> - -<p>그리고 자바스크립트 코드에서 'click' 이벤트에 대한 리스너로서의 함수, 즉 핸들러로 사용할 함수를 정의한다.</p> - -<pre class="brush: js">var example_click_handler = function (ev){ - var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; - alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); -};</pre> - -<p>그 다음 해당 <code>Button</code> 객체와 함께 위의 함수를 등록하는데, 첫 번째 방법은 HTML 페이지의 DOM(문서 객체 모델) 표현법을 이용하여 다음과 같이 스크립트상에서 나타내는 방법이다. </p> - -<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); -buttonDOMElement.addEventListener('click', example_click_handler);</pre> - -<p>또 다른 방법은 HTML 페이지 상에서 'onclick' 애트리뷰트의 값으로 핸들러로 쓸 함수를 대입시키는 것인데, 보통 이 방식은 매우 단순한 웹 페이지에서나 쓰인다.</p> - -<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> - -<p>This code relies on the agreement that there is a kind of event called <code>'click'</code> which will call any listener (or 'handler') function with an <code>Event</code> object argument (actually, in this case a derivative <code>MouseEvent</code> object) and which will be fired by HTML <code>button</code> elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the <code>buttonDOMElement</code> Javascript object would call the <code>example_click_handler</code> function with an <code>Event</code> object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the <code>ev</code> object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.</p> - -<p>As a second example, much modern Javascript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:</p> - -<pre class="brush: js">var funcInit = function(){ - // user code goes here and can safetly address all the HTML elements from the page - // since the document has successfully been 'loaded' -} -document.addEventListener('DOMContentLoaded', funcInit); -</pre> - -<p>so that this code will only be executed after the <code>document</code> object emits the <code>'DOMContentLoaded'</code> event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.</p> - -<p>The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.</p> - -<h2 id="Notable_events">Notable events</h2> - -<p>Web browsers define a large number of events so it is not practical to list them all. The <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> attempts to maintain a list of the standard Events used in modern web browsers.</p> - -<p>In general, we can distinguish events of different kinds based on the object emitting the event including:</p> - -<ul> - <li>the <code>window</code> object, such as due to resizing the browser,</li> - <li>the <code>window.screen</code> object, such as due to changes in device orientation,</li> - <li>the <code>document</code> object, including the loading, modification, user interaction, and unloading of the page,</li> - <li>the objects in the DOM (document object model) tree including user interactions or modifications,</li> - <li>the <code>XMLHttpRequest</code> objects used for network requests, and</li> - <li>the media objects such as <code>audio</code> and <code>video</code>, when the media stream players change state.</li> -</ul> - -<p>although this list is currently incomplete.</p> - -<p>Some notable events are:</p> - -<div class="note"> -<p><strong>Note:</strong> This list of will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> or in <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> -</div> - -<ul> - <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a> when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed,</li> - <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a> when the height or the width of the browser window is changed by a user,</li> - <li>the DOM object <a href="/en-US/docs/Web/API/Document"><code>document</code></a> representing the HTML document emits an event called<code> <a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code> when the document has finished loading,</li> - <li>the DOM node objects such as <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> or <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a> emit an event called <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a> when the user presses the mouse button while the mouse pointer is on top of the DOM node in the HTML page.</li> -</ul> - -<p> </p> - -<h2 id="The_Event_object_hierarchy">The Event object hierarchy</h2> - -<p>The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the <code>EventPrototype</code> object.</p> - -<p>A partial diagram of the class hierarchy of event objects is:</p> - -<div class="note"> -<p><strong>Note:</strong> This diagram is incomplete.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> - -<p>The Web API Documentation contains <a href="/en-US/docs/Web/API/Event">a page defining the Event object</a> which also includes the known DOM event subclasses of the <code>Event</code> object.</p> - -<h2 id="Documents">Documents</h2> - -<p>Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:</p> - -<ul> - <li>this <a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> which is part of the <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li> - <li>the <a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> - <li>the Web API documentation for the <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object.</li> -</ul> - -<p> </p> - -<p> </p> - -<p> </p> diff --git a/files/ko/orphaned/web/guide/html/html5/index.html b/files/ko/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index f7a60615ef..0000000000 --- a/files/ko/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -<p><strong>HTML5</strong>는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 명세</a>는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중 많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 및 <a href="/ko/List_of_Mozilla-Based_Applications" title="ko/List of Mozilla-Based Applications">다른 많은 제품</a>으로 사용되어 있는 Mozilla의 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.</p> - -<p>(<a href="/ko/HTML/HTML5/HTML5_Thematic_Classification" title="ko/HTML/HTML5/HTML5 Thematic Classification">HTML5의 문서에 대한 다른 분류</a>도 참고하세요.)</p> - -<h2 id="HTML5_소개">HTML5 소개</h2> - -<dl> - <dt><a href="/ko/HTML/HTML5/Introduction_to_HTML5" title="ko/HTML/Introduction to HTML5"><strong>HTML5의 소개</strong></a></dt> - <dd>이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.</dd> -</dl> - -<h2 id="HTML5의_요소">HTML5의 요소</h2> - -<dl> - <dt><a href="/ko/HTML/HTML5/HTML5_Tags_List" title="ko/HTML/HTML5/HTML5 Tags List"><strong>HTML5 요소·태그의 목록</strong></a></dt> - <dd>현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.</dd> - <dt><a href="/Ja/Using_HTML5_audio_and_video" title="ko/Using_audio_and_video_in_Firefox">오디오/비디오 사용하기</a></dt> - <dd>Firefox 3.5이상에서 HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.</dd> - <dt><a href="/ko/HTML/Forms_in_HTML" title="ko/HTML/HTML5/Forms in HTML5">HTML5 웹 폼양식</a></dt> - <dd>HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.</dd> - <dt><a href="/ko/Sections_and_outlines_of_an_HTML5_document" title="ko/Sections and Outlines of an HTML5 document">HTML5 섹션과 아웃라인</a></dt> - <dd>HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.</dd> - <dt>{{ HTMLElement("mark") }} 요소</dt> - <dd>mark 요소는 텍스트중에서의 특별한<em> 관련성</em>을 강조시키기 위해서 이용합니다.</dd> - <dt>{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소</dt> - <dd>주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.</dd> -</dl> - -<h3 id="Canvas_기술_지원">Canvas 기술 지원</h3> - -<dl> - <dt><a href="/ko/Canvas_tutorial" title="https://developer.mozilla.org/ko/Canvas_tutorial">Canvas 튜토리얼</a></dt> - <dd>새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.</dd> - <dt><a href="/ko/Drawing_text_using_a_canvas" title="ko/Drawing_text_using_a_canvas"><code>canvas</code> 요소의 HTML5 text API</a></dt> - <dd>{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.</dd> -</dl> - -<h2 id="웹_애플리케이션_기능">웹 애플리케이션 기능</h2> - -<dl> - <dt><a href="/ko/HTML/Using_the_application_cache" title="ko/Offline_resources_in_Firefox">Firefox 오프 라인 자원</a></dt> - <dd>Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.</dd> - <dt><a href="/ko/Online_and_offline_events" title="ko/Online_and_offline_events">Online 이벤트와 Offline 이벤트</a></dt> - <dd>Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.</dd> - <dt><a href="/ko/DOM/Storage" title="ko/DOM/Storage">WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)</a></dt> - <dd>클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.</dd> - <dt><a href="/ko/HTML/Content_Editable" title="ko/HTML/Content Editable"><code>contentEditable</code> 속성： 웹 사이트 및 위키 편집 용이성</a></dt> - <dd>HTML5 에서는 <code>contentEditable</code> 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.</dd> - <dt><a href="/ko/Using_files_from_web_applications" title="ko/Using_files_from_web_applications">로컬 파일 사용하기</a></dt> - <dd>새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 <a href="/ko/HTML/Element/Input#attr-type" title="ko/HTML/Element/input#attr-type"><strong>type</strong></a> 속성의 값에 <code>file</code>를 지정한 <code>{{ HTMLElement("input") }}</code> 요소에 새롭게 추가된 <a href="/ko/HTML/Element/Input#attr-multiple" title="ko/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.</dd> -</dl> - -<h2 id="DOM_주요_기능">DOM 주요 기능</h2> - -<dl> - <dt><a href="/ko/DOM/document.getElementsByClassName" title="ko/DOM/document.getElementsByClassName">getElementsByClassName</a></dt> - <dd>Document 및 Element 노드에 있어서의 <code>getElementsByClassName</code> 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.</dd> - <dt><a href="/Ja/DragDrop/Drag_and_Drop" title="ko/DragDrop/Drag_and_Drop">드래그 앤 드롭</a></dt> - <dd>HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.</dd> - <dt><a href="/ko/Focus_management_in_HTML" title="ko/Focus_management_in_HTML">HTML 내 포커스 관리</a></dt> - <dd>HTML5가 새로운 <code>activeElement</code> 속성과 <code>hasFocus</code> 속성이 지원되어 있습니다.</dd> - <dt><a href="/ko/Web-based_protocol_handlers" title="ko/Web-based_protocol_handlers">웹 기반 프로토콜 핸들러</a></dt> - <dd><code>navigator.registerProtocolHandler()</code>메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.</dd> -</dl> - -<h2 id="HTML_파서">HTML 파서</h2> - -<p>Gecko의 <a href="/ko/HTML/HTML5/HTML5_Parser" title="ko/HTML/HTML5/HTML5 parser">HTML5 표준 파서</a>(HTML 문서를 DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).</p> - -<h2 id="추가_변경사항">추가 변경사항</h2> - -<ul> - <li>HTML 문서에 있어서의 <code>localName</code> 및 <code>namespaceURI</code>는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, <code>localName</code>는 소문자를 돌려주어, HTML 요소의 <code>namespaceURI</code>는 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code>를 돌려줍니다.</li> - <li>페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 <code>hashchange</code> 이벤트가 페이지에 보내집니다. 자세한 것은 <code><a href="/ko/DOM/window.onhashchange" title="ko/DOM/window.onhashchange">window.onhashchange</a></code>를 참조해 주십시오.</li> - <li><code>class</code> 속성을 보다 간단하게 취급할 수 있도록 HTML5의 <code><a href="/ko/DOM/element.classList" title="ko/DOM/element.classList">element.classList</a></code>이 기술 지원되었습니다.</li> - <li>문서에 즉시 생성되는 이벤트에 응하는 <code><a href="/ko/DOM/document.onreadystatechange" title="ko/DOM/document.onreadystatechange">document.onreadystatechange</a></code>와 <code><a href="/ko/DOM/document.readyState" title="ko/DOM/document.readyState">document.readyState</a></code>가 기술 지원되었습니다.</li> - <li>표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.</li> -</ul> - -<h2 id="HTML5의_일부로서_포함된_기술">HTML5의 일부로서 포함된 기술</h2> - -<p>아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.</p> - -<ul> - <li><a href="/ko/WebGL" title="ko/WebGL">WebGL</a></li> - <li><a href="/ko/DOM/FileReader" title="ko/DOM/FileReader">FileReader</a></li> - <li><a href="/ko/DOM/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></li> - <li><a href="/ko/DOM/Locating_DOM_elements_using_selectors" title="ko/DOM/Locating DOM elements using selectors">querySelector(All)</a></li> - <li><a href="/Ja/Using_geolocation" title="ko/Using geolocation">Geolocation</a></li> - <li><a href="/ko/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> - <li><a href="/ko/CSS/CSS3" title="CSS3">CSS3</a></li> - <li><a href="/ko/XBL2_specification_(external)" title="ko/XBL2 specification (external)">XBL2</a></li> - <li><a href="/ko/DOM/Using_web_workers" title="ko/Using web workers">Web Workers</a></li> - <li><a href="/ko/WebSockets" title="https://developer.mozilla.org/ko/WebSockets">Web Sockets</a></li> - <li>JavaScript의 고속화</li> -</ul> - -<h2 id="관련_문서">관련 문서</h2> - -<p>웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：</p> - -<ul> - <li><a href="/ko/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li> - <li><a href="/ko/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li> - <li><a href="/ko/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li> - <li><a href="/ko/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li> - <li><a href="/ko/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li> - <li><a href="/ko/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li> - <li><a href="/ko/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li> - <li><a href="/ko/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li> - <li><a href="/ko/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li> - <li><a href="/ko/Firefox_3.6_for_developers" title="ko/Firefox 3.6 for developers">Firefox 3.6 </a></li> - <li><a href="/Ja/Firefox_3.5_for_developers" title="ko/Firefox 3.5 for developers">Firefox 3.5 </a></li> - <li><a href="/ko/Firefox_3_for_developers" title="ko/Firefox 3 for developers">Firefox 3 </a></li> - <li><a href="/ko/Firefox_2_for_developers" title="ko/Firefox 2 for developers">Firefox 2 </a></li> - <li><a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox 1.5 for developers">Firefox 1.5</a></li> -</ul> diff --git a/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 5066c368b8..0000000000 --- a/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: HTML5 소개 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML5 - - 웹개발 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.</p> - -<p>HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. <a href="/ko/HTML/HTML5" title="ko/HTML/HTML5">HTML5의 메인 페이지</a>에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 웹 사이트를 참조해 주십시오.</p> - -<h2 id="HTML5_DOCTYPE">HTML5 DOCTYPE</h2> - -<p>HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：</p> - -<pre><!DOCTYPE html> -</pre> - -<p>이 DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.</p> - -<p>이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.</p> - -<h2 id="<meta_charset>으로_문자셋_정의하기"><code><meta charset>으로 문자셋 정의하기</code></h2> - -<p>보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.</p> - -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> - -<p><code>이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.</code></p> - -<p><code>HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.</code></p> - -<h2 id="새로운_HTML5_해석기의_사용">새로운 HTML5 해석기의 사용</h2> - -<p>HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.</p> - -<p>이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.</p> - -<p>걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!</p> diff --git a/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 37bebc6df3..0000000000 --- a/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: HTML 구획과 개요 사용하기 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<div>{{HTMLSidebar}}</div> - -<div class="warning"> -<p><strong>중요</strong>: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 <a href="https://html.spec.whatwg.org/multipage/sections.html#outline">개요</a> 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 <strong>안됩니다</strong>. 문서 작성자는 대신 제목 <a href="https://html.spec.whatwg.org/multipage/sections.html#rank">순위</a>(<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1-h6</a>)를 사용해 문서 구조를 나타내는 것이 좋습니다.</p> -</div> - -<p>HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.</p> - -<p>예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.</p> - -<p>새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.</p> - -<h2 id="HTML4에서의_문서_구조">HTML4에서의 문서 구조</h2> - -<p><span style="line-height: inherit;">문서의 구조, 즉 <code><body></code>와 <code></body></code> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다.</span> HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.</p> - -<p>그래서 다음과 같은 마크업은:</p> - -<pre class="brush: xml"><div class="section" id="forest-elephants"> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. - ...섹션 내용 진행 중... - <div class="subsection" id="forest-habitat"> - <h2>서식지</h2> - <p><span style="color: #323333; font-family: courier new;">둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> - ...하위 섹션 내용 진행 중... - </div> -</div></pre> - -<p><span style="line-height: inherit;">다음과 같은 문서 아웃라인을 가지게 됩니다:</span></p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 -</pre> - -<p>새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,</p> - -<pre class="brush: xml"><h1>둥근귀코끼리</h1> -<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. -...섹션 내용 진행 중... -<h2>서식지</h2> -<p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> -...하위 섹션 내용 진행 중... -<h2>먹이</h2> -<h1>몽골 게르빌루스쥐</h1></pre> - -<p>앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 - 1.2 먹이 -2. 몽골 게르빌루스쥐 -</pre> - -<h2 id="HTML5에서_해결한_문제들">HTML5에서 해결한 문제들</h2> - -<p>HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:</p> - -<ol> - <li>의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 <strong>class</strong> 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 <font color="#000000">것은 불가능합니다</font>("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">보조 장비에 사용되는 기술</a>에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.</li> - <li>여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.</li> - <li>HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.</li> - <li>반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.</li> -</ol> - -<p>좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.</p> - -<h2 id="HTML5_문서_아웃라인_알고리즘">HTML5 문서 아웃라인 알고리즘</h2> - -<p>HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.</p> - -<h3 id="HTML5에서의_섹션_정의">HTML5에서의 섹션 정의</h3> - -<p>우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.</p> - -<div class="note">각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽#HTML5.EC.97.90.EC.84.9C_.EC.A0.9C.EB.AA.A9_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EB.B2.95" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">HTML5에서 제목 지정하는 법</a>을 보십시오.</div> - -<p>보기:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h1>서식지</h1> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section> - <aside> - <p>광고 구역</p> - </aside> -</section> -<footer> - <p>(c) 2013 회사 이름</p> -</footer></pre> - -<p>위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:</p> - -<pre><span style="color: red;"><section> - <h1></span>둥근귀<span style="color: red;">코끼리</h1> - <section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h1>서식지</h1> - <p></span>둥근귀<span style="color: red;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section> - <aside> - <p>광고 구역</p> - </aside> -</section></span> - -<span style="color: green;"><footer> - <p>(c) 2013 회사 이름?</p> -</footer></span></pre> - -<p>첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:</p> - -<pre><section> - <h1>둥근귀코끼리</h1> - - <span style="color: red;"><section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p></span> -<span style="color: red;"> </section></span> - - <span style="color: green;"><section> - <h1>서식지</h1> - <p></span>둥근귀<span style="color: green;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section></span> - - <span style="color: blue;"><aside> - <p>광고 구역</p> - </aside></span> -</section> - -<footer> - <p>(c) 2013 회사 이름</p> -</footer></pre> - -<p>그래서 다음과 같은 구조를 가지게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 소개 - 1.2 서식지 - 1.3 광고 구역 (aside) -</pre> - -<h3 id="HTML5에서_제목_지정하는_법">HTML5에서 제목 지정하는 법</h3> - -<p>비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.</p> - -<p><span style="line-height: inherit;">제목 요소엔 요소 이름에 붙은 숫자를 가지고 <em>계급</em>을 매기는데,</span> {{HTMLElement("h1")}}이 <em>최상위</em> 계급이며 {{HTMLElement("h6")}}는 <em>최하위</em> 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...계속 된 섹션 내용... - <section> - <h2>서식지</h2> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. - ...계속 된 하위 섹션 내용... - </section> -</section> -<section> - <h3>몽골 게르빌루스쥐</h3> - <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다. - ...계속 된 섹션 내용... -</section></pre> - -<p>이는 다음과 같은 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 -2. 몽골 게르빌루스쥐</pre> - -<p>여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)</p> - -<h3 id="은연중_자동으로_정의되는_섹션">은연중 자동으로 정의되는 섹션</h3> - -<p>HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 <span style="line-height: inherit;">절대적으로 </span><span style="line-height: inherit;">필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 </span><em>은연중 자동으로 정의되는 섹션</em><span style="line-height: inherit;">이라 하겠습니다</span><span style="line-height: inherit;">.</span></p> - -<p>HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...섹션 내용 진행 중... - <h3 class="implicit subsection">서식지</h3> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. - ...하위 섹션 내용 진행 중... -</section></pre> - -<p>이는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 <em>(</em>h3 요소에 의해 은연중 자동으로 정의됨<em>)</em> -</pre> - -<p>만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...섹션 내용 진행 중... - <h1 class="implicit section">몽골 게르빌루스쥐</h1> - <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... -</section></pre> - -<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 -2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐) -</pre> - -<p>만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> - -<pre class="brush:xml"><body> - <h1>포유 동물</h1> - <h2>고래</h2> - <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... - <section> - <h3>둥근귀코끼리</h3> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... - <h3>몽골 게르빌루스쥐</h3> - <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다. - ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... - <h2>파충류</h2> - <p>파충류는 냉혈 동물입니다. - ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... - </section> -</body></pre> - -<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre dir="rtl">1. 포유 동물 - 1.1 고래 <em>(</em>h2 요소에 의해 자동으로 정의됨<em>)</em> - 1.2 둥근귀코끼리 <em>(</em>섹션 요소에 의해 명시적으로 정의됨<em>)</em> - 1.3 몽골 게르빌루스쥐 <em>(</em>h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em> -2. 파충류 <em>(</em>h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em></pre> - -<p>단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 <span style="line-height: inherit;">브라우저가 </span><span style="line-height: inherit;">원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.</span></p> - -<p>제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.</p> - -<h3 id="섹션_구분의_근원점"><a name="sectioning_root">섹션 구분의 근원점</a></h3> - -<p>섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.</p> - -<p>보기:</p> - -<pre class="brush:xml"><section> - <h1>숲 코끼리</h1> - <section> - <h2>소개</h2> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h2>서식지</h2> - <p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. -</span> 과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p> - <blockquote> - <h1>보르네오 섬</h1> - <p>보르네오 섬에 서식하는 둥근귀코끼리...</p> - </blockquote> - </section> -</section> -</pre> - -<p>위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:</p> - -<pre>1. 숲 코끼리 - 1.1 소개 - 1.2 서식지</pre> - -<p>이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.</p> - -<h3 id="문서의_아웃라인_밖에_존재하는_섹션">문서의 아웃라인 밖에 존재하는 섹션</h3> - -<p><span style="line-height: inherit;">HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:</span></p> - -<ol> - <li>HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.</li> - <li>HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.</li> - <li>HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.</li> - <li>HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.</li> -</ol> - -<h2 id="섹션을_구분짓는_요소의_주소와_발행_시간">섹션을 구분짓는 요소의 주소와 발행 시간</h2> - -<p>문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.</p> - -<p>가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.</p> - -<p>비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.</p> - -<h2 id="HTML5_미지원_브라우저에서_HTML5_요소를_사용하는_법">HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법</h2> - -<p>섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 <code>display:inline</code> 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.</p> - -<div>그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:</div> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:</p> - -<pre class="brush:xml"><noscript> - <strong>주의 !</strong> - 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. - 그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. -</noscript></pre> - -<p>그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>주의 !</strong> - 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. - 그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. - <code></noscript> -</code><![endif]--> -</pre> - -<h2 id="맺음말">맺음말</h2> - -<p>HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.</p> diff --git a/files/ko/orphaned/web/html/element/command/index.html b/files/ko/orphaned/web/html/element/command/index.html deleted file mode 100644 index 458108784f..0000000000 --- a/files/ko/orphaned/web/html/element/command/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: <command> -slug: orphaned/Web/HTML/Element/command -tags: - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Element/command ---- -<div>{{obsolete_header()}}</div> - -<p><span class="seoSummary">The <strong>HTML Command element</strong> (<strong><code><command></code></strong>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar.</span> However, they can be used anywhere on the page.</p> - -<div class="note"> -<p>The <code><command></code> element is included in the W3C specification, but not in the WHATWG specification, and browser support is nonexistent. You should use the {{HTMLElement("menuitem")}} element instead, although that element is non-standard and only supported in Edge and Firefox.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, metadata content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>The <span>start tag</span> is mandatory, but, as it is a void element, the <span>use of an end tag</span> is forbidden.</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{HTMLElement("span")}} as child.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLCommandElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Indicates whether the command is selected. Must be omitted unless the <code>type</code> attribute is <code>checkbox </code>or <code>radio</code>.</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Iindicates that the command is not available.</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Gives a picture which represents the command.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>The name of the command as shown to the user.</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>This attribute gives the name of the group of commands, with a <code>type</code> of <code>radio</code>, that will be toggled when the command itself is toggled. This attribute must be omitted unless the <code>type</code> attribute is <code>radio</code>.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>This attribute indicates the kind of command. This can be one of three values. - <ul> - <li> - <p><code>command</code> or empty which is the default state and indicates that this is a normal command.</p> - </li> - <li> - <p><code>checkbox</code> indicates that the command can be toggled using a checkbox.</p> - </li> - <li> - <p><code>radio</code> indicates that the command can be toggled using a radio button.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: html"><command type="command" label="Save" - icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Specifications" name="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', '#commands')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.command")}}</p> - -<p>{{ HTMLRef }}</p> diff --git a/files/ko/orphaned/web/html/element/element/index.html b/files/ko/orphaned/web/html/element/element/index.html deleted file mode 100644 index 9f5f8e5190..0000000000 --- a/files/ko/orphaned/web/html/element/element/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: <element> -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Element/element ---- -<div>{{HTMLRef}}{{obsolete_header}}</div> - -<p><span class="seoSummary">The obsolete <strong>HTML <code><element></code> element</strong> was part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> specification; it was intended to be used to define new custom DOM elements.</span> It was removed in favor of a JavaScript-driven approach for creating new custom elements.</p> - -<div class="warning"> -<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>???</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<p>The <code><element></code> element was formerly in a draft specification of <a href="http://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a> but it has been removed.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.element")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}</li> -</ul> diff --git a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html b/files/ko/orphaned/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 488b51cf46..0000000000 --- a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: dropzone -slug: orphaned/Web/HTML/Global_attributes/dropzone -tags: - - Deprecated - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone -original_slug: Web/HTML/Global_attributes/dropzone ---- -<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> - -<p><strong><code>dropzone</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:</p> - -<ul> - <li><code>copy</code>, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.</li> - <li><code>move</code>, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.</li> - <li><code>link</code>, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.</li> -</ul> - -<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', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> -</ul> diff --git a/files/ko/orphaned/web/html/preloading_content/index.html b/files/ko/orphaned/web/html/preloading_content/index.html deleted file mode 100644 index 52f29f67f4..0000000000 --- a/files/ko/orphaned/web/html/preloading_content/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Preloading content with rel="preload" -slug: orphaned/Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content -original_slug: Web/HTML/Preloading_content ---- -<p class="summary"><span class="seoSummary"> {{htmlelement("link")}}엘리먼트의 {{htmlattrxref("rel", "link")}} 속성에 <code>preload</code>라는 값이 부여되면 페이지 라이프사이클 초기에 필요한 자원에 대해서 HTML {{htmlelement("head")}} 에서 fetch 요청을 선언할 수 있다. 이는 해당 자원의 가용시점을 앞당기고 렌더링의 방해가 일어나지 않게 함으로서 성능을 개선한다. </span></p> - -<p class="summary">이 문서는 <code><link rel="preload"></code> 이 어떻게 동작하는지 기본적인 가이드를 제공한다.</p> - -<h2 id="The_basics">The basics</h2> - -<p>You most commonly use <code><link></code> to load a CSS file to style your page with:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> - -<p>Here however, we will use a <code>rel</code> value of <code>preload</code>, which turns <code><link></code> into a preloader for any resource we want. You will also need to specify:</p> - -<ul> - <li>The path to the resource in the {{htmlattrxref("href", "link")}} attribute.</li> - <li>The type of resource in the {{htmlattrxref("as", "link")}} attribute.</li> -</ul> - -<p>A simple example might look like this (see our <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS and CSS example source</a>, and <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">also live</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>JS and CSS preload example</title> - - <link rel="preload" href="style.css" as="style"> - <link rel="preload" href="main.js" as="script"> - - <link rel="stylesheet" href="style.css"> -</head> - -<body> - <h1>bouncing balls</h1> - <canvas></canvas> - - <script src="main.js" defer></script> -</body></pre> - -<p>Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <code><link rel="stylesheet"></code> and <code><script></code> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:</p> - -<ul> - <li>Resources that are pointed to from inside CSS, like fonts or images.</li> - <li>Resources that JavaScript can request, like JSON, imported scripts, or web workers.</li> - <li>Larger images and video files.</li> -</ul> - -<p><code>preload</code> has other advantages too. Using <code>as</code> to specify the type of content to be preloaded allows the browser to:</p> - -<ul> - <li>Prioritize resource loading more accurately.</li> - <li>Store in the cache for future requests, reusing the resource if appropriate.</li> - <li>Apply the correct <a href="/en-US/docs/Web/HTTP/CSP">content security policy</a> to the resource.</li> - <li>Set the correct {{HTTPHeader("Accept")}} request headers for it.</li> -</ul> - -<h3 id="What_types_of_content_can_be_preloaded">What types of content can be preloaded?</h3> - -<p>Many different content types can be preloaded. The possible <code>as</code> attribute values are:</p> - -<ul> - <li><code>audio</code>: Audio file, as typically used in {{htmlelement("audio")}}.</li> - <li><code>document</code>: An HTML document intended to be embedded by a {{htmlelement("frame")}} or {{htmlelement("iframe")}}.</li> - <li><code>embed</code>: A resource to be embedded inside an {{htmlelement("embed")}} element.</li> - <li><code>fetch</code>: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.</li> - <li><code>font</code>: Font file.</li> - <li><code>image</code>: Image file.</li> - <li><code>object</code>: A resource to be embedded inside an {{htmlelement("object")}} element.</li> - <li><code>script</code>: JavaScript file.</li> - <li><code>style</code>: CSS stylesheet.</li> - <li><code>track</code>: WebVTT file.</li> - <li><code>worker</code>: A JavaScript web worker or shared worker.</li> - <li><code>video</code>: Video file, as typically used in {{htmlelement("video")}}.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>. Also note that the full list of values the <code>as</code> attribute can take is governed by the Fetch spec — see <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>.</p> -</div> - -<h2 id="Including_a_MIME_type">Including a MIME type</h2> - -<p><code><link></code> elements can accept a {{htmlattrxref("type", "link")}} attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the <code>type</code> attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.</p> - -<p>You can see an example of this in our video example (see the <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">full source code</a>, and also <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">the live version</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Video preload example</title> - - <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> - <link rel="preload" href="sintel-short.webm" as="video" type="video/webm"> -</head> -<body> - <video controls> - <source src="sintel-short.mp4" type="video/mp4"> - <source src="sintel-short.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> - </video> -</body></pre> - -<p>So in this case, browsers that support MP4s will preload and use the MP4, making the video player hopefully smoother/more responsive for users. Browsers that don't support MP4 can still load the WebM version, but don't get the advantages of preloading. This shows how preloading content can be combined with the philosophy of progressive enhancement.</p> - -<h2 id="Cross-origin_fetches">Cross-origin fetches</h2> - -<p>If you've got your sites' <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <code><link></code> element.</p> - -<p>One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>).</p> - -<p>Let's use this case as an example. You can see the full <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Web font example</title> - - <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin> - <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> - - <link href="style.css" rel="stylesheet"> -</head> -<body> - … -</body></pre> - -<p>Not only are we providing the MIME type hints in the <code>type</code> attributes, but we are also providing the <code>crossorigin</code> attribute to handle the CORS issue.</p> - -<h2 id="Including_media">Including media</h2> - -<p>One nice feature of <code><link></code> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a> or full-blown <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p> - -<p>Let's look at an example (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Responsive preload example</title> - - <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> - <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> - - <link rel="stylesheet" href="main.css"> -</head> -<body> - <header> - <h1>My site</h1> - </header> - - <script> - var mediaQueryList = window.matchMedia("(max-width: 600px)"); - var header = document.querySelector('header'); - - if (mediaQueryList.matches) { - header.style.backgroundImage = 'url(bg-image-narrow.png)'; - } else { - header.style.backgroundImage = 'url(bg-image-wide.png)'; - } - </script> -</body></pre> - -<p>We include <code>media</code> attributes on our <code><link></code> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> for more).</p> - -<p>This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).</p> - -<p>This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.</p> - -<h2 id="Scripting_and_preloads">Scripting and preloads</h2> - -<p>Another nice thing about these preloads is that you can execute them with script. For example, here we create a {{domxref("HTMLLinkElement")}} instance, then attach it to the DOM:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>This means that the browser will preload the <code>myscript.js</code> file, but not actually use it yet. To use it, you could do this:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>This is useful when you want to preload a script, but then defer execution until exactly when you need it.</p> - -<h2 id="Other_resource_preloading_mechanisms">Other resource preloading mechanisms</h2> - -<p>Other preloading features exist, but none are quite as fit for purpose as <code><link rel="preload"></code>:</p> - -<ul> - <li><code><link rel="prefetch"></code> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the <strong><em>next</em></strong> navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give <code>prefetch</code> resources a lower priority than <code>preload</code> ones — the current page is more important than the next. See <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> for more details.</li> - <li><code><link rel="prerender"></code> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats <code>prerender</code> as a <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a> instead.</li> - <li><code><link rel="subresource"></code> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as <code>preload</code>, but it had a problem: there was no way to work out a priority for the items (<code>as</code> didn't exist back then), so they all got fetched with fairly low priority.</li> - <li>There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.</li> -</ul> - -<h2 id="Specifications" name="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('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td>Further details of <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Definition of <code>rel=preload</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("html.elements.link.rel.preload")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> -</ul> - -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p> diff --git a/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html b/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html deleted file mode 100644 index 0d247bd7f8..0000000000 --- a/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Differential inheritance in JavaScript -slug: orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript -translation_of: Web/JavaScript/Differential_inheritance_in_JavaScript -original_slug: Web/JavaScript/Differential_inheritance_in_JavaScript ---- -<h2 id="Introduction">Introduction</h2> - -<p>차등 상속(Differential Inheritance)은 자바 스크립트와 같은 프로토 타입 기반 프로그래밍 언어에서 사용되는 일반적인 상속 모델입니다. 대부분의 객체는 다른 일반적인 객체에서 파생되고 몇 가지 작은 측면에서만 차이가 있다는 원칙에 따라 동작합니다. 일반적으로 객체가 다른 다른 객체에 대한 포인터 목록을 내부적으로 유지합니다.</p> - -<h2 id="Example">Example</h2> - - - -<p>다음 코드는 개체를 "상속"하는 간단한 메서드 예제입니다.</p> - -<pre class="brush: js notranslate">Object.prototype.inherit = function(){ - // Create a new object with this as its prototype - var p = Object.create(this); - - /* actually not necessary: - // Apply the constructor on the new object - this.constructor.apply(p, arguments); - */ - - return p; -}; -</pre> - -<p>상속(<font face="Consolas, Liberation Mono, Courier, monospace">inherit)</font>을 사용하면 일반 프로토 타입에서보다 구체적인 개체를 간단히 파생시킬 수 있습니다. 다음은 상속 방법 및 차등 상속을 사용하여 점점 더 구체적인 객체를 구성하는 간단한 예입니다.</p> - -<pre class="brush: js notranslate">var root = {}; // Could be any object with any prototype object - -var record = root.inherit(); -record.toString = function(){ return "a Record"; }; - -var person = root.inherit(); -person.firstName = false; -person.lastName = false; -person.toString = function(){ - if (this.firstName) { - if (this.lastName) { - return this.firstName + " " + this.lastName; - } else { - return this.firstName; - } - } else if (this.lastName) { - return this.lastName; - } else { - return "a Person"; - } -}; - -JoePerson = person.inherit(); -JoePerson.firstName = "Joe"; -alert( JoePerson.toString() ); -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">inheritance and the prototype chain</a></li> -</ul> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html deleted file mode 100644 index 69e27ae450..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: About -slug: orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About ---- -<h3 id=".EC.9D.B4.EB.B2.88_.EB.A6.B4.EB.A6.AC.EC.A6.88.EC.9D.98_.EC.83.88_.EA.B8.B0.EB.8A.A5" name=".EC.9D.B4.EB.B2.88_.EB.A6.B4.EB.A6.AC.EC.A6.88.EC.9D.98_.EC.83.88_.EA.B8.B0.EB.8A.A5"> 이번 릴리즈의 새 기능 </h3> -<p>JavaScript 버전 1.5는 다음과 같은 개선과 새 기능을 제공합니다: -</p><p><b>런타임 오류</b><br> -런타임 오류가 예외로서 보고됩니다. -</p><p><b>숫자 표현 서식 개선</b><br> -숫자를 표현하는 서식이 Number.prototype.toExponential, Number.prototype.toFixed, Number.prototype.toPrecision 메소드를 포함함으로서 개선되었습니다. <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Number_Object">Number 개체</a> 페이지를 보십시오. -</p><p><b>정규 표현식 개선</b><br> -정규표현식이 다음과 같이 개선되었습니다: -</p> -<ul><li> 한정자 — +, *, ?, {} — 뒤에 ?를 붙여서 greedy하지 않도록 할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">정규 표현식 패턴 쓰기</a> 페이지에서 ?에 대한 항목을 보십시오. -</li><li> Non-capturing parentheses, (?:x) can be used instead of capturing parentheses(x). When non-capturing parentheses are used, matched subexpressions are not available as back-references. See the entry for (?:x) on page <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">Writing a Regular Expression Pattern</a>. -</li><li> Positive and negative lookahead assertions are supported. Both assert a match depending on what follows the string being matched. See the entries for x(?=y) and x(?!y) on page <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">Writing a Regular Expression Pattern</a>. -</li><li> The m flag has been added to specify that the regular expression should match over multiple lines. See the <a href="ko/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Executing_a_Global_Search%2c_Ignoring_Case%2c_and_Considering_Multiline_Input">Executing a Global Search, Ignoring Case, and Considering Multiline Input</a> page. -</li></ul> -<p><b>조건부 함수 선언</b><br> -함수를 if 조건안에서 선언할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Defining_Functions">함수 정의</a> 페이지를 참고하세요. -</p><p><b>함수 표현식</b> <br> -함수를 표현식 안에서 선언할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Defining_Functions">함수 정의</a> 페이지를 참고하세요. -</p><p><b>Multiple catch clauses</b><br> -Multiple catch clauses in a try...catch statement are supported. See <a href="ko/Core_JavaScript_1.5_Guide/Exception_Handling_Statements/try...catch_Statement#The_catch_Block">The catch Block</a> page. -</p><p><b>Getters와 Setters</b><br> -JavaScript writers can now add getters and setters to their objects. This feature is available only in the C implementation of JavaScript. See the <a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters">Defining Getters and Setters</a> page. -</p><p><b>상수</b> <br> -읽기전용의 상수가 지원됩니다. This feature is available only in the C implementation of JavaScript. See the <a href="ko/Core_JavaScript_1.5_Guide/Constants">Constants</a> page. -</p> -<h3 id=".EB.AF.B8.EB.A6.AC_.EC.95.8C.EA.B3.A0_.EC.9E.88.EC.96.B4.EC.95.BC_.ED.95.A0_.EA.B2.83" name=".EB.AF.B8.EB.A6.AC_.EC.95.8C.EA.B3.A0_.EC.9E.88.EC.96.B4.EC.95.BC_.ED.95.A0_.EA.B2.83"> 미리 알고 있어야 할 것 </h3> -<p>이 안내서는 당신이 다음과 같은 배경지식을 지녔다고 가정합니다: -</p> -<ul><li> 인터넷과 World Wide Web (WWW)에 대한 상식적인 이해 -</li><li> HyperText Markup Language (HTML)에 대한 충분한 지식<br> -</li></ul> -<p>C 혹은 Visual Basic에 대한 프로그래밍 경험이 있으면 좋지만, 필수사항은 아닙니다. -</p> -<h3 id="JavaScript_.EB.B2.84.EC.A0.84" name="JavaScript_.EB.B2.84.EC.A0.84"> JavaScript 버전 </h3> -<table class="fullwidth-table"> -<tbody><tr> -<th>JavaScript 버전</th> -<th>Navigator 버전</th> -</tr> -<tr> -<td>JavaScript 1.0</td> -<td>Navigator 2.0</td> -</tr> -<tr> -<td>JavaScript 1.1</td> -<td>Navigator 3.0</td> -</tr> -<tr> -<td>JavaScript 1.2</td> -<td>Navigator 4.0-4.05</td> -</tr> -<tr> -<td>JavaScript 1.3</td> -<td>Navigator 4.06-4.7x</td> -</tr> -<tr> -<td>JavaScript 1.4</td> -<td> </td> -</tr> -<tr> -<td>JavaScript 1.5</td> -<td>Navigator 6.0<br>모질라 (오픈소스 브라우저)</td> -</tr> -</tbody></table> -<p><small><b>표1: JavaScript와 Navigator 버전</b></small><br> -<br> -Each version of the Netscape Enterprise Server also supports a different version of JavaScript. To help you write scripts that are compatible with multiple versions of the Enterprise Server, this manual uses an abbreviation to indicate the server version in which each feature was implemented. -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>Abbreviation</th> -<th>Enterprise Server version</th> -</tr> -<tr> -<td>NES 2.0</td> -<td>Netscape Enterprise Server 2.0</td> -</tr> -<tr> -<td>NES 3.0</td> -<td>Netscape Enterprise Server 3.0</td> -</tr> -</tbody></table> -<p><small><b>Table 2: Abbreviations of Netscape Enterprise Server versions</b></small> -</p> -<h3 id="JavaScript_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3" name="JavaScript_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3"> JavaScript 정보를 찾을 수 있는 곳 </h3> -<p>The core JavaScript documentation includes the following books: -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Guide">The Core JavaScript Guide</a> (this guide) provides information about the core JavaScript language and its objects. -</li><li> <a href="ko/Core_JavaScript_1.5_Reference">The Core JavaScript Reference</a> provides reference material for the core JavaScript language. -</li></ul> -<p>If you are new to JavaScript, start with the <a href="ko/Core_JavaScript_1.5_Guide">Core JavaScript Guide</a>. Once you have a firm grasp of the fundamentals, you can use the <a href="ko/Core_JavaScript_1.5_Reference">Core JavaScript Reference</a> to get more details on individual objects and statements. -</p> -<h3 id=".EB.AC.B8.EC.84.9C_.EA.B7.9C.EC.95.BD" name=".EB.AC.B8.EC.84.9C_.EA.B7.9C.EC.95.BD"> 문서 규약 </h3> -<p>JavaScript 응용프로그램은 많은 운영체제에서 실행됩니다. 이 책에 있는 정보는 모든 운영체제에 적용됩니다. 파일과 디렉토리 경로는 Windows 형식(디렉토리 이름을 구분하는데 역슬래시를 사용)으로 썼습니다. Unix에서는 역슬래시를 슬래시로 바꾸어 사용하면 됩니다. -</p><p>이 안내서에서 URL은 다음과 같은 형태로 씁니다. -</p><p><code><span class="nowiki">http://server.domain/path/file.html</span></code> -</p><p>이 URL에서 "server"는 우리가 응용프로그램을 실행하는 서버 이름(research1이나 www 등)이고, "domain"은 인터넷 도메인 이름(netscape.com이나 uiuc.edu 등)입니다. "path"는 서버의 디렉토리 구조를 나타내고, "file.html"은 파일 이름입니다. 일반적으로 URL에서 이탤릭체로 쓴 부분은 알맞은 내용으로 바꿔써야 할 내용(placeholder)이고, 평범한 고정폭 글꼴은 그대로 쓰면 되는 내용입니다. Secure Socket Layer(SSL)을 사용하는 서버라면 http 대신 https를 쓰면 됩니다. -</p><p>이 안내서는 다음과 같은 관례를 따릅니다. -</p> -<ul><li> <code>고정폭 글꼴</code>은 샘플 코드, API, 언어 요소(메소드 이름, 속성 이름 등), 파일 이름, 경로, 디렉토리 이름, HTML 태그, 화면에 입력해야 할 텍스트를 나타내는 데 쓰입니다. (고정폭 이탤릭체는 코드 내용 중에서 적당히 알맞은 내용으로 바꿔써야 할 부분을 나타내는 데 씁니다.) -</li><li> <i>이탤릭체</i>는 책 제목, 강조, 변수, 뜻 그대로 쓰인 단어(words in the literal sense)에 씁니다. -</li><li> <b>굵은 글씨</b>는 용어에 씁니다. -</li></ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide", "Core_JavaScript_1.5_Guide:JavaScript_Overview") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/About", "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos", "ja": "ja/Core_JavaScript_1.5_Guide/About", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html deleted file mode 100644 index 2ff86aff3c..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Class-Based vs. Prototype-Based Languages -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages ---- -<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">클래스 기반언어와 프로토타입 기반언어</h3> -<p>Java와 C++이라는 클래스 기반의 객체지향언어는 클래스와 인스턴스라는 2개의 다른 실체가 있다는 개념에 기초하고 있습니다.</p> -<ul> <li>클래스는 어떤 객체의 집합을 특징짓는 모든 속성(Java에서는 메소드와 필드를, C++에서는 멤버를 프로퍼티로 간주)을 정의합니다. 클래스란 그것이 나타내는 객체집합의 특정멤버가 아닌, 추상적인것입니다. 예를들어, Employee클래스는 모든 종업원의 집합을 나타냅니다.</li> <li>한편, 인스턴스는 클래스를 실례로 한것입니다. 즉, 그 멤버중 하나인것입니다. 예를들어, Victoria는 Employee클래스의 인스턴스가 될 수 있습니다. 이 클래스는 특정 개인을 종업원으로서 표현하고 있는것입니다. 인스턴스는 그 부모클래스의 속성을 정확하게 유지하고 있습니다.</li> -</ul> -<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p> -<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4> -<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p> -<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p> -<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4> -<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p> -<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p> -<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4> -<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p> -<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4> -<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p> -<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody> -</table> -<div class="noinclude"> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p> -</div> -<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html deleted file mode 100644 index ebebbdbb32..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Creating a Regular Expression -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression ---- -<h3 id=".EC.A0.95.EA.B7.9C.ED.91.9C.ED.98.84.EC.8B.9D_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.A0.95.EA.B7.9C.ED.91.9C.ED.98.84.EC.8B.9D_.EB.A7.8C.EB.93.A4.EA.B8.B0">정규표현식 만들기</h3> -<p>정규표현식은 다음의 두 가지 방법으로 만들 수 있습니다.</p> -<ul> - <li>정규표현식 상수값을 이용하여 만들기</li> -</ul> -<pre> re = /ab+c/; </pre> -<dl> - <dd> - <dl> - <dd> - 정규표현식 상수값은 스크립트가 실행될 때 컴파일됩니다. 따라서 정규표현식의 값이 변하지 않을 경우, 이 방법을 사용하면 좀 더 나은 성능을 얻을 수 있습니다.</dd> - </dl> - </dd> -</dl> -<ul> - <li><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">RegExp</a> 객체의 생성자를 호출하여 만들기</li> -</ul> -<pre> re = new RegExp("ab+c"); </pre> -<dl> - <dd> - <dl> - <dd> - 생성자를 이용하면 실행 시간에 정규표현식이 컴파일됩니다. 정규표현식 패턴이 바뀔 것을 알고 있거나, 또는 패턴을 사용자의 입력 등을 통해 외부에서 가져오려고 할 때 이 방법을 사용하십시오.</dd> - </dl> - </dd> -</dl> -<div class="noinclude"> - <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Special_Operators", "Core_JavaScript_1.5_Guide:Writing_a_Regular_Expression_Pattern") }}</p> -</div> -<p> </p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html deleted file mode 100644 index 760bf0d3a0..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Defining Getters and Setters -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters ---- -<h3 id="getter.2Fsetter_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0" name="getter.2Fsetter_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0">getter/setter 정의하기</h3> - -<p>getter는 속성의 값을 얻어오는 메소드이고, setter는 속성의 값을 설정하는 메소드입니다. 우리는 언어에서 미리 정의한 핵심 개체들과 사용자 정의 개체에 getter/setter를 정의할 수 있습니다. getter와 setter를 정의할 때 쓰이는 문법은 개체 상수값 문법입니다.</p> - -<p>다음의 JS 쉘 세션은 사용자가 정의한 개체 o에 대해서 getter와 setter가 어떻게 동작하는지 보여줍니다. JS 쉘은 JavaScript를 한 번에 실행(batch)하거나 대화식으로(interactively) 실행할 수 있게 해주는 응용프로그램입니다.</p> - -<p><code>o</code> 개체에는 이런 속성이 있습니다.</p> - -<ul> - <li>o.a - 수</li> - <li>o.b - o.a 더하기 1을 반환하는 getter</li> - <li>o.c - 받은 값을 2로 나누어서 o.a에 설정하는 setter</li> -</ul> - -<pre>js> o = new Object; -[object Object] -js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}}; -[object Object] -js> o.a -7 -js> o.b -8 -js> o.c = 50 -js> o.a -25 -js> -</pre> - -<p>다음 JavaScript 쉘 세션은 이미 정의된 <code>Date</code> 모든 인스턴스에 year 속성을 추가하기 위해서 getter/setter가 어떻게 Date 프로토타입을 확장하는지 보여줍니다. 이 세션에서는 year 속성의 getter와 setter를 지원하기 위해서 <code>Date</code>에 있는 <code>getFullYear</code> 메소드와 <code>setFullYear</code> 메소드를 사용하고 있습니다.</p> - -<p>이 문장들은 year 속성에 대한 getter와 setter를 정의합니다.</p> - -<pre>js> var d = Date.prototype; -js> d.__defineGetter__("year", function() { return this.getFullYear(); }); -js> d.__defineSetter__("year", function(y) { this.setFullYear(y); }); -</pre> - -<p>이 문장들은 <code>Date</code>의 getter/setter를 사용합니다.</p> - -<pre>js> var now = new Date; -js> print(now.year); -2000 -js> now.year=2001; -987617605170 -js> print(now); -Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 -</pre> - -<div class="note">JavaScript 1.5를 개발하는 동안 이미 존재하는 개체에 getter/setter를 추가할 때 <code>getter =</code>, <code>setter =</code>이라는 식의 문법을 사용하던 때가 잠깐 있었습니다. 이 문법은 이제 사용하지 말아야 합니다. 현재의 JS 1.5 엔진에서는 경고를 발생시키고, 더 나중의 버전에서는 문법 에러를 발생시키게 될 것입니다.</div> - -<p> </p> - -<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> - -<p>getter/setter를</p> - -<ul> - <li><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자</a>를 이용해서 정의하거나,</li> - <li>개체가 만들어진 이후에 getter/setter 추가 메소드를 이용해서 언제든지 추가할 수 있습니다.</li> -</ul> - -<p><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자</a>를 이용할 때는 단순히 getter 메소드 앞에는 <code>get</code>을 써주고 setter 메소드 앞에는 <code>set</code>을 써주기만 하면됩니다. 물론 getter 메소드에는 매개변수가 없어야 하고 setter에는 정확히 하나만 있어야 합니다. 다음 예제에서와 같이 말입니다.</p> - -<pre class="eval">o = { - a:7, - <strong>get</strong> b() { return this.a+1; }, - <strong>set</strong> c(x) { this.a = x/2; } -}; -</pre> - -<p>개체가 생성된 이후에 어느 때라도 <code>__defineGetter__</code>와 <code>__defineSetter__</code>라는 메소드를 이용하면 getter/setter를 정의할 수 있습니다. 두 메소드 모두 첫 번째 매개변수에 getter/setter 이름을 나타내는 문자열을 받습니다. 두 번째 매개변수는 getter/setter로서 호출될 함수를 받습니다. 예제를 보십시오.</p> - -<pre class="eval">o.__defineGetter__("b", function() { return this.a+1; }); -o.__defineSetter__("c", function(x) { this.a = x/2; }); -</pre> - -<p>두 가지 중에서 어떤 방식을 택할지는 프로그래밍 스타일이나 해야할 작업에 달려있습니다. 프로토타입을 정의하는데 이미 개체 초기화 지정자를 사용하고 있다면 거의 첫 번째 방식을 사용할 것입니다. 첫 번째가 좀 더 단순하고 자연스러운 방식입니다. 그러나 우리가 직접 프로토토입을 만들거나 개체를 생성할 수 없어서 나중에 getter/setter를 추가해야 하는 상황이라면 두 번째 방식을 사용할 수 밖에 없습니다. 두 번째 방식은 JavaScript의 동적인 특성을 잘 보여주는 방식입니다. 하지만 코드를 읽고 이해하기 어렵게 만들 수도 있습니다.</p> - -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html deleted file mode 100644 index dd76945d49..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Defining Methods -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods ---- -<h3 id=".EB.A9.94.EC.86.8C.EB.93.9C_.EC.A0.95.EC.9D.98" name=".EB.A9.94.EC.86.8C.EB.93.9C_.EC.A0.95.EC.9D.98">메소드 정의</h3> -<p> - <i> - 메소드</i> - 는 개체와 연관되어 있는 함수입니다. 일반적인 함수를 정의하는 것과 같은 방법으로 메소드를 정의합니다. 그 후에, 존재하는 개체와 함수를 연관시키기 위해서 다음과 같은 문법을 사용합니다.</p> -<pre>object.methodname = function_name -</pre> -<p><code>object</code>는 존재하는 개체중에 하나이고, <code>methodname</code>은 지금 추가하려는 메소드 이름이며, <code>function_name</code>은 함수 이름입니다.</p> -<p>이제 우리는 개체의 메소드를 호출할 때 다음과 같이 할 수 있습니다.</p> -<pre>object.methodname(params); -</pre> -<p>개체 생성자 함수에 메소드 정의를 포함시켜서 개체 타입에 대한 메소드를 정의할 수 있습니다. 예를 들어, 미리 정의된 car 개체의 속성을 출력해주는 함수를 정의할 수 있습니다.</p> -<pre>function displayCar() { - var result = "A Beautiful " + this.year + " " + this.make - + " " + this.model; - pretty_print(result); -} -</pre> -<p><code>pretty_print</code>는 가로선과 문자열을 출력하는 함수입니다. 이 메소드가 포함된 개체를 참조하기 위해서 <code>this</code>를 사용하고 있다는 것을 주의해서 보십시오.</p> -<p>아래 문장을 개체 정의에 추가함으로써 이 함수를 car의 메소드로 만들 수 있습니다.</p> -<pre>this.displayCar = displayCar; -</pre> -<p>그러므로 <code>car</code> 개체의 완벽한 정의는 아래와 같은 모습이 될 것입니다.</p> -<pre>function car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; - this.displayCar = displayCar; -} -</pre> -<p>그러면 우리는 모든 car 개체에 대해서 이런 식으로 <code>displayCar</code> 메소드를 호출할 수 있게됩니다.</p> -<pre>car1.displayCar() -car2.displayCar() -</pre> -<p>이 코드는 다음 그림과 같은 내용을 만들어냅니다.</p> -<p><img alt="Image:obja.gif"> <small><b>그림 7.1: 메소드 출력 결과</b></small></p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html deleted file mode 100644 index 6b458144cc..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Defining Properties for an Object Type -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type ---- -<h3 id=".EA.B0.9C.EC.B2.B4_.ED.98.95.EC.8B.9D.EC.97.90_.EC.86.8D.EC.84.B1_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EC.B2.B4_.ED.98.95.EC.8B.9D.EC.97.90_.EC.86.8D.EC.84.B1_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0">개체 형식에 속성 정의하기</h3> -<p><code>prototype</code> 속성을 이용하면 이미 정의해 놓은 개체 형식에 속성을 추가할 수 있습니다. 이 방법을 사용하면 개체의 인스턴스 하나에만 속성이 추가되는 것이 아니라 같은 타입의 모든 개체가 공유하는 속성을 정의합니다. 다음 코드는 <code>car</code> 형식의 모든 개체에 <code>color</code> 속성을 추가하고, <code>car1</code> 개체의 <code>color</code> 속성에 값을 할당하는 코드입니다.</p> -<pre>Car.prototype.color=null; -car1.color="black"; -</pre> -<p>더 많은 정보를 얻으려면 <a href="ko/Core_JavaScript_1.5_Reference">기본 JavaScript 레퍼런스</a>에 있는 Function 개체의 <a href="ko/Core_JavaScript_1.5_Reference/Objects/Function#Properties"><code>prototype</code> 속성</a>을 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html deleted file mode 100644 index e5cf88cec9..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Deleting Properties -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties ---- -<h3 id=".EC.86.8D.EC.84.B1_.EC.A0.9C.EA.B1.B0" name=".EC.86.8D.EC.84.B1_.EC.A0.9C.EA.B1.B0">속성 제거</h3> -<p><code>delete</code> 연산자를 사용하여 속성을 제거할 수 있습니다. 어떻게 속성을 제거하는지 코드를 보십시오.</p> -<pre>//a와 b라는 속성을 가지는 새 개체를 만듭니다. -myobj = new Object; -myobj.a = 5; -myobj.b = 12; - -//myobj가 속성 b만을 가지도록 속성 a를 지웁니다. -delete myobj.a; -</pre> -<p>전역 변수를 선언할 때 <code>var</code> 키워드를 사용하지 않았다면 그 전역 변수를 제거하는데 <code>delete</code> 연산자를 사용할 수 있습니다.</p> -<pre>g = 17; -delete g; -</pre> -<p>더 많은 정보를 얻으려면 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators#delete">delete</a>를 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html deleted file mode 100644 index a1a24a41af..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Creating New Objects -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html deleted file mode 100644 index 6c96480b54..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Indexing Object Properties -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties ---- -<h3 id=".EA.B0.9C.EC.B2.B4_.EC.86.8D.EC.84.B1_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EC.B2.B4_.EC.86.8D.EC.84.B1_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0">개체 속성 접근하기</h3> -<p>JavaScript 1.0에서는 개체의 속성을 참조할 때 개체 이름이나 순서 인덱스를 사용할 수 있습니다. 그러나 JavaScript 1.1과 그 이후 버전에서는 처음에 속성을 정의할 때 이름으로 정의했으면 항상 이름으로만 참조해야 하고, 인덱스로 정의했으면 인덱스로만 참조해야 합니다.</p> -<p>이런 제한은 앞 페이지 예제의 car 개체 형식처럼 생성자 함수로 개체와 개체 속성을 만들 때나 명시적으로 개별 속성을 만들 때(예를 들어 <code>myCar.color = "red"</code> 같은 식으로 속성을 추가할 때) 모두 적용됩니다. 그러므로 <code>myCar{{ mediawiki.external(5) }} = "25 mpg"</code>라고 인덱스를 이용해서 속성을 정의하면 그 이후로는 항상 <code>myCar{{ mediawiki.external(5) }}</code>로 참조할 수 있습니다.</p> -<p>이 규칙은 <code>forms</code> 배열 같이 HTML을 반영하여 생성된 개체에는 예외입니다. 이 배열에 있는 개체를 참조할 때는 순서(문서에 기록된 순서)를 나타내는 숫자나 이름(이름을 정의한 경우에만)을 이용하여 참조할 수 있습니다. 예를 들어, 문서에 있는 두 번째 <code><FORM></code> 태그가 "myForm"이라는 값을 가진 <code>NAME</code> 속성을 갖고 있다면 이 폼은 <code>document.forms{{ mediawiki.external(1) }}</code>, <code>document.forms{{ mediawiki.external('\"myForm\"') }}</code>, <code>document.myForm</code>으로 접근할 수 있습니다. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html deleted file mode 100644 index 0b2e514d4b..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Using a Constructor Function -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function ---- -<h3 id=".EC.83.9D.EC.84.B1.EC.9E.90_.ED.95.A8.EC.88.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.83.9D.EC.84.B1.EC.9E.90_.ED.95.A8.EC.88.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">생성자 함수 사용하기</h3> -<p>다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다.</p> -<ol> - <li>생성자 함수를 작성함으로써 개체를 정의합니다.</li> - <li>new 키워드를 사용하여 개체의 인스턴스를 만듭니다.</li> -</ol> -<p>개체 형식을 정의하기 위해서, 개체의 이름, 속성, 메소드를 지정하는 함수를 만듭니다. 자동차를 나타내기 위한 개체를 만들고 싶다고 해봅시다. 그렇다면 이 형식이 <code>car</code>라고 불리길 원할 것이고, make, model, year라는 속성이 있기를 원할 것입니다. 원하는 것을 이루기 위해서 이런 함수를 작성합니다.</p> -<pre>function car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> -<p>함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해서 <code>this</code>를 사용했다는 것을 명심하십시오.</p> -<p>이제 우리는 <code>mycar</code>라는 개체를 이렇게 만들 수 있습니다.</p> -<pre>mycar = new car("Eagle", "Talon TSi", 1993); -</pre> -<p>이 문장은 <code>mycar</code>를 만들고, 지정된 값을 mycar의 속성에 할당합니다. 그러면 <code>mycar.make</code>는 "Eagle"이라는 문자열 값을 가지고, <code>mycar.year</code>는 1993이라는 정수를 가질 것입니다.</p> -<p>우리는 <code>new</code>를 써서 <code>car</code> 개체를 몇 개라도 만들 수 있습니다.</p> -<pre>kenscar = new car("Nissan", "300ZX", 1992); -vpgscar = new car("Mazda", "Miata", 1990); -</pre> -<p>개체는 다른 개체를 속성으로 가질 수 있습니다. 예를 들어, <code>person</code> 개체를 다음과 같이 정의했다고 합시다.</p> -<pre>function person(name, age, sex) { - this.name = name; - this.age = age; - this.sex = sex; -} -</pre> -<p>그리고나서 person 개체의 인스턴스 두 개를 만듭니다.</p> -<pre>rand = new person("Rand McKinnon", 33, "M"); -ken = new person("Ken Jones", 39, "M"); -</pre> -<p>이제 우리는 car가 owner라는 속성으로 <code>person</code> 개체를 가지도록 car의 정의를 바꿀 수 있습니다.</p> -<pre>function car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; -} -</pre> -<p>새 개체 인스턴스를 만들 때 이렇게 쓸 수 있습니다.</p> -<pre>car1 = new car("Eagle", "Talon TSi", 1993, rand); -car2 = new car("Nissan", "300ZX", 1992, ken); -</pre> -<p>위 문장에서 owner 인자로 문자열 상수값이나 정수값을 전달하는 대신 <code>rand</code>와 <code>ken</code>이라는 개체를 전달했다는 사실에 주의하십시오. 이제 car2의 소유자 이름을 알고 싶으면 이런식으로 접근할 수 있습니다.</p> -<pre>car2.owner.name -</pre> -<p>정의된 개체에 아무때나 속성을 추가할 수 있다는 사실을 기억하십시오.</p> -<pre>car1.color = "black" -</pre> -<p>이 문장은 car1에 <code>color</code> 속성을 추가하고 "black"이라는 값을 할당합니다. 그러나 이 문장이 다른 개체에 영향을 미치지는 않습니다. 같은 형식을 가지는 모든 개체에 새 속성을 추가하고 싶으면 car 개체 형식의 정의에 속성을 추가해야 합니다.</p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_Object_Initializers", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html deleted file mode 100644 index 2c67101057..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Using this for Object References -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References ---- -<h3 id="this.EB.A5.BC_.EC.82.AC.EC.9A.A9.ED.95.9C_.EA.B0.9C.EC.B2.B4_.EC.B0.B8.EC.A1.B0" name="this.EB.A5.BC_.EC.82.AC.EC.9A.A9.ED.95.9C_.EA.B0.9C.EC.B2.B4_.EC.B0.B8.EC.A1.B0">this를 사용한 개체 참조</h3> -<p>JavaScript에는 <code>this</code>라는 키워드가 있는데, 메소드 안에서 현재 개체를 참조하기 위해서 이 키워드를 사용할 수 있습니다. 예를 들어, 개체의 값 속성을 검증하는 <code>validate</code>라는 함수가 있다고 해봅시다.</p> -<pre>function validate(obj, lowval, hival) { - if ((obj.value < lowval) || (obj.value > hival)) - alert("Invalid Value!"); -} -</pre> -<p>그러면 폼의 각 요소의 <code>onchange</code> 이벤트 핸들러에서 <code>validate</code>를 호출할 때, 다음 예제와 같은 방법으로 this를 사용해서 폼 요소를 <code>validate</code>에 전달할 수 있습니다.</p> -<pre><input type="text" name="age" size="3" - onChange="validate(this, 18, 99)"> -</pre> -<p><code>form</code> 속성과 같이 사용하면, <code>this</code>는 현재 개체의 부모 폼을 참조할 수 있습니다. 다음 예제에서, <code>myForm</code>이라는 폼은 <code>Text</code> 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 <code>Text</code> 개체의 값을 폼 이름으로 바꿉니다. 버튼의 <code>onclick</code> 이벤트 핸들러에서 부모 폼인 <code>myForm</code>을 참조하기 위해서 <code>this.form</code>을 사용하고 있습니다.</p> -<pre><form name="myForm"> -<p><label>Form name:<input type="text" name="text1" value="Beluga"></label> -<p><input name="button1" type="button" value="Show Form Name" - onclick="this.form.text1.value=this.form.name"> -</p> -</form> -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html deleted file mode 100644 index e1d0b7a8c9..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Expressions -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions ---- -<h3 id=".ED.91.9C.ED.98.84.EC.8B.9D" name=".ED.91.9C.ED.98.84.EC.8B.9D"> 표현식 </h3> -<p><i>표현식</i>은 상수(literals), 변수, 연산자 그리고 단일값을 반환하는 계산식(값은 숫자, 문자열, 논리값이 가능)이 알맞게 조합된 집합체다. -</p><p>개념적으로 보면 표현식에는 두가지 타입이 있다: 하나는 변수에 값을 할당하는 것이고 다른 하나는 단순히 값을 가지고 있는 것이다. 예를 들어, x = 7 이라는 표현식은 x 에 7이라는 값을 할당하는 표현식이다. 이 표현식은 스스로 7이라는 값을 부여한다. 이런 표현식들은 <i>할당 연산자</i>를 사용한다. 반면에, 3 + 4 라는 표현식은 단순히 7이라는 값을 계산할 뿐이다; 할당하지 않는다. 이런 표현식에서 사용되는 연산자는 그냥 단순히 <i>연산자</i>라고만 한다. -</p><p>JavaScript에는 다음과 같은 타입의 표현식이 있다: -</p> -<ul><li> 산술형 : 3.14159와 같이 숫자를 표현(evaluate). (일반적으로 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">산술 연산자</a>를 사용) -</li><li> 문자열형: "Fred"나 "234"와 같이 문자열을 표현(evaluate). (일반적으로 <a href="ko/Core_JavaScript_1.5_Guide/Operators/String_Operators">문자열 연산자</a>를 사용) -</li><li> 논리형: 참(true) 혹은 거짓(false)을 표현(evaluate). (종종 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">논리 연산자</a>와 함께 사용) -</li><li> 객체형: 객체를 표현(evaluate). (객체표현식에 사용하는 다양한 연산자는 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators">특수 연산자</a>를 참고) -</li></ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Unicode", "Core_JavaScript_1.5_Guide:Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wyra\u017cenia" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html deleted file mode 100644 index 8bd3674552..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: JavaScript Overview -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview ---- -<h3 id="JavaScript.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name="JavaScript.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">JavaScript란 무엇인가?</h3> -<p>JavaScript는 크로스 플랫폼, 객체 지향 스크립트 언어입니다. JavaScript는 작고, 가벼운 언어입니다; JavaScript는 단독으로 쓰이는 언어로는 유용하지 않지만, 웹 브라우져 같은 다른 제품이나 프로그램에 포함하기 쉽습니다. 호스트 환경에서 JavaScript는 그 환경의 다른 개체(object)들을 프로그램적으로 제어하기 위해서 그들과 연결될 수 있습니다.</p> -<p>기본 JavaScript(core JavaScript)는 <code>Array</code>, <code>Date</code>, <code>Math</code>등 기본이 되는 개체들(core set of objects)과 연산자, 제어 구조, 문장등 언어의 기본 요소들(core set of language elements)을 포함하고 있습니다. 기본 JavaScript는 다른 개체를 추가함으로써 다양한 목적을 위해 확장될 수 있습니다. 예를 들면 다음과 같은 것들입니다.</p> -<ul> <li>"클라이언트쪽 JavaScript"는 브라우저(Navigatore 또는 다른 브라우저들)와 브라우저의 Document Object Model(DOM)을 제어할 수 있는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 클라이언트쪽 확장 기능은 응용프로그램이 HTML 폼에 요소를 두어 마우스 클릭이나 폼 입력, 페이지 이동 같은 사용자 이벤트에 반응할 수 있게 합니다.</li> <li>"서버쪽 JavaScript"는 서버에서 JavaScript를 실행하는 데 연관되는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 서버쪽 확장 기능은 응용프로그램이 관계형 데이터베이스와 통신할 수 있게 하고, 응용프로그램의 호출들 사이에 연속성을 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.</li> -</ul> -<p>JavaScript의 LiveConnect 기능을 통해서, Java와 JavaScript 코드가 서로 통신할 수 있습니다. JavaScript에서 Java 개체를 초기화하여 개체의 공개 메소드와 필드에 접근할 수 있습니다. Java에서 JavaScript 개체, 속성(property), 메소드에 접근할 수 있습니다.</p> -<p>Netscape가 JavaScript를 개발했고 Netscape 브라우저에서 JavaScript가 가장 먼저 사용되었습니다.</p> -<h3 id="JavaScript.EC.99.80_Java" name="JavaScript.EC.99.80_Java">JavaScript와 Java</h3> -<p>JavaScript 와 Java 는 여러가지 면에서 비슷하지만 본질적으로 다릅니다. JavaScript는 Java 와 공통점이 있지만 Java 처럼 형(type)을 검사하지 않습니다. JavaScript는 Java 문법의 대부분과 제어흐름의 기본적인 개념들을 지원합니다.</p> -<p>Java의 클래스 선언으로 이루어지는 컴파일 타임 시스템에 대조적으로, JavaScript는 수, 불리언, 문자열 값을 나타내는 작은 규모의 자료형에 기반한 런타임 시스템을 지원합니다. JavaScript는 클래스 기반 개체 모델이 아닌 프로토타입 기반(prototype-based) 개체 모델을 갖고 있습니다. 프로토타입 기반 개체 모델은 동적인 상속을 제공합니다. 즉, 각각의 개체를 상속할 수 있는 것입니다. JavaScript는 또 특별히 선언시의 요구사항이 없는 함수도 지원합니다. 함수는 느슨하게 타입된 메소드로 실행됨으로써 개체의 속성이 될 수 있습니다.(Functions can be properties of objects, executing as loosely typed methods.)</p> -<p>Java에 비해 JavaScript는 형식이 자유로운 언어입니다. 모든 변수, 클래스, 메소드들을 꼭 선언 할 필요는 없습니다. 메소드가 public, private, protected 인지 고민해야할 필요가 없고, interface를 구현할 필요도 없습니다. 변수, 매개변수(parameter), 함수의 반환 형식도 명시적으로 지정할 필요가 없습니다.</p> -<p>Java는 클래스 기반 프로그래밍 언어로서, 빠른 실행과 형 안정성(type safety)을 위해 설계되었습니다. 형 안정성이란 예를 들면 Java에서 정수를 개체 참조로 변환할 수 없고, Java 바이트코드에 오류를 일으켜서 사적인(private) 메모리 공간에 접근할 수 없다는 말입니다. 자바의 클래스 기반 모델은 프로그램이 클래스와 클래스의 메소드로만 이루어진다는 의미입니다. Java의 클래스 상속과 엄격한 형 검사(strong typing)는 일반적으로 단단히 결합된 개체의 계층 구조를 필요로 합니다. 이런 요구사항이 JavaScript 프로그래밍에 비해 Java 프로그래밍을 더 복잡하게 만듭니다.</p> -<p>반면 JavaScript는 HyperTalk나 dBASE 같이 적은 줄수의 동적 타입 언어를 계승한 것입니다. 이런 스크립트 언어는 더 많은 사람들을 위한 프로그래밍 도구로서 제공되는데, 이 언어들이 문법이 쉽고, 내장되기에 쉬우며, 개체 생성에 요구 사항이 단순하기 때문입니다.</p> -<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript</th> <th>Java</th> </tr> <tr> <td>개체 지향. 개체의 형식 사이에 구분이 없음. 프로토타입 메커니즘을 통해 상속을 지원하고, 어떤 개체에든지 동적으로 속성과 메소드를 추가할 수 있습니다.</td> <td>클래스 기반. 개체는 클래스 계층 구조를 관통하는 상속을 통해서 클래스와 인스턴스(instance)로 나뉩니다. 클래스와 인스턴스에는 동적으로 속성과 메소드를 추가할 수 없습니다.</td> </tr> <tr> <td>변수의 자료형을 선언하지 않음(동적 형 검사)</td> <td>변수의 자료형을 반드시 선언해야 함(정적 형 검사)</td> </tr> <tr> <td>Cannot automatically write to hard disk.</td> <td>Cannot automatically write to hard disk.</td> </tr> </tbody> -</table> -<p><small><strong>표(Table) 1.1: JavaScript 와 Java 비교</strong></small><br> -<br> -Java와 JavaScript 사이의 차이점에 대해서 더 알고 싶으시면 <a href="/ko/Core_JavaScript_1.5_Guide#.EA.B0.9C.EC.B2.B4_.EB.AA.A8.EB.8D.B8.EC.9D.98_.EC.83.81.EC.84.B8_.EB.82.B4.EC.9A.A9" title="ko/Core_JavaScript_1.5_Guide#.EA.B0.9C.EC.B2.B4_.EB.AA.A8.EB.8D.B8.EC.9D.98_.EC.83.81.EC.84.B8_.EB.82.B4.EC.9A.A9">개체 모델의 상세 내용</a>을 보시기 바랍니다.</p><h3 id="JavaScript.EC.99.80_ECMAScript_.EB.AA.85.EC.84.B8" name="JavaScript.EC.99.80_ECMAScript_.EB.AA.85.EC.84.B8">JavaScript와 ECMAScript 명세</h3> -<p>Netscape가 JavaScript를 개발했고, Netscape 브라우저에서 가장 처음으로 사용되었습니다. 그러나 <a class="external" href="http://www.ecma-international.org/">Ecma International</a> - 정보와 통신 시스템을 표준화하기 위한 유럽 기구(공식적으로 ECMA - the European Computer Manufacturers Association으로 알려짐) - 과 Netscape가 공동으로 작업하여 기본 JavaScript에 기반하여 표준화되고 국제적인 프로그래밍 언어를 만들어냈습니다. JavaScript의 표준화된 버전은 ECMAScript라고 부르고, 표준을 지원하는 응용프로그램에서는 모두 동일하게 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해서 공개된 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세에 문서화되어 있습니다.</p> -<p>ECMA-262 표준은 <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization, 국제 표준화기구)의 승인을 받아 ISO-16262가 되었습니다. Mozilla 웹사이트에서 <a class="external" href="http://www.mozilla.org/js/language/E262-3.pdf">ECMA-262의 PDF 문서</a>를 얻을 수 있습니다. <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International 웹사이트</a> 에서도 명세를 찾을 수 있습니다. ECMAScript 명세는 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>에서 표준화 한 Document Object Model(DOM)에 대해서는 설명하지 않습니다. DOM은 HTML 문서 개체들이 스크립트에 노출되는 방식을 정의합니다.</p> -<h4 id="JavaScript_.EB.B2.84.EC.A0.84.EA.B3.BC_ECMAScript_.ED.8C.90.EB.B3.B8_.EC.82.AC.EC.9D.B4.EC.9D.98_.EA.B4.80.EA.B3.84" name="JavaScript_.EB.B2.84.EC.A0.84.EA.B3.BC_ECMAScript_.ED.8C.90.EB.B3.B8_.EC.82.AC.EC.9D.B4.EC.9D.98_.EA.B4.80.EA.B3.84">JavaScript 버전과 ECMAScript 판본 사이의 관계</h4> -<p>Netscape는 ECMA와 밀접하게 작업하여 ECMAScript Specification(ECMA-262)를 만들었습니다. JavaScript 버전과 ECMAScript 판본(edition)들 사이의 관계가 아래 표에 설명되어 있습니다.</p> -<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript 버전</th> <th>ECMAScript 판본과의 관계</th> </tr> <tr> <td>JavaScript 1.1</td> <td>ECMA-262, 1판은 JavaScript 1.1에 기초합니다.</td> </tr> <tr> <td>JavaScript 1.2</td> <td>JavaScript 1.2가 발표됐을 때 ECMA-262가 아직 완성되지 않았습니다. 다음과 같은 이유때문에 JavaScript 1.2는 ECMA-262 1판과 완벽하게 호환되지 않습니다. <ul> <li>Netscape는 JavaScript 1.2에 몇 가지 기능을 추가했으나, ECMA-262에서 고려하지 못했습니다.</li> <li>ECMA-262는 두 가지 새 기능을 추가했습니다. 유니코드를 이용한 국제화, 모든 플랫폼에서의 동일한 동작. Date 개체 같은 JavaScript 1.2의 몇 가지 기능이 플랫폼에 의존적이었습니다.</li> </ul> </td> </tr> <tr> <td> <p>JavaScript 1.3</p> </td> <td> <p>JavaScript 1.3은 ECMA-262 1판과 완벽하게 호환됩니다.</p> <p>JavaScript 1.3은 ==와 !=연산자를 제외하고는 JavaScript 1.2의 추가적인 기능을 그대로 유지하면서 JavaScript 1.2가 ECMA-262와 어긋나던 점들을 해결했습니다. ==, != 연산자는 ECMA-262에 맞추기 위해 수정되었습니다.</p> </td> </tr> <tr> <td> <p>JavaScript 1.4</p> </td> <td> <p>JavaScript 1.4는 ECMA-262 1판과 완벽하게 호환됩니다.</p> <p>JavaScript 1.4가 발표되었을 때 ECMAScript 명세의 세 번째 버전이 아직 완성되지 않았습니다.</p> </td> </tr> <tr> <td>JavaScript 1.5</td> <td>JavaScript 1.5는 ECMA-262 3판과 완벽하게 호환됩니다.</td> </tr> </tbody> -</table> -<p><small><strong>표 1.2: JavaScript 버전과 ECMAScript 판본</strong></small><br> -<br> -참고: ECMA-262 2판은 1판에 편집상 사소한 변경과 버그 수정을 가한 판본입니다. 현재 ECMA의 TC39 워킹그룹에서 ECMAScript 4판을 작업하고 있습니다. 4판은 JavaScript 2.0과 대응될 것입니다.</p> -<p><a href="/ko/Core_JavaScript_1.5_Guide" title="ko/Core_JavaScript_1.5_Guide">JavaScript 기본 레퍼런스</a>에서 ECMAScript 호환 기능을 보여줍니다.</p> -<p>JavaScript는 항상 ECMAScript Specification에 포함되지 않은 기능들을 포함할 것입니다. JavaScript는 추가적인 기능을 제공하지만 ECMAScript와 호환됩니다.</p> -<h4 id="JavaScript_.EB.AC.B8.EC.84.9C_vs_ECMAScript_.EB.AA.85.EC.84.B8.EC.84.9C" name="JavaScript_.EB.AC.B8.EC.84.9C_vs_ECMAScript_.EB.AA.85.EC.84.B8.EC.84.9C">JavaScript 문서 vs ECMAScript 명세서</h4> -<p>ECMAScript 명세는 ECMAScript를 구현하는데 필요한 요구사항을 모아놓은 것입니다. 이것은 우리가 JavaScript의 한 기능이 다른 ECMAScript 구현에서도 지원될 것인지 결정하는데 유용합니다. ECMAScript에서 지원하는 기능만을 사용하는 JavaScript 코드를 작성할 계획이라면 ECMAScript 명세를 살펴볼 필요가 있을 것입니다.</p> -<p>ECMAScript 문서는 스크립트 프로그래머를 돕기위해 작성된 것이 아닙니다. 스크립트 작성에 대한 정보를 얻으려면 JavaScript 문서를 보십시오.</p> -<h4 id="JavaScript.EC.99.80_ECMAScript_.EC.9A.A9.EC.96.B4" name="JavaScript.EC.99.80_ECMAScript_.EC.9A.A9.EC.96.B4">JavaScript와 ECMAScript 용어</h4> -<p>ECMAScript 명세는 JavaScript 프로그래머에게는 친숙하지 않은 용어와 문법을 사용하여 작성되었습니다. 비록 ECMAScript의 언어 설명이 다르긴 하지만 언어는 똑같습니다. JavaScript는 ECMAScript 명세에서 설명하는 모든 기능을 지원합니다.</p> -<p>JavaScript 문서는 JavaScript 프로그래머에게 적당한 언어의 측면을 설명합니다. 예를 들면 이렇습니다.</p> -<ul> <li>전역 개체(Global Object)는 JavaScript 문서에서는 논의되지 않는데, 그것은 우리가 그 개체를 직접 사용할 일이 없기 때문입니다. 전역 개체에서 우리가 사용할 만한 메소드와 속성은 JavaScript 문서에서 논의되고 있기는 하지만 최상위(top-level) 함수와 속성이라고 부릅니다.</li> <li>JavaScript 문서에서 매개변수가 없는 <code>Number</code>와 <code>String</code> 개체 생성자는 논의되지 않고 있는데, 그것은 거의 사용할 일이 없기 때문입니다. <code>Number</code>의 인자없는 생성자는 +0을 반환하고, <code>String</code>의 인자없는 생성자는 ""(빈 문자열)을 반환합니다.</li> -</ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:About", "Core_JavaScript_1.5_Guide:Values") }}</p> -<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/JavaScript_Overview", "fr": "fr/Guide_JavaScript_1.5/Aper\u00e7u_de_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/JavaScript_Overview", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_JavaScriptu" } ) }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html deleted file mode 100644 index 0b40cb802d..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Objects and Properties -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties ---- -<h3 id=".EA.B0.9D.EC.B2.B4.EC.99.80_.EC.86.8D.EC.84.B1" name=".EA.B0.9D.EC.B2.B4.EC.99.80_.EC.86.8D.EC.84.B1"> 객체와 속성 </h3> -<p>자바스크립트 객체는 객체를 구성하는 속성을 가지고 있습니다. 속성에는 간단한 방법으로 접근할 수 있습니다.: -</p> -<pre>객체이름.속성이름 -</pre> -<p>객체 이름과 속성 이름 두 가지 모두에 대해 알기쉬운 예가 있습니다. 속성은 값을 지정하여 정의합니다. 예를 들어 <code>myCar</code>라는 객체가 있다면(객체가 이미 존재한다고 가정합니다.), <code>make</code>, <code>model</code>, <code>year</code>라는 속성에 다음과 같이 값을 지정할 수 있습니다. -</p> -<pre>myCar.make = "Ford"; -myCar.model = "Mustang"; -myCar.year = 1969; -</pre> -<p>배열은 한 가지 변수 이름으로 결합되어 있는 연속된 값의 집합입니다. 자바스크립트에서 속성과 배열은 밀접한 관련이 있습니다; 말하자면 그 두 가지는 같은 데이터 구조에 다른 인터페이스라는 뜻입니다. 예를 들면 <code>myCar</code> 객체에 다음과 같이 접근할 수도 있습니다: -</p> -<pre>myCar["make"] = "Ford"; -myCar["model"] = "Mustang"; -myCar["year"] = 1967; -</pre> -<p>이러한 배열의 종류는 <i>연관 배열</i>이라고 부릅니다. 왜냐하면 각각의 인덱스 요소가 문자열 값과 연관되어 있기 때문입니다. 이러한 방식에 대한 설명은 다음의 함수에 객체와 객체의 이름을 입력했을 때 객체의 속성을 표시해주는 다음과 같은 함수에서 알아볼 수 있습니다: -</p> -<pre>function show_props(obj, obj_name) { - var result = ""; - for (var i in obj) - result += obj_name + "." + i + " = " + obj[i] + "\n"; - return result; -} -</pre> -<p>결과적으로 <code>call show_props(myCar, "myCar")</code>라는 함수 호출은 다음과 같은 값을 반환합니다: -</p> -<pre>myCar.make = Ford -myCar.model = Mustang -myCar.year = 1967 -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Functions:escape_and_unescape_Functions", "Core_JavaScript_1.5_Guide:Creating_New_Objects") }} -</p>{{ languages( { "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_i_w\u0142a\u015bciwo\u015bci" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html deleted file mode 100644 index e76f0b7653..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Assignment Operators -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators ---- -<h3 id=".ED.95.A0.EB.8B.B9_.EC.97.B0.EC.82.B0.EC.9E.90" name=".ED.95.A0.EB.8B.B9_.EC.97.B0.EC.82.B0.EC.9E.90">할당 연산자</h3> -<p>할당 연산자는 왼쪽 피연산자에 오른쪽 피연산자의 값을 할당합니다. 가장 기본적인 할당 연산자에는 등호(=)가 있는데, 왼쪽 피연산자의 값을 오른쪽 연산자에 할당합니다. 즉, x = y 라고 하면 y의 값이 x에 할당되는 것입니다.</p> -<p>다른 할당 연산자는 다음 표에서 보듯이 표준연산을 약식으로 쓰는 것입니다.</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>약식 연산자</th> - <th>의미</th> - </tr> - <tr> - <td>x += y</td> - <td>x = x + y</td> - </tr> - <tr> - <td>x -= y</td> - <td>x = x - y</td> - </tr> - <tr> - <td>x *= y</td> - <td>x = x * y</td> - </tr> - <tr> - <td>x /= y</td> - <td>x = x / y</td> - </tr> - <tr> - <td>x %= y</td> - <td>x = x % y</td> - </tr> - <tr> - <td>x <<= y</td> - <td>x = x << y</td> - </tr> - <tr> - <td>x >>= y</td> - <td>x = x >> y</td> - </tr> - <tr> - <td>x >>>= y</td> - <td>x = x >>> y</td> - </tr> - <tr> - <td>x &= y</td> - <td>x = x & y</td> - </tr> - <tr> - <td>x ^= y</td> - <td>x = x ^ y</td> - </tr> - <tr> - <td>x |= y</td> - <td>x = x | y</td> - </tr> - </tbody> -</table> -<p><small><b>표: 할당 연산자</b></small></p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators", "Core_JavaScript_1.5_Guide:Operators:Comparison_Operators") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html deleted file mode 100644 index a0c66afea2..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Operators -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators ---- -<h3 id=".EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.97.B0.EC.82.B0.EC.9E.90"> 연산자 </h3> -<p>JavaScript에는 다음과 같은 연산자 타입이 있습니다. 이 섹션은 연산자에 대해 기술하고 연산자 우선순위에 대한 정보를 제공합니다. -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators">할당 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators">비교 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">산술 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">비트 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">논리 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/String_Operators">문자열 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators">특수 연산자</a> -</li></ul> -<p>JavaScript는 이항연산자와 단항연산자를 모두 사용할 수 있습니다. 이항연산자는 두개의 피연산자(operand)를 가지며, 하나의 피연산자는 연산자 앞에 나머지 하나는 뒤에 위치합니다: -</p> -<pre>operand1 operator operand2 -</pre> -<p>예를 들자면, <code>3+4</code> 혹은 <code>x*y</code>와 같은 것입니다. -</p><p>단항연산자는 연산자 앞 혹은 뒤쪽에 하나의 피연산자만 있으면 됩니다: -</p> -<pre>operator operand -</pre> -<p>혹은 -</p> -<pre>operand operator -</pre> -<p>예를 들자면, <code>x++</code> 혹은 <code>++x</code>와 같은 것입니다. -</p><p>덧붙여, JavaScript는 한개의 삼항연산자, 조건 연산자를 가지고 있습니다. 삼항 연산자는 세개의 피연산자가 필요합니다. -</p> -<h4 id=".EC.97.B0.EC.82.B0.EC.9E.90_.EC.9A.B0.EC.84.A0.EC.88.9C.EC.9C.84" name=".EC.97.B0.EC.82.B0.EC.9E.90_.EC.9A.B0.EC.84.A0.EC.88.9C.EC.9C.84"> 연산자 우선순위 </h4> -<p><small><i><a>관련된 논의</a>에 따라서, 아래의 표는 우선순위 순으로 <b>내림차순</b> 정렬되었습니다.</i></small> -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>연산자 타입</th> -<th>사용하는 연산자</th> -</tr> -<tr> -<td>멤버 </td> -<td>. []</td> -</tr> -<tr> -<td>호출 / 인스턴스 생성 </td> -<td>() new</td> -</tr> -<tr> -<td>부정/증감 </td> -<td>! ~ - + ++ -- typeof void delete</td> -</tr> -<tr> -<td>곱하기/나누기 </td> -<td>* / %</td> -</tr> -<tr> -<td>더하기/빼기 </td> -<td>+ -</td> -</tr> -<tr> -<td>비트 이동 </td> -<td><< >> >>></td> -</tr> -<tr> -<td>관계 </td> -<td>< <= > >= in instanceof</td> -</tr> -<tr> -<td>같음 </td> -<td>== != === !==</td> -</tr> -<tr> -<td>비트연산-and </td> -<td>&</td> -</tr> -<tr> -<td>비트연산-xor </td> -<td>^</td> -</tr> -<tr> -<td>비트연산-or </td> -<td>|</td> -</tr> -<tr> -<td>논리연산-and </td> -<td>&&</td> -</tr> -<tr> -<td>논리연산-or </td> -<td>||</td> -</tr> -<tr> -<td>조건 </td> -<td>?:</td> -</tr> -<tr> -<td>할당 </td> -<td>= += -= *= /= %= <<= >>= >>>= &= ^= |=</td> -</tr> -<tr> -<td>컴마</td> -<td>,</td> -</tr> -</tbody></table> -<p><small><b>표: 연산자 우선순위</b></small> -</p><p>이 표의 보다 자세한 버전은 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Operator_Precedence#Table">레퍼런스 섹션</a>에 있는 각 연산자별 상세한 추가 설명 링크를 참고하세요. -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Expressions", "Core_JavaScript_1.5_Guide:Operators:Assignment_Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html deleted file mode 100644 index 5d7d2e2892..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Array Object -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object ---- -<h3 id="Array_.EA.B0.9C.EC.B2.B4" name="Array_.EA.B0.9C.EC.B2.B4">Array 개체</h3> -<p>JavaScript에는 명시적인 배열 자료형이 없습니다. 하지만 배열을 다루기 위해서 <code>Array</code> 개체와 그 개체의 메소드를 이용할 수 있습니다. <code>Array</code> 개체에는 다양한 방법으로 배열을 다루기 위한 메소드들이 있는데, 배열을 합치거나, 순서를 뒤집거나, 정렬하는 등의 작업을 할 수 있습니다. 배열 길이를 알 수 있는 속성과 정규 표현식에 사용할 수 있는 속성들이 있습니다. - <i> - 배열</i> - 은 이름이나 색인으로 참조할 수 있는 값들을 모아놓은, 값의 순서가 유지되는 집합입니다. 예를 들어, 우리는 고용 번호로 색인된 고용인의 이름을 담고 있는 <code>emp</code>라는 배열을 만들 수 있습니다. 이 때 <code>emp{{ mediawiki.external(1) }}</code>는 1번 고용인, <code>emp{{ mediawiki.external(2) }}</code> 2번 고용인이 되는 것입니다.</p> -<p> </p> -<h4 id=".EB.B0.B0.EC.97.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.B0.B0.EC.97.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">배열 만들기</h4> -<p><code>Array</code> 개체는 이렇게 만들 수 있습니다.</p> -<pre>1. arrayObjectName = new Array(element0, element1, ..., elementN) -2. arrayObjectName = new Array(arrayLength) -</pre> -<p><code>arrayObjectName</code>은 새 개체의 이름이거나 존재하는 다른 개체의 속성 이름입니다. <code>Array</code> 개체의 속성이나 메소드를 이용할 때는 arrayObjectName은 존재하는 <code>Array</code> 개체 이름이거나 존재하는 다른 개체의 속성입니다.</p> -<p><code>element0, element1, ..., elementN</code>는 배열의 원소(element)가 될 값들입니다. 이런 식으로 지정하면, 나열한 값들을 원소로 가지고, 길이는 값의 개수인 배열이 만들어집니다.</p> -<p><code>arrayLength</code>는 배열의 초기 길이입니다. 다음 코드는 원소 다섯 개를 가지는 배열을 만듭니다.</p> -<pre>billingMethod = new Array(5) -</pre> -<p>배열 상수값 또한 <code>Array</code> 개체입니다. 예를 들어, 다음과 같은 상수값은 <code>Array</code> 개체입니다. 배열 상수값에 대한 자세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Literals#.EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">배열 상수값</a>을 보시기 바랍니다.</p> -<pre>coffees = ["French Roast", "Columbian", "Kona"] -</pre> -<h4 id=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.9B.90.EC.86.8C_.EB.84.A3.EA.B8.B0" name=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.9B.90.EC.86.8C_.EB.84.A3.EA.B8.B0">배열에 원소 넣기</h4> -<p>원소에 값을 할당함으로써 배열에 값을 넣을 수 있습니다.</p> -<pre>emp[1] = "Casey Jones" -emp[2] = "Phil Lesh" -emp[3] = "August West" -</pre> -<p>배열을 만들 때 값을 넣을 수도 있습니다.</p> -<pre>myArray = new Array("Hello", myVar, 3.14159) -</pre> -<h4 id=".EB.B0.B0.EC.97.B4_.EC.9B.90.EC.86.8C_.EC.B0.B8.EC.A1.B0.ED.95.98.EA.B8.B0" name=".EB.B0.B0.EC.97.B4_.EC.9B.90.EC.86.8C_.EC.B0.B8.EC.A1.B0.ED.95.98.EA.B8.B0">배열 원소 참조하기</h4> -<p>배열 원소의 순서를 나타내는 숫자로 원소를 참조할 수 있습니다. 예를 들어 다음과 같은 배열을 만들었다고 해봅시다.</p> -<pre>myArray = new Array("Wind","Rain","Fire") -</pre> -<p>그러면 첫 번째 원소는 <code>myArray{{ mediawiki.external(0) }}</code>으로 참조할 수 있고, 두 번째 원소는 <code>myArray{{ mediawiki.external(1) }}</code>로 참조할 수 있습니다.</p> -<p>원소의 색인은 영(0)부터 시작하지만 배열 길이(예를 들면 <code>myArray.length</code>)는 배열의 원소 개수를 나타냅니다.</p> -<p> </p> -<h4 id="Array_.EA.B0.9C.EC.B2.B4.EC.9D.98_.EB.A9.94.EC.86.8C.EB.93.9C" name="Array_.EA.B0.9C.EC.B2.B4.EC.9D.98_.EB.A9.94.EC.86.8C.EB.93.9C">Array 개체의 메소드</h4> -<p><code>Array</code> 개체는 다음과 같은 메소드들을 가지고 있습니다.</p> -<ul> - <li><code>concat</code> 메소드는 두 배열을 합쳐서 새 배열 하나를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1","2","3") -myArray = myArray.concat("a", "b", "c"); // myArray는 ["1", "2", "3", "a", "b", "c"]이 되었습니다. -</pre> -<ul> - <li><code>join(deliminator = ",")</code> 메소드는 배열의 모든 원소를 문자열로 바꿔서 하나의 문자열을 만들어줍니다.</li> -</ul> -<pre>myArray = new Array("Wind","Rain","Fire") -list = myArray.join(" - "); // list는 "Wind - Rain - Fire"입니다. -</pre> -<ul> - <li><code>pop</code> 메소드는 배열의 마지막 원소를 배열에서 제거하고 그 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1", "2", "3"); -last=myArray.pop(); // MyArray는 ["1", "2"], last = "3"이 되었습니다. -</pre> -<ul> - <li><code>push</code> 메소드는 하나 또는 그 이상의 원소를 배열 끝에 추가하고, 추가된 마지막 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1", "2"); -myArray.push("3"); // MyArray는 ["1", "2", "3"]이 되었습니다. -</pre> -<ul> - <li><code>reverse</code> 메소드는 원소의 순서를 뒤집어서 첫 번째 원소가 마지막 원소가 되고, 마지막 원소가 첫 번째 원소가 되도록 합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3"); -myArray.reverse(); // myArray = [ "3", "2", "1" ]이 되었습니다. -</pre> -<ul> - <li><code>shift</code> 메소드는 첫 번째 요소를 배열에서 제거하고, 그 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3"); -first=myArray.shift(); // MyArray는 ["2", "3"], first는 "1"이 되었습니다. -</pre> -<ul> - <li><code>slice (start_index, upto_index)</code> 메소드는 배열의 일부분을 추출하여 새 배열을 반환합니다.</li> -</ul> -<pre>myArray = new Array ("a", "b", "c", "d", "e"); -myArray = myArray.slice(1,4); //색인 1부터 색인 4 바로 앞까지의 원소를 추출해서 [ "b", "c", "d" ]를 반환합니다. -</pre> -<ul> - <li><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code> 메소드는 배열에 원소를 추가하거나 배열에서 원소를 제거합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3", "4", "5"); -myArray.splice(1,3,"a","b","c", "d"); // MyArray는 ["1", "a", "b", "c", "d", "5"]가 되었습니다. -// 이 코드는 색인 1(즉 "2")부터 원소 세 개를 제거하고, 그 자리에 원소를 추가합니다. -</pre> -<ul> - <li><code>sort</code> 메소드는 원소를 정렬합니다.</li> -</ul> -<pre>myArray = new Array("Wind","Rain","Fire") -myArray.sort(); // 배열을 정렬했으므로 myArrray = [ "Fire", "Rain", "Wind" ]가 되었습니다. -</pre> -<p><code>sort</code> 메소드에 배열을 어떻게 정렬할지 결정하는 콜백 함수를 전해줄 수 있습니다. 그 함수는 두 값을 비교해서 다음 셋 중 하나를 반환해야 합니다.</p> -<ul> - <li>정렬할 때 a가 b보다 작다면 -1(또는 임의의 음수)를 반환</li> - <li>정렬할 때 a가 b보다 크다면 1(또는 임의의 양수)를 반환</li> - <li>a와 b가 같으면 0을 반환</li> -</ul> -<p>예를 들어 다음 코드는 원소의 마지막 글자를 기준으로 배열을 정렬합니다.</p> -<pre>var sortFn = function(a,b){ - if (a[a.length - 1] < b[b.length - 1]) return -1; - if (a[a.length - 1] > b[b.length - 1]) return 1; - if (a[a.length - 1] == b[b.length - 1]) return 0; - } -myArray.sort(sortFn); // 배열을 정렬했으므로 myArray = ["Wind","Fire","Rain"]가 되었습니다. -</pre> -<ul> - <li><code>unshift</code> 메소드는 하나 또는 그 이상의 원소를 배열 앞에 추가하고 배열의 새 길이를 반환합니다.</li> -</ul> -<h4 id="2.EC.B0.A8.EC.9B.90_.EB.B0.B0.EC.97.B4" name="2.EC.B0.A8.EC.9B.90_.EB.B0.B0.EC.97.B4">2차원 배열</h4> -<p>다음 코드는 2차원 배열을 만듭니다.</p> -<pre>a = new Array(4) -for (i=0; i < 4; i++) { - a[i] = new Array(4) - for (j=0; j < 4; j++) { - a[i][j] = "["+i+","+j+"]" - } -} -</pre> -<p>바로 위 코드는 이런 배열을 만들어냅니다.</p> -<pre>Row 0:[0,0][0,1][0,2][0,3] -Row 1:[1,0][1,1][1,2][1,3] -Row 2:[2,0][2,1][2,2][2,3] -Row 3:[3,0][3,1][3,2][3,3] -</pre> -<h4 id=".EB.B0.B0.EC.97.B4.EA.B3.BC_.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D" name=".EB.B0.B0.EC.97.B4.EA.B3.BC_.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D">배열과 정규 표현식</h4> -<p>배열이 정규 표현식과 문자열을 매치한 결과로 생성되었을 때, 그 배열은 매치에 대한 정보를 제공하는 속성과 원소를 포함하고 있습니다. <code>RegExp.exec</code>, <code>String.match</code>, <code>String.split</code>의 반환 값은 배열입니다. 정규 표현식과 관련된 배열 사용에 대한 정보를 얻으려면 4장 <a href="ko/Core_JavaScript_1.5_Guide#.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D">정규 표현식</a>을 보십시오.</p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Boolean_Object") }}</p> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html deleted file mode 100644 index 7030f4daf3..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: BigInt.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype -tags: - - BigInt - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>BigInt.prototype</code></strong> 속성은 {{jsxref("BigInt")}} 생성자의 프로토타입을 나타냅니다.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="설명">설명</h2> - -<p>모든 {{jsxref("BigInt")}} 인스턴스는 <code>BigInt.prototype</code>을 상속합니다. <code>BigInt</code> 생성자의 프로토타입 객체를 변형해 모든 <code>BigInt</code> 인스턴스에 영향을 줄 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>BigInt.prototype.constructor</code></dt> - <dd>이 객체의 인스턴스를 만들 때 사용한 함수를 반환합니다. 기본값은 {{jsxref("BigInt")}} 객체입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt><code>BigInt.prototype.toLocaleString()</code></dt> - <dd>BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd> - <dt><code>BigInt.prototype.toString()</code></dt> - <dd><code>BigInt</code>의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> - <dt><code>BigInt.prototype.valueOf()</code></dt> - <dd><code>BigInt</code> 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - </tr> - <tr> - <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype">BigInt.prototype</a></td> - <td>Stage 3</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html deleted file mode 100644 index c3bc792458..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Map.prototype[@@toStringTag] -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag ---- -<div>{{JSRef}}</div> - -<p><strong><code>Map[@@toStringTag]</code></strong> 프로퍼티의 초기값은 "Map"입니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}</div> - - - -<div>{{js_property_attributes(0,0,1)}}</div> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox">Map[Symbol.toStringTag]</pre> - -<h2 id="예제">예제</h2> - -<pre class="brush:js">Object.prototype.toString.call(new Map()) // "[object Map]" -</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('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.@@toStringTag")}}</p> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/clear/index.html deleted file mode 100644 index 292c68789c..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -<div>{{JSRef}}</div> - -<p><code><strong>clear()</strong></code> 메서드는 <code>Map</code> 객체의 모든 요소를 제거합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><em>myMap</em>.clear(); -</pre> - -<h2 id="예제">예제</h2> - -<h3 id="clear()_사용하기"><code>clear()</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', 'baz'); -myMap.set(1, 'foo'); - -myMap.size; // 2 -myMap.has('bar'); // true - -myMap.clear(); - -myMap.size; // 0 -myMap.has('bar') // false -</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('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.clear")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/delete/index.html deleted file mode 100644 index 0db3f71805..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -<div>{{JSRef}}</div> - -<p><code><strong>delete()</strong></code> 메서드는 <code>Map</code> 객체에서 특정 요소를 제거합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">myMap.delete(<em>key</em>);</pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>key</code></dt> - <dd><code>Map</code> 객체에서 제거할 요소의 키.</dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>요소가 <code>Map</code> 객체에 존재해서 제거했을 경우 <code>true</code>, 존재하지 않았으면 <code>false</code>.</p> - -<h2 id="예제">예제</h2> - -<h3 id="delete()_사용하기"><code>delete()</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', 'foo'); - -myMap.delete('bar'); // Returns true. Successfully removed. -myMap.has('bar'); // Returns false. The "bar" element is no longer present. -</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('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.delete")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/entries/index.html deleted file mode 100644 index 202115e2d6..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -<div>{{JSRef}}</div> - -<p><code><strong>entries()</strong></code> 메서드는 <code>Map</code> 객체의 각 요소에 해당하는 <code>[키, 값]</code> 쌍을 <code>Map</code>에 등록한 순서대로 포함한 새로운 <strong><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong> 객체를 반환합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre> - -<h3 id="반환_값">반환 값</h3> - -<p>A new {{jsxref("Map")}} iterator object.</p> - -<h2 id="예제">예제</h2> - -<h3 id="entries()_사용하기"><code>entries()</code> 사용하기</h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set('0', 'foo'); -myMap.set(1, 'bar'); -myMap.set({}, 'baz'); - -var mapIter = myMap.entries(); - -console.log(mapIter.next().value); // ["0", "foo"] -console.log(mapIter.next().value); // [1, "bar"] -console.log(mapIter.next().value); // [Object, "baz"] -</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('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.entries")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/foreach/index.html deleted file mode 100644 index b26b7c7d37..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -<div>{{JSRef}}</div> - -<p><code><strong>forEach()</strong></code><strong> </strong>메소드는 <code>Map</code> 오브젝트 내의 key/value 쌍의 개수 만큼 주어진 함수를 순서대로 실행합니다. </p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div> - - - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> - -<h3 id="파라미터">파라미터</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>각각의 요소를 처리하기 위한 함수.</dd> - <dt><code>thisArg</code></dt> - <dd> <code>callback</code> 을 실행할때 <code>this</code> 로 사용되는 값.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="설명">설명</h2> - -<p><code>forEach</code> 메서드는 map의 각각의 키마다 주어진 <code>callback</code> 함수를 실행합니다. 삭제된 키에대해서는 호출되지 않습니다. 그러나, 값이 존재하지만 <code>undefined</code> 인 값에 대해서는 실행됩니다.</p> - -<p><code>callback</code> 은 <strong>3가지 인수</strong>로 호출됩니다.</p> - -<ul> - <li><strong>요소의 value</strong></li> - <li><strong>요소의 key</strong></li> - <li><strong><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">사용될 </span></font>Map</code> 객체</strong></li> -</ul> - -<p><code>thisArg</code> 파라미터가 <code>forEach</code> 에 제공되면, <code>this</code> 값으로 사용하기 위해 호출될때 <code>callback</code> 으로 넘겨집니다. 그렇지 않으면 <code>undefined</code> 값이 <code>this</code> 값으로 넘겨질 것입니다. 궁극적으로 <code>callback</code> 으로 보여지게 된 <code>this</code> 값은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">함수에 의해 보여지는 this 를 결정하기 위한 일반적인 규칙에 따라 결정됩니다.</a></p> - -<p>각각의 value는 한번씩 사용됩니다. 다만 <code>forEach</code> 가 끝나기 전에 value가 삭제되거나 재추가 된 경우는 예외입니다. <code>callback</code> 은 사용되기 전에 삭제된 value에 의해 호출되지 않습니다. <code>forEach</code> 가 끝나기 전에 새롭게 추가된 value가 사용 됩니다.</p> - -<p><code>forEach</code> 는 <code>Map</code> 오브젝트 내에 있는 각각의 요소마다 <code>callback</code> 함수를 실행합니다; 깂을 반환하지 않습니다.</p> - -<h2 id="예제">예제</h2> - -<h3 id="Map_오브젝트의_내용을_출력"><code>Map</code> 오브젝트의 내용을 출력</h3> - -<p>아래의 코드는 <code>Map</code> 오브젝트 내의 각각 요소들을 행별로 출력합니다:</p> - -<pre class="brush:js">function logMapElements(value, key, map) { - console.log(`map.get('${key}') = ${value}`); -} -new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements); -// logs: -// "map.get('foo') = 3" -// "map.get('bar') = [object Object]" -// "map.get('baz') = undefined" -</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('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Map.forEach")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Set.prototype.forEach()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/get/index.html deleted file mode 100644 index 7fbd5c19f3..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get ---- -<div>{{JSRef}}</div> - -<p><code><strong>get()</strong></code> 메서드는 <code>Map</code> 객체에서 지정한 요소를 회수합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><em>myMap</em>.get(<em>key</em>);</pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>key</code></dt> - <dd><code>Map</code> 객체에서 회수할 요소의 키.</dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>주어진 키와 연결된 요소. 그런 요소가 없으면 {{jsxref("undefined")}}.</p> - -<h2 id="예제">예제</h2> - -<h3 id="get_사용하기"><code>get</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', 'foo'); - -myMap.get('bar'); // "foo" 반환. -myMap.get('baz'); // undefined 반환. -</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('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.get")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/has/index.html deleted file mode 100644 index 8f3d1c475e..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has ---- -<div>{{JSRef}}</div> - -<p><code><strong>has()</strong></code> 메서드는 주어진 키를 가진 요소가 <code>Map</code>에 존재하는지를 반환합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.has(<em>key</em>);</code></pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>key</code></dt> - <dd>존재 여부를 판별할 키값.</dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>주어진 키를 가진 요소가 있으면 <code>true</code>, 아니면 <code>false</code>.</p> - -<h2 id="예제">예제</h2> - -<h3 id="has()_사용하기"><code>has()</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', "foo"); - -myMap.has('bar'); // returns true -myMap.has('baz'); // returns false -</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('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.has")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 32a5de42f7..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Map</code> </strong>객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다.</span> 아무 값(객체와 {{Glossary("Primitive", "원시 값")}})이라도 키와 값으로 사용할 수 있습니다.</p> - -<h2 id="설명">설명</h2> - -<p><code>Map</code> 객체는 요소의 삽입 순서대로 원소를 순회합니다. {{jsxref("Statements/for...of", "for...of")}} 반복문은 각 순회에서 <code>[key, value]</code>로 이루어진 배열을 반환합니다.</p> - -<h3 id="키_동일성">키 동일성</h3> - -<ul> - <li>키 동일성은 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness#등가0_같음"><code>sameValueZero</code></a> 알고리즘에 기반합니다.</li> - <li><code>NaN !== NaN</code>이지만, 그럼에도 <code>NaN</code>은 <code>NaN</code>과 일치한다고 간주하며, 다른 모든 값은 <code>===</code> 연산자의 결과를 따릅니다.</li> - <li>현 ECMAScript 명세는 <code>-0</code>과 <code>+0</code>을 같은 값으로 처리하지만 초기 명세에서는 그렇지 않았습니다. {{anch("브라우저 호환성")}}의 "<em>Key equality for -0 and 0</em>"을 참고하세요.</li> -</ul> - -<h3 id="jsxrefObject와_Map_비교">{{jsxref("Object")}}와 <code>Map</code> 비교</h3> - -<p>{{jsxref("Object")}}는 값에 키를 할당할 수 있고, 그 키로 값을 얻을 수 있고, 키를 삭제할 수 있으며 어떤 키에 값이 존재하는지 확인할 수 있다는 점에서 <code>Map</code>과 유사합니다. 이런 이유에 더해, 이전에는 내장된 대체제가 없었기 때문에, <code>Object</code>를 <code>Map</code> 대신 사용하곤 했습니다.</p> - -<p>그러나 어떤 상황에선, <code>Map</code>을 선호해야 할 몇 가지 중요한 차이점이 있습니다.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row"></th> - <th scope="col"><code>Map</code></th> - <th scope="col"><code>Object</code></th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">의도치 않은 키</th> - <td><code>Map</code>은 명시적으로 제공한 키 외에는 어떤 키도 가지지 않습니다.</td> - <td> - <p><code>Object</code>는 프로토타입을 가지므로 기본 키가 존재할 수 있습니다. 주의하지 않으면 직접 제공한 키와 충돌할 수도 있습니다.</p> - - <div class="blockIndicator note"> - <p><strong>참고:</strong> ES5부터, 프로토타입으로 인한 키 충돌은 {{jsxref("Object.create", "Object.create(null)")}}로 해결할 수 있지만, 실제로 쓰이는 경우는 적습니다.</p> - </div> - </td> - </tr> - <tr> - <th scope="row">키 자료형</th> - <td><code>Map</code>의 키는 함수, 객체 등을 포함한 모든 값이 가능합니다.</td> - <td><code>Object</code>의 키는 반드시 {{jsxref("String")}} 또는 {{jsxref("Symbol")}}이어야 합니다.</td> - </tr> - <tr> - <th scope="row">키 순서</th> - <td> - <p><code>Map</code>의 키는 정렬됩니다. 따라서 <code>Map</code>의 순회는 삽입순으로 이뤄집니다.</p> - </td> - <td> - <p><code>Object</code>의 키는 정렬되지 않습니다.</p> - - <div class="blockIndicator note"> - <p><strong>참고:</strong> ECMAScript 201 이후로, 객체도 문자열과 <code>Symbol</code> 키의 생성 순서를 유지합니다. ECMEScript 2015 명세를 준수하는 JavaScript 엔진에서 문자열 키만 가진 객체를 순회하면 삽입 순을 따라갑니다.</p> - </div> - </td> - </tr> - <tr> - <th scope="row">크기</th> - <td><code>Map</code>의 항목 수는 {{jsxref("Map.prototype.size", "size")}} 속성을 통해 쉽게 알아낼 수 있습니다.</td> - <td><code>Object</code>의 항목 수는 직접 알아내야 합니다.</td> - </tr> - <tr> - <th scope="row">순회</th> - <td><code>Map</code>은 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">순회 가능</a>하므로, 바로 순회할 수 있습니다.</td> - <td><code>Object</code>를 순회하려면 먼저 모든 키를 알아낸 후, 그 키의 배열을 순회해야 합니다.</td> - </tr> - <tr> - <th scope="row">성능</th> - <td>잦은 키-값 쌍의 추가와 제거에서 더 좋은 성능을 보입니다.</td> - <td>잦은 키-값 쌍의 추가와 제거를 위한 최적화가 없습니다.</td> - </tr> - </tbody> -</table> - -<h2 id="생성자">생성자</h2> - -<dl> - <dt>{{jsxref("Map.Map", "Map()")}}</dt> - <dd>새로운 <code>Map</code> 객체를 생성합니다.</dd> -</dl> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Map.length</code></dt> - <dd>값이 0인 속성입니다.<br> - 요소의 수는 {{jsxref("Map.prototype.size")}}로 알아낼 수 있습니다.</dd> - <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> - <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd> - <dt>{{jsxref("Map.prototype")}}</dt> - <dd><code>Map</code> 생성자의 프로토타입을 나타냅니다. 모든 <code>Map</code> 인스턴스에 속성을 추가할 수 있습니다.</dd> -</dl> - -<h2 id="Map_인스턴스"><code>Map</code> 인스턴스</h2> - -<p>모든 <code>Map</code> 인스턴스는 {{jsxref("Map.prototype")}}을 상속합니다.</p> - -<h3 id="속성_2">속성</h3> - -<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> - -<h3 id="메서드">메서드</h3> - -<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> - -<h2 id="예제">예제</h2> - -<h3 id="Map_객체_사용하기"><code>Map</code> 객체 사용하기</h3> - -<pre class="brush: js">let myMap = new Map() - -let keyString = '문자열' -let keyObj = {} -let keyFunc = function() {} - -// 값 설정 -myMap.set(keyString, "'문자열'과 관련된 값") -myMap.set(keyObj, 'keyObj와 관련된 값') -myMap.set(keyFunc, 'keyFunc와 관련된 값') - -myMap.size // 3 - -// getting the values -myMap.get(keyString) // "'문자열'과 관련된 값" -myMap.get(keyObj) // "keyObj와 관련된 값" -myMap.get(keyFunc) // "keyFunc와 관련된 값" - -myMap.get('문자열') // "'문자열'과 관련된 값" - // keyString === '문자열'이기 때문 -myMap.get({}) // undefined, keyObj !== {} -myMap.get(function() {}) // undefined, keyFunc !== function () {}</pre> - -<h3 id="Map의_키로_NaN_사용하기"><code>Map</code>의 키로 <code>NaN</code> 사용하기</h3> - -<p>{{jsxref("NaN")}}도 키로서 사용할 수 있습니다. 모든 <code>NaN</code>은 자기 자신과 동일하지 않지만(<code>NaN !== NaN</code>), <code>NaN</code>을 서로 구분할 수도 없기 때문에 아래 예제도 잘 동작합니다.</p> - -<pre class="brush: js">let myMap = new Map() -myMap.set(NaN, 'not a number') - -myMap.get(NaN) -// "not a number" - -let otherNaN = Number('foo') -myMap.get(otherNaN) -// "not a number"</pre> - -<h3 id="for..of로_Map_순회하기"><code>for..of</code><font face="Open Sans, arial, sans-serif">로 </font><code>Map</code> 순회하기</h3> - -<p><code>Map</code>은 <code>for..of</code> 반복문을 사용해 순회할 수 있습니다.</p> - -<pre class="brush: js">let myMap = new Map() -myMap.set(0, 'zero') -myMap.set(1, 'one') - -for (let [key, value] of myMap) { - console.log(key + ' = ' + value) -} -// 0 = zero -// 1 = one - -for (let key of myMap.keys()) { - console.log(key) -} -// 0 -// 1 - -for (let value of myMap.values()) { - console.log(value) -} -// zero -// one - -for (let [key, value] of myMap.entries()) { - console.log(key + ' = ' + value) -} -// 0 = zero -// 1 = one</pre> - -<h3 id="forEach로_Map_순회하기"><code>forEach()</code>로 <code>Map</code> 순회하기</h3> - -<p><code>Map</code>은 {{jsxref("Map.prototype.forEach", "forEach()")}} 메서드로 순회할 수 있습니다.</p> - -<pre class="brush: js">myMap.forEach(function(value, key) { - console.log(key + ' = ' + value) -}) -// 0 = zero -// 1 = one</pre> - -<h3 id="Array_객체와의_관계"><code>Array</code> 객체와의 관계</h3> - -<pre class="brush: js">let kvArray = [['key1', 'value1'], ['key2', 'value2']] - -// Use the regular Map constructor to transform a 2D key-value Array into a map -let myMap = new Map(kvArray) - -myMap.get('key1') // returns "value1" - -// Use Array.from() to transform a map into a 2D key-value Array -console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray - -// A succinct way to do the same, using the spread syntax -console.log([...myMap]) - -// Or use the keys() or values() iterators, and convert them to an array -console.log(Array.from(myMap.keys())) // ["key1", "key2"]</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.builtins.Map")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/map/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/map/index.html deleted file mode 100644 index 8a384863bd..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/map/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Map() 생성자 -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/Map -tags: - - Constructor - - JavaScript - - Map - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map/Map ---- -<div>{{JSRef}}</div> - -<p><strong><code>Map()</code> 생성자</strong>는 {{jsxref("Map")}} 객체를 생성합니다.</p> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">new Map([<var>iterable</var>])</pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code><var>iterable</var></code></dt> - <dd>요소가 키-값 쌍인, {{jsxref("Array")}} 또는 다른 순회 가능한 객체(예: <code>[[1, 'one'], [2, 'two']]</code>). 각 키-값 쌍은 새로운 <code>Map</code>에 포함됩니다.</dd> -</dl> - -<h2 id="예제">예제</h2> - -<pre class="brush: js">let myMap = new Map([ - [1, 'one'], - [2, 'two'], - [3, 'three'], -]) -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-constructor', 'Map constructor')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.Map")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/set/index.html deleted file mode 100644 index 8a8907a278..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set ---- -<div>{{JSRef}}</div> - -<p><code><strong>set()</strong></code> 메서드는 Map 객체에서 주어진 키를 가진 요소를 추가하고, 키의 요소가 이미 있다면 대체합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.set(<em>key</em>, <em>value</em>);</code></pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>key</code></dt> - <dd><code>Map</code>에 추가하거나 변경할 요소의 키.</dd> - <dt><code>value</code></dt> - <dd><code>Map</code>에 추가하거나 변경할 요소의 값.</dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>호출한 <code>Map</code> 객체.</p> - -<h2 id="예제">예제</h2> - -<h3 id="set()_사용하기"><code>set()</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); - -// Add new elements to the map -myMap.set('bar', 'foo'); -myMap.set(1, 'foobar'); - -// Update an element in the map -myMap.set('bar', 'baz'); -</pre> - -<h3 id="set()_체이닝"><code>set()</code> 체이닝</h3> - -<p><code>set()</code>이 같은 <code>Map</code>을 반환하므로 메서드를 여러 번 연속해서 호출할 수 있습니다.</p> - -<pre class="brush: js">// Add new elements to the map with chaining. -myMap.set('bar', 'foo') - .set(1, 'foobar') - .set(2, 'baz'); -</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('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.set")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/size/index.html deleted file mode 100644 index acbb861542..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size ---- -<div>{{JSRef}}</div> - -<p><code><strong>size</strong></code> 접근자 프로퍼티는 {{jsxref("Map")}} 객체의 요소 갯수를 반환합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</div> - - - -<h2 id="설명">설명</h2> - -<p><code>size</code> 값은 얼마나 많은 엔트리를 <code>Map</code> 객체가 가지고 있는지를 표현합니다. <code>size</code> 를 설정할 수 있는 접근자 함수는 <code>undefined</code> 입니다. 당신은 이 프로퍼티를 변경할 수 없습니다.</p> - -<h2 id="예제">예제</h2> - -<h3 id="Using_size">Using <code>size</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set('a', 'alpha'); -myMap.set('b', 'beta'); -myMap.set('g', 'gamma'); - -myMap.size // 3 -</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('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.size")}}</p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/ko/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 1202a44bff..0000000000 --- a/files/ko/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 파이프 연산자 -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -tags: - - Experimental - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> - -<p><span class="seoSummary"><strong>파이프 연산자</strong>(<code>|></code>)는 실험적 기능(stage 1)으로, 표현식의 값을 함수에 전달합니다. 파이프 연산자를 활용하면 중첩 함수 호출을 좀 더 읽기 좋은 형식으로 작성할 수 있습니다.</span> 결과물은 문법적 설탕<sup>syntactic sugar</sup>으로, 하나의 인수를 제공하는 함수 호출은 다음 코드처럼 쓸 수 있습니다.</p> - -<pre class="brush: js">let url = "%21" |> decodeURI;</pre> - -<p>전통적인 구문에서는 아래처럼 호출합니다.</p> - -<pre class="brush: js">let url = decodeURI("%21"); -</pre> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><em>expression</em> |> <em>function</em> -</pre> - -<p>지정한 <code>expression</code>의 값이 <code>function</code>의 유일한 매개변수로 전달됩니다.</p> - -<h2 id="예제">예제</h2> - -<h3 id="함수_체이닝">함수 체이닝</h3> - -<p>파이프 연산자를 사용해, 여러 번 중첩된 함수 호출을 읽기 편한 형태로 바꿀 수 있습니다.</p> - -<pre class="brush: js">const double = (n) => n * 2; -const increment = (n) => n + 1; - -// 파이프 연산자 없이 -double(increment(double(double(5)))); // 42 - -// 파이프 연산자 사용 -5 |> double |> double |> increment |> double; // 42 -</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><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Pipeline operator draft</a></td> - <td>Stage 1</td> - <td>Not part of the ECMAScript specification yet.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("javascript.operators.pipeline")}}</p> -</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> - <li><a href="https://github.com/tc39/proposals">TC39 제안서</a></li> -</ul> diff --git a/files/ko/orphaned/web/reference/api/index.html b/files/ko/orphaned/web/reference/api/index.html deleted file mode 100644 index 4800908512..0000000000 --- a/files/ko/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Web API 설명집 -slug: orphaned/Web/Reference/API -tags: - - API - - 대문 - - 웹 - - 편람 -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -<p><span class="seoSummary">여러분이 알고 있는 웹에는 여러 유용한 작업을 수행할 수 있는 다양한 API가 제공됩니다. 이러한 API는 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 {{domxref("window")}}나 {{domxref("element")}}에 대한 간단한 작업에서부터 <a href="/ko/docs/Web/WebGL">WebGL</a>이나 <a href="/ko/docs/Web_Audio_API">Web Audio</a>와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능합니다.</span></p> - -<p>모든 API에 대한 각각의 인터페이스는 <a href="/ko/docs/Web/API">색인</a>에 열거돼 있습니다.</p> - -<p>또한 이벤트 레퍼런스에 <a href="/ko/docs/Web/Reference/Events">이용가능한 모든 이벤트 목록</a>도 있습니다.</p> - -<div class="cleared topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/ko/docs/DOM">문서 객체 모델(Document Object Model)</a></dt> - <dd>DOM은 문서를 조회하거나 수정할 수 있는 API입니다. 문서의 {{domxref("Node")}} 및 {{domxref("Element")}}를 조작할 수 있습니다. HTML, XML, SVG는 DOM을 확장함으로써 각각의 실제적인 요소(element)를 조작합니다.</dd> - <dt>디바이스 API</dt> - <dd>본 API는 웹 페이지 및 애플리케이션에서 사용할 수 있는 다양한 하드웨어 기능을 조작합니다. 예: <a href="/ko/docs/WebAPI/Using_Light_Events"> 주변 조명 센서 API</a>, <a href="/ko/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">배터리 상태 API</a>, <a href="/ko/docs/Using_geolocation" title="Using_geolocation">지리적 위치 API</a>, <a href="/ko/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">포인터 잠금 API</a>, <a href="/ko/docs/WebAPI/Proximity" title="WebAPI/Proximity">근접 API</a>, <a href="/ko/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">디바이스 방향성 API</a>, <a href="/ko/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">화면 방향성 API</a>, <a href="/ko/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">진동 API</a>.</dd> - <dt>커뮤니케이션 API</dt> - <dd>본 API는 웹 페이지 및 애플리케이션에서 다른 페이지나 기기와 통신할 수 있습니다. 예: <a href="/ko/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">네트워크 정보 API</a>, <a href="/ko/docs/WebAPI/Using_Web_Notifications" title="WebAPI/Using_Web_Notifications">웹 알림</a>, <a href="/ko/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">단순 푸시 API</a>.</dd> - <dt id="Data_management_APIs">데이터 관리 API</dt> - <dd>본 API는 사용자 데이터를 보관하고 관리할 수 있습니다. 예: <a href="/ko/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/ko/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> -</dl> - -<p>이러한 API는 어떠한 웹 사이트나 앱에서도 사용할 수 있지만 한정 권한 및 공인 애플리케이션에서는 더 강력한 Mozilla API 셋을 사용하실 수 있습니다.</p> - -<dl> - <dt>한정 권한 API</dt> - <dd>한정 권한 애플리케이션은 설치 방식 앱으로서 사용자가 특정 권리를 허용한 것입니다. 한정 권한 API로는 <a href="/ko/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP 소켓 API</a>, <a href="/ko/docs/WebAPI/Contacts" title="WebAPI/Contacts">주소록 API</a>, <a href="/ko/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">디바이스 스토리지 API</a>, <a href="/ko/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">브라우저 API</a> 등이 있습니다.</dd> - <dt>공인 API</dt> - <dd>공인된 애플리케이션은 파이어폭스 OS와 같은 운영체제에 중요한 조작을 수행하는 저층(low-level) 애플리케이션입니다. 한정 권한이 낮은 애플리케이션은 <a href="/ko/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities"> Web Activities</a>를 사용하여 이러한 애플리케이션과 소통합니다. 공인 API로는 <a href="/ko/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> 블루투스 API</a>, <a href="/ko/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection"> 모바일 연결 API</a>, <a href="/ko/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats"> 네트워크 상태 API</a>,<a href="/ko/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony"> 전화 기능</a>,<a href="/ko/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>,<a href="/ko/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information"> 와이파이 정보 API</a>, <a href="/ko/docs/WebAPI/Camera" title="WebAPI/Camera">카메라 API</a>,<a href="/ko/docs/WebAPI/Power_Management" title="WebAPI/Power_Management"> 전원 관리 API</a>, <a href="/ko/docs/WebAPI/Settings" title="WebAPI/Settings">설정 API</a>,<a href="/ko/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API"> 대기 API</a>,<a href="/ko/docs/WebAPI/Permissions" title="WebAPI/Permissions">사용 권한 API</a>,<a href="/ko/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock"> 시간/시계 API</a> 등이 있습니다.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Community" id="EditCommunity" name="EditCommunity">커뮤니티</h2> - -<p>저희 메일링 리스트나 뉴스그룹를 통해 Web API 커뮤니티에 참여하세요.</p> - -<ul> - <li><a href="https://lists.mozilla.org/listinfo/dev-webapi">메일링 리스트</a></li> - <li><a href="news://news.mozilla.org/mozilla.dev.webapi">뉴스그룹</a></li> - <li><a href="http://groups.google.com/group/mozilla.dev.webapi">Google그룹</a></li> - <li><a href="http://groups.google.com/group/mozilla.dev.webapi/feeds">웹 피드</a></li> - <li><a href="http://hacks.mozilla.or.kr/category/webapi/">한국 Mozilla Hacks</a></li> -</ul> - -<p><a href="https://wiki.mozilla.org/IRC">IRC</a>에서 <a href="irc://irc.mozilla.org/webapi">#webapi</a> 채널의 실시간 토론도 꼭 참여하세요.</p> - -<h2 class="Related_Topics" id="Related_topics" name="Related_topics">관련 주제</h2> - -<p>다음 주제도 확인해보세요.</p> - -<ul> - <li><a href="/ko/docs/Web/API">웹 API 인터페이스의 전체 색인</a></li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/ko/orphaned/web/reference/index.html b/files/ko/orphaned/web/reference/index.html deleted file mode 100644 index 892b42d80a..0000000000 --- a/files/ko/orphaned/web/reference/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: 웹 기술 문서 목록 -slug: orphaned/Web/Reference -tags: - - Landing - - Reference - - Web -translation_of: Web/Reference -original_slug: Web/Reference ---- -<p>{{draft()}}<br> - 오픈 웹은 많은 기술을 사용하여 구축됩니다. 이 기술들을 사용하기 위해서는 적절한 지식이 필요합니다.<br> - 아래에서 각각의 참조 자료에 대한 링크를 찾아볼 수 있습니다.</p> - -<h2 class="Documentation" id="웹_기술들">웹 기술들</h2> - -<p>여러분에게 <a href="/ko/docs/Learn/Getting_started_with_the_web">웹과 함께 시작하기</a>를 추천하지만, 필수는 아닙니다.</p> - -<dl> - <dt><strong><a href="/ko/docs/Glossary/HTML">HTML</a></strong> — Structuring the web</dt> - <dd>하이퍼텍스트 마크업언어(HyperText Markup Language)는 의미론적으로 웹 페이지의 콘텐츠(<a href="/ko/docs/Glossary/markup">마크업</a>)를 잘 구조화된 형식으로 의미론적으로 정의하고 표현하는데 사용됩니다. HTML은 HTML 요소(HTML elements)라고 불리는 불록으로 구성된 구조화된 문서를 작성하는 방법을 제공합니다. HTML요소는 태그로 구분되며, 꺽쇠괄호(<>)를 사용하여 표현합니다. 일부는 페이지에 직접 내용을 소개하고, 다른 일부는 문서 텍스트에 대한 정보를 제공하고, 다른 태그는 하위 요소로 포함할 수 있습니다. 분명히, 브라우저는 페이지 내용을 해석하는데 사용하기 때문에, 그대로 문서에 보여주지 않습니다.<br> - <br> - <a href="/ko/Learn/HTML/Introduction_to_HTML">HTML 소개</a>| <a href="/ko/Learn/HTML">HTML 배우기</a> | <a href="/ko/docs/Web/Guide/HTML/HTML5">HTML5</a> | <a href="/ko/docs/Web/Guide/HTML">개발자 가이드</a> | <a href="/ko/docs/Web/HTML/Element">HTML 요소 레퍼런스</a> | <a href="/ko/docs/Web/HTML/Reference">HTML 참조</a></dd> - <dt><strong><a href="/en-US/docs/Glossary/CSS">CSS</a></strong> — Styling the web</dt> - <dd><strong>Cascading Style Sheets</strong> 는 웹 컨텐츠의 모양을 꾸미는데 사용합니다.<br> - <br> - <a href="/ko/Learn/CSS/Introduction_to_CSS">CSS 소개</a> | <a href="/ko/docs/Web/Guide/CSS/Getting_started">CSS 시작하기</a> | <a href="/ko/Learn/CSS">CSS 배우기</a> | <a href="/ko/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/ko/docs/Web/Guide/CSS">개발자 가이드</a> | <a href="/ko/docs/Web/CSS/Common_CSS_Questions">일반적인 CSS 질문들</a> | <a href="/ko/docs/Web/CSS/Reference">CSS 참조</a></dd> - <dt><strong><a href="/ko/docs/Glossary/JavaScript">JavaScript</a></strong> — D<strong>ynamic client-side scripting</strong></dt> - <dd><strong>JavaScript</strong> 프로그래밍 언어는 사용자와의 대화식 이용 및 그외 동적 기능을 웹 사이트에 추가하는데 사용됩니다.</dd> - <dd><a href="/ko/docs/Learn/JavaScript">자바스크립트 배우기</a> | <a href="/ko/docs/Web/JavaScript/Guide">개발자 가이드</a> | <a href="/ko/docs/Web/JavaScript/Reference">자바스크립트 참조</a></dd> -</dl> diff --git a/files/ko/orphaned/web/security/information_security_basics/index.html b/files/ko/orphaned/web/security/information_security_basics/index.html deleted file mode 100644 index 807a154611..0000000000 --- a/files/ko/orphaned/web/security/information_security_basics/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Information Security Basics -slug: orphaned/Web/Security/Information_Security_Basics -translation_of: Web/Security/Information_Security_Basics -original_slug: Web/Security/정보_보안_기본 ---- -<p><span class="seoSummary"> 정보 보안에 대한 기본적인 이해는 불안전하거나 취약점으로 인해 생긴 약점이 악의적인 이유로 악용되지 않게 당신을 도와줄 것입니다. 이 기사는 당신이 알아야 할 것을 배우는데 도움을 줄 것 입니다.</span> 이 정보를 이용하면, 웹 개발주기 및 콘텐츠 배포를 넘어 보안의 역할과 중요성을 알게될 것입니다.</p> - -<dl> - <dt><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">신뢰성, 무결성, 가용성</a></dt> - <dd>보안을 이해하기 위해 필수적이고 기본적인 보안의 목적에 대해 설명합니다. </dd> - <dt><a href="/en-US/Learn/Vulnerabilities">취약점</a></dt> - <dd>취약점의 주요 카테고리를 정의하고, 모든 소프트웨어에 있는 취약점에 대해서 논의합니다. </dd> - <dt><a href="/en-US/Learn/Threats">위협</a></dt> - <dd>주요한 위협의 개념에 대해 간단히 소개합니다.</dd> - <dt><a href="/en-US/Learn/Security_Controls">보안 제어</a></dt> - <dd>보안 제어의 주요 카테고리를 정의하고, 잠재적인 단점에 대해서 논의합니다. </dd> - <dt><a href="/en-US/Learn/TCP_IP_Security">TCP/IP 보안</a></dt> - <dd>SSL에 대한 보안 고려 사항에 초점을 맞춘 TCP / IP 모델의 개요.</dd> -</dl> - -<h2 id="참고">참고</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Security">Browser security</a></li> - <li><a href="/en-US/docs/Web/Security">Web security</a></li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a></li> - <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Firefox Security Basics for Developers</a></li> -</ul> |