From 0d13feed6a627047449d99af02d1fb55bbfad1a9 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Wed, 7 Jul 2021 21:57:08 -0400 Subject: delete conflicting/orphaned in ko (#1423) * delete conflicting/orphaned in ko * forgot the redirects --- .../ko/orphaned/web/api/abstractworker/index.html | 84 ------- .../web/api/ambient_light_events/index.html | 65 ----- files/ko/orphaned/web/api/body/index.html | 98 -------- files/ko/orphaned/web/api/body/json/index.html | 74 ------ .../orphaned/web/api/childnode/before/index.html | 145 ----------- files/ko/orphaned/web/api/childnode/index.html | 77 ------ .../orphaned/web/api/childnode/remove/index.html | 98 -------- .../api/detecting_device_orientation/index.html | 274 --------------------- .../api/document_object_model/events/index.html | 85 ------- .../web/api/documentorshadowroot/index.html | 75 ------ .../web/api/element/currentstyle/index.html | 33 --- .../web/api/elementcssinlinestyle/style/index.html | 42 ---- .../web/api/htmlhyperlinkelementutils/index.html | 92 ------- .../api/htmlorforeignelement/dataset/index.html | 128 ---------- .../api/htmlorforeignelement/tabindex/index.html | 27 -- .../basic_concepts_behind_indexeddb/index.html | 224 ----------------- .../web/api/offscreencanvas/toblob/index.html | 78 ------ .../orphaned/web/api/parentnode/append/index.html | 135 ---------- .../web/api/parentnode/children/index.html | 86 ------- files/ko/orphaned/web/api/parentnode/index.html | 81 ------ .../orphaned/web/api/parentnode/prepend/index.html | 134 ---------- .../rtcpeerconnection/onidentityresult/index.html | 56 ----- 22 files changed, 2191 deletions(-) delete mode 100644 files/ko/orphaned/web/api/abstractworker/index.html delete mode 100644 files/ko/orphaned/web/api/ambient_light_events/index.html delete mode 100644 files/ko/orphaned/web/api/body/index.html delete mode 100644 files/ko/orphaned/web/api/body/json/index.html delete mode 100644 files/ko/orphaned/web/api/childnode/before/index.html delete mode 100644 files/ko/orphaned/web/api/childnode/index.html delete mode 100644 files/ko/orphaned/web/api/childnode/remove/index.html delete mode 100644 files/ko/orphaned/web/api/detecting_device_orientation/index.html delete mode 100644 files/ko/orphaned/web/api/document_object_model/events/index.html delete mode 100644 files/ko/orphaned/web/api/documentorshadowroot/index.html delete mode 100644 files/ko/orphaned/web/api/element/currentstyle/index.html delete mode 100644 files/ko/orphaned/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/ko/orphaned/web/api/htmlhyperlinkelementutils/index.html delete mode 100644 files/ko/orphaned/web/api/htmlorforeignelement/dataset/index.html delete mode 100644 files/ko/orphaned/web/api/htmlorforeignelement/tabindex/index.html delete mode 100644 files/ko/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html delete mode 100644 files/ko/orphaned/web/api/offscreencanvas/toblob/index.html delete mode 100644 files/ko/orphaned/web/api/parentnode/append/index.html delete mode 100644 files/ko/orphaned/web/api/parentnode/children/index.html delete mode 100644 files/ko/orphaned/web/api/parentnode/index.html delete mode 100644 files/ko/orphaned/web/api/parentnode/prepend/index.html delete mode 100644 files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html (limited to 'files/ko/orphaned/web/api') 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 ---- -
{{ APIRef("Web Workers API") }}
- -

Web Workers API의 AbstractWorker 인터페이스는 기본적인 {{domxref("Worker")}}에 더해 {{domxref("ServiceWorker")}}와 {{domxref("SharedWorker")}}까지, 모든 유형의 워커에 공통된 속성과 메서드를 정의하는 추상 인터페이스입니다.

- -

속성

- -

AbstractWorker 인터페이스는 어떠한 속성도 상속하지 않습니다.

- -

이벤트 처리기

- -
-
{{domxref("AbstractWorker.onerror")}}
-
error 유형의 {{domxref("ErrorEvent")}}가 워커로 확산되면 호출할 {{domxref("EventListener")}}입니다.
-
- -

메서드

- -

AbstractWorker 인터페이스는 어떠한 메서드도 구현하거나 상속하지 않습니다.

- -

예제

- -

AbstractWorker는 추상 인터페이스므로 코드 내에서 직접 사용할 일은 없습니다. 대신, AbstractWorker를 상속하는 {{domxref("Worker")}} 또는 {{domxref("SharedWorker")}}를 사용할 것입니다.

- -

다음 코드는 {{domxref("Worker.Worker", "Worker()")}} 생성자를 사용해 새로운 Worker를 생성한 후 워커로 메시지를 전송하는 것을 보입니다.

- -
var myWorker = new Worker('worker.js');
-
-first.onchange = function() {
-  myWorker.postMessage([first.value, second.value]);
-  console.log('Message posted to worker');
-}
- -

위 워커의 코드는 "worker.js" 파일에서 불러오며, first로 표현한 {{htmlelement("input")}} 요소가 존재하는 상황을 가정하여, {{event("change")}} 이벤트 처리기를 부착해 사용자가 first의 값을 바꿀 때마다 워커에 메시지를 전송해 바뀐 값을 알려줍니다.

- -

MDN 웹 문서 GitHub 저장소에 더 많은 예제가 준비돼있습니다.

- - - -

명세

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#abstractworker", "AbstractWorker")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
- -

브라우저 호환성

- -
{{Compat("api.AbstractWorker")}}
- -

같이 보기

- - 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 ---- -
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
- -

주변의 빛을 감지하는 이벤트를 활용해서 웹페이지나 어플리케이션이 주변 빛의 세기를 감지할 수 있습니다. 사용자 인터페이스의 색상 대비나 사진의 노출을 변경하는 용도로 사용할 수 있습니다.

- -

빛 이벤트

- -

기기의 빛 센서가 빛의 변화를 감지하면 브라우저에 변화를 전달합니다. 브라우저가 이러한 알림을 받으면 정확한 빛의 세기를 알려주는 {{domxref("DeviceLightEvent")}} 이벤트를 발생시킵니다.

- -

이 이벤트는 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드 ({{event("devicelight")}} 이벤트 이름 사용)를 사용하거나 {{domxref("window.ondevicelight")}} 속성에 이벤트 핸들러를 사용함으로서 window 객체 수준에서 캡춰됩니다.

- -

캡춰가 되면 이벤트 객체의 {{domxref("DeviceLightEvent.value")}} 속성을 통해서 럭스(lux) 단위의 빛의 세기를 사용할 수 있습니다.

- -

예제

- -
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');
-  }
-});
- -

