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 ---- files/ko/orphaned/web/css/index/index.html | 11 - .../orphaned/web/css/linear-gradient()/index.html | 205 ------------ .../creating_and_triggering_events/index.html | 141 -------- files/ko/orphaned/web/guide/events/index.html | 52 --- .../overview_of_events_and_handlers/index.html | 143 -------- files/ko/orphaned/web/guide/html/html5/index.html | 123 ------- .../html/html5/introduction_to_html5/index.html | 41 --- .../using_html_sections_and_outlines/index.html | 368 --------------------- .../orphaned/web/html/element/command/index.html | 112 ------- .../orphaned/web/html/element/element/index.html | 58 ---- .../web/html/global_attributes/dropzone/index.html | 54 --- .../web/html/preloading_content/index.html | 232 ------------- .../index.html | 64 ---- .../core_javascript_1.5_guide/about/index.html | 110 ------ .../index.html | 28 -- .../creating_a_regular_expression/index.html | 37 --- .../defining_getters_and_setters/index.html | 86 ----- .../defining_methods/index.html | 45 --- .../index.html | 13 - .../deleting_properties/index.html | 22 -- .../creating_new_objects/index.html | 8 - .../indexing_object_properties/index.html | 11 - .../using_a_constructor_function/index.html | 60 ---- .../using_this_for_object_references/index.html | 27 -- .../expressions/index.html | 18 - .../javascript_overview/index.html | 46 --- .../objects_and_properties/index.html | 41 --- .../operators/assignment_operators/index.html | 64 ---- .../core_javascript_1.5_guide/operators/index.html | 110 ------ .../array_object/index.html | 135 -------- .../global_objects/bigint/prototype/index.html | 58 ---- .../global_objects/map/@@tostringtag/index.html | 52 --- .../reference/global_objects/map/clear/index.html | 76 ----- .../reference/global_objects/map/delete/index.html | 80 ----- .../global_objects/map/entries/index.html | 79 ----- .../global_objects/map/foreach/index.html | 99 ------ .../reference/global_objects/map/get/index.html | 81 ----- .../reference/global_objects/map/has/index.html | 82 ----- .../reference/global_objects/map/index.html | 245 -------------- .../reference/global_objects/map/map/index.html | 61 ---- .../reference/global_objects/map/set/index.html | 97 ------ .../reference/global_objects/map/size/index.html | 63 ---- .../operators/pipeline_operator/index.html | 77 ----- files/ko/orphaned/web/reference/api/index.html | 66 ---- files/ko/orphaned/web/reference/index.html | 31 -- .../information_security_basics/index.html | 29 -- 68 files changed, 5932 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 delete mode 100644 files/ko/orphaned/web/css/index/index.html delete mode 100644 files/ko/orphaned/web/css/linear-gradient()/index.html delete mode 100644 files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/ko/orphaned/web/guide/events/index.html delete mode 100644 files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html delete mode 100644 files/ko/orphaned/web/guide/html/html5/index.html delete mode 100644 files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/ko/orphaned/web/html/element/command/index.html delete mode 100644 files/ko/orphaned/web/html/element/element/index.html delete mode 100644 files/ko/orphaned/web/html/global_attributes/dropzone/index.html delete mode 100644 files/ko/orphaned/web/html/preloading_content/index.html delete mode 100644 files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html delete mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/clear/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/delete/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/entries/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/foreach/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/get/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/has/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/map/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/set/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/map/size/index.html delete mode 100644 files/ko/orphaned/web/javascript/reference/operators/pipeline_operator/index.html delete mode 100644 files/ko/orphaned/web/reference/api/index.html delete mode 100644 files/ko/orphaned/web/reference/index.html delete mode 100644 files/ko/orphaned/web/security/information_security_basics/index.html (limited to 'files/ko/orphaned/web') 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")}}

- -

참조

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

{{Index("/ko/docs/Web/CSS")}}

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() ---- -
{{CSSRef}}
- -

CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("<image>")}}의 특별한 종류인 {{cssxref("<gradient>")}} 자료형입니다.

- -
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}
- - - -

구문

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

값

- -
-
<side-or-corner>
-
그레이디언트 축의 시작점. 지정할 경우, to 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있습니다. 하나는 수평 방향(left 또는 right)이고, 다른 하나는 수직 방향(top 또는 bottom)입니다. 방향 키워드의 순서는 상관하지 않으며, 기본값은 to bottom입니다.
-
to top, to bottom, to left, to right 값은 0deg, 180deg, 270deg, 90deg와 같습니다. 나머지 값은 각도로 변환됩니다.
-
{{cssxref("<angle>")}}
-
그레이디언트 축의 방향. 0deg는 to top과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.
-
<linear-color-stop>
-
색상 정지점의 {{CSSxRef("<color>")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("<percentage>")}} 또는 {{CSSxRef("<length>")}})
-
<color-hint>
-
color-hint는 두 인접한 색상 정지점 사이에서 그레이디언트가 진행하는 방식을 지정하는 보간 힌트입니다. 길이는 두 정지점 간의 길이에서 어느 지점에 그 중간 색에 도달해야 하는지 지정합니다. 생략할 경우 가운데에서 중간 색에 도달합니다.
-
-
-

참고: CSS 그레이디언트에서의 색상 정지점 렌더링은 SVG 그레이디언트에서의 색상 정지점과 동일한 규칙을 따라갑니다.

-
-
-
- -

설명

- -

다른 그레이디언트와 마찬가지로, 선형 그레이디언트는 본질 크기를 가지지 않습니다. 즉 기본 크기나 선호 크기, 선호 비율이 없으며, 실제 크기는 그레이디언트를 적용한 요소의 크기와 동일해집니다.

- -

반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 {{cssxref("repeating-linear-gradient")}} 함수를 사용하세요.

- -

<gradient>는 <image>의 한 종류로서 <image>를 사용하는 곳에만 적용할 수 있습니다. 따라서 linear-gradient()는 {{cssxref("background-color")}}와 같은 {{cssxref("<color>")}} 자료형을 받는 속성에는 사용할 수 없습니다.

- -

선형 그레이디언트의 구성

- -

선형 그레이디언트는 하나의 축(그레이디언트 라인)과 두 개 이상의 색상 정지점으로 정의할 수 있습니다. 축 위의 점은 모두 고유한 색을 가집니다. linear-gradient() 함수는 부드러운 그레이디언트를 만들기 위해 축과 직교하는 무수한 선을 그리며, 각 수직선의 색은 축과 교차하는 점의 색과 일치합니다.

- -

linear-gradient.png그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.

- -

시작점은 그레이디언트 축의 한 점으로, 첫 번째 색상이 시작하는 지점입니다. 종료점은 마지막 색상이 끝나는 지점입니다. 두 점은 직사각형에서 자신과 같은 사분면에 위치하는 꼭지점으로부터 시작하여 그레이디언트 축과 직교하는 지점으로 정의합니다. 종료점은 시작점의 대칭점으로 간단하게 알아둘 수도 있습니다. 이렇게 다소 복잡한 정의로 인해, 시작점과 가장 가까운 꼭지점이 시작점의 색을, 종료점과 가장 가까운 꼭지점이 종료점의 색을 갖는 특이한 효과를 확인할 수도 있습니다. 이 효과는 "매직 코너"라고 불리기도 합니다.

- -

그레이디언트 만들기

- -

그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색 사이로 전환하는, 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 {{cssxref("<length>")}}나 {{cssxref("<percentage>")}}를 사용해 명시적으로 지정할 수 있습니다. 따로 위치를 정하지 않으면 이전 정지점과 다음 정지점의 중간 지점에 위치합니다. 다음 두 그레이디언트는 동일합니다.

- -
linear-gradient(red, orange, yellow, green, blue);
-linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
- -

기본적으로 그레이디언트에서 색상 전환은 하나의 색상 정지점에서 다른 색상 정지점으로 부드럽게 일어나고, 가운데 지점은 두 색상의 사이값을 가집니다. 그러나 두 색의 사이에 색상 힌트를 넣어서 직접 색의 중간 지점을 정할 수도 있습니다. 다음 예제의 그레이디언트는 시작점에서 10% 지점까지 완전한 빨강이고, 90% 지점까지는 빨강에서 파랑으로 서서히 전환하며, 마지막 10%는 완전한 파랑입니다. 그러나 빨강과 파랑 사이 전환의 중간 지점은 50%가 아닌 30% 지점이 됩니다.

- -
linear-gradient(red 10%, 30%, blue 90%);
- -

두 개 이상의 색상 정지점을 같은 위치에 배치하면 부드럽게 전환하는 대신 이전 색과 다음 색이 경계선을 그리며 바로 바뀝니다.

- -

색상 정지점의 순서는 오름차순이어야 합니다. 다음 정지점의 위치가 이전 정지점보다 앞이면, 이전 정지점의 위치를 재설정하고 색 전환도 경계선을 그리며 일어납니다. 다음 그레이디언트는 30% 지점에서 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환합니다.

- -
linear-gradient(red 40%, yellow 30%, blue 65%);
-
- -

색상 정지점이 여러 위치를 가질 수도 있습니다. 색상을 선언할 때 인접한 두 정지점의 위치를 모두 포함할 수 있습니다. 다음 세 그레이디언트는 모두 같습니다.

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

기본적으로, 0% 지점에 색을 할당하지 않으면 처음으로 선언한 색이 0%에 배치됩니다. 비슷하게 100% 지점에 색이 없는 경우 마지막 색이 100% 지점까지 도달합니다.

- -

예제

- -

45도 기울어진 그레이디언트

- - - -
body {
-  background: linear-gradient(45deg, red, blue);
-}
-
- -

{{EmbedLiveSample("45도_기울어진_그레이디언트", 120, 120)}}

- -

축의 60% 지점에서 시작하는 그레이디언트

- - - -
body {
-  background: linear-gradient(135deg, orange 60%, cyan);
-}
- -

{{EmbedLiveSample("축의_60_지점에서_시작하는_그레이디언트", 120, 120)}}

- -

다중 위치 색상 정지점을 가진 그레이디언트

- -

이 예제는 다중 위치 색상 정지점을 사용하면서, 인접한 색상 정지점의 위치를 같게 하여 줄무늬 효과를 냅니다.

- - - -
body {
-  background: linear-gradient(to right,
-     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
-}
- -

{{EmbedLiveSample("다중_위치_색상_정지점을_가진_그레이디언트", 120, 120)}}

- -

더 많은 예제

- -

CSS 그레이디언트 사용하기 문서에서 더 많은 예제를 확인하세요.

- -

명세

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Adds interpolation hints.
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

브라우저 호환성

- - - -
{{Compat("css.types.image.gradient.linear-gradient")}}
- -

같이 보기

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

이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 인공 이벤트(synthetic events)라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.

- -

커스텀 이벤트 생성하기

- -

다음과 같이 Event 생성자를 사용해 Events 를 생성할 수 있습니다.

- -
var event = new Event('build');
-
-// 이벤트 리슨.
-elem.addEventListener('build', function (e) { /* ... */ }, false);
-
-// 이벤트 디스패치.
-elem.dispatchEvent(event);
- -

위 코드 예제는 EventTarget.dispatchEvent() 메소드를 사용합니다.

- -

이 생성자는 대부분의 최신 브라우저(Internet Exploere 는 예외)에서 지원됩니다. 더 장황한 접근법(Internet Explorer 에서도 동작하는)은, 아래 옛날 방식 부분을 참고하세요.

- -

커스텀 데이터 추가 – CustomEvent()

- -

이벤트 객체에 더 많은 데이터를 추가하려면, CustomEvent 인터페이스가 존재하고 detail 프로퍼티를 통해 커스텀 데이터를 전달할 수 있습니다
- 예를 들면, 다음과 같이 이벤트가 생성될 수 있습니다.

- -
var event = new CustomEvent('build', { detail: elem.dataset.time });
- -

그럼 이벤트 리스너의 부가적인 데이터에 접근할 수 있게 됩니다.

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

옛날 방식

- -

생성 이벤트로의 오래된 접근법은 Java 로부터 영감을 받은 API들을 사용합니다. 다음은 그 예시를 보여줍니다.

- -
// 이벤트 생성.
-var event = document.createEvent('Event');
-
-// 이벤트 이름을 'build' 라 정의.
-event.initEvent('build', true, true);
-
-// 이벤트 리슨.
-elem.addEventListener('build', function (e) {
-  // e.target 은 elem 과 일치
-}, false);
-
-// target 은 어떤 엘리먼트나 다른 이벤트 타켓이 될 수 있음.
-elem.dispatchEvent(event);
-
-
- -

이벤트 버블링

- -

자식 엘리먼트로부터 이벤트를 발생시키고 그 조상이 이를 캐치하도록 하는것은 종종 바람직합니다. 선택적으로 데이터도 함께합니다.

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

이벤트를 동적으로 생성하고 디스패칭하기

- -

엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
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 } }))
-});
-
- -

내장 이벤트 트리거

- -

이 예제는 DOM 메소드를 사용해 체크박스에 클릭을 시뮬레이팅하는 것을 보여줍니다(클릭 이벤트를 프로그래밍적으로 발생시키는 것입니다). 동작하는 예제를 확인하세요.

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

함께 보기

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

{{draft()}}

- -

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.

- -

The overview page 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.

- -

The custom events page 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.

- -

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.

- -

The device 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 page on orientation coordinate systems and the page on the use of 3D transforms. That is different, but similar, to the change in device vertical orientation. 

- -

The window in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.

- -

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

- -

The user interaction 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:

- - - -

The modification of the web page in structure or content might trigger some events, as is explained in the mutation events page, but the use of these events has been deprecated in favour of the lighter Mutation Observer approach.

- -

The media streams embedded in the HTML documents might trigger some events, as explained in the media events page.

- -

The network requests made by a web page might trigger some events.

- -

There are many other sources of events defined by web browsers for which pages are not yet available in this guide.

- -
-

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.

-
- -

Docs

- -

{{LandingPageListSubpages}}

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

 이 글은 이벤트 및 이벤트 핸들링(event handling)에 대한 개요로서, 웹 페이지가 열려있는 동안 일어나는 사건(incident)에 대해 반응할 수 있도록 하는 코드 설계 패턴에 대해 설명하고, 현 세대의 웹 브라우저에서 핸들링할 수 있는 사건의 종류에 대해 요약한다.

-
- -

 이벤트와 이벤트 핸들링은 웹 페이지가 사용자에 의해 열린 상태를 유지하는 동안 일어나는 사건에 대한 반응을 구현하기 위한 자바스크립트의 핵심적인 기술이다. 이러한 사건에는 페이지가 전시(display)되기 위한 준비과정 중 일어나는 사건, 웹 페이지상의 컨텐츠와 사용자의 상호작용에 의한 사건, 브라우저가 실행되는 기반 장치와 관련된 사건, 매체 스트림(media stream) 재생이나 애니메이션 시간 간격 등 기타 요인에 의한 사건 등이 있다.

- -

 이벤트와 이벤트 핸들링은 자바스크립트가 처음 도입된 시점부터 중심적인 역할을 했으며, 이와 함께 브라우저의 렌더링 아키텍처 역시 단일 처리경로(single pass) 페이지 렌더링으로부터 리플로우(reflow) 기반, 이벤트 구동식(driven) 페이지 렌더링 개념으로 바뀌었다.

- -

 최초에는 브라우저는 페이지의 모든 부분에 대한 문법분석(parse), 처리(process), 그리기(draw) 및 사용자에게 표현(present)까지의 모든 과정이 끝날 때까지 대기하고, 페이지 작업이 끝나면 그 상태로 바뀌지 않고 새 페이지 요청이 있어서 가져오기(fetch)작업이 일어나기 전까지는 그대로의 모습을 유지했다. 

- -

 리플로우 기반 이벤트 구동식 페이지 렌더링 개념으로 바뀐 뒤에는 브라우저는 처리, 그리기, 컨텐츠 표현(present), 반복순환작업을 다시 개시하도록 하는 이벤트 트리거에 대한 대기 등의 작업을 반복순환(loop)하여 수행한다. 이 이벤트 트리거라는 것은 이벤트를 발생하게 하는 사건을 이르는 것으로서, 네트워크상의 자원 로드 완료( 예 : 이미지가 다운로드되어 화면상에 그릴 수 있게 됨), 브라우저에 의한 자원의 문법분석 완료( 예 : HTML페이지 처리가 끝남) 페이지의 컨텐츠와 사용자와의 상호작용(예 : 버튼을 클릭한다) 등이 이러한 사건이 될 수 있다.

- -

 더글라스 크록포드는 An inconvenient API : The theory of the DOM(불편한 API : DOM의 이론)이라는 제목의 강연에서 이러한 변화를 여러 단원에 걸쳐 설명하였는데, 본래의 작업 흐름에서 이벤트 구동식 브라우저의 작업 흐름으로 바뀌는 것을 다음과 같이 보여주었다.

- -
A comparison of the sequential and event-driven browser load sequences.
- -

 두 번째 그림에 보이는 처리방식은 마지막 단계의 작업흐름을 변화시킴으로써 첫 번째 그림의 단일 경로 처리흐름에서 반복순환 흐름으로 바뀐 것을 보여준다. 두 번째 그림은 Paint작업이 끝나면 새로운 이벤트 발생에 대한 처리(이벤트 핸들링)를 하기 위해 이벤트를 기다리게 된다. 이 혁신적인 개념을 이용하면 자원을 다 획득하지 않았더라도 페이지를 부분적으로 렌더링하는 것이 가능하며, 최초에는 자바스크립트에 의해 발전된 이벤트 구동에 의한 동작 효과적으로 구현할 수 있다. (이 강의는 여기를 포함한 다양한 경로로 볼 수 있다) 현재 모든 자바스크립트 코드 실행 환경에서는 이벤트와 이벤트 핸들링을 사용한다.

- -

이벤트 설계 패턴

- -

이벤트 시스템은 근본적으로는 단순한 프로그래밍 설계 패턴이다. 이 패턴는 기본적으로 이벤트의 종류와 다음 사항에 대해 합의된 약속을 기반으로 한다.

- - - -

패턴을 구현하기 위해서는 다음이 필요하다.

- - - -

이 함수는 리스너(listener) 또는 핸들러(handler)라는 혼용된 명칭으로 불린다. 이 패턴은 커스텀 이벤트에 관한 글에서 설명한 대로의 완전한 커스텀 이벤트를 사용하여 쉽게 구현할 수 있다. 이 패턴은 사용자 입력, 브라우저 활동 등에 의해 발동되는 다양한 이벤트를 정의하는 최신 웹 브라우저에서도 많이 사용한다.

- -

 최신 웹 브라우저는 이 이벤트 패턴을 표준화된 방식으로 구현한다. 브라우저는 어떤 이벤트의 프로퍼티를 나타내는 자료 구조로서  EventPrototype 객체를 원천으로 하는 어떤 객체를 사용한다. 또한 이러한 자료구조를 핸들링할 함수에 대한 등록 메소드로서 addEventListener 메소드를 사용하는데 이것은 인수로서 이벤트명과 핸들러 함수를 받는다. 마지막으로 브라우저는 이벤트 발동자(emitter)로 수많은 객체를 정의하며 또한 이 객체들에 의해 생성되는 여러 이벤트형(event type)을 정의한다.

- -

버튼 이벤트 핸들러 데모

- -

하나의 예시로서 브라우저 button 요소(element)는 'click'이라는 이름의 이벤트를 마우스 클릭 또는 터치스크린의 경우 손가락 터치에 반응하여 발동시킨다. 버튼은 HTML 페이지에서 다음과 같이 정의할 수 있다.

- -
<button id="buttonOne">Click here to emit a 'click' event</button>
- -

그리고 자바스크립트 코드에서 'click' 이벤트에 대한 리스너로서의 함수, 즉 핸들러로 사용할 함수를 정의한다.

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

그 다음 해당 Button 객체와 함께 위의 함수를 등록하는데, 첫 번째 방법은 HTML 페이지의 DOM(문서 객체 모델) 표현법을 이용하여 다음과 같이 스크립트상에서 나타내는 방법이다. 

- -
var buttonDOMElement = document.querySelector('#buttonOne');
-buttonDOMElement.addEventListener('click', example_click_handler);
- -

또 다른 방법은 HTML 페이지 상에서 'onclick' 애트리뷰트의 값으로 핸들러로 쓸 함수를 대입시키는 것인데, 보통 이 방식은 매우 단순한 웹 페이지에서나 쓰인다.

- -

{{ EmbedLiveSample('Button_Event_Handler') }}

- -

This code relies on the agreement that there is a kind of event called 'click' which will call any listener (or 'handler') function with an Event object argument (actually, in this case a derivative MouseEvent object) and which will be fired by HTML button 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 buttonDOMElement Javascript object would call the example_click_handler function with an Event 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 ev object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.

- -

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:

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

so that this code will only be executed after the document object emits the 'DOMContentLoaded' 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.

- -

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.

- -

Notable events

- -

Web browsers define a large number of events so it is not practical to list them all. The Event Reference attempts to maintain a list of the standard Events used in modern web browsers.

- -

In general, we can distinguish events of different kinds based on the object emitting the event including:

- - - -

although this list is currently incomplete.

- -

Some notable events are:

- -
-

Note: 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 this web page or in this Stack Overflow question.

-
- - - -

 

- -

The Event object hierarchy

- -

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

- -

A partial diagram of the class hierarchy of event objects is:

- -
-

Note: This diagram is incomplete.

-
- -

- -

The Web API Documentation contains a page defining the Event object which also includes the known DOM event subclasses of the Event object.

- -

Documents

- -

Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:

- - - -

 

- -

 

- -

 

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

HTML5는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. HTML5 명세는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 Firefox 및 다른 많은 제품으로 사용되어 있는 Mozilla의 Gecko 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.

- -

(HTML5의 문서에 대한 다른 분류도 참고하세요.)

- -

HTML5 소개

- -
-
HTML5의 소개
-
이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.
-
- -

HTML5의 요소