명세

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}{{ Spec2('AmbientLight') }}Initial specification
- -

브라우저 호환성

- - - -

{{Compat("api.DeviceLightEvent")}}

- -

같이 보기

- - 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 ---- -
{{ APIRef("Fetch") }}
- -

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

- -

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

- -

Properties

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
A {{domxref("Boolean")}} that indicates whether the body has been read.
-
- -

Methods

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
-
{{domxref("Body.blob()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
-
{{domxref("Body.formData()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
-
{{domxref("Body.json()")}}
-
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")}}.
-
{{domxref("Body.text()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
-
- -

Examples

- -

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.

- -

HTML Content

- -
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
-
- -

JS Content

- -
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;
-});
- -

{{ EmbedLiveSample('Examples', '100%', '250px') }}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
- -

Browser compatibility

- - - -

{{Compat("api.Body")}}

- -

See also

- - - -

 

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 ---- -
{{APIRef("Fetch")}}
- -

{{domxref("Body")}} mixin의 json() 매서드는 {{domxref("Response")}} 스트림을 가져와 스트림이 완료될때까지 읽는다. 이 메서드는 body 텍스트를 {{jsxref("JSON")}}으로 바꾸는 결과로 해결되는 promise를 반환한다.

- -

구문

- -
response.json().then(function(data) {
-  // do something with your data
-});
- -

매개변수

- -

없음.

- -

반환값

- -

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...

- -

Example

- -

In our fetch json example (run fetch json live), we create a new request using the {{domxref("Request.Request")}} constructor, then use it to fetch a .json file. When the fetch is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.

- -
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);
-    }
-  });
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-json','json()')}}{{Spec2('Fetch')}} 
- -

Browser compatibility

- - - -

{{Compat("api.Body.json")}}

- -

See also

- - 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 ---- -
{{APIRef("DOM")}} {{SeeCompatTable}}
- -

ChildNode.before 메소드는 ChildNode 의 부모가 가진 자식의 ChildNode 바로 이전에 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 삽입합니다.{{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.

- -

문법

- -
[Throws, Unscopable]
-void ChildNode.before((Node or DOMString)... nodes);
-
- -

파라미터

- -
-
nodes
-
삽입할 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합입니다.
-
- -

예외

- - - -

예제

- -

엘리먼트 삽입하기

- -
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>"
-
- -

텍스트 삽입하기

- -
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>"
- -

엘리먼트와 텍스트 삽입하기

- -
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>"
- -

ChildNode.before() 는 범위를 지정할 수 없습니다

- -

before() 메소드는 with 구문으로 범위를 지정할 수 없습니다. 자세한 내용은 {{jsxref("Symbol.unscopables")}} 문서를 확인하세요.

- -
with(node) {
-  before("foo");
-}
-// ReferenceError: before is not defined
- -

폴리필

- -

다음 코드를 사용해 인터넷 익스플로러 9 이상에서 before() 메소드 를 폴리필링할 수 있습니다.

- -
// 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]);
- -

명세

- - - - - - - - - - - - - - -
명세상태코멘트
{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}{{Spec2('DOM WHATWG')}}초기 정의.
- -

브라우저 호환성

- - - -

{{Compat("api.ChildNode.before")}}

- -

함께 보기

- - 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 ---- -
{{APIRef("DOM")}}
- -

ChildNode 인터페이스는 부모를 가질 수 있는 {{domxref("Node")}} 객체에 고유한 메소드를 포함합니다.

- -

ChildNode는 원시 인터페이스이며 이 타입의 객체는 생성할 수 없습니다. 이는 {{domxref("Element")}}, {{domxref("DocumentType")}} 및 {{domxref("CharacterData")}} 객체로 구현되었습니다.

- -

프로퍼티

- -

상속 및 특정 프로퍼티가 없습니다.

- -

메소드

- -

상속된 메소드가 없습니다.

- -
-
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
-
ChildNode를 부모의 자식 목록으로부터 제거합니다.
-
{{domxref("ChildNode.before()")}} {{experimental_inline}}
-
{{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 부모의 자식 목록에서 ChildNode의 바로 앞에 삽입합니다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.
-
{{domxref("ChildNode.after()")}} {{experimental_inline}}
-
{{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 부모의 자식 목록에서 ChildNode의 바로 뒤에 삽입합니다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.
-
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
-
부모의 자식 목록에 있는 ChildNode를 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합으로 대체합니다.{{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
명세상태코멘트
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}ElementTraversal 인터페이스를 {{domxref("ParentNode")}}와 ChildNode로 분리합니다. previousElementSibling과 nextElementSibling은 이제 마지막에 정의됩니다. {{domxref("CharacterData")}}와 {{domxref("DocumentType")}}은 새 인터페이스를 구현했습니다. remove(), before(), after() 및 replaceWith() 메소드가 추가되었습니다.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}프로퍼티의 초기 정의가 ElementTraversal 순수 인터페이스에 추가되었고 {{domxref("Element")}}에서 사용합니다.
- -

폴리필

- -

github의 외부 코드: childNode.js

- -

브라우저 호환성

- - - -

{{Compat("api.ChildNode")}}

- -

참고

- - 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 ---- -
{{APIRef("DOM")}}
- -

ChildNode.remove() 메소드는 이를 포함하는 트리로부터 객체를 제거합니다.

- -

문법

- -
node.remove();
-
- -

예제

- -

remove() 사용하기

- -
<div id="div-01">div-01 입니다</div>
-<div id="div-02">div-02 입니다</div>
-<div id="div-03">div-03 입니다</div>
-
- -
var el = document.getElementById('div-02');
-el.remove(); // id가 'div-02' 인 div를 제거합니다
-
- -

ChildNode.remove() 는 스코프 지정 불가

- -

remove() 메소드는 with 구문으로 스코프를 지정할 수 없습니다. 자세한 내용은 {{jsxref("Symbol.unscopables")}} 을 확인하세요.

- -
with(node) {
-  remove();
-}
-// ReferenceError: remove is not defined
- -

폴리필

- -

인터넷 익스플로러 9 이상에서는 다음 코드를 사용해 remove() 메소드 를 폴리필링할 수 있습니다.

- -
// 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]);
- -

명세

- - - - - - - - - - - - - - -
명세상태코멘트
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}초기 정의.
- -

브라우저 호환성

- -
- - -

{{Compat("api.ChildNode.remove")}}

-
- -

함께 보기

- - 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 ---- -
{{SeeCompatTable}}
- -

요약

- -

웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.

- -

방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 {{domxref("DeviceOrientationEvent")}}로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다.  이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.

- -

두 번째 이벤트는 {{domxref("DeviceMotionEvent")}}로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 {{domxref("DeviceOrientationEvent")}}와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로{{domxref("DeviceMotionEvent")}}를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. {{domxref("DeviceOrientationEvent")}}는 모바일 기기에서 주로 더 많이 나타난다.

- -

방향 이벤트 처리하기

- -

방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:

- -
window.addEventListener("deviceorientation", handleOrientation, true);
-
- -

이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.

- -

방향 이벤트는 다음 네 개의 값을 가진다:

- - - -

이벤트 핸들러 함수는 보통 다음과 같다:

- -
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
-}
-
- -

방향 값 설명

- -

각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 Orientation and motion data explained 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.

- - - -

방향 예제

- -

이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.

- -

자 그럼, 정원에 공이 하나 있다고 상상해보자:

- -
<div class="garden">
-  <div class="ball"></div>
-</div>
-
-<pre class="output"></pre>
-
- -

이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:

- -
.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%;
-}
-
- -

이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:

- -
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);
-
- -

여기 실제로 실행해 볼 수 있는 예제이다:

- -
{{ EmbedLiveSample('Orientation_example', '230', '260') }}
- -
-

경고: Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.

-
- -

모션 이벤트 처리하기

- -

모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.

- -
window.addEventListener("devicemotion", handleMotion, true);
- -

HandleMotion 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.

- -

모션 이벤트는 다음 네 가지 속성을 가진다:

- - - -

모션 값 설명

- -

{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 Orientation and motion data explained 문서를 참조).

- -

{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:

- - - -

{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:

- - - -

마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.

- -

스펙

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
- -

브라우저 호환성

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
- 6		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
- 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}4.2
-
- -

Gecko 구현 참고 사항

- -
    -
  1. Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 mozOrientation 을 지원한다
    2. -
- -

참고 자료

- - 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 ---- -
{{DefaultAPISidebar("DOM")}}
- -

소개

- -

이 장에서는 DOM 이벤트 모델을 설명한다.  Event 인터페이스는 DOM의 노드에서 이벤트 등록 및  event listeners를 위한 인터페이스와 더불어 다양한 이벤트 인터페이스가 서로 어떻게 관련되는지 보여주는 몇 가지 더 긴 예와 함께 설명된다.

- -

There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the DOM Level 3 Events draft.

- -

Also see Example 5: Event Propagation in the Examples chapter for a more detailed example of how events move through the DOM.

- -

Event listener등록

- -

DOM 요소에 대한 이벤트 핸들러를 등록하는 방법에는 3가지가 있다.

- -

{{domxref("EventTarget.addEventListener")}}

- -
// 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')
-}
-
- -

이 방식은 근대의 웹페이지에서 사용해야하는 방법이다.

- -
-

Note: 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.

-
- -

더 자세한 내용은{{domxref("EventTarget.addEventListener")}}를 참조하세요.

- -

HTML 속성

- -
<button onclick="alert('Hello world!')">
-
- -

속성에서 JavaScript 코드는 이벤트 매개변수를 통해 이벤트 객체를 통과합니다. 반환 값은 HTML 사양에 설명된 특별한 방법으로 처리됩니다.

- -
-

경고: 이 방법은 피해야 합니다! 그것은 마크업을 부풀리고, 읽기 어렵게 만듭니다. 내용/구조와 행동에 대한 우려는 잘 분리되어 있지 않아 버그를 찾기가 더 어려워집니다.

-
- -

DOM 요소 특성

- -
// Assuming myButton is a button element
-myButton.onclick = function(event){alert('Hello world')}
-
- -

The function can be defined to take an event parameter. The return value is treated in a special way, described in the HTML specification.

- -

The problem with this method is that only one handler can be set per element and per event.

- -

Accessing Event interfaces

- -

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.

- -

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.

- -
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
-
- - - - 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 ---- -
{{APIRef("Web Components")}}
- -

Shadow DOM API 의 DocumentOrShadowRoot 믹스인(mixin)은 문서와 섀도우 루트간에 공유되는 API를 제공합니다. 다음 기능은 문서{{DOMxRef("Document")}}와 {{DOMxRef("ShadowRoot")}}에 모두 포함되어 있습니다.

- -

Properties

- -
-
{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}
-
포커스를 가지는 섀도우 루트 내의 요소{{DOMxRef('Element')}}를 반환합니다.
-
{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}
-
현재 이 문서에서 full screen mode인 요소{{DOMxRef('Element')}}를 반환합니다.
-
{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}
-
포인터가 잠겨있는 동안 마우스 이벤트의 대상으로 설정된 요소를 반환합니다. 잠금이 보류중이거나 포인터가 잠금 해제되어 있거나, 대상이 다른 문서(document)에 있으면 null을 반환합니다.
-
{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}
-
문서에 명시적으로 링크되었거나 포함하고 있는 스타일 시트의 {{DOMxRef('CSSStyleSheet')}} 객체의 {{DOMxRef('StyleSheetList')}}를 반환합니다.
-
- -

Methods

- -
-
{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}
-
유저가 선택한 텍스트의 범위, 또는 캐럿(caret - 텍스트 커서)의 현재 위치를 나타내는 {{DOMxRef('Selection')}}객체를 반환합니다.
-
{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}
-
지정된 좌표의 최상위 요소를 반환합니다.
-
{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}
-
지정된 자표에 있는 모든 요소의 배열을 반환합니다.
-
{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}
-
캐럿을 포함한 DOM 노드와 그 노드 내에서 캐럿의 문자 오프셋을 포함한 {{DOMxRef('CaretPosition')}}를 반환합니다.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}{{Spec2('DOM WHATWG')}}Initial definition.
{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}{{Spec2('Shadow DOM')}}Implementation in Shadow DOM.
- -

Browser Compatibility

- - - -

{{Compat("api.DocumentOrShadowRoot")}}

- -

[1] This interface's features are still implemented on the {{DOMxRef("Document")}} object.

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 ---- -
{{APIRef("DOM")}}
- -

{{ Non-standard_header() }}

- -

Summary

- -

Element.currentStyle 은 표준화된 {{domxref("window.getComputedStyle")}} 메서드의 인터넷 익스플로러 전용 대체 프로퍼티입니다. 오래된 버젼의 인터넷 익스플로러에서 사용 가능합니다.

- -

Specification

- -

명세에 포함 되는 부분이 아닙니다.

- -

마이크로소프트 MSDN에 설명이 있습니다.

- -

Browser compatibility

- -

{{Compat("api.Element.currentStyle")}}

- -

See also

- - 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 ---- -
{{ APIRef("HTML DOM") }}
- -

HTMLElement.style 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 style 속성이 포함한 CSS 선언을 담은 {{domxref("CSSStyleDeclaration")}} 객체를 반환합니다

- -

예제

- -
// 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";
- -

명세

- -

DOM Level 2 Style: ElementCSSInlineStyle.style

- -

CSSOM: ElementCSSInlineStyle

- -

브라우저 호환성

- -

{{Compat("api.HTMLElement.style")}}

- -

같이 보기

- - 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 ---- -

{{ApiRef("URL API")}}{{SeeCompatTable}}

- -

The HTMLHyperlinkElementUtils mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.

- -

There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.

- -

Properties

- -
-

Note: This interface doesn't inherit any property.

-
- -
-
{{domxref("HTMLHyperlinkElementUtils.href")}}
-
This is a {{domxref("USVString")}} containing the whole URL.
-
{{domxref("HTMLHyperlinkElementUtils.protocol")}}
-
This is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final ':'.
-
{{domxref("HTMLHyperlinkElementUtils.host")}}
-
This is a {{domxref("USVString")}} containing the host, that is the hostname, and then, if the port 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 ':', and the port of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.hostname")}}
-
This is a {{domxref("USVString")}} containing the domain of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.port")}}
-
This is a {{domxref("USVString")}} containing the port number of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.pathname")}}
-
This is a {{domxref("USVString")}} containing an initial '/' followed by the path of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.search")}}
-
This is a {{domxref("USVString")}} containing a '?' followed by the parameters of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.hash")}}
-
This is a {{domxref("USVString")}} containing a '#' followed by the fragment identifier of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.username")}}
-
This is a {{domxref("USVString")}} containing the username specified before the domain name.
-
{{domxref("HTMLHyperlinkElementUtils.password")}}
-
This is a {{domxref("USVString")}} containing the password specified before the domain name.
-
{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}
-
This returns a {{domxref("USVString")}} containing the origin of the URL (that is its scheme, its domain and its port).
-
- -

Methods

- -
-

Note: This interface doesn't inherit any method.

-
- -
-
{{domxref("HTMLHyperlinkElementUtils.toString()")}}
-
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.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}{{Spec2('HTML WHATWG')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.HTMLHyperlinkElementUtils")}}

- -

See also

- - 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 ---- -
{{APIRef("HTML DOM")}}
- -

HTMLElement.dataset 읽기 전용 속성은 요소의 사용자 지정 데이터 특성(data-*)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다. 반환하는 값은 {{domxref("DOMStringMap")}}으로, 각 데이터 특성마다 하나의 항목을 가집니다. dataset 속성 자체는 읽기 전용이라는 점에 주의하세요. 모든 쓰기 작업은 dataset 안의, 데이터 특성을 나타내는 각각의 속성에 수행해야 합니다. 또한 HTML의 data-이름과, 이에 대응하는 DOM dataset['이름']의 이름은 서로 일치하지 않으나, 다음 규칙에 따라 유사함을 기억하세요.

- - - -

아래의 내용과 함께, Using data attributes 아티클에서는 HTML 데이터 속성을 어떻게 쓰는지 안내를 찾을 수 있습니다. 

- -

Name conversion

- -

dash-style 에서 camelCase로 변환: 커스텀 데이터 속성의 이름은 아래의 규칙에 따라 {{ domxref("DOMStringMap") }}의 key로 변환됩니다. 

- - - -

camelCase 에서 dash-style로 변환: key를 속성 이름으로 매핑하는 반대의 변환은 아래의 규칙을 따릅니다.:

- - - -

이러한 제약 조건은 반드시 두 변환이 서로의 역이 되도록 합니다.

- -

예를 들어, data-abc-def 라는 이름의 속성은 abcDef 라는 키에 대응합니다.

- -

Accessing values

- - - -

Syntax

- - - -

예시

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
- -
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
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

브라우저 호환성

- -

{{Compat("api.HTMLElement.dataset")}}

- -

See also

- - 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 ---- -

{{ ApiRef() }}

-

요약

-

현재 요소의 탭 순서를 get/set.

-

구문

-
element.tabIndex =iIndex
-
-

매개변수

- -

예

-
b1 = document.getElementById("button1");
-b1.tabIndex = 1;
-
-

명세

-

tabIndex

-

{{ languages( { "en": "en/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" } ) }}

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 ---- -

{{DefaultAPISidebar("IndexedDB")}}

- -
-

IndexedDB는 사용자의 브라우저 안에 데이터를 영구적으로 저장하게 해주는 방법 중 하나입니다. 그것은 네트워크 가능 여부에 상관없이, 풍부한 쿼리 작성 능력으로 웹 애플리케이션을 만들게 해주고, 이 애플리케이션은 온라인과 오프라인 모두에서 동작할 수 있습니다. IndexedDB는 예를 들면, 도서관의 DVD 목록처럼 대용량 데이터를 저장하는 애플리케이션, 그리고 메일 클라이언트, to-do 리스트, 노트패드처럼 동작에 지속적인 인터넷 연결이 필요하지 않은 애플리케이션에 유용합니다.

-
- -

이 문서에 대하여

- -

이 소개글은 IndexedDB의 필수 개념과 용어에 대해 논의합니다. 큰 그림을 제공하고 핵심 개념들을 설명합니다.

- -

다음과 같은 유용한 정보를 찾을 수 있을 것입니다.

- - - -

IndexedDB 개요

- -

IndexedDB는 "키(key)"로 지정된 객체를 저장하고 검색할 수 있도록 도와줍니다. 데이터베이스에 적용하는 모든 변경은 트렌잭션 안에서 일어납니다. 대부분의 웹 스토리지 솔루션과 마찬가지로, IndexedDB는 동일 출처 정책 (same-origin policy)을 따릅니다. 따라서 당신이 한 도메인의 데이터에 접근하고 있는 동안, 다른 도메인의 데이터에 접근할 수 없습니다.

- -

IndexedDB는 웹 워커를 포함하는 대부분의 문맥(컨텍스트)에 사용될 수 있는 비동기(asynchronous) API입니다. 웹 워커에서 사용하기 위해 동기(synchronous) 버전도 존재했지만, 웹 커뮤니티의 관심부족으로 웹 스펙에서 제거되었습니다.

- -

IndexedDB는 WebSQL 데이터베이스와 경쟁 관계에 있었지만, W3C는 2010 11월 8일에 WebSQL을 폐기(deprecated)하였습니다. IndexedDB와 WebSQL 모두 데이터 저장을 위한 솔루션이지만, 동일한 기능을 제공하지는 않습니다. WebSQL Database는 관계형 데이터베이스 접근 시스템인 반면, IndexedDB는 인덱스 테이블 시스템입니다.

- -

주요 개념들

- -

만약 당신이 다른 DB 시스템을 사용해봤던 경험이 있다면 오히려 잘못된 추측으로 인해 IndexedDB로 작업할 때 힘들어질 수도 있습니다. 그러므로 다음의 중요한 개념들을 잘 정리해 두어야 합니다.

- - - -

정의

- -

이 섹션은 IndexedDB API에서 사용되는 용어들을 정의하고 설명합니다.

- -

데이터베이스

- -
-
데이터베이스
-
일반적으로 하나 혹은 그 이상의 객체 저장소로 구성되는 정보의 레파지토리입니다. 개별 데이터베이스는 다음의 내용을 반드시 가져야 합니다. -
    -
  • 이름(Name). 이것은 하나의 특정 출처 내에서 database를 구별하고 데이터베이스가 존재하는 동안 일정하게 유지됩니다. 이름은 빈 문자열을 포함해서 어떤 문자열 값이라도 될 수 있습니다.
    • -
  • -

    현재 버전. 데이터베이스가 처음 만들어질 때, 따로 지정하지 않으면 버전은 정수 1입니다. 각 데이터베이스는 주어진 순간에 오직 하나의 버전을 가질 수 있습니다.

    -
    • -
-
-
지속성
-
-

파이어폭스에서 indexedDB는 지속성을 유지하기 위해 사용됩니다. 즉, 읽기쓰기 트랜젝션{{domxref("IDBTransaction.oncomplete")}}이 모든 데이터가 디스크로 들어갈 수 있도록 보장될 때에만 실행됩니다.

- -

파이어폭스 40에서, IndexedDB 트랜젝션은 성능을 높이기 위해 지속성 보장을 늦춰왔는데, 이는 IndexedDB를 지원하는 다른 브라우저도 동일한 방식입니다{{Bug("1112702")}}. 이 경우 {{Event("complete")}} 이벤트는 OS가 데이터 쓰기를 하라고 전달한 후, 데이터가 실제로 데이터베이스에 반영되기 전에 잠재적으로 실행됩니다. 이벤트는 이전보다 더 빠르게 전달될지도 모르지만, 만약 OS가 다운되거나 데이터가 데이터베이스에 반영되기 전에 시스템 전원이 부족하면, 전체 트랜젝션은 잃게 될 수도 있는 희박한 위험성이 존재합니다. 그런 치명적인 이벤트는 드물기 때문에, 대부분의 소비자는 더 이상 염려할 필요는 없습니다.

- -
-

Note: 파이어폭스에서 (나중에 다시 계산 할 수 없는 까다로운 데이터를 저장하는 것)과 같은 몇 가지 이유로 지속성을 보장하고 싶다면, complete 이벤트가 전달되기 전에 아직 정식 표준이 아닌 실험적인 readwriteflush 모드를 이용하여 트랜젝션을 데이터베이스에 강제로 반영할 수 있습니다. ({{domxref("IDBDatabase.transaction")}} 참고.) 현재는 실험적으로 적용되어 있고(experimental), about:config에서dom.indexedDB.experimental값이 true 로 설정되어 있을 때만 사용할 수 있습니다.

-
-
-
객체 저장소 ( Object Store )
-
-

데이터베이스에 데이터가 저장되는 매커니즘입니다. 객체 저장소는 키(key)와 값(value)의 쌍으로 된 레코드를 영구적으로 잡습니다. 한 객체 저장소 안의 레코드는 키(key)에 따라 오름차순으로 정렬됩니다.

- -

모든 객체 저장소는 데이터베이스 안에서 고유한 이름을 가져야 합니다. 객체 저장소는 선택적으로 key generator와 key path를 가질 수 있습니다. 만약 객체 저장소가 key path를 가진다면, 그것은 in-line keys를 사용합니다.  아니면, 그것은 out-of-line keys를 사용하는 것입니다.

- -

객체 저장소에 대한 보다 자세한 정보는, IDBObjectStore 또는 IDBObjectStoreSync를 참조하세요.

-
-
version
-
Database가 처음 만들어질 때, version은 정수형 숫자로 1입니다. 각 database는  하나의 version을 집니다; 하나의 데이터베이스가 한번에 여러 version으로 존재할 수 없다. version을 바꾸는 유일한 방법은 현재 버전보다 큰 버전으로 그것을 여는 것입니다. 이렇ㄱ하면 versionchange 트랜잭션을 시작하고 upgradeneeded event를 발생시킵니다. database의 schema를 변경하려면 upgradeneed 이벤트 핸들러내에서 수행해야 합니다.
-
Note: 이 스펙은  most recent specification, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed IDBDatabase.setVersion() method.
-
database connection
-
 database를 여는 것에 의해 생성되는 operation. 한 주어진 database는 동시에 여러개의 connections를 가질 수 있다.
-
transaction
-
-

특정 database에 대한 data-access와 data-modification operations의 원자적이고 견고한 집합. 그것이 database에서 당신이 data로 상호작용하는 방법이다. 사실, database에서의 어떠한 data의 읽기 또는 변경도 transaction 내에서 일어나야 한다.

- -

하나의 database connection은 한번에 그에 연관된 여러 active transaction을 가질 수 있다, writing transactions이 겹치는 scopes을 갖지 않는 동안. 생성에서 정의되는  transactions의 scope은 그 transaction이 어느 object stores와 상호작용할 수 있는지를 결정하고 그 transaction의 lifetime동안 일정하다. 따라서, 예를 들어, 만약 한 database connection이 flyingMonkey object store를 커버하는 scope의 writing transaction을 이미 가지면, 당신은  unicornCentaur과 unicornPegasus object stores의 scope을 가진 두번째 transaction을 시작할 수 있다. reading transactions로서, 당신은 여러개를 가질 수 있다 — 심지어 겹치는 것들이라도.

- -

Transactions는 short-lived일 것이 기대된다, 그래서 브라우저는 너무 오래걸리는 transaction을 종료할 수 있다, 그 long-running transaction이 lock한 storage resources를 해제하기 위해. 당신은 transaction을 abort할 수 있다 , 이는 그 transaction에서 만들어진 변경들을 roll back한다. 그리고 당신은 심지어 transaction을 abort하기 위해 그것이 시작되거나 활성화되기를 기다릴 필요가 없다.

- -

Transaction의 세가지 모드는: readwrite, readonly, 그리고 versionchange. Object stores와 indexes를 생성하는 유일한 방법은 versionchange transaction을 이용하는 것이다. transaction types를 더 배우기 위해, IndexedDB에 대한 reference article을 보라.

- -

모든 것은 하나의 transaction에서 일어나기 때문에, IndexedDB에서 그것은 매우 중요한 개념이다. transactions에 대해 더 배우기 위해, 특히 그것들이 어떻게 versioning과 관련되는가에 대해, IDBTransaction를 보라, 그는 또한 reference documentation을 가진다. synchronous API에 대한 문서를 위해, IDBTransactionSync를 보라.

-
-
request
-
database에 읽고 쓰기를 행하는 operation. 모든 request는 하나의 읽기 혹은 쓰기 operation을 나타낸다.
-
index
-
-

하나의 index는 다른 object store의 records를 찾기 위한 specialized object store이다, referenced object store라 불리는. 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된다.

- -

다른 방법으로, key를 사용해서 object store에서 records를 찾을 수 있다.

- -

indexes 사용하기에 대해 더 배우기 위해, Using IndexedDB를 보라. index에 대한 reference documentation을 위해, IDBKeyRange를 보라.

-
-
- -

Key and value

- -
-
key
-
-

object store에서 이에 의해 저장된 values가 조직되고 조회되는 하나의 data value. object store는 세 sources 중 하나로부터 key를 이끌어낼 수 있다: key generator, key path, 또는 명시적으로 지정된 value. key는 그 앞에 있는 것보다 큰 값을 지닌 한 data type의 것이어야 한다. object store의 각 record는 같은 store 내에서 유일한 key를 가져야 한다, 따라서 당신은 주어진 object store에서 같은 key의 여러 records를 가질 수 없다.

- -

하나의 key는 다음의 types 중 하나가 될 수 있다: string, date, float, 그리고 array. arrays에 대해, key는 empty value로부터 infinity의 범위가 될 수 있다. 그리고 당신은 array 내에 array를 포함할 수 있다. string 또는 integer의 key만 사용해야 한다는 요구사항은 없다.

- -

다른 방법으로, 당신은 index를 사용해서 object store에서 records를 찾을 수 있다.

-
-
key generator
-
정렬 sequence로 새 keys를 생성하기 위한 mechanism. 만약 한 object store가 key generator를 가지지 않으면, application은 저장되는 records를 위한 keys를 제공해야 한다. Generators는 stores 간에 공유되지 않는다. 이것은 브라우저 구현 세부사항에 가깝다, 때문에 web 개발에서, 당신은 실제로 key generators를 만들고 접근할 필요가 없다.
-
in-line key
-
저장되는 value의 부분으로서 저장되는 key. key path를 사용함으로써 찾아진다. 하나의 in-line key는 generator를 이용해서 생성될 수 있다. key가 생성된 후에, 그것은 key path를 사용하는 value에 저장될 수 있거나 key로서 사용될 수 있다.
-
out-of-line key
-
저장되는 value와는 따로 저장되는 key.
-
key path
-
object store 또는 index에서 브라우저가 어디로부터 key를 추출해야 하는지 정의한다. 하나의 valid key path는 다음 중 하나를 포함할 수 있다: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. 그것은 spaces를 포함할 수 없다.
-
value
-
-

각각의 record는 하나의 value를 가진다, 이는 javascript로 표현될 수 있는 어떤 것이라도 포함할 수 있다, boolean, number, string, date, object, array, regexp, undefined, 그리고 null을 포함해서.

- -

object 또는 array가 저장될 때, 그 object 또는 array의  properties 와 values는 적합한 어떤 값이라도 될 수 있다.

- -

Blobs와 files가 저장될 수 있다, cf. specification.

-
-
- -

Range and scope

- -
-
scope
-
한 transaction이 적용되는 object stores와 indexe. read-only transactions의 scope은 겹칠 수 있고 동시에 실행될 수 있다. 한편으로, writing transactions의 scope은 겹칠 수 없다. 당신은 여전히 동시에 같은 scope의 여러 transaction을 실행할 수 있지만 그들은 queue up하고 하나하나 차례로 실행된다.
-
cursor
-
한 key range의 여러 records에 대한 iterating을 위한 mechanism. The cursor는 그것이 iterating하는 것이 어느 index또는 object store인지 가리키는 한 source를 가진다. 그것은 그 range 내의 position을 가지고, record keys의 순서에서 증가 혹은 감소하는 한 방향으로 움직인다. cursors에 대한 reference documentation을 위해, IDBCursor 또는 IDBCursorSync를 보라.
-
key range
-
-

keys를 위해 사용되는 몇몇 data type에 대한 하나의 연속 구간. Records는 keys 또는 하나의 range of keys를 사용하는 object sotres와 indexes로부터 조회될 수 있다. 당신은 lower 그리고 upper bound를 사용해서 range를 제한하거나 걸러낼 수 있다. 예를 들어, 당신은 x와 y 사이의 한 key의 모든 값에 대해 iterate할 수 있다.

- -

key range에 대한 reference documentation을 위해, IDBKeyRange를 보라.

-
-
- -

한계점들

- -

IndexedDB는 client-side storage가 필요한 대부분의 경우를 해결하기 위해 만들어졌다. 하지만 그것은 다음과 같은 몇 가지 경우를 해결하진 못 한다:

- - - -

덧붙여서, 다음과 같은 조건에서 브라우저가 데이터베이스를 지울 수 있음을 알아두라:

- - - -

정확한 삭제 시점과 브라우져의 DB 수용능력은 때때로 달라질 수 있습니다만, 브라우져 벤더가 지킬려고 노력하는 가장 기본적인 철학은 데이터를 가능한 최대한 데이터를 지킬려고 노력한다는 것입니다.

- -

Next steps

- -

이제 큰 그림은 이해할 수 있게 됐고 아울러 보다 복잡한 사용법을 익힐 준비가 됐네요. 실제로 어떻게 API를 사용하는지 알아보기 위해서, Using IndexedDB를 살펴봅시다.

- -

함께 보기

- - - - - - - -
-
-
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 ---- -
{{APIRef("Canvas API")}} {{SeeCompatTable}}
- -

OffscreenCanvas.convertToBlob() 메소드는 캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 생성합니다.

- -

구문

- -
Promise<Blob> OffscreenCanvas.convertToBlob(options);
- -

매개 변수

- -
-
options {{optional_inline}}
-
-

객체를 {{domxref("Blob")}} 객체로 전환할 때 다양한 옵션을 줄 수 있습니다.

- - 
const blob = offscreenCanvas.convertToBlob({
-  type: "image/jpeg",
-  quality: 0.95
-});
- -

options:

- -
    -
  • type: 이미지 포맷을 가리키는 {{domxref("DOMString")}}. 상세 타입은 image/png
    • -
  • quality: type 옵션이 image/jpeg 혹은 image/webp 일 때 이미지의 품질을 가리키는 0과 1사이의 {{jsxref("Number")}}. 이 매개 변수가 다른 값이라면, 이미지 품질의 기본 설정값이 적용됩니다. 다른 매개 변수들은 무시됩니다.
    • -
-
-
- -

반환 값

- -

캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 반환하는 {{jsxref("Promise")}}

- -

예시

- -
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" }
- -

상세

- -

현재 작성되고 있는 중입니다: OffscreenCanvas.

- -

브라우저 호환성

- -
- - -

{{Compat("api.OffscreenCanvas.convertToBlob")}}

-
- -

 

- -

더 보기

- - 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 ---- -
{{APIRef("DOM")}}
- -

ParentNode.append() 메서드는 ParentNode의 마지막 자식 뒤에 {{domxref("Node")}} 객체 또는 {{domxref("DOMString")}} 객체를 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드처럼 삽입한다.

- -

{{domxref("Node.appendChild()")}}와 다른 점:

- - - -

문법

- -
[Throws, Unscopable]
-void ParentNode.append((Node or DOMString)... nodes);
-
- -

매개 변수

- -
-
nodes
-
삽입하려고 하는 {{domxref("Node")}} 객체 집합 또는 {{domxref("DOMString")}} 객체 집합.
-
- -

예외

- - - -

예제

- -

요소(element) 추가하기

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

문자(text) 추가하기

- -
var parent = document.createElement("div");
-parent.append("Some text");
-
-console.log(parent.textContent); // "Some text"
- -

요소(element)와 문자(text) 함께 추가하기

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() 범위 지정 불가

- -

append() 메소드는 with 문으로 범위를 지정하지 않는다. 더 자세한 내용은 {{jsxref("Symbol.unscopables")}} 참고.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

대체 구현

- -

다음 코드를 이용하면 인터넷 익스플로러 9 이상에서 append() method를 대체하여 구현할 수 있다.

- -
// 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]);
- -

명세

- - - - - - - - - - - - - - -
명세상태참고
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}초기 정의
- -

브라우저 호환성

- - - -

{{Compat("api.ParentNode.append")}}

- -

참고

- - 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 ---- -
{{ APIRef("DOM") }}
- -

{{domxref("ParentNode")}}의 속성 children은 호출된 요소의 모든 자식 노드의 {{domxref("Element","elements")}}를 담고있는 실시간 {{domxref("HTMLCollection")}}을 반환합니다.

- -

Syntax 

- -
var children = node.children;
- -

Value

- -

실시간이며, node의 자식 DOM 요소들의 정렬된 컬렉션인 {{ domxref("HTMLCollection") }}. 각 자식 요소를 컬렉션 안에서 접근하기 위해서 {{domxref("HTMLCollection.item", "item()")}} 메소드를 이용하거나 Javascript 배열 스타일의 문법을 사용할 수 있습니다.

- -

만약 노드가 자식요소를 갖고 있지 않나면, children은 0의 length를 가진 빈 리스트 일 것입니다.

- -

Example

- -
var foo = document.getElementById('foo');
-for (var i = 0; i < foo.children.length; i++) {
-    console.log(foo.children[i].tagName);
-}
-
- -

Polyfill

- -
// 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);
-
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.ParentNode.children")}}

- -

See also

- - 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 ---- -
{{APIRef("DOM")}}
- -

ParentNode 믹스인mixin은 자식을 가질 수 있는 모든 종류의 {{domxref("Node")}} 객체가 공통으로 가지는 메서드와 속성을 가집니다. {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("DocumentFragment")}} 객체가 구현합니다.

- -

선택자로 DOM 요소 선택하기 문서를 참고하여 CSS 선택자로 원하는 노드나 요소를 선택하는 법을 알아보세요.

- -

속성

- -
-
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
-
ParentNode가 가진 자식 중 요소의 수를 반환합니다.
-
{{domxref("ParentNode.children")}} {{readonlyInline}}
-
ParentNode가 가진 모든 자식 중 요소만 모은 {{domxref("HTMLCollection")}}을 반환합니다.
-
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
-
ParentNode의 자식이자 {{jsxref("Element")}}인 객체 중 첫 번째를 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.
-
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
-
ParentNode의 자식이자 {{jsxref("Element")}}인 객체 중 마지막을 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.
-
- -

메서드

- -
-
{{domxref("ParentNode.append()")}} {{experimental_inline}}
-
ParentNode의 마지막 자식 다음에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. DOMString 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.
-
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
-
ParentNode의 첫 번째 자식 이전에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. DOMString 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.
-
{{domxref("ParentNode.querySelector()")}}
-
현재 ParentNode를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 첫 번째 {{domxref("Element")}}를 반환합니다.
-
{{domxref("ParentNode.querySelectorAll()")}}
-
현재 ParentNode를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 모든 요소의 {{domxref("NodeList")}}를 반환합니다.
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal 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.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and used it on {{domxref("Element")}}.
- -

브라우저 호환성

- - - -

{{Compat("api.ParentNode")}}

- -

같이 보기

- - 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 ---- -
{{APIRef("DOM")}}
- -

ParentNode.prepend() 메소드는 {{domxref("Node")}} 객체 또는{{domxref("DOMString")}} 객체를 {{domxref("ParentNode")}}의 첫 자식노드 앞에 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입된다.

- -

Syntax

- -
ParentNode.prepend(...nodesToPrepend);
-
- -

Parameters

- -
-
nodesToPrepend
-
One or more nodes to insert before the first child node currently in the ParentNode. Each node can be specified as either a {{domxref("Node")}} object or as a string; strings are inserted as new {{domxref("Text")}} nodes.
-
- -

Return value

- -

undefined.

- -

Exceptions

- - - -

Examples

- -

Prepending an element

- -
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> ]
-
- -

Prepending text

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

Appending an element and text

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.prepend() is unscopable

- -

The prepend() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined
- -

Polyfill

- -

You can polyfill the prepend() method if it's not available:

- -
// 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]);
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.ParentNode.prepend")}}

- -

See also

- - 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 ---- -

{{APIRef("WebRTC")}}{{SeeCompatTable}}

- -

RTCPeerConnection.onidentityresult 이벤트 핸들러는 {{domxref("RTCPeerConnection")}}가 {{domxref("RTCIdentityEvent")}} 타입의 {{event("identityresult")}} 이벤트를 수신하게되면 실행되는 코드를 담고 있는 속성입니다. 이러한 이벤트는 {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}} 혹은 offer 혹은 answer를 생성하는 과정에 의해 식별인자 주장이 생성되면 전송됩니다.

- -

Syntax

- -
peerconnection.onidentityresult = function;
-
- -

값

- - - -

예시

- -
pc.onidentityresult = function(ev) { alert("onidentityresult event detected!"); };
-
- -

사양서

- - - - - - - - - - - - - - - - -
사양서상태코멘트
{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onidentityresult', 'RTCPeerConnection.onidentityresult') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
- -

브라우저 호환성

- - - -

{{Compat("api.RTCPeerConnection.onidentityresult")}}

- -

참조

- - -- cgit v1.2.3-54-g00ecf