- -
-
HTML5 요소·태그의 목록
-
현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.
-
오디오/비디오 사용하기
-
Firefox 3.5이상에서  HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.
-
HTML5 웹 폼양식
-
HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.
-
HTML5 섹션과 아웃라인
-
HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.
-
{{ HTMLElement("mark") }} 요소
-
mark 요소는 텍스트중에서의 특별한 관련성을 강조시키기 위해서 이용합니다.
-
{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소
-
주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.
-
- -

Canvas 기술 지원

- -
-
Canvas 튜토리얼
-
새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.
-
canvas 요소의 HTML5 text API
-
{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.
-
- -

웹 애플리케이션 기능

- -
-
Firefox 오프 라인 자원
-
Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.
-
Online 이벤트와 Offline 이벤트
-
Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.
-
WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)
-
클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.
-
contentEditable 속성： 웹 사이트 및 위키 편집 용이성
-
HTML5 에서는 contentEditable 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.
-
로컬 파일 사용하기
-
새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 type 속성의 값에 file를 지정한 {{ HTMLElement("input") }} 요소에 새롭게 추가된 multiple 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.
-
- -

DOM 주요 기능

- -
-
getElementsByClassName
-
Document 및 Element 노드에 있어서의 getElementsByClassName 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.
-
드래그 앤 드롭
-
HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.
-
HTML 내 포커스 관리
-
HTML5가 새로운 activeElement 속성과 hasFocus 속성이 지원되어 있습니다.
-
웹 기반 프로토콜 핸들러
-
navigator.registerProtocolHandler()메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.
-
- -

HTML 파서

- -

Gecko의 HTML5 표준 파서(HTML 문서를  DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).

- -

추가 변경사항

- - - -

HTML5의 일부로서 포함된 기술

- -

아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.

- - - -

관련 문서

- -

웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：

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

HTML5는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.

- -

HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. HTML5의 메인 페이지에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 CanIUse 웹 사이트를 참조해 주십시오.

- -

HTML5 DOCTYPE

- -

HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：

- -
<!DOCTYPE html>
-
- -

이  DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.

- -

이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.

- -

<meta charset>으로 문자셋 정의하기

- -

보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.

- -
<meta charset="UTF-8">
- -

이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.

- -

HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.

- -

새로운 HTML5 해석기의 사용

- -

HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.

- -

이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.

- -

걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!

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

중요: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 개요 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 안됩니다. 문서 작성자는 대신 제목 순위(h1-h6)를 사용해 문서 구조를 나타내는 것이 좋습니다.

-
- -

HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.

- -

예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.

- -

새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.

- -

HTML4에서의 문서 구조

- -

문서의 구조, 즉 <body>와 </body> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다. HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.

- -

그래서 다음과 같은 마크업은:

- -
<div class="section" id="forest-elephants">
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
-  ...섹션 내용 진행 중...
-  <div class="subsection" id="forest-habitat">
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...하위 섹션 내용 진행 중...
-  </div>
-</div>
- -

다음과 같은 문서 아웃라인을 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-
- -

새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,

- -
<h1>둥근귀코끼리</h1>
-<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
-...섹션 내용 진행 중...
-<h2>서식지</h2>
-<p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-...하위 섹션 내용 진행 중...
-<h2>먹이</h2>
-<h1>몽골 게르빌루스쥐</h1>
- -

앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-   1.2 먹이
-2. 몽골 게르빌루스쥐
-
- -

HTML5에서 해결한 문제들

- -

HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:

- -
    -
  1. 의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 class 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 것은 불가능합니다("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 보조 장비에 사용되는 기술에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.
    2. -
  2. 여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.
    3. -
  3. HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.
    4. -
  4. 반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.
    5. -
- -

좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.

- -

HTML5 문서 아웃라인 알고리즘

- -

HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.

- -

HTML5에서의 섹션 정의

- -

우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.

- -
각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. HTML5에서 제목 지정하는 법을 보십시오.
- -

보기:

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

위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:

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

첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:

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

그래서 다음과 같은 구조를 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 소개
-   1.2 서식지
-   1.3 광고 구역 (aside)
-
- -

HTML5에서 제목 지정하는 법

- -

비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.

- -

제목 요소엔 요소 이름에 붙은 숫자를 가지고 계급을 매기는데, {{HTMLElement("h1")}}이 최상위 계급이며 {{HTMLElement("h6")}}는 최하위 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...계속 된 섹션 내용...
-  <section>
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...계속 된 하위 섹션 내용...
-  </section>
-</section>
-<section>
-  <h3>몽골 게르빌루스쥐</h3>
-  <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다.
-    ...계속 된 섹션 내용...
-</section>
- -

이는 다음과 같은 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-2. 몽골 게르빌루스쥐
- -

여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)

- -

은연중 자동으로 정의되는 섹션

- -

HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 절대적으로 필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 은연중 자동으로 정의되는 섹션이라 하겠습니다.

- -

HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <h3 class="implicit subsection">서식지</h3>
-  <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...하위 섹션 내용 진행 중...
-</section>
- -

이는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지 (h3 요소에 의해 은연중 자동으로 정의됨)
-
- -

만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <h1 class="implicit section">몽골 게르빌루스쥐</h1>
-  <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다.
-    ...섹션 내용 진행 중...
-</section>
- -

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
-
- -

만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

- -
<body>
-  <h1>포유 동물</h1>
-  <h2>고래</h2>
-  <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <section>
-    <h3>둥근귀코끼리</h3>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-      ...섹션 내용 진행 중...
-    <h3>몽골 게르빌루스쥐</h3>
-      <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다.
-         ...하위 섹션 내용 진행 중...
-    <h2>파충류</h2>
-      <p>파충류는 냉혈 동물입니다.
-          ...하위 섹션 내용 진행 중...
-  </section>
-</body>
- -

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 포유 동물
-   1.1 고래 (h2 요소에 의해 자동으로 정의됨)
-   1.2 둥근귀코끼리 (섹션 요소에 의해 명시적으로 정의됨)
-   1.3 몽골 게르빌루스쥐 (h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
-2. 파충류 (h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
- -

단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 브라우저가 원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.

- -

제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.

- -

섹션 구분의 근원점

- -

섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.

- -

보기:

- -
<section>
-  <h1>숲 코끼리</h1>
-  <section>
-    <h2>소개</h2>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-  <section>
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-      과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p>
-    <blockquote>
-       <h1>보르네오 섬</h1>
-       <p>보르네오 섬에 서식하는 둥근귀코끼리...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:

- -
1. 숲 코끼리
-   1.1 소개
-   1.2 서식지
- -

이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.

- -

문서의 아웃라인 밖에 존재하는 섹션

- -

HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:

- -
    -
  1. HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.
    2. -
  2. HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.
    3. -
  3. HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.
    4. -
  4. HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.
    5. -
- -

섹션을 구분짓는 요소의 주소와 발행 시간

- -

문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.

- -

가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.

- -

비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.

- -

HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법

- -

섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 display:inline 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.

- -
그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:
- -
<!--[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]-->
- -

이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:

- -
<noscript>
-   <strong>주의 !</strong>
-   귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
-   그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
-</noscript>
- -

그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:

- -
<!--[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를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
-     그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
-   </noscript>
-<![endif]-->
-
- -

맺음말

- -

HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.

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: -slug: orphaned/Web/HTML/Element/command -tags: - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Element/command ---- -
{{obsolete_header()}}
- -

The HTML Command element (<command>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar. However, they can be used anywhere on the page.

- -
-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, phrasing content, metadata content.
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionThe start tag is mandatory, but, as it is a void element, the use of an end tag is forbidden.
Permitted parent elements{{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.
DOM interface{{domxref("HTMLCommandElement")}}
- -

Attributes

- -

This element includes the global attributes.

- -
-
{{htmlattrdef("checked")}}
-
Indicates whether the command is selected. Must be omitted unless the type attribute is checkbox or radio.
-
{{htmlattrdef("disabled")}}
-
Iindicates that the command is not available.
-
{{htmlattrdef("icon")}}
-
Gives a picture which represents the command.
-
{{htmlattrdef("label")}}
-
The name of the command as shown to the user.
-
{{htmlattrdef("radiogroup")}}
-
This attribute gives the name of the group of commands, with a type of radio, that will be toggled when the command itself is toggled. This attribute must be omitted unless the type attribute is radio.
-
{{htmlattrdef("type")}}
-
This attribute indicates the kind of command. This can be one of three values. -
    -
  • -

    command or empty which is the default state and indicates that this is a normal command.

    -
    • -
  • -

    checkbox indicates that the command can be toggled using a checkbox.

    -
    • -
  • -

    radio indicates that the command can be toggled using a radio button.

    -
    • -
-
-
- -

Examples

- -
<command type="command" label="Save"
-    icon="icons/save.png" onclick="save()">
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#commands')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}} 
- -

Browser compatibility

- - - -

{{Compat("html.elements.command")}}

- -

{{ HTMLRef }}

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: -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Element/element ---- -
{{HTMLRef}}{{obsolete_header}}
- -

The obsolete HTML <element> element was part of the Web Components specification; it was intended to be used to define new custom DOM elements. It was removed in favor of a JavaScript-driven approach for creating new custom elements.

- -
-

Note: This element has been removed from the specification. See this for more information from the editor of the specification.

-
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesTransparent content.
Permitted content???
Tag omission{{no_tag_omission}}
Permitted parent elements???
DOM interface{{domxref("HTMLElement")}}
- -

Attributes

- -

This element includes the global attributes.

- -

Specifications

- -

The <element> element was formerly in a draft specification of Custom Elements but it has been removed.

- -

Browser compatibility

- - - -

{{Compat("html.elements.element")}}

- -

See also

- -
    -
  • Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}
    • -
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 ---- -
{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}
- -

dropzone 전역 특성은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 Drag and Drop API를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:

- -
    -
  • copy, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.
    • -
  • move, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.
    • -
  • link, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.
    • -
- -

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
- -

브라우저 호환성

- - - -

{{Compat("html.global_attributes.dropzone")}}

- -

같이 보기

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

 {{htmlelement("link")}}엘리먼트의 {{htmlattrxref("rel", "link")}} 속성에 preload라는 값이 부여되면 페이지 라이프사이클 초기에 필요한 자원에 대해서 HTML  {{htmlelement("head")}} 에서 fetch 요청을 선언할 수 있다. 이는 해당 자원의 가용시점을 앞당기고 렌더링의 방해가 일어나지 않게 함으로서 성능을 개선한다. 

- -

이 문서는 <link rel="preload"> 이 어떻게 동작하는지 기본적인 가이드를 제공한다.

- -

The basics

- -

You most commonly use <link> to load a CSS file to style your page with:

- -
<link rel="stylesheet" href="styles/main.css">
- -

Here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want. You will also need to specify:

- -
    -
  • The path to the resource in the {{htmlattrxref("href", "link")}} attribute.
    • -
  • The type of resource in the {{htmlattrxref("as", "link")}} attribute.
    • -
- -

A simple example might look like this (see our JS and CSS example source, and also live):

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

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 <link rel="stylesheet"> and <script> 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:

- -
    -
  • Resources that are pointed to from inside CSS, like fonts or images.
    • -
  • Resources that JavaScript can request, like JSON, imported scripts, or web workers.
    • -
  • Larger images and video files.
    • -
- -

preload has other advantages too. Using as to specify the type of content to be preloaded allows the browser to:

- -
    -
  • Prioritize resource loading more accurately.
    • -
  • Store in the cache for future requests, reusing the resource if appropriate.
    • -
  • Apply the correct content security policy to the resource.
    • -
  • Set the correct {{HTTPHeader("Accept")}} request headers for it.
    • -
- -

What types of content can be preloaded?

- -

Many different content types can be preloaded. The possible as attribute values are:

- -
    -
  • audio: Audio file, as typically used in {{htmlelement("audio")}}.
    • -
  • document: An HTML document intended to be embedded by a {{htmlelement("frame")}} or {{htmlelement("iframe")}}.
    • -
  • embed: A resource to be embedded inside an {{htmlelement("embed")}} element.
    • -
  • fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
    • -
  • font: Font file.
    • -
  • image: Image file.
    • -
  • object: A resource to be embedded inside an {{htmlelement("object")}} element.
    • -
  • script: JavaScript file.
    • -
  • style: CSS stylesheet.
    • -
  • track: WebVTT file.
    • -
  • worker: A JavaScript web worker or shared worker.
    • -
  • video: Video file, as typically used in {{htmlelement("video")}}.
    • -
- -
-

Note: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see link element extensions. Also note that the full list of values the as attribute can take is governed by the Fetch spec — see request destinations.

-
- -

Including a MIME type

- -

<link> 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 type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.

- -

You can see an example of this in our video example (see the full source code, and also the live version):

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

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.

- -

Cross-origin fetches

- -

If you've got your sites' CORS settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <link> element.

- -

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 Font fetching requirements).

- -

Let's use this case as an example. You can see the full example source code on GitHub (also see it live):

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

Not only are we providing the MIME type hints in the type attributes, but we are also providing the crossorigin attribute to handle the CORS issue.

- -

Including media

- -

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

- -

Let's look at an example (see it on GitHub — source code, live example):

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

We include media attributes on our <link> 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 Testing media queries for more).

- -

This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).

- -

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.

- -

Scripting and preloads

- -

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:

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

This means that the browser will preload the myscript.js file, but not actually use it yet. To use it, you could do this:

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

This is useful when you want to preload a script, but then defer execution until exactly when you need it.

- -

Other resource preloading mechanisms

- -

Other preloading features exist, but none are quite as fit for purpose as <link rel="preload">:

- -
    -
  • <link rel="prefetch"> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the next 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 prefetch resources a lower priority than preload ones — the current page is more important than the next. See Link prefetching FAQ for more details.
    • -
  • <link rel="prerender"> 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 prerender as a NoState prefetch instead.
    • -
  • <link rel="subresource"> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as preload, but it had a problem: there was no way to work out a priority for the items (as didn't exist back then), so they all got fetched with fairly low priority.
    • -
  • 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.
    • -
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Further details of preload.
{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Definition of rel=preload.
- -

Browser compatibility

- -

{{Compat("html.elements.link.rel.preload")}}

- -

See also

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

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

Introduction

- -

차등 상속(Differential Inheritance)은 자바 스크립트와 같은 프로토 타입 기반 프로그래밍 언어에서 사용되는 일반적인 상속 모델입니다. 대부분의 객체는 다른 일반적인 객체에서 파생되고 몇 가지 작은 측면에서만 차이가 있다는 원칙에 따라 동작합니다. 일반적으로 객체가 다른 다른 객체에 대한 포인터 목록을 내부적으로 유지합니다.

- -

Example

- - - -

다음 코드는 개체를 "상속"하는 간단한 메서드 예제입니다.

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

상속(inherit)을 사용하면 일반 프로토 타입에서보다 구체적인 개체를 간단히 파생시킬 수 있습니다. 다음은 상속 방법 및 차등 상속을 사용하여 점점 더 구체적인 객체를 구성하는 간단한 예입니다.

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

See also

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

이번 릴리즈의 새 기능

-

JavaScript 버전 1.5는 다음과 같은 개선과 새 기능을 제공합니다: -

런타임 오류
-런타임 오류가 예외로서 보고됩니다. -

숫자 표현 서식 개선
-숫자를 표현하는 서식이 Number.prototype.toExponential, Number.prototype.toFixed, Number.prototype.toPrecision 메소드를 포함함으로서 개선되었습니다. Number 개체 페이지를 보십시오. -

정규 표현식 개선
-정규표현식이 다음과 같이 개선되었습니다: -

- -

조건부 함수 선언
-함수를 if 조건안에서 선언할 수 있습니다. 함수 정의 페이지를 참고하세요. -

함수 표현식
-함수를 표현식 안에서 선언할 수 있습니다. 함수 정의 페이지를 참고하세요. -

Multiple catch clauses
-Multiple catch clauses in a try...catch statement are supported. See The catch Block page. -

Getters와 Setters
-JavaScript writers can now add getters and setters to their objects. This feature is available only in the C implementation of JavaScript. See the Defining Getters and Setters page. -

상수
-읽기전용의 상수가 지원됩니다. This feature is available only in the C implementation of JavaScript. See the Constants page. -

-

미리 알고 있어야 할 것

-

이 안내서는 당신이 다음과 같은 배경지식을 지녔다고 가정합니다: -

-
  • 인터넷과 World Wide Web (WWW)에 대한 상식적인 이해 -
  • HyperText Markup Language (HTML)에 대한 충분한 지식
    -
-

C 혹은 Visual Basic에 대한 프로그래밍 경험이 있으면 좋지만, 필수사항은 아닙니다. -

-

JavaScript 버전

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
JavaScript 버전Navigator 버전
JavaScript 1.0Navigator 2.0
JavaScript 1.1Navigator 3.0
JavaScript 1.2Navigator 4.0-4.05
JavaScript 1.3Navigator 4.06-4.7x
JavaScript 1.4 
JavaScript 1.5Navigator 6.0
모질라 (오픈소스 브라우저)
-

표1: JavaScript와 Navigator 버전
-
-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. -

- - - - - - - - - - - - - -
AbbreviationEnterprise Server version
NES 2.0Netscape Enterprise Server 2.0
NES 3.0Netscape Enterprise Server 3.0
-

Table 2: Abbreviations of Netscape Enterprise Server versions -

-

JavaScript 정보를 찾을 수 있는 곳

-

The core JavaScript documentation includes the following books: -

- -

If you are new to JavaScript, start with the Core JavaScript Guide. Once you have a firm grasp of the fundamentals, you can use the Core JavaScript Reference to get more details on individual objects and statements. -

-

문서 규약

-

JavaScript 응용프로그램은 많은 운영체제에서 실행됩니다. 이 책에 있는 정보는 모든 운영체제에 적용됩니다. 파일과 디렉토리 경로는 Windows 형식(디렉토리 이름을 구분하는데 역슬래시를 사용)으로 썼습니다. Unix에서는 역슬래시를 슬래시로 바꾸어 사용하면 됩니다. -

이 안내서에서 URL은 다음과 같은 형태로 씁니다. -

http://server.domain/path/file.html -

이 URL에서 "server"는 우리가 응용프로그램을 실행하는 서버 이름(research1이나 www 등)이고, "domain"은 인터넷 도메인 이름(netscape.com이나 uiuc.edu 등)입니다. "path"는 서버의 디렉토리 구조를 나타내고, "file.html"은 파일 이름입니다. 일반적으로 URL에서 이탤릭체로 쓴 부분은 알맞은 내용으로 바꿔써야 할 내용(placeholder)이고, 평범한 고정폭 글꼴은 그대로 쓰면 되는 내용입니다. Secure Socket Layer(SSL)을 사용하는 서버라면 http 대신 https를 쓰면 됩니다. -

이 안내서는 다음과 같은 관례를 따릅니다. -

-
  • 고정폭 글꼴은 샘플 코드, API, 언어 요소(메소드 이름, 속성 이름 등), 파일 이름, 경로, 디렉토리 이름, HTML 태그, 화면에 입력해야 할 텍스트를 나타내는 데 쓰입니다. (고정폭 이탤릭체는 코드 내용 중에서 적당히 알맞은 내용으로 바꿔써야 할 부분을 나타내는 데 씁니다.) -
  • 이탤릭체는 책 제목, 강조, 변수, 뜻 그대로 쓰인 단어(words in the literal sense)에 씁니다. -
  • 굵은 글씨는 용어에 씁니다. -
-

{{ PreviousNext("Core_JavaScript_1.5_Guide", "Core_JavaScript_1.5_Guide:JavaScript_Overview") }} -

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

클래스 기반언어와 프로토타입 기반언어

-

Java와 C++이라는 클래스 기반의 객체지향언어는 클래스와 인스턴스라는 2개의 다른 실체가 있다는 개념에 기초하고 있습니다.

-
  • 클래스는 어떤 객체의 집합을 특징짓는 모든 속성(Java에서는 메소드와 필드를, C++에서는 멤버를 프로퍼티로 간주)을 정의합니다. 클래스란 그것이 나타내는 객체집합의 특정멤버가 아닌, 추상적인것입니다. 예를들어, Employee클래스는 모든 종업원의 집합을 나타냅니다.
  • 한편, 인스턴스는 클래스를 실례로 한것입니다. 즉, 그 멤버중 하나인것입니다. 예를들어, Victoria는 Employee클래스의 인스턴스가 될 수 있습니다. 이 클래스는 특정 개인을 종업원으로서 표현하고 있는것입니다. 인스턴스는 그 부모클래스의 속성을 정확하게 유지하고 있습니다.
    • -
-

JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。

-

クラスの定義

-

クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。

-

JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。

-

サブクラスと継承

-

クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。

-

JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。

-

プロパティの追加と削除

-

クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。

-

違いの概要

-

次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。

- -
クラスベース (Java) プロトタイプベース (JavaScript)
クラスとインスタンスは異なる実体である。 すべてのオブジェクトはインスタンスである。
クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。 コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。
new 演算子を用いて単一のオブジェクトを作成する。 同じ。
既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。 コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。
クラスチェーンに従ってプロパティを継承する。 プロトタイプチェーンに従ってプロパティを継承する。
クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。 コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}

-
-

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

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

정규표현식 만들기

-

정규표현식은 다음의 두 가지 방법으로 만들 수 있습니다.

-
    -
  • 정규표현식 상수값을 이용하여 만들기
    • -
-
 re = /ab+c/;
-
-
-
-
- 정규표현식 상수값은 스크립트가 실행될 때 컴파일됩니다. 따라서 정규표현식의 값이 변하지 않을 경우, 이 방법을 사용하면 좀 더 나은 성능을 얻을 수 있습니다.
-
-
-
-
    -
  • RegExp 객체의 생성자를 호출하여 만들기
    • -
-
 re = new RegExp("ab+c");
-
-
-
-
- 생성자를 이용하면 실행 시간에 정규표현식이 컴파일됩니다. 정규표현식 패턴이 바뀔 것을 알고 있거나, 또는 패턴을 사용자의 입력 등을 통해 외부에서 가져오려고 할 때 이 방법을 사용하십시오.
-
-
-
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Special_Operators", "Core_JavaScript_1.5_Guide:Writing_a_Regular_Expression_Pattern") }}

-
-

 

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

getter/setter 정의하기

- -

getter는 속성의 값을 얻어오는 메소드이고, setter는 속성의 값을 설정하는 메소드입니다. 우리는 언어에서 미리 정의한 핵심 개체들과 사용자 정의 개체에 getter/setter를 정의할 수 있습니다. getter와 setter를 정의할 때 쓰이는 문법은 개체 상수값 문법입니다.

- -

다음의 JS 쉘 세션은 사용자가 정의한 개체 o에 대해서 getter와 setter가 어떻게 동작하는지 보여줍니다. JS 쉘은 JavaScript를 한 번에 실행(batch)하거나 대화식으로(interactively) 실행할 수 있게 해주는 응용프로그램입니다.

- -

o 개체에는 이런 속성이 있습니다.

- -
    -
  • o.a - 수
    • -
  • o.b - o.a 더하기 1을 반환하는 getter
    • -
  • o.c - 받은 값을 2로 나누어서 o.a에 설정하는 setter
    • -
- -
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>
-
- -

다음 JavaScript 쉘 세션은 이미 정의된 Date 모든 인스턴스에 year 속성을 추가하기 위해서 getter/setter가 어떻게 Date 프로토타입을 확장하는지 보여줍니다. 이 세션에서는 year 속성의 getter와 setter를 지원하기 위해서 Date에 있는 getFullYear 메소드와 setFullYear 메소드를 사용하고 있습니다.

- -

이 문장들은 year 속성에 대한 getter와 setter를 정의합니다.

- -
js> var d = Date.prototype;
-js> d.__defineGetter__("year", function() { return this.getFullYear(); });
-js> d.__defineSetter__("year", function(y) { this.setFullYear(y); });
-
- -

이 문장들은 Date의 getter/setter를 사용합니다.

- -
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
-
- -
JavaScript 1.5를 개발하는 동안 이미 존재하는 개체에 getter/setter를 추가할 때 getter =, setter =이라는 식의 문법을 사용하던 때가 잠깐 있었습니다. 이 문법은 이제 사용하지 말아야 합니다. 현재의 JS 1.5 엔진에서는 경고를 발생시키고, 더 나중의 버전에서는 문법 에러를 발생시키게 될 것입니다.
- -

 

- -

요약

- -

getter/setter를

- -
    -
  • 개체 초기화 지정자를 이용해서 정의하거나,
    • -
  • 개체가 만들어진 이후에 getter/setter 추가 메소드를 이용해서 언제든지 추가할 수 있습니다.
    • -
- -

개체 초기화 지정자를 이용할 때는 단순히 getter 메소드 앞에는 get을 써주고 setter 메소드 앞에는 set을 써주기만 하면됩니다. 물론 getter 메소드에는 매개변수가 없어야 하고 setter에는 정확히 하나만 있어야 합니다. 다음 예제에서와 같이 말입니다.

- -
o = {
-  a:7,
-  get b() { return this.a+1; },
-  set c(x) { this.a = x/2; }
-};
-
- -

개체가 생성된 이후에 어느 때라도 __defineGetter__와 __defineSetter__라는 메소드를 이용하면 getter/setter를 정의할 수 있습니다. 두 메소드 모두 첫 번째 매개변수에 getter/setter 이름을 나타내는 문자열을 받습니다. 두 번째 매개변수는 getter/setter로서 호출될 함수를 받습니다. 예제를 보십시오.

- -
o.__defineGetter__("b", function() { return this.a+1; });
-o.__defineSetter__("c", function(x) { this.a = x/2; });
-
- -

두 가지 중에서 어떤 방식을 택할지는 프로그래밍 스타일이나 해야할 작업에 달려있습니다. 프로토타입을 정의하는데 이미 개체 초기화 지정자를 사용하고 있다면 거의 첫 번째 방식을 사용할 것입니다. 첫 번째가 좀 더 단순하고 자연스러운 방식입니다. 그러나 우리가 직접 프로토토입을 만들거나 개체를 생성할 수 없어서 나중에 getter/setter를 추가해야 하는 상황이라면 두 번째 방식을 사용할 수 밖에 없습니다. 두 번째 방식은 JavaScript의 동적인 특성을 잘 보여주는 방식입니다. 하지만 코드를 읽고 이해하기 어렵게 만들 수도 있습니다.

- -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties") }}

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

메소드 정의

-

- - 메소드 - 는 개체와 연관되어 있는 함수입니다. 일반적인 함수를 정의하는 것과 같은 방법으로 메소드를 정의합니다. 그 후에, 존재하는 개체와 함수를 연관시키기 위해서 다음과 같은 문법을 사용합니다.

-
object.methodname = function_name
-
-

object는 존재하는 개체중에 하나이고, methodname은 지금 추가하려는 메소드 이름이며, function_name은 함수 이름입니다.

-

이제 우리는 개체의 메소드를 호출할 때 다음과 같이 할 수 있습니다.

-
object.methodname(params);
-
-

개체 생성자 함수에 메소드 정의를 포함시켜서 개체 타입에 대한 메소드를 정의할 수 있습니다. 예를 들어, 미리 정의된 car 개체의 속성을 출력해주는 함수를 정의할 수 있습니다.

-
function displayCar() {
-   var result = "A Beautiful " + this.year + " " + this.make
-      + " " + this.model;
-   pretty_print(result);
-}
-
-

pretty_print는 가로선과 문자열을 출력하는 함수입니다. 이 메소드가 포함된 개체를 참조하기 위해서 this를 사용하고 있다는 것을 주의해서 보십시오.

-

아래 문장을 개체 정의에 추가함으로써 이 함수를 car의 메소드로 만들 수 있습니다.

-
this.displayCar = displayCar;
-
-

그러므로 car 개체의 완벽한 정의는 아래와 같은 모습이 될 것입니다.

-
function car(make, model, year, owner) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-   this.owner = owner;
-   this.displayCar = displayCar;
-}
-
-

그러면 우리는 모든 car 개체에 대해서 이런 식으로 displayCar 메소드를 호출할 수 있게됩니다.

-
car1.displayCar()
-car2.displayCar()
-
-

이 코드는 다음 그림과 같은 내용을 만들어냅니다.

-

Image:obja.gif 그림 7.1: 메소드 출력 결과

-

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

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

개체 형식에 속성 정의하기

-

prototype 속성을 이용하면 이미 정의해 놓은 개체 형식에 속성을 추가할 수 있습니다. 이 방법을 사용하면 개체의 인스턴스 하나에만 속성이 추가되는 것이 아니라 같은 타입의 모든 개체가 공유하는 속성을 정의합니다. 다음 코드는 car 형식의 모든 개체에 color 속성을 추가하고, car1 개체의 color 속성에 값을 할당하는 코드입니다.

-
Car.prototype.color=null;
-car1.color="black";
-
-

더 많은 정보를 얻으려면 기본 JavaScript 레퍼런스에 있는 Function 개체의 prototype 속성을 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods") }}

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

속성 제거

-

delete 연산자를 사용하여 속성을 제거할 수 있습니다. 어떻게 속성을 제거하는지 코드를 보십시오.

-
//a와 b라는 속성을 가지는 새 개체를 만듭니다.
-myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-//myobj가 속성 b만을 가지도록 속성 a를 지웁니다.
-delete myobj.a;
-
-

전역 변수를 선언할 때 var 키워드를 사용하지 않았다면 그 전역 변수를 제거하는데 delete 연산자를 사용할 수 있습니다.

-
g = 17;
-delete g;
-
-

더 많은 정보를 얻으려면 delete를 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects") }}

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

개체 속성 접근하기

-

JavaScript 1.0에서는 개체의 속성을 참조할 때 개체 이름이나 순서 인덱스를 사용할 수 있습니다. 그러나 JavaScript 1.1과 그 이후 버전에서는 처음에 속성을 정의할 때 이름으로 정의했으면 항상 이름으로만 참조해야 하고, 인덱스로 정의했으면 인덱스로만 참조해야 합니다.

-

이런 제한은 앞 페이지 예제의 car 개체 형식처럼 생성자 함수로 개체와 개체 속성을 만들 때나 명시적으로 개별 속성을 만들 때(예를 들어 myCar.color = "red" 같은 식으로 속성을 추가할 때) 모두 적용됩니다. 그러므로 myCar{{ mediawiki.external(5) }} = "25 mpg"라고 인덱스를 이용해서 속성을 정의하면 그 이후로는 항상 myCar{{ mediawiki.external(5) }}로 참조할 수 있습니다.

-

이 규칙은 forms 배열 같이 HTML을 반영하여 생성된 개체에는 예외입니다. 이 배열에 있는 개체를 참조할 때는 순서(문서에 기록된 순서)를 나타내는 숫자나 이름(이름을 정의한 경우에만)을 이용하여 참조할 수 있습니다. 예를 들어, 문서에 있는 두 번째 <FORM> 태그가 "myForm"이라는 값을 가진 NAME 속성을 갖고 있다면 이 폼은 document.forms{{ mediawiki.external(1) }}, document.forms{{ mediawiki.external('\"myForm\"') }}, document.myForm으로 접근할 수 있습니다. {{ 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") }}

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

생성자 함수 사용하기

-

다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다.

-
    -
  1. 생성자 함수를 작성함으로써 개체를 정의합니다.
    2. -
  2. new 키워드를 사용하여 개체의 인스턴스를 만듭니다.
    3. -
-

개체 형식을 정의하기 위해서, 개체의 이름, 속성, 메소드를 지정하는 함수를 만듭니다. 자동차를 나타내기 위한 개체를 만들고 싶다고 해봅시다. 그렇다면 이 형식이 car라고 불리길 원할 것이고, make, model, year라는 속성이 있기를 원할 것입니다. 원하는 것을 이루기 위해서 이런 함수를 작성합니다.

-
function car(make, model, year) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-}
-
-

함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해서 this를 사용했다는 것을 명심하십시오.

-

이제 우리는 mycar라는 개체를 이렇게 만들 수 있습니다.

-
mycar = new car("Eagle", "Talon TSi", 1993);
-
-

이 문장은 mycar를 만들고, 지정된 값을 mycar의 속성에 할당합니다. 그러면 mycar.make는 "Eagle"이라는 문자열 값을 가지고, mycar.year는 1993이라는 정수를 가질 것입니다.

-

우리는 new를 써서 car 개체를 몇 개라도 만들 수 있습니다.

-
kenscar = new car("Nissan", "300ZX", 1992);
-vpgscar = new car("Mazda", "Miata", 1990);
-
-

개체는 다른 개체를 속성으로 가질 수 있습니다. 예를 들어, person 개체를 다음과 같이 정의했다고 합시다.

-
function person(name, age, sex) {
-   this.name = name;
-   this.age = age;
-   this.sex = sex;
-}
-
-

그리고나서 person 개체의 인스턴스 두 개를 만듭니다.

-
rand = new person("Rand McKinnon", 33, "M");
-ken = new person("Ken Jones", 39, "M");
-
-

이제 우리는 car가 owner라는 속성으로 person 개체를 가지도록 car의 정의를 바꿀 수 있습니다.

-
function car(make, model, year, owner) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-   this.owner = owner;
-}
-
-

새 개체 인스턴스를 만들 때 이렇게 쓸 수 있습니다.

-
car1 = new car("Eagle", "Talon TSi", 1993, rand);
-car2 = new car("Nissan", "300ZX", 1992, ken);
-
-

위 문장에서 owner 인자로 문자열 상수값이나 정수값을 전달하는 대신 rand와 ken이라는 개체를 전달했다는 사실에 주의하십시오. 이제 car2의 소유자 이름을 알고 싶으면 이런식으로 접근할 수 있습니다.

-
car2.owner.name
-
-

정의된 개체에 아무때나 속성을 추가할 수 있다는 사실을 기억하십시오.

-
car1.color = "black"
-
-

이 문장은 car1에 color 속성을 추가하고 "black"이라는 값을 할당합니다. 그러나 이 문장이 다른 개체에 영향을 미치지는 않습니다. 같은 형식을 가지는 모든 개체에 새 속성을 추가하고 싶으면 car 개체 형식의 정의에 속성을 추가해야 합니다.

-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_Object_Initializers", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties") }}

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

this를 사용한 개체 참조

-

JavaScript에는 this라는 키워드가 있는데, 메소드 안에서 현재 개체를 참조하기 위해서 이 키워드를 사용할 수 있습니다. 예를 들어, 개체의 값 속성을 검증하는 validate라는 함수가 있다고 해봅시다.

-
function validate(obj, lowval, hival) {
-   if ((obj.value < lowval) || (obj.value > hival))
-      alert("Invalid Value!");
-}
-
-

그러면 폼의 각 요소의 onchange 이벤트 핸들러에서 validate를 호출할 때, 다음 예제와 같은 방법으로 this를 사용해서 폼 요소를 validate에 전달할 수 있습니다.

-
<input type="text" name="age" size="3"
-   onChange="validate(this, 18, 99)">
-
-

form 속성과 같이 사용하면, this는 현재 개체의 부모 폼을 참조할 수 있습니다. 다음 예제에서, myForm이라는 폼은 Text 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 Text 개체의 값을 폼 이름으로 바꿉니다. 버튼의 onclick 이벤트 핸들러에서 부모 폼인 myForm을 참조하기 위해서 this.form을 사용하고 있습니다.

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

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters") }}

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

표현식

-

표현식은 상수(literals), 변수, 연산자 그리고 단일값을 반환하는 계산식(값은 숫자, 문자열, 논리값이 가능)이 알맞게 조합된 집합체다. -

개념적으로 보면 표현식에는 두가지 타입이 있다: 하나는 변수에 값을 할당하는 것이고 다른 하나는 단순히 값을 가지고 있는 것이다. 예를 들어, x = 7 이라는 표현식은 x 에 7이라는 값을 할당하는 표현식이다. 이 표현식은 스스로 7이라는 값을 부여한다. 이런 표현식들은 할당 연산자를 사용한다. 반면에, 3 + 4 라는 표현식은 단순히 7이라는 값을 계산할 뿐이다; 할당하지 않는다. 이런 표현식에서 사용되는 연산자는 그냥 단순히 연산자라고만 한다. -

JavaScript에는 다음과 같은 타입의 표현식이 있다: -

-
  • 산술형 : 3.14159와 같이 숫자를 표현(evaluate). (일반적으로 산술 연산자를 사용) -
  • 문자열형: "Fred"나 "234"와 같이 문자열을 표현(evaluate). (일반적으로 문자열 연산자를 사용) -
  • 논리형: 참(true) 혹은 거짓(false)을 표현(evaluate). (종종 논리 연산자와 함께 사용) -
  • 객체형: 객체를 표현(evaluate). (객체표현식에 사용하는 다양한 연산자는 특수 연산자를 참고) -
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Unicode", "Core_JavaScript_1.5_Guide:Operators") }} -

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

JavaScript란 무엇인가?

-

JavaScript는 크로스 플랫폼, 객체 지향 스크립트 언어입니다. JavaScript는 작고, 가벼운 언어입니다; JavaScript는 단독으로 쓰이는 언어로는 유용하지 않지만, 웹 브라우져 같은 다른 제품이나 프로그램에 포함하기 쉽습니다. 호스트 환경에서 JavaScript는 그 환경의 다른 개체(object)들을 프로그램적으로 제어하기 위해서 그들과 연결될 수 있습니다.

-

기본 JavaScript(core JavaScript)는 Array, Date, Math등 기본이 되는 개체들(core set of objects)과 연산자, 제어 구조, 문장등 언어의 기본 요소들(core set of language elements)을 포함하고 있습니다. 기본 JavaScript는 다른 개체를 추가함으로써 다양한 목적을 위해 확장될 수 있습니다. 예를 들면 다음과 같은 것들입니다.

-
  • "클라이언트쪽 JavaScript"는 브라우저(Navigatore 또는 다른 브라우저들)와 브라우저의 Document Object Model(DOM)을 제어할 수 있는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 클라이언트쪽 확장 기능은 응용프로그램이 HTML 폼에 요소를 두어 마우스 클릭이나 폼 입력, 페이지 이동 같은 사용자 이벤트에 반응할 수 있게 합니다.
  • "서버쪽 JavaScript"는 서버에서 JavaScript를 실행하는 데 연관되는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 서버쪽 확장 기능은 응용프로그램이 관계형 데이터베이스와 통신할 수 있게 하고, 응용프로그램의 호출들 사이에 연속성을 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.
    • -
-

JavaScript의 LiveConnect 기능을 통해서, Java와 JavaScript 코드가 서로 통신할 수 있습니다. JavaScript에서 Java 개체를 초기화하여 개체의 공개 메소드와 필드에 접근할 수 있습니다. Java에서 JavaScript 개체, 속성(property), 메소드에 접근할 수 있습니다.

-

Netscape가 JavaScript를 개발했고 Netscape 브라우저에서 JavaScript가 가장 먼저 사용되었습니다.

-

JavaScript와 Java

-

JavaScript 와 Java 는 여러가지 면에서 비슷하지만 본질적으로 다릅니다. JavaScript는 Java 와 공통점이 있지만 Java 처럼 형(type)을 검사하지 않습니다. JavaScript는 Java 문법의 대부분과 제어흐름의 기본적인 개념들을 지원합니다.

-

Java의 클래스 선언으로 이루어지는 컴파일 타임 시스템에 대조적으로, JavaScript는 수, 불리언, 문자열 값을 나타내는 작은 규모의 자료형에 기반한 런타임 시스템을 지원합니다. JavaScript는 클래스 기반 개체 모델이 아닌 프로토타입 기반(prototype-based) 개체 모델을 갖고 있습니다. 프로토타입 기반 개체 모델은 동적인 상속을 제공합니다. 즉, 각각의 개체를 상속할 수 있는 것입니다. JavaScript는 또 특별히 선언시의 요구사항이 없는 함수도 지원합니다. 함수는 느슨하게 타입된 메소드로 실행됨으로써 개체의 속성이 될 수 있습니다.(Functions can be properties of objects, executing as loosely typed methods.)

-

Java에 비해 JavaScript는 형식이 자유로운 언어입니다. 모든 변수, 클래스, 메소드들을 꼭 선언 할 필요는 없습니다. 메소드가 public, private, protected 인지 고민해야할 필요가 없고, interface를 구현할 필요도 없습니다. 변수, 매개변수(parameter), 함수의 반환 형식도 명시적으로 지정할 필요가 없습니다.

-

Java는 클래스 기반 프로그래밍 언어로서, 빠른 실행과 형 안정성(type safety)을 위해 설계되었습니다. 형 안정성이란 예를 들면 Java에서 정수를 개체 참조로 변환할 수 없고, Java 바이트코드에 오류를 일으켜서 사적인(private) 메모리 공간에 접근할 수 없다는 말입니다. 자바의 클래스 기반 모델은 프로그램이 클래스와 클래스의 메소드로만 이루어진다는 의미입니다. Java의 클래스 상속과 엄격한 형 검사(strong typing)는 일반적으로 단단히 결합된 개체의 계층 구조를 필요로 합니다. 이런 요구사항이 JavaScript 프로그래밍에 비해 Java 프로그래밍을 더 복잡하게 만듭니다.

-

반면 JavaScript는 HyperTalk나 dBASE 같이 적은 줄수의 동적 타입 언어를 계승한 것입니다. 이런 스크립트 언어는 더 많은 사람들을 위한 프로그래밍 도구로서 제공되는데, 이 언어들이 문법이 쉽고, 내장되기에 쉬우며, 개체 생성에 요구 사항이 단순하기 때문입니다.

- -
JavaScript Java
개체 지향. 개체의 형식 사이에 구분이 없음. 프로토타입 메커니즘을 통해 상속을 지원하고, 어떤 개체에든지 동적으로 속성과 메소드를 추가할 수 있습니다. 클래스 기반. 개체는 클래스 계층 구조를 관통하는 상속을 통해서 클래스와 인스턴스(instance)로 나뉩니다. 클래스와 인스턴스에는 동적으로 속성과 메소드를 추가할 수 없습니다.
변수의 자료형을 선언하지 않음(동적 형 검사) 변수의 자료형을 반드시 선언해야 함(정적 형 검사)
Cannot automatically write to hard disk. Cannot automatically write to hard disk.
-

표(Table) 1.1: JavaScript 와 Java 비교
-
-Java와 JavaScript 사이의 차이점에 대해서 더 알고 싶으시면 개체 모델의 상세 내용을 보시기 바랍니다.

JavaScript와 ECMAScript 명세

-

Netscape가 JavaScript를 개발했고, Netscape 브라우저에서 가장 처음으로 사용되었습니다. 그러나 Ecma International - 정보와 통신 시스템을 표준화하기 위한 유럽 기구(공식적으로 ECMA - the European Computer Manufacturers Association으로 알려짐) - 과 Netscape가 공동으로 작업하여 기본 JavaScript에 기반하여 표준화되고 국제적인 프로그래밍 언어를 만들어냈습니다. JavaScript의 표준화된 버전은 ECMAScript라고 부르고, 표준을 지원하는 응용프로그램에서는 모두 동일하게 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해서 공개된 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세에 문서화되어 있습니다.

-

ECMA-262 표준은 ISO (International Organization for Standardization, 국제 표준화기구)의 승인을 받아 ISO-16262가 되었습니다. Mozilla 웹사이트에서 ECMA-262의 PDF 문서를 얻을 수 있습니다. the Ecma International 웹사이트 에서도 명세를 찾을 수 있습니다. ECMAScript 명세는 World Wide Web Consortium (W3C)에서 표준화 한 Document Object Model(DOM)에 대해서는 설명하지 않습니다. DOM은 HTML 문서 개체들이 스크립트에 노출되는 방식을 정의합니다.

-

JavaScript 버전과 ECMAScript 판본 사이의 관계

-

Netscape는 ECMA와 밀접하게 작업하여 ECMAScript Specification(ECMA-262)를 만들었습니다. JavaScript 버전과 ECMAScript 판본(edition)들 사이의 관계가 아래 표에 설명되어 있습니다.

- -
JavaScript 버전 ECMAScript 판본과의 관계
JavaScript 1.1 ECMA-262, 1판은 JavaScript 1.1에 기초합니다.
JavaScript 1.2 JavaScript 1.2가 발표됐을 때 ECMA-262가 아직 완성되지 않았습니다. 다음과 같은 이유때문에 JavaScript 1.2는 ECMA-262 1판과 완벽하게 호환되지 않습니다.
  • Netscape는 JavaScript 1.2에 몇 가지 기능을 추가했으나, ECMA-262에서 고려하지 못했습니다.
  • ECMA-262는 두 가지 새 기능을 추가했습니다. 유니코드를 이용한 국제화, 모든 플랫폼에서의 동일한 동작. Date 개체 같은 JavaScript 1.2의 몇 가지 기능이 플랫폼에 의존적이었습니다.

JavaScript 1.3

JavaScript 1.3은 ECMA-262 1판과 완벽하게 호환됩니다.

JavaScript 1.3은 ==와 !=연산자를 제외하고는 JavaScript 1.2의 추가적인 기능을 그대로 유지하면서 JavaScript 1.2가 ECMA-262와 어긋나던 점들을 해결했습니다. ==, != 연산자는 ECMA-262에 맞추기 위해 수정되었습니다.

JavaScript 1.4

JavaScript 1.4는 ECMA-262 1판과 완벽하게 호환됩니다.

JavaScript 1.4가 발표되었을 때 ECMAScript 명세의 세 번째 버전이 아직 완성되지 않았습니다.
JavaScript 1.5 JavaScript 1.5는 ECMA-262 3판과 완벽하게 호환됩니다.
-

표 1.2: JavaScript 버전과 ECMAScript 판본
-
-참고: ECMA-262 2판은 1판에 편집상 사소한 변경과 버그 수정을 가한 판본입니다. 현재 ECMA의 TC39 워킹그룹에서 ECMAScript 4판을 작업하고 있습니다. 4판은 JavaScript 2.0과 대응될 것입니다.

-

JavaScript 기본 레퍼런스에서 ECMAScript 호환 기능을 보여줍니다.

-

JavaScript는 항상 ECMAScript Specification에 포함되지 않은 기능들을 포함할 것입니다. JavaScript는 추가적인 기능을 제공하지만 ECMAScript와 호환됩니다.

-

JavaScript 문서 vs ECMAScript 명세서

-

ECMAScript 명세는 ECMAScript를 구현하는데 필요한 요구사항을 모아놓은 것입니다. 이것은 우리가 JavaScript의 한 기능이 다른 ECMAScript 구현에서도 지원될 것인지 결정하는데 유용합니다. ECMAScript에서 지원하는 기능만을 사용하는 JavaScript 코드를 작성할 계획이라면 ECMAScript 명세를 살펴볼 필요가 있을 것입니다.

-

ECMAScript 문서는 스크립트 프로그래머를 돕기위해 작성된 것이 아닙니다. 스크립트 작성에 대한 정보를 얻으려면 JavaScript 문서를 보십시오.

-

JavaScript와 ECMAScript 용어

-

ECMAScript 명세는 JavaScript 프로그래머에게는 친숙하지 않은 용어와 문법을 사용하여 작성되었습니다. 비록 ECMAScript의 언어 설명이 다르긴 하지만 언어는 똑같습니다. JavaScript는 ECMAScript 명세에서 설명하는 모든 기능을 지원합니다.

-

JavaScript 문서는 JavaScript 프로그래머에게 적당한 언어의 측면을 설명합니다. 예를 들면 이렇습니다.

-
  • 전역 개체(Global Object)는 JavaScript 문서에서는 논의되지 않는데, 그것은 우리가 그 개체를 직접 사용할 일이 없기 때문입니다. 전역 개체에서 우리가 사용할 만한 메소드와 속성은 JavaScript 문서에서 논의되고 있기는 하지만 최상위(top-level) 함수와 속성이라고 부릅니다.
  • JavaScript 문서에서 매개변수가 없는 Number와 String 개체 생성자는 논의되지 않고 있는데, 그것은 거의 사용할 일이 없기 때문입니다. Number의 인자없는 생성자는 +0을 반환하고, String의 인자없는 생성자는 ""(빈 문자열)을 반환합니다.
    • -
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:About", "Core_JavaScript_1.5_Guide:Values") }}

-

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

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

객체와 속성

-

자바스크립트 객체는 객체를 구성하는 속성을 가지고 있습니다. 속성에는 간단한 방법으로 접근할 수 있습니다.: -

-
객체이름.속성이름
-
-

객체 이름과 속성 이름 두 가지 모두에 대해 알기쉬운 예가 있습니다. 속성은 값을 지정하여 정의합니다. 예를 들어 myCar라는 객체가 있다면(객체가 이미 존재한다고 가정합니다.), make, model, year라는 속성에 다음과 같이 값을 지정할 수 있습니다. -

-
myCar.make = "Ford";
-myCar.model = "Mustang";
-myCar.year = 1969;
-
-

배열은 한 가지 변수 이름으로 결합되어 있는 연속된 값의 집합입니다. 자바스크립트에서 속성과 배열은 밀접한 관련이 있습니다; 말하자면 그 두 가지는 같은 데이터 구조에 다른 인터페이스라는 뜻입니다. 예를 들면 myCar 객체에 다음과 같이 접근할 수도 있습니다: -

-
myCar["make"] = "Ford";
-myCar["model"] = "Mustang";
-myCar["year"] = 1967;
-
-

이러한 배열의 종류는 연관 배열이라고 부릅니다. 왜냐하면 각각의 인덱스 요소가 문자열 값과 연관되어 있기 때문입니다. 이러한 방식에 대한 설명은 다음의 함수에 객체와 객체의 이름을 입력했을 때 객체의 속성을 표시해주는 다음과 같은 함수에서 알아볼 수 있습니다: -

-
function show_props(obj, obj_name) {
-   var result = "";
-   for (var i in obj)
-      result += obj_name + "." + i + " = " + obj[i] + "\n";
-   return result;
-}
-
-

결과적으로 call show_props(myCar, "myCar")라는 함수 호출은 다음과 같은 값을 반환합니다: -

-
myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1967
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Functions:escape_and_unescape_Functions", "Core_JavaScript_1.5_Guide:Creating_New_Objects") }} -

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

할당 연산자

-

할당 연산자는 왼쪽 피연산자에 오른쪽 피연산자의 값을 할당합니다. 가장 기본적인 할당 연산자에는 등호(=)가 있는데, 왼쪽 피연산자의 값을 오른쪽 연산자에 할당합니다. 즉, x = y 라고 하면 y의 값이 x에 할당되는 것입니다.

-

다른 할당 연산자는 다음 표에서 보듯이 표준연산을 약식으로 쓰는 것입니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
약식 연산자의미
x += yx = x + y
x -= yx = x - y
x *= yx = x * y
x /= yx = x / y
x %= yx = x % y
x <<= yx = x << y
x >>= yx = x >> y
x >>>= yx = x >>> y
x &= yx = x & y
x ^= yx = x ^ y
x |= yx = x | y
-

표: 할당 연산자

-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators", "Core_JavaScript_1.5_Guide:Operators:Comparison_Operators") }}

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

연산자

-

JavaScript에는 다음과 같은 연산자 타입이 있습니다. 이 섹션은 연산자에 대해 기술하고 연산자 우선순위에 대한 정보를 제공합니다. -

- -

JavaScript는 이항연산자와 단항연산자를 모두 사용할 수 있습니다. 이항연산자는 두개의 피연산자(operand)를 가지며, 하나의 피연산자는 연산자 앞에 나머지 하나는 뒤에 위치합니다: -

-
operand1 operator operand2
-
-

예를 들자면, 3+4 혹은 x*y와 같은 것입니다. -

단항연산자는 연산자 앞 혹은 뒤쪽에 하나의 피연산자만 있으면 됩니다: -

-
operator operand
-
-

혹은 -

-
operand operator
-
-

예를 들자면, x++ 혹은 ++x와 같은 것입니다. -

덧붙여, JavaScript는 한개의 삼항연산자, 조건 연산자를 가지고 있습니다. 삼항 연산자는 세개의 피연산자가 필요합니다. -

-

연산자 우선순위

-

관련된 논의에 따라서, 아래의 표는 우선순위 순으로 내림차순 정렬되었습니다. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
연산자 타입사용하는 연산자
멤버 .  []
호출 / 인스턴스 생성 ()  new
부정/증감 !  ~  -  +  ++  --  typeof  void  delete
곱하기/나누기 *  /  %
더하기/빼기 +  -
비트 이동 <<  >>  >>>
관계 <  <=  >  >=  in  instanceof
같음 ==  !=  ===  !==
비트연산-and &
비트연산-xor ^
비트연산-or |
논리연산-and &&
논리연산-or ||
조건 ?:
할당 =  +=  -=  *=  /=  %=  <<=  >>=  >>>=  &=  ^=  |=
컴마,
-

표: 연산자 우선순위 -

이 표의 보다 자세한 버전은 레퍼런스 섹션에 있는 각 연산자별 상세한 추가 설명 링크를 참고하세요. -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Expressions", "Core_JavaScript_1.5_Guide:Operators:Assignment_Operators") }} -

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

Array 개체

-

JavaScript에는 명시적인 배열 자료형이 없습니다. 하지만 배열을 다루기 위해서 Array 개체와 그 개체의 메소드를 이용할 수 있습니다. Array 개체에는 다양한 방법으로 배열을 다루기 위한 메소드들이 있는데, 배열을 합치거나, 순서를 뒤집거나, 정렬하는 등의 작업을 할 수 있습니다. 배열 길이를 알 수 있는 속성과 정규 표현식에 사용할 수 있는 속성들이 있습니다. - - 배열 - 은 이름이나 색인으로 참조할 수 있는 값들을 모아놓은, 값의 순서가 유지되는 집합입니다. 예를 들어, 우리는 고용 번호로 색인된 고용인의 이름을 담고 있는 emp라는 배열을 만들 수 있습니다. 이 때 emp{{ mediawiki.external(1) }}는 1번 고용인, emp{{ mediawiki.external(2) }} 2번 고용인이 되는 것입니다.

-

 

-

배열 만들기

-

Array 개체는 이렇게 만들 수 있습니다.

-
1. arrayObjectName = new Array(element0, element1, ..., elementN)
-2. arrayObjectName = new Array(arrayLength)
-
-

arrayObjectName은 새 개체의 이름이거나 존재하는 다른 개체의 속성 이름입니다. Array 개체의 속성이나 메소드를 이용할 때는 arrayObjectName은 존재하는 Array 개체 이름이거나 존재하는 다른 개체의 속성입니다.

-

element0, element1, ..., elementN는 배열의 원소(element)가 될 값들입니다. 이런 식으로 지정하면, 나열한 값들을 원소로 가지고, 길이는 값의 개수인 배열이 만들어집니다.

-

arrayLength는 배열의 초기 길이입니다. 다음 코드는 원소 다섯 개를 가지는 배열을 만듭니다.

-
billingMethod = new Array(5)
-
-

배열 상수값 또한 Array 개체입니다. 예를 들어, 다음과 같은 상수값은 Array 개체입니다. 배열 상수값에 대한 자세한 내용은 배열 상수값을 보시기 바랍니다.

-
coffees = ["French Roast", "Columbian", "Kona"]
-
-

배열에 원소 넣기

-

원소에 값을 할당함으로써 배열에 값을 넣을 수 있습니다.

-
emp[1] = "Casey Jones"
-emp[2] = "Phil Lesh"
-emp[3] = "August West"
-
-

배열을 만들 때 값을 넣을 수도 있습니다.

-
myArray = new Array("Hello", myVar, 3.14159)
-
-

배열 원소 참조하기

-

배열 원소의 순서를 나타내는 숫자로 원소를 참조할 수 있습니다. 예를 들어 다음과 같은 배열을 만들었다고 해봅시다.

-
myArray = new Array("Wind","Rain","Fire")
-
-

그러면 첫 번째 원소는 myArray{{ mediawiki.external(0) }}으로 참조할 수 있고, 두 번째 원소는 myArray{{ mediawiki.external(1) }}로 참조할 수 있습니다.

-

원소의 색인은 영(0)부터 시작하지만 배열 길이(예를 들면 myArray.length)는 배열의 원소 개수를 나타냅니다.

-

 

-

Array 개체의 메소드

-

Array 개체는 다음과 같은 메소드들을 가지고 있습니다.

-
    -
  • concat 메소드는 두 배열을 합쳐서 새 배열 하나를 반환합니다.
    • -
-
myArray = new Array("1","2","3")
-myArray = myArray.concat("a", "b", "c"); // myArray는 ["1", "2", "3", "a", "b", "c"]이 되었습니다.
-
-
    -
  • join(deliminator = ",") 메소드는 배열의 모든 원소를 문자열로 바꿔서 하나의 문자열을 만들어줍니다.
    • -
-
myArray = new Array("Wind","Rain","Fire")
-list = myArray.join(" - "); // list는 "Wind - Rain - Fire"입니다.
-
-
    -
  • pop 메소드는 배열의 마지막 원소를 배열에서 제거하고 그 원소를 반환합니다.
    • -
-
myArray = new Array("1", "2", "3");
-last=myArray.pop(); // MyArray는 ["1", "2"], last = "3"이 되었습니다.
-
-
    -
  • push 메소드는 하나 또는 그 이상의 원소를 배열 끝에 추가하고, 추가된 마지막 원소를 반환합니다.
    • -
-
myArray = new Array("1", "2");
-myArray.push("3"); // MyArray는 ["1", "2", "3"]이 되었습니다.
-
-
    -
  • reverse 메소드는 원소의 순서를 뒤집어서 첫 번째 원소가 마지막 원소가 되고, 마지막 원소가 첫 번째 원소가 되도록 합니다.
    • -
-
myArray = new Array ("1", "2", "3");
-myArray.reverse(); // myArray = [ "3", "2", "1" ]이 되었습니다.
-
-
    -
  • shift 메소드는 첫 번째 요소를 배열에서 제거하고, 그 원소를 반환합니다.
    • -
-
myArray = new Array ("1", "2", "3");
-first=myArray.shift(); // MyArray는 ["2", "3"], first는 "1"이 되었습니다.
-
-
    -
  • slice (start_index, upto_index) 메소드는 배열의 일부분을 추출하여 새 배열을 반환합니다.
    • -
-
myArray = new Array ("a", "b", "c", "d", "e");
-myArray = myArray.slice(1,4); //색인 1부터 색인 4 바로 앞까지의 원소를 추출해서 [ "b", "c", "d" ]를 반환합니다.
-
-
    -
  • splice(index, count_to_remove, addelement1, addelement2, ...) 메소드는 배열에 원소를 추가하거나 배열에서 원소를 제거합니다.
    • -
-
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")부터 원소 세 개를 제거하고, 그 자리에 원소를 추가합니다.
-
-
    -
  • sort 메소드는 원소를 정렬합니다.
    • -
-
myArray = new Array("Wind","Rain","Fire")
-myArray.sort(); // 배열을 정렬했으므로 myArrray = [ "Fire", "Rain", "Wind" ]가 되었습니다.
-
-

sort 메소드에 배열을 어떻게 정렬할지 결정하는 콜백 함수를 전해줄 수 있습니다. 그 함수는 두 값을 비교해서 다음 셋 중 하나를 반환해야 합니다.

-
    -
  • 정렬할 때 a가 b보다 작다면 -1(또는 임의의 음수)를 반환
    • -
  • 정렬할 때 a가 b보다 크다면 1(또는 임의의 양수)를 반환
    • -
  • a와 b가 같으면 0을 반환
    • -
-

예를 들어 다음 코드는 원소의 마지막 글자를 기준으로 배열을 정렬합니다.

-
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"]가 되었습니다.
-
-
    -
  • unshift 메소드는 하나 또는 그 이상의 원소를 배열 앞에 추가하고 배열의 새 길이를 반환합니다.
    • -
-

2차원 배열

-

다음 코드는 2차원 배열을 만듭니다.

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

바로 위 코드는 이런 배열을 만들어냅니다.

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

배열과 정규 표현식

-

배열이 정규 표현식과 문자열을 매치한 결과로 생성되었을 때, 그 배열은 매치에 대한 정보를 제공하는 속성과 원소를 포함하고 있습니다. RegExp.exec, String.match, String.split의 반환 값은 배열입니다. 정규 표현식과 관련된 배열 사용에 대한 정보를 얻으려면 4장 정규 표현식을 보십시오.

-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Boolean_Object") }}

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

BigInt.prototype 속성은 {{jsxref("BigInt")}} 생성자의 프로토타입을 나타냅니다.

- -

{{js_property_attributes(0, 0, 0)}}

- -

설명

- -

모든 {{jsxref("BigInt")}} 인스턴스는 BigInt.prototype을 상속합니다. BigInt 생성자의 프로토타입 객체를 변형해 모든 BigInt 인스턴스에 영향을 줄 수 있습니다.

- -

속성

- -
-
BigInt.prototype.constructor
-
이 객체의 인스턴스를 만들 때 사용한 함수를 반환합니다. 기본값은 {{jsxref("BigInt")}} 객체입니다.
-
- -

메서드

- -
-
BigInt.prototype.toLocaleString()
-
BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.
-
BigInt.prototype.toString()
-
BigInt의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
-
BigInt.prototype.valueOf()
-
BigInt 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.
-
- -

명세

- - - - - - - - - - - - -
SpecificationStatus
BigInt.prototypeStage 3
- -

브라우저 호환성

- -

{{Compat("javascript.builtins.BigInt.prototype")}}

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

Map[@@toStringTag] 프로퍼티의 초기값은 "Map"입니다.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -

문법

- -
Map[Symbol.toStringTag]
- -

예제

- -
Object.prototype.toString.call(new Map()) // "[object Map]"
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.@@toStringTag")}}

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

clear() 메서드는 Map 객체의 모든 요소를 제거합니다.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}
- - - -

구문

- -
myMap.clear();
-
- -

예제

- -

clear() 사용하기

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

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.clear")}}

- -

같이 보기

- -
    -
  • {{jsxref("Map")}}
    • -
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 ---- -
{{JSRef}}
- -

delete() 메서드는 Map 객체에서 특정 요소를 제거합니다.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}
- - - -

구문

- -
myMap.delete(key);
- -

매개변수

- -
-
key
-
Map 객체에서 제거할 요소의 키.
-
- -

반환 값

- -

요소가 Map 객체에 존재해서 제거했을 경우 true, 존재하지 않았으면 false.

- -

예제

- -

delete() 사용하기

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

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.delete")}}

- -

같이 보기

- -
    -
  • {{jsxref("Map")}}
    • -
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 ---- -
{{JSRef}}
- -

entries() 메서드는 Map 객체의 각 요소에 해당하는 [키, 값] 쌍을 Map에 등록한 순서대로 포함한 새로운 Iterator 객체를 반환합니다.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}
- - - -

구문

- -
myMap.entries()
- -

반환 값

- -

A new {{jsxref("Map")}} iterator object.

- -

예제

- -

entries() 사용하기

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

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.entries")}}

- -

같이 보기

- -
    -
  • {{jsxref("Map.prototype.keys()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
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 ---- -
{{JSRef}}
- -

forEach() 메소드는 Map 오브젝트 내의 key/value 쌍의 개수 만큼 주어진 함수를 순서대로 실행합니다. 

- -
{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}
- - - -

문법

- -
myMap.forEach(callback[, thisArg])
- -

파라미터

- -
-
callback
-
각각의 요소를 처리하기 위한 함수.
-
thisArg
-
 callback 을 실행할때 this 로 사용되는 값.
-
- -

Return value

- -

{{jsxref("undefined")}}.

- -

설명

- -

forEach 메서드는 map의 각각의 키마다 주어진 callback 함수를 실행합니다. 삭제된 키에대해서는 호출되지 않습니다. 그러나, 값이 존재하지만 undefined 인 값에 대해서는 실행됩니다.

- -

callback 은 3가지 인수로 호출됩니다.

- -
    -
  • 요소의 value
    • -
  • 요소의 key
    • -
  • 사용될 Map 객체
    • -
- -

thisArg 파라미터가 forEach 에 제공되면, this 값으로 사용하기 위해 호출될때 callback 으로 넘겨집니다. 그렇지 않으면 undefined 값이 this 값으로 넘겨질 것입니다. 궁극적으로 callback 으로 보여지게 된 this 값은 함수에 의해 보여지는 this 를 결정하기 위한 일반적인 규칙에 따라 결정됩니다.

- -

각각의 value는 한번씩 사용됩니다. 다만 forEach 가 끝나기 전에 value가 삭제되거나 재추가 된 경우는 예외입니다. callback 은 사용되기 전에 삭제된 value에 의해 호출되지 않습니다. forEach 가 끝나기 전에 새롭게 추가된 value가 사용 됩니다.

- -

forEach 는 Map 오브젝트 내에 있는 각각의 요소마다 callback 함수를 실행합니다; 깂을 반환하지 않습니다.

- -

예제

- -

Map 오브젝트의 내용을 출력

- -

아래의 코드는 Map 오브젝트 내의 각각 요소들을 행별로 출력합니다:

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

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.builtins.Map.forEach")}}

- -

See also

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Set.prototype.forEach()")}}
    • -
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 ---- -
{{JSRef}}
- -

get() 메서드는 Map 객체에서 지정한 요소를 회수합니다.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}
- - - -

구문

- -
myMap.get(key);
- -

매개변수

- -
-
key
-
Map 객체에서 회수할 요소의 키.
-
- -

반환 값

- -

주어진 키와 연결된 요소. 그런 요소가 없으면 {{jsxref("undefined")}}.

- -

예제

- -

get 사용하기

- -
var myMap = new Map();
-myMap.set('bar', 'foo');
-
-myMap.get('bar');  // "foo" 반환.
-myMap.get('baz');  // undefined 반환.
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.get")}}

- -

같이 보기

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
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 ---- -
{{JSRef}}
- -

has() 메서드는 주어진 키를 가진 요소가 Map에 존재하는지를 반환합니다.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}
- - - -

구문

- -
myMap.has(key);
- -

매개변수

- -
-
key
-
존재 여부를 판별할 키값.
-
- -

반환 값

- -

주어진 키를 가진 요소가 있으면 true, 아니면 false.

- -

예제

- -

has() 사용하기

- -
var myMap = new Map();
-myMap.set('bar', "foo");
-
-myMap.has('bar');  // returns true
-myMap.has('baz');  // returns false
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.has")}}

- -

같이 보기

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
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 ---- -
{{JSRef}}
- -

Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 {{Glossary("Primitive", "원시 값")}})이라도 키와 값으로 사용할 수 있습니다.

- -

설명

- -

Map 객체는 요소의 삽입 순서대로 원소를 순회합니다. {{jsxref("Statements/for...of", "for...of")}} 반복문은 각 순회에서 [key, value]로 이루어진 배열을 반환합니다.

- -

키 동일성

- -
    -
  • 키 동일성은 sameValueZero 알고리즘에 기반합니다.
    • -
  • NaN !== NaN이지만, 그럼에도 NaN은 NaN과 일치한다고 간주하며, 다른 모든 값은 === 연산자의 결과를 따릅니다.
    • -
  • 현 ECMAScript 명세는 -0과 +0을 같은 값으로 처리하지만 초기 명세에서는 그렇지 않았습니다. {{anch("브라우저 호환성")}}의 "Key equality for -0 and 0"을 참고하세요.
    • -
- -

{{jsxref("Object")}}와 Map 비교

- -

{{jsxref("Object")}}는 값에 키를 할당할 수 있고, 그 키로 값을 얻을 수 있고, 키를 삭제할 수 있으며 어떤 키에 값이 존재하는지 확인할 수 있다는 점에서 Map과 유사합니다. 이런 이유에 더해, 이전에는 내장된 대체제가 없었기 때문에, Object를 Map 대신 사용하곤 했습니다.

- -

그러나 어떤 상황에선, Map을 선호해야 할 몇 가지 중요한 차이점이 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MapObject
의도치 않은 키Map은 명시적으로 제공한 키 외에는 어떤 키도 가지지 않습니다. -

Object는 프로토타입을 가지므로 기본 키가 존재할 수 있습니다. 주의하지 않으면 직접 제공한 키와 충돌할 수도 있습니다.

- -
-

참고: ES5부터, 프로토타입으로 인한 키 충돌은 {{jsxref("Object.create", "Object.create(null)")}}로 해결할 수 있지만, 실제로 쓰이는 경우는 적습니다.

-
-
키 자료형Map의 키는 함수, 객체 등을 포함한 모든 값이 가능합니다.Object의 키는 반드시 {{jsxref("String")}} 또는 {{jsxref("Symbol")}}이어야 합니다.
키 순서 -

Map의 키는 정렬됩니다. 따라서 Map의 순회는 삽입순으로 이뤄집니다.

- 		-

Object의 키는 정렬되지 않습니다.

- -
-

참고: ECMAScript 201 이후로, 객체도 문자열과 Symbol 키의 생성 순서를 유지합니다. ECMEScript 2015 명세를 준수하는 JavaScript 엔진에서 문자열 키만 가진 객체를 순회하면 삽입 순을 따라갑니다.

-
-
크기Map의 항목 수는 {{jsxref("Map.prototype.size", "size")}} 속성을 통해 쉽게 알아낼 수 있습니다.Object의 항목 수는 직접 알아내야 합니다.
순회Map은 순회 가능하므로, 바로 순회할 수 있습니다.Object를 순회하려면 먼저 모든 키를 알아낸 후, 그 키의 배열을 순회해야 합니다.
성능잦은 키-값 쌍의 추가와 제거에서 더 좋은 성능을 보입니다.잦은 키-값 쌍의 추가와 제거를 위한 최적화가 없습니다.
- -

생성자

- -
-
{{jsxref("Map.Map", "Map()")}}
-
새로운 Map 객체를 생성합니다.
-
- -

속성

- -
-
Map.length
-
값이 0인 속성입니다.
- 요소의 수는 {{jsxref("Map.prototype.size")}}로 알아낼 수 있습니다.
-
{{jsxref("Map.@@species", "get Map[@@species]")}}
-
파생 객체를 생성하는데 사용하는 생성자 함수입니다.
-
{{jsxref("Map.prototype")}}
-
Map 생성자의 프로토타입을 나타냅니다. 모든 Map 인스턴스에 속성을 추가할 수 있습니다.
-
- -

Map 인스턴스

- -

모든 Map 인스턴스는 {{jsxref("Map.prototype")}}을 상속합니다.

- -

속성

- -

{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}

- -

메서드

- -

{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}

- -

예제

- -

Map 객체 사용하기

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

Map의 키로 NaN 사용하기

- -

{{jsxref("NaN")}}도 키로서 사용할 수 있습니다. 모든 NaN은 자기 자신과 동일하지 않지만(NaN !== NaN), NaN을 서로 구분할 수도 없기 때문에 아래 예제도 잘 동작합니다.

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

for..of로 Map 순회하기

- -

Map은 for..of 반복문을 사용해 순회할 수 있습니다.

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

forEach()로 Map 순회하기

- -

Map은 {{jsxref("Map.prototype.forEach", "forEach()")}} 메서드로 순회할 수 있습니다.

- -
myMap.forEach(function(value, key) {
-  console.log(key + ' = ' + value)
-})
-// 0 = zero
-// 1 = one
- -

Array 객체와의 관계

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

명세

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}
- -

브라우저 호환성

- -

{{Compat("javascript.builtins.Map")}}

- -

같이 보기

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("WeakMap")}}
    • -
  • {{jsxref("WeakSet")}}
    • -
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 ---- -
{{JSRef}}
- -

Map() 생성자는 {{jsxref("Map")}} 객체를 생성합니다.

- -

구문

- -
new Map([iterable])
- -

매개변수

- -
-
iterable
-
요소가 키-값 쌍인, {{jsxref("Array")}} 또는 다른 순회 가능한 객체(예: [[1, 'one'], [2, 'two']]). 각 키-값 쌍은 새로운 Map에 포함됩니다.
-
- -

예제

- -
let myMap = new Map([
-  [1, 'one'],
-  [2, 'two'],
-  [3, 'three'],
-])
-
- -

명세

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-map-constructor', 'Map constructor')}}
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.Map")}}

- -

같이 보기

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("WeakMap")}}
    • -
  • {{jsxref("WeakSet")}}
    • -
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 ---- -
{{JSRef}}
- -

set() 메서드는 Map 객체에서 주어진 키를 가진 요소를 추가하고, 키의 요소가 이미 있다면 대체합니다.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}
- - - -

구문

- -
myMap.set(key, value);
- -

매개변수

- -
-
key
-
Map에 추가하거나 변경할 요소의 키.
-
value
-
Map에 추가하거나 변경할 요소의 값.
-
- -

반환 값

- -

호출한 Map 객체.

- -

예제

- -

set() 사용하기

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

set() 체이닝

- -

set()이 같은 Map을 반환하므로 메서드를 여러 번 연속해서 호출할 수 있습니다.

- -
// Add new elements to the map with chaining.
-myMap.set('bar', 'foo')
-     .set(1, 'foobar')
-     .set(2, 'baz');
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.set")}}

- -

같이 보기

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
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 ---- -
{{JSRef}}
- -

size 접근자 프로퍼티는  {{jsxref("Map")}} 객체의 요소 갯수를 반환합니다.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}
- - - -

설명

- -

size 값은 얼마나 많은 엔트리를 Map 객체가 가지고 있는지를 표현합니다. size 를 설정할 수 있는 접근자 함수는 undefined 입니다. 당신은 이 프로퍼티를 변경할 수 없습니다.

- -

예제

- -

Using size

- -
var myMap = new Map();
-myMap.set('a', 'alpha');
-myMap.set('b', 'beta');
-myMap.set('g', 'gamma');
-
-myMap.size // 3
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ESDraft')}}
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Map.size")}}

- -

더 보기

- -
    -
  • {{jsxref("Map")}}
    • -
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 ---- -
{{jsSidebar("Operators")}} {{SeeCompatTable}}
- -

파이프 연산자(|>)는 실험적 기능(stage 1)으로, 표현식의 값을 함수에 전달합니다. 파이프 연산자를 활용하면 중첩 함수 호출을 좀 더 읽기 좋은 형식으로 작성할 수 있습니다. 결과물은 문법적 설탕syntactic sugar으로, 하나의 인수를 제공하는 함수 호출은 다음 코드처럼 쓸 수 있습니다.

- -
let url = "%21" |> decodeURI;
- -

전통적인 구문에서는 아래처럼 호출합니다.

- -
let url = decodeURI("%21");
-
- -

구문

- -
expression |> function
-
- -

지정한 expression의 값이 function의 유일한 매개변수로 전달됩니다.

- -

예제

- -

함수 체이닝

- -

파이프 연산자를 사용해, 여러 번 중첩된 함수 호출을 읽기 편한 형태로 바꿀 수 있습니다.

- -
const double = (n) => n * 2;
-const increment = (n) => n + 1;
-
-// 파이프 연산자 없이
-double(increment(double(double(5)))); // 42
-
-// 파이프 연산자 사용
-5 |> double |> double |> increment |> double; // 42
-
- -

명세

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
Pipeline operator draftStage 1Not part of the ECMAScript specification yet.
- -

브라우저 호환성

- -
- - -

{{Compat("javascript.operators.pipeline")}}

-
- -

같이 보기

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

여러분이 알고 있는 웹에는 여러 유용한 작업을 수행할 수 있는 다양한 API가 제공됩니다. 이러한 API는 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 {{domxref("window")}}나 {{domxref("element")}}에 대한 간단한 작업에서부터 WebGL이나 Web Audio와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능합니다.

- -

모든 API에 대한 각각의 인터페이스는 색인에 열거돼 있습니다.

- -

또한 이벤트 레퍼런스에 이용가능한 모든 이벤트 목록도 있습니다.

- -
-
-
-
문서 객체 모델(Document Object Model)
-
DOM은 문서를 조회하거나 수정할 수 있는 API입니다. 문서의 {{domxref("Node")}} 및 {{domxref("Element")}}를 조작할 수 있습니다. HTML, XML, SVG는 DOM을 확장함으로써 각각의 실제적인 요소(element)를 조작합니다.
-
디바이스 API
-
본 API는 웹 페이지 및 애플리케이션에서 사용할 수 있는 다양한 하드웨어 기능을 조작합니다. 예: 주변 조명 센서 API, 배터리 상태 API, 지리적 위치 API, 포인터 잠금 API, 근접 API, 디바이스 방향성 API, 화면 방향성 API, 진동 API.
-
커뮤니케이션 API
-
본 API는 웹 페이지 및 애플리케이션에서 다른 페이지나 기기와 통신할 수 있습니다. 예: 네트워크 정보 API, 웹 알림, 단순 푸시 API.
-
데이터 관리 API
-
본 API는 사용자 데이터를 보관하고 관리할 수 있습니다. 예: FileHandle API, IndexedDB.
-
- -

이러한 API는 어떠한 웹 사이트나 앱에서도 사용할 수 있지만 한정 권한 및 공인 애플리케이션에서는 더 강력한 Mozilla API 셋을 사용하실 수 있습니다.

- -
-
한정 권한 API
-
한정 권한 애플리케이션은 설치 방식 앱으로서 사용자가 특정 권리를 허용한 것입니다. 한정 권한 API로는 TCP 소켓 API, 주소록 API, 디바이스 스토리지 API, 브라우저 API 등이 있습니다.
-
공인 API
-
공인된 애플리케이션은 파이어폭스 OS와 같은 운영체제에 중요한 조작을 수행하는 저층(low-level) 애플리케이션입니다. 한정 권한이 낮은 애플리케이션은 Web Activities를 사용하여 이러한 애플리케이션과 소통합니다. 공인 API로는 블루투스 API, 모바일 연결 API, 네트워크 상태 API, 전화 기능,WebSMS, 와이파이 정보 API, 카메라 API, 전원 관리 API, 설정 API, 대기 API,사용 권한 API, 시간/시계 API 등이 있습니다.
-
-
- -
-

커뮤니티

- -

저희 메일링 리스트나 뉴스그룹를 통해 Web API 커뮤니티에 참여하세요.

- - - -

IRC에서 #webapi 채널의 실시간 토론도 꼭 참여하세요.

- - - -

다음 주제도 확인해보세요.

- - -
-
- -

 

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

{{draft()}}
- 오픈 웹은 많은 기술을 사용하여 구축됩니다. 이 기술들을 사용하기 위해서는 적절한 지식이 필요합니다.
- 아래에서 각각의 참조 자료에 대한 링크를 찾아볼 수 있습니다.

- -

웹 기술들

- -

여러분에게 웹과 함께 시작하기를 추천하지만, 필수는 아닙니다.

- -
-
HTML — Structuring the web
-
하이퍼텍스트 마크업언어(HyperText Markup Language)는 의미론적으로 웹 페이지의 콘텐츠(마크업)를 잘 구조화된 형식으로 의미론적으로 정의하고 표현하는데 사용됩니다. HTML은 HTML 요소(HTML elements)라고 불리는 불록으로 구성된 구조화된 문서를 작성하는 방법을 제공합니다. HTML요소는 태그로 구분되며, 꺽쇠괄호(<>)를 사용하여 표현합니다. 일부는 페이지에 직접 내용을 소개하고, 다른 일부는 문서 텍스트에 대한 정보를 제공하고, 다른 태그는 하위 요소로 포함할 수 있습니다. 분명히, 브라우저는 페이지 내용을 해석하는데 사용하기 때문에, 그대로 문서에 보여주지 않습니다.
-
- HTML 소개| HTML 배우기 | HTML5 | 개발자 가이드 | HTML 요소 레퍼런스 | HTML 참조
-
CSS — Styling the web
-
Cascading Style Sheets 는 웹 컨텐츠의 모양을 꾸미는데 사용합니다.
-
- CSS 소개 | CSS 시작하기 | CSS 배우기 | CSS3 | 개발자 가이드 | 일반적인 CSS 질문들 | CSS 참조
-
JavaScript — Dynamic client-side scripting
-
JavaScript 프로그래밍 언어는 사용자와의 대화식 이용 및 그외 동적 기능을 웹 사이트에 추가하는데 사용됩니다.
-
자바스크립트 배우기 | 개발자 가이드 | 자바스크립트 참조
-
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/정보_보안_기본 ---- -

 정보 보안에 대한 기본적인 이해는 불안전하거나 취약점으로 인해 생긴 약점이 악의적인 이유로 악용되지 않게 당신을 도와줄 것입니다. 이 기사는 당신이 알아야 할 것을 배우는데 도움을 줄 것 입니다. 이 정보를 이용하면, 웹 개발주기 및 콘텐츠 배포를 넘어 보안의 역할과 중요성을 알게될 것입니다.

- -
-
신뢰성, 무결성, 가용성
-
보안을 이해하기 위해 필수적이고 기본적인 보안의 목적에 대해 설명합니다. 
-
취약점
-
취약점의 주요 카테고리를 정의하고, 모든 소프트웨어에 있는 취약점에 대해서 논의합니다. 
-
위협
-
주요한 위협의 개념에 대해 간단히 소개합니다.
-
보안 제어
-
보안 제어의 주요 카테고리를 정의하고, 잠재적인 단점에 대해서 논의합니다. 
-
TCP/IP 보안
-
SSL에 대한 보안 고려 사항에 초점을 맞춘 TCP / IP 모델의 개요.
-
- -

참고

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