From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- files/ko/web/api/ambient_light_events/index.html | 64 ++ files/ko/web/api/battery_status_api/index.html | 75 ++ .../api/broadcastchannel/message_event/index.html | 152 ++++ .../api/canvas_api/a_basic_ray-caster/index.html | 53 ++ files/ko/web/api/canvas_api/index.html | 135 +++ .../manipulating_video_using_canvas/index.html | 164 ++++ .../tutorial/advanced_animations/index.html | 376 +++++++++ .../tutorial/applying_styles_and_colors/index.html | 732 +++++++++++++++++ .../tutorial/basic_animations/index.html | 310 +++++++ .../api/canvas_api/tutorial/basic_usage/index.html | 154 ++++ .../tutorial/compositing/example/index.html | 293 +++++++ .../api/canvas_api/tutorial/compositing/index.html | 106 +++ .../canvas_api/tutorial/drawing_shapes/index.html | 577 +++++++++++++ .../canvas_api/tutorial/drawing_text/index.html | 164 ++++ .../web/api/canvas_api/tutorial/finale/index.html | 51 ++ .../hit_regions_and_accessibility/index.html | 97 +++ files/ko/web/api/canvas_api/tutorial/index.html | 62 ++ .../tutorial/optimizing_canvas/index.html | 110 +++ .../canvas_api/tutorial/transformations/index.html | 286 +++++++ .../canvas_api/tutorial/using_images/index.html | 347 ++++++++ .../index.html | 28 + .../managing_screen_orientation/index.html | 136 +++ .../api/detecting_device_orientation/index.html | 273 +++++++ files/ko/web/api/document/createevent/index.html | 30 + files/ko/web/api/document/getselection/index.html | 9 - .../document_object_model/introduction/index.html | 239 ++++++ .../\354\206\214\352\260\234/index.html" | 239 ------ .../documentorshadowroot/getselection/index.html | 9 + files/ko/web/api/element/accesskey/index.html | 35 - files/ko/web/api/element/blur_event/index.html | 154 ++++ .../web/api/elementcssinlinestyle/style/index.html | 41 + files/ko/web/api/event/createevent/index.html | 30 - .../index.html" | 419 ---------- files/ko/web/api/fetch_api/using_fetch/index.html | 419 ++++++++++ files/ko/web/api/fullscreen_api/index.html | 198 +++++ .../using_the_geolocation_api/index.html | 165 ++++ .../drag_operations/index.html | 343 ++++++++ files/ko/web/api/html_drag_and_drop_api/index.html | 303 +++++++ .../drag_operations/index.html" | 343 -------- .../index.html" | 303 ------- files/ko/web/api/htmlelement/accesskey/index.html | 35 + files/ko/web/api/htmlelement/dataset/index.html | 127 --- files/ko/web/api/htmlelement/innertext/index.html | 88 ++ files/ko/web/api/htmlelement/style/index.html | 41 - files/ko/web/api/htmlelement/tabindex/index.html | 26 - .../api/htmlmediaelement/abort_event/index.html | 74 ++ .../api/htmlorforeignelement/dataset/index.html | 127 +++ .../api/htmlorforeignelement/tabindex/index.html | 26 + files/ko/web/api/navigation_timing_api/index.html | 137 ++++ files/ko/web/api/navigator/connection/index.html | 105 +++ .../ko/web/api/network_information_api/index.html | 46 ++ .../api/networkinformation/connection/index.html | 105 --- files/ko/web/api/node/innertext/index.html | 88 -- .../using_the_notifications_api/index.html | 265 ++++++ files/ko/web/api/proximity_events/index.html | 119 +++ .../web/api/screen.onorientationchange/index.html | 85 -- .../web/api/screen/onorientationchange/index.html | 85 ++ files/ko/web/api/streams_api/concepts/index.html | 115 +++ .../\354\273\250\354\205\211/index.html" | 115 --- files/ko/web/api/vibration_api/index.html | 100 +++ .../web/api/web_workers_api/basic_usage/index.html | 908 --------------------- .../web_workers_api/using_web_workers/index.html | 908 +++++++++++++++++++++ .../api/webgl_api/cross-domain_textures/index.html | 34 - files/ko/web/api/websockets_api/index.html | 172 ++++ .../index.html | 191 +++++ .../writing_websocket_servers/index.html | 258 ++++++ .../api/window/domcontentloaded_event/index.html | 77 ++ files/ko/web/api/window/load_event/index.html | 128 +++ .../settimeout/index.html | 429 ++++++++++ .../ko/web/api/windowtimers/settimeout/index.html | 429 ---------- files/ko/web/api/xmlhttprequest/timeout/index.html | 123 --- .../api/xmlhttprequest/timeout_event/index.html | 123 +++ .../web/api/xsltprocessor/basic_example/index.html | 49 ++ .../xsltprocessor/browser_differences/index.html | 8 + .../api/xsltprocessor/generating_html/index.html | 174 ++++ files/ko/web/api/xsltprocessor/index.html | 15 + .../web/api/xsltprocessor/introduction/index.html | 13 + .../ko/web/api/xsltprocessor/resources/index.html | 14 + 78 files changed, 10527 insertions(+), 3459 deletions(-) create mode 100644 files/ko/web/api/ambient_light_events/index.html create mode 100644 files/ko/web/api/battery_status_api/index.html create mode 100644 files/ko/web/api/broadcastchannel/message_event/index.html create mode 100644 files/ko/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/ko/web/api/canvas_api/index.html create mode 100644 files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/finale/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/transformations/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/using_images/index.html create mode 100644 files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html create mode 100644 files/ko/web/api/css_object_model/managing_screen_orientation/index.html create mode 100644 files/ko/web/api/detecting_device_orientation/index.html create mode 100644 files/ko/web/api/document/createevent/index.html delete mode 100644 files/ko/web/api/document/getselection/index.html create mode 100644 files/ko/web/api/document_object_model/introduction/index.html delete mode 100644 "files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" create mode 100644 files/ko/web/api/documentorshadowroot/getselection/index.html delete mode 100644 files/ko/web/api/element/accesskey/index.html create mode 100644 files/ko/web/api/element/blur_event/index.html create mode 100644 files/ko/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/ko/web/api/event/createevent/index.html delete mode 100644 "files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" create mode 100644 files/ko/web/api/fetch_api/using_fetch/index.html create mode 100644 files/ko/web/api/fullscreen_api/index.html create mode 100644 files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html create mode 100644 files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html create mode 100644 files/ko/web/api/html_drag_and_drop_api/index.html delete mode 100644 "files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" delete mode 100644 "files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" create mode 100644 files/ko/web/api/htmlelement/accesskey/index.html delete mode 100644 files/ko/web/api/htmlelement/dataset/index.html create mode 100644 files/ko/web/api/htmlelement/innertext/index.html delete mode 100644 files/ko/web/api/htmlelement/style/index.html delete mode 100644 files/ko/web/api/htmlelement/tabindex/index.html create mode 100644 files/ko/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/ko/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/ko/web/api/htmlorforeignelement/tabindex/index.html create mode 100644 files/ko/web/api/navigation_timing_api/index.html create mode 100644 files/ko/web/api/navigator/connection/index.html create mode 100644 files/ko/web/api/network_information_api/index.html delete mode 100644 files/ko/web/api/networkinformation/connection/index.html delete mode 100644 files/ko/web/api/node/innertext/index.html create mode 100644 files/ko/web/api/notifications_api/using_the_notifications_api/index.html create mode 100644 files/ko/web/api/proximity_events/index.html delete mode 100644 files/ko/web/api/screen.onorientationchange/index.html create mode 100644 files/ko/web/api/screen/onorientationchange/index.html create mode 100644 files/ko/web/api/streams_api/concepts/index.html delete mode 100644 "files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" create mode 100644 files/ko/web/api/vibration_api/index.html delete mode 100644 files/ko/web/api/web_workers_api/basic_usage/index.html create mode 100644 files/ko/web/api/web_workers_api/using_web_workers/index.html delete mode 100644 files/ko/web/api/webgl_api/cross-domain_textures/index.html create mode 100644 files/ko/web/api/websockets_api/index.html create mode 100644 files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html create mode 100644 files/ko/web/api/websockets_api/writing_websocket_servers/index.html create mode 100644 files/ko/web/api/window/domcontentloaded_event/index.html create mode 100644 files/ko/web/api/window/load_event/index.html create mode 100644 files/ko/web/api/windoworworkerglobalscope/settimeout/index.html delete mode 100644 files/ko/web/api/windowtimers/settimeout/index.html delete mode 100644 files/ko/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/ko/web/api/xmlhttprequest/timeout_event/index.html create mode 100644 files/ko/web/api/xsltprocessor/basic_example/index.html create mode 100644 files/ko/web/api/xsltprocessor/browser_differences/index.html create mode 100644 files/ko/web/api/xsltprocessor/generating_html/index.html create mode 100644 files/ko/web/api/xsltprocessor/index.html create mode 100644 files/ko/web/api/xsltprocessor/introduction/index.html create mode 100644 files/ko/web/api/xsltprocessor/resources/index.html (limited to 'files/ko/web/api') diff --git a/files/ko/web/api/ambient_light_events/index.html b/files/ko/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..b033d4f80d --- /dev/null +++ b/files/ko/web/api/ambient_light_events/index.html @@ -0,0 +1,64 @@ +--- +title: Using Light Events +slug: WebAPI/Using_Light_Events +tags: + - Ambient Light +translation_of: 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/web/api/battery_status_api/index.html b/files/ko/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..12347b0f20 --- /dev/null +++ b/files/ko/web/api/battery_status_api/index.html @@ -0,0 +1,75 @@ +--- +title: Battery Status API +slug: WebAPI/Battery_Status +tags: + - API + - Apps + - Battery API + - Battery Status API + - Obsolete + - 가이드 + - 개요 + - 모바일 + - 배터리 + - 어플리케이션 +translation_of: Web/API/Battery_Status_API +--- +
{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}
+ +

Battery API 만큼이나 자주 언급되는 Battery Status API는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.

+ +

Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니다. 이는 {{domxref("BatteryManager")}} 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.

+ +

예제

+ +

아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{event("chargingchange")}} 와 {{event("levelchange")}} 이벤트가 발생하면 완료 됩니다.

+ +
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+
+ +

명세서의 예제도 확인해보세요.

+ +

사양

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Initial definition.
+ +

브라우저 호환성

+ + + +

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

+ +

더보기

+ + diff --git a/files/ko/web/api/broadcastchannel/message_event/index.html b/files/ko/web/api/broadcastchannel/message_event/index.html new file mode 100644 index 0000000000..1796b8ee0c --- /dev/null +++ b/files/ko/web/api/broadcastchannel/message_event/index.html @@ -0,0 +1,152 @@ +--- +title: message +slug: Web/Events/message +translation_of: Web/API/BroadcastChannel/message_event +--- +

메시지 이벤트는 메시지가 수신되었음을 알리는 메시지, {{domxref("WebSocket")}}, {{domxref("RTCDataConnection")}} 또는 {{domxref("BroadcastChannel")}} 개체를 알려 줍니다.

+ +

대상이 {{domxref("RTCDataConnection")}}, 인 경우 이 이벤트에 대한 이벤트 핸들러를 {{domxref("RTCDataConnection.onmessage")}}속성을 통해 추가할 수 있습니다.

+ +

대상이 {{domxref("BroadcastChannel")}}인 경우, 이 이벤트에 대한 이벤트 핸들러를 {{domxref("BroadcastChannel.onmessage")}} 속성을 통해 추가할 수 있습니다.

+ +

일반 정보

+ +
+
인터페이스
+
+ +
+
{{domxref("MessageEvent")}}
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
{{domxref("RTCDataChannelEvent")}}, {{domxref("WebSocket")}}, {{domxref("BroadcastChannel")}}
+
Default Action
+
None
+
+ +

특성

+ +

{{domxref("Event")}}가 진행되는 동안  {{domxref("MessageEvent")}} 이러한 속성을 구현합니다.

+ +
+
data {{readOnlyInline}}
+
수신된 메시지를 포함하는 {{domxref("DOMString")}} 가 있습니다.
+
+ +

방법

+ +

{{domxref("Event")}}가 진행되는 동안  {{domxref("MessageEvent")}} 이러한 속성을 구현합니다.

+ +

관련 자료

+ + + +

사양

+ + + + + + + + + + + + + + + + + + + +
사양상황Comment
{{ SpecName('WebRTC 1.0', '#event-datachannel-message', 'message on RTCDataChannel') }}{{Spec2('WebRTC 1.0')}}{{domxref("RTCDataChannel")}} 를 {{domxref("EventTarget")}}로 추가하고 이 이벤트가 전송될 시기를 정의합니다.
{{SpecName('HTML WHATWG', '#', 'message on BroadcastChannel')}}{{Spec2('HTML WHATWG')}}{{domxref("RTCDataChannel")}} 를 {{domxref("EventTarget")}}로 추가하고 이 이벤트가 전송될 시기를 정의합니다.
+ +

브라우저 호환성

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
on {{domxref("BroadcastChannel")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
on {{domxref("BroadcastChannel")}}  {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

보기

+ + diff --git a/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..950b0f5366 --- /dev/null +++ b/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,53 @@ +--- +title: A basic ray-caster +slug: A_Basic_RayCaster +tags: + - Advanced + - Canvas + - Example + - Graphics + - HTML + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +
{{CanvasSidebar}}
+ +

This article provides an interesting real-world example of using the {{HTMLElement("canvas")}} element to do software rendering of a 3D environment using ray-casting.

+ +

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

+ +

Open in new window

+ +

Why?

+ +

After realizing, to my delight, that the nifty <canvas> element I'd been reading about was not only soon to be supported in Firefox, but was already supported in the current version of Safari, I had to try a little experiment.

+ +

The canvas overview and tutorial I found here at MDN are great, but nobody had written about animation yet, so I thought I'd try a port of a basic raycaster I'd worked on a while ago, and see what sort of performance we can expect from a JavaScript-controlled pixel buffer.

+ +

How?

+ +

The basic idea is to use {{domxref("window.setInterval","setInterval()")}} at some arbitrary delay that corresponds to a desired frame rate. After every interval an update function will repaint the canvas showing the current view. I know I could have started with a simpler example, but I'm sure the canvas tutorial will get to that, and I wanted to see if I could do this.

+ +

So every update, the raycaster looks to see if you've pressed any keys lately, to conserve calculations by not casting if you're idle. If you have, then the canvas is cleared, the ground and sky are drawn, the camera position and/or orientation are updated, and the rays are cast out. As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall. The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line.

+ +

The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070), and a java raycaster I found online, filtered through my compulsion to rename everything so it makes sense to me, and all the tinkering that had to be done to make things work well.

+ +

Results

+ +

The canvas in Safari 2.0.1 performed surprisingly well. With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini. Firefox 1.5 Beta 1 is even faster; I can run 320 x 240 at 24 fps with 4 pixel slivers. Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything. The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster.

+ +

Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level. But I'm pretty confident all those things could be added given enough time. The canvas API supports pixel copying of images, so textures seem feasible. I'll leave that for another article, probably from another person. =)

+ +

The ray-caster

+ +

The nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).

+ +

So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <canvas> element and enjoy!
+
+ input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+ +

See also

+ + diff --git a/files/ko/web/api/canvas_api/index.html b/files/ko/web/api/canvas_api/index.html new file mode 100644 index 0000000000..bbe466e58d --- /dev/null +++ b/files/ko/web/api/canvas_api/index.html @@ -0,0 +1,135 @@ +--- +title: Canvas API +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - JavaScript + - 개요 + - 레퍼런스 +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Canvas API는 JavaScript와 HTML {{HtmlElement("canvas")}} 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

+ +

Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 <canvas> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.

+ +

기본 예시

+ +

canvas에 초록색 사각형을 그리는 간단한 예시입니다.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

{{domxref("Document.getElementById()")}} 메소드는 HTML <canvas> 엘리먼트에 대한 참조를 얻습니다. 그 다음, {{domxref("HTMLCanvasElement.getContext()")}} 메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.

+ +

실제 그리기는 {{domxref("CanvasRenderingContext2D")}} 인터페이스를 사용해 수행됩니다. {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 프로퍼티는 사각형을 초록색으로 만듭니다. {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 100);
+
+ +

결과

+ +

{{ EmbedLiveSample('기본_예시', 700, 180) }}

+ +

레퍼런스

+ +
+ +
+ +
+

노트: WebGLRenderingContext에 관련된 인터페이스는 WebGL 하위에 참조되어있습니다.

+
+ +

{{domxref("CanvasCaptureMediaStream")}}은 관련된 인터페이스입니다.

+ +

가이드 및 튜토리얼

+ +
+
Canvas 튜토리얼
+
Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.
+
HTML5 Canvas 깊이 살펴보기
+
Canvas API 및 WebGL의 실습, 자세한 소개.
+
Canvas 핸드북
+
Canvas API에 대한 유용한 레퍼런스.
+
데모: A basic ray-caster
+
Canvas를 사용한 ray-tracing 애니메이션 데모.
+
Canvas를 사용하여 비디오 조작
+
{{HTMLElement("video")}}와 {{HTMLElement("canvas")}}를 조합하여 실시간으로 비디오 데이터를 조작.
+
+ +

라이브러리

+ +

Canvas API는 굉장히 강력하지만, 사용하는 것이 항상 간단하지 않습니다. 아래에 나열된 라이브러리들은 캔버스 기반 프로젝트를 더 빠르고 더 쉽게 생성할 수 있게 해줍니다.

+ + + +
+

노트: WebGL을 사용하는 2D 및 3D를 위한 WebGL API를 확인하세요.

+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
+ +

브라우저 호환성

+ +

Mozilla 애플리케이션은 Gecko 1.8(Firefox 1.5)을 시작으로 <canvas>에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 <canvas>를 지원하며, 이전 버전의 IE에서는 Google의 Explorer Canvas 프로젝트의 스크립트를 추가하여 <canvas>에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 <canvas>를 지원합니다.

+ +

함께 보기

+ + diff --git a/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html new file mode 100644 index 0000000000..7851f86154 --- /dev/null +++ b/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -0,0 +1,164 @@ +--- +title: 캔버스(canvas)를 이용한 비디오 조작하기 +slug: Web/HTML/Canvas/Manipulating_video_using_canvas +tags: + - Canvas + - Video + - 비디오 + - 캔버스 +translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +--- +
{{CanvasSidebar}}
+ +
+

비디오에서 다양한 시각적 효과를 보여주기 위해, 캔버스와 비디오의 기능을 결합하여 실시간으로 비디오 데이터를 조작할 수 있습니다. 이 튜토리얼에서는 자바스크립트 코드로 어떻게 크로마 키잉(chroma-keying, 또한 "녹색 스크린 효과, green screen effect")을 구현할 수 있는지 보여줍니다. 

+
+ +

라이브 예제 보기

+ +

문서(document) 내용

+ +

이 내용을 보여주기 위한 XHTML 문서는 아래와 같습니다.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #c2 {
+        background-image: url(foo.png);
+        background-repeat: no-repeat;
+      }
+      div {
+        float: left;
+        border :1px solid #444444;
+        padding:10px;
+        margin: 10px;
+        background:#3B3B3B;
+      }
+    </style>
+    <script type="text/javascript" src="main.js"></script>
+  </head>
+
+  <body onload="processor.doLoad()">
+    <div>
+      <video id="video" src="video.ogv" controls="true"/>
+    </div>
+    <div>
+      <canvas id="c1" width="160" height="96"></canvas>
+      <canvas id="c2" width="160" height="96"></canvas>
+    </div>
+  </body>
+</html>
+
+ +

여기에서 중요한 요소는:

+ +
    +
  1. 이 문서에는 ID가 c1, c2인 두 개의  캔버스가 있습니다. 캔버스 c1은 비디오 원본의 현재 프레임을 보여주기 위해 사용되고, c2는 크로마 키잉 효과를 수행한 결과를 보여줍니다. c2에서 비디오의 녹색 배경을 대체할 정지 이미지를 미리 로드합니다.
    2. +
  2. 자바스크립트 코드는 main.js에서 가져옵니다. 이 스크립트는 자바스크립트 1.8 기능을 사용했기 때문에 스크립트를 가져오는 22번째 줄에서 버전이 명시됩니다(원문: this script uses JavaScript 1.8 features, so that version is specified in line 22 when importing the script).
    3. +
  3. 문서가 로드되면, processor.doLoad() 메서드가 실행됩니다.
    4. +
+ +

자바스크립트 코드

+ +

main.js에 있는 자바스크립트 코드는 3개의 메서드로 구성됩니다.

+ +

크로마 키잉 플레이어 초기화

+ +

doLoad() 메서드는 문서가 최초에 로드될 때 호출됩니다. 이 메서드가 하는 일은 크로마 키잉 처리에서 쓰일 변수를 준비하고, 이벤트 리스너를 등록함으로써 사용자가 비디오 재생을 시작할 때 감지할 수 있도록 해줍니다. 

+ +
  var processor;
+
+  processor.doLoad = function doLoad() {
+    this.video = document.getElementById('video');
+    this.c1 = document.getElementById('c1');
+    this.ctx1 = this.c1.getContext('2d');
+    this.c2 = document.getElementById('c2');
+    this.ctx2 = this.c2.getContext('2d');
+    let self = this;
+    this.video.addEventListener('play', function() {
+        self.width = self.video.videoWidth / 2;
+        self.height = self.video.videoHeight / 2;
+        self.timerCallback();
+      }, false);
+  },
+
+ +

이코드는 XHTML에서 중요한 요소인 비디오와 캔버스의 참조를 가져옵니다. 두 개의 캔버스에 대한 그래픽 컨텍스트의 참조도 가져옵니다. 이 참조들은 뒤에서 크로마 키잉 효과를 구현할 때 사용됩니다.

+ +

그리고 addEventListener()는 비디오가 재생을 시작하기 위해 호출되기 때문에 사용자가 재생 버튼을 누를 때 알림을 받습니다. 재생이 시작되면 이 코드는 비디오의 가로, 세로를 이등분 한 값을 가져오고(크로마 키잉 효과를 수행할 때 이등분 함), timerCallback() 메서드를 호출하여 비디오를 보고 시각적 효과를 계산하기 시작합니다.

+ +

타이머 콜백

+ +

타이머 콜백은 비디오가 재생되기 시작("재생" 이벤트가 발생)할 때 호출되는데, 매 프레임마다 키잉 효과를 주기 위해 주기적으로 호출 될 수 있도록 설정해 주어야 합니다.

+ +
  processor.timerCallback = function timerCallback() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    let self = this;
+    setTimeout(function() {
+        self.timerCallback();
+      }, 0);
+  },
+
+ +

콜백에서 하는 첫 번 째 일은 비디오가 재생되고 있는지 확인하는 것인데, 만약 그렇지 않다면 콜백은 아무 일도 하지 않고 즉시 반환됩니다.

+ +

그 후에 현재 비디오 프레임에서 크로마 키잉 효과를 주기 위한 computeFrame() 메서드를 호출합니다.

+ +

콜백에서 마지막으로 하는 일은 setTimeout()을 호출하여 가능한 한 빨리 timerCallback() 메서드를 다시 호출할 수 있도록 하는 것입니다. 실제로는, 비디오 프레임 속도에 대한 기반 지식으로 호출할 수 있도록 합니다. 

+ +

비디오 프레임 데이터 조작

+ +

아래의 computeFrame() 메서드는 프레임 데이터를 가져와서 크로마 키잉 효과를 수행하는 역할을 합니다. 

+ +
  processor.computeFrame = function computeFrame() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    let l = frame.data.length / 4;
+
+    for (let i = 0; i < l; i++) {
+      let r = frame.data[i * 4 + 0];
+      let g = frame.data[i * 4 + 1];
+      let b = frame.data[i * 4 + 2];
+      if (g > 100 && r > 100 && b < 43)
+        frame.data[i * 4 + 3] = 0;
+    }
+    this.ctx2.putImageData(frame, 0, 0);
+    return;
+  }
+
+ +

위 과정이 계속 호출 되면, 아래와 같이 비디오 요소에 가장 최근 프레임의 비디오 데이터가 표출됩니다.

+ +

video.png

+ +

2번째 줄에서, 첫 번째 캔버스의 그래픽 컨텍스트 ctx1에 비디오 프레임이 복사 되는데, 원본의 절반 크기로 프레임을 그리기 위해 이전에 저장한 가로, 세로 값으로 지정합니다. 컨텍스트의 drawImage() 메서드에 비디오 요소를 전달하기만 하면 현재 비디오 프레임을 그릴 수 있습니다. 결과는 아래와 같습니다: 

+ +

sourcectx.png

+ +

3번째 줄에서는 첫 번째 컨텍스트의 getImageData() 메서드를 호출해서 현재 비디오 프레임의 원시 그래픽 데이터 복사본을 가져옵니다. 이것은 조작할 수 있는 원시 32비트 픽셀 이미지 데이터를 제공합니다. 4번째 줄에서는 프레임의 이미지 데이터 전체 크기를 4로 나누어 이미지의 픽셀 수를 계산합니다.

+ +

6번째 줄에서 시작하는 for 문은 프레임의 픽셀을 스캔하여, 빨간색, 녹색, 파란색 값을 추출하여 사전에 정의된 숫자와 비교합니다. 이 숫자는 foo.png에서 가져온 배경 이미지로 대체될 녹색 스크린 영역을 감지합니다.

+ +

녹색 스크린이라고 간주된 매개변수 내의 프레임 이미지 데이터의 모든 픽셀은 투명해질 수 있도록 알파값이 0으로 대체됩니다. 결과적으로 최종 이미지는 100% 투명해진 녹색 스크린 영역을 갖게 되고, 13번째 줄에서 대상 컨텍스트에 고정된 배경 위로 올려져 그려집니다.

+ +

결과 이미지는 아래와 같습니다:

+ +

output.png

+ +

이 과정은 비디오가 재생될 때마다 반복되므로, 매 프레임마다 처리되어 크로마 키잉 효과가 나타나는 것입니다.

+ +

라이브 예제 보기

+ +

더 보기

+ + diff --git a/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..1779e63b2c --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,376 @@ +--- +title: 발전된 애니메이션 +slug: Web/HTML/Canvas/Tutorial/Advanced_animations +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

마지막 챕터에서 우리는 몇가지 간단한 애니메이션들을 만들었고 이제 이것들을 어떻게 움직이게 하는지 안다. 이 챕터에서 우리는 각각의 모션들을 자세히 살펴보고 애니메이션을 더 발전시키기 위해 몇가지 물리 동작을 추가할 것이다.

+
+ +

공 그리기

+ +

우리는 애니메이션 공부를 위해 공을 사용할 것이다. 먼저 캔버스에 공을 그려보자. 다음 코드를 통해 준비해보자.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

언제나처럼, 우리는 context를 먼저 그려야 한다. 공을 그리기 위해 우리는 캔버스에 그림을 그리기 위한 프로퍼티와 draw() 메소드를 가진 ball 오브젝트를 생성할 것이다.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

특이할 건 없다. 이공은 사실상 간단한 원이고 그리는 방법은 다음{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} 메소드에서 참고할 수 있다.

+ +

속도 추가하기

+ +

우리한테는 이제 공이 있다. 이제 이 튜토리얼 마지막 챕터에서 배웠던 것과 같은 기본 애니메이션을 추가할 준비가 되었다. 다시 한 번, 애니메이션 컨트롤은 {{domxref("window.requestAnimationFrame()")}}가 도와주 것이다. 공은 위치에 속도 벡터를 추가하여 움직일 수 있게 된다.  각각의 프레임에, 우리는{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}를 캔버스에 주어 오래된 원을 이전 프래임에서 지운다.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

경계

+ +

경게 충돌 테스트의 필요 없이 우리가 만든 공은 캔버스 밖으로 빠르게 빠져나갈 것입니다. 우리는 공의 x 와 y 위치가 캔버스 차원을 빠져나갔는지 체크해서 방향과 속도를 바꿔주어야 합니다. 그러기 위해서 우리는 draw 메소드에 다음 확인사항을 추가할 것입니다.:

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

First demo

+ +

이제 동작을 확인해 봅시다. 시작하려먼 마우스를 캔버스 안으로 움직여 주세요.

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

가속

+ +

움직임을 좀 더 리얼하게 만들기 위해, 우리는 속도를 다음과 같이 줄 겁니다. 예를들어:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

이것은 각 프레임의 세로 속도를 줄여주어, 공이 결국 바닥에서 튀게 만듭니다.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

후행 효과

+ +

지금까지 우리는 {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}메소드를 사용해서 이전 프레임을 지웠다. 만약 당신이 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}르 사용하여 약간 투명도를 준다면, 쉽게 후행 효과(Trailing effect)를 만들 수 있을 것이다.

+ +
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

마우스 컨트롤 추가하기

+ +

공을 컨트롤 하기 위해, 우리는 mousemove 이벤트를 사용하여 마우스를 따라오게 할 것이다. click 이벤트를 통해 공을 놓으면 다시 공이 튀도록 할 것이다.

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

마우스로 공을 움직이고, 클릭을 통해 놓아보자.

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

Breakout

+ +

이 짧은 챕터는 발전된 애니메이션을 만들기 위한 조금의 기술을 설명했다. 여기에 더 많은 것들이 있다! 노나 벽돌을 추가해서 이 튜토리얼을  Breakout 으로 발전시키는 건 어떨까?  Game development에서 게임에 관련된 글들을 찾아보자.

+ +

더보기

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..df094acb71 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,732 @@ +--- +title: 스타일과 색 적용하기 +slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors +tags: + - HTML5 + - 그래픽 + - 캔버스 +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게됩니다.

+
+ +

색상

+ +

지금까지는 그리기 메소드만 살펴봤습니다. 도형에 색을 적용하고자 하면, fillStyle과  strokeStyle 두 가지 중요한 속성을 사용할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
도형을 채우는 색을 설정합니다.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
도형의 윤곽선 색을 설정합니다.
+
+ +

여기서의 color는 CSS의 {{cssxref("<color>")}}, 그라디언트 객체, 패턴 객체를 뜻합니다. 그라디언트 객체와 패턴 객체는 페이지 아래에서 설명합니다. 윤곽선과 채움 색의 초기 설정값은 검은색입니다. (CSS 색상 값 #000000)

+ +
+

참고: strokeStyle 또는 fillStyle 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 됩니다. 각 도형에 다른 색을 적용하려면 fillStyle 또는 strokeStyle 속성을 다시 적용해야 합니다.

+
+ +

색의 올바른 값은 CSS3 사양에 나오는 {{cssxref("<color>")}} 값입니다. 아래에 나오는 색은 모두 한가지 색을 다르게 표현한 것입니다.

+ +
// fillStyle에 적용되는 색은 모두 '오렌지'
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255, 165, 0)";
+ctx.fillStyle = "rgba(255, 165, 0, 1)";
+
+ +

fillStyle 예제

+ +

이 예제에서 for 반복문을 두 번 사용하여 사각형 격자를 그릴 것입니다. 결과는 스크린샷과 같을 것입니다. 결과가 그리 대단한 것은 아닙니다. 각 사각형의 RGB 색상값에서 붉은색과 녹색 값만을 변수 i와 j를 사용하여 변경합니다. 파란색 채널은 고정된 값입니다. 채널 값들을 변경함으로써, 모든 종류의 팔레트를 생성할 수 있습니다. 단계를 늘리면 Photoshop에서 사용하는 색상 팔레트와 비슷한 모양을 얻을 수 있습니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++){
+    for (var j = 0; j < 6; j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
+                       Math.floor(255 - 42.5 * j) + ', 0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
+}
+ + + +

결과는 아래와 같습니다.

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

strokeStyle 예제

+ +

이번 예제는 위에 나온 예제와 비슷하지만, strokeStyle 속성을 사용하여 윤곽선의 색을 바꿉니다. 사각형 대신, 원을 그리는 arc() 메소드를 사용합니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
+                       Math.floor(255 - 42.5 * j) + ')';
+      ctx.beginPath();
+      ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+      ctx.stroke();
+    }
+  }
+}
+ + + +

결과는 아래와 같습니다.

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

투명도

+ +

캔버스에는 불투명한 도형을 그릴 수도 있고, 반투명한 도형도 그릴 수도 있습니다. globalAlpha 값을 설정하거나 윤곽선 또는 채움 스타일에 반투명 색을 적용하면 됩니다.

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
투명도 값이 설정되면 이후 캔버스에 그려지는 모든 도형들의 투명도가 바뀝니다. 설정하는 값은 0.0(완전히 투명)과 1.0(완전히 불투명) 사이에 있어야 하며, 초기 설정값은 1.0(완전히 투명)입니다.
+
+ +

globalAlpha는 모두 같은 투명도로 캔버스에 많은 도형을 그릴 때 유용합니다. 하지만, 보통은 각각의 도형마다 투명도를 설정하는 것이 더 유용할 것입니다.

+ +

strokeStyle과 fillStyle 값에 CSS rgba 색상값을 적용할 수 있으므로, 투명한 색을 적용하려면 아래와 같은 표기법을 사용할 수 있습니다.

+ +
// 외곽선과 채움 스타일에 투명 적용
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+
+ +

rgba() 함수는 rgb() 함수와 비슷하지만, 인자가 하나 더 있습니다. 마지막 인자는 투명도 값을 설정하는 인자입니다. 올바른 범위는 0.0(완전히 투명)에서 1.0(완전히 불투명)입니다.

+ +

globalAlpha 예제

+ +

이 예제에서, 네 가지 다른 색을 가진 사각형을 배경에 그릴 것입니다. 그 위에, 반투명한 원을 여러 개 그릴 것입니다. globalAlpha 값을 0.2로 설정하면 이후 그려질 도형은 이 값을 사용합니다. for 반복문을 사용하여 점점 큰 반지름의 원을 그립니다. 최종 결과물은 원형 그레이디언트가 됩니다. 원이 겹쳐지면서 점점 불투명해지는 것을 볼 수 있으며, 최종적으로 한 가운데에 있는 원에서는 뒷 배경이 거의 보이지 않게 됩니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // 배경을 그린다
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // 투명값을 설정한다
+  ctx.globalAlpha = 0.2;
+
+  // 반투명한 원을 그린다
+  for (var i = 0; i < 7; i++){
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

rgba()를 사용한 예제

+ +

두번째 예제에서는 위의 예제와 비슷한 일을 하지만, 겹쳐진 원을 그리는 대신, 불투명도가 증가하는 작은 사각형을 그릴 것입니다. 각각의 도형마다 윤곽선이나 채움 스타일을 따로따로 설정할 수 있기 때문에, rgba()를 사용할 때는 조금 더 제어가 쉽고 융통성도 있습니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 배경을 그린다
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // 반투명한 사각형을 그린다
+  for (var i=0;i<10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j<4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

선 모양

+ +

선의 스타일을 바꾸는 방법이 몇가지 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
이후 그려질 선의 두께를 설정합니다.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
선의 끝 모양을 설정합니다.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
선들이 만나는 "모서리"의 모양을 설정합니다.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
현재 선의 대시 패턴을 설정합니다.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
선의 대시 배열이 어디서 시작될지 지정합니다.
+
+ +

아래 예제들을 보면 어떻게 동작하는지 이해할 수 있을 것입니다.

+ +

lineWidth 예제

+ +

현재 선의 두께를 설정합니다. 설정값은 반드시 양수이어야 하며, 초기 설정값은 1.0 단위입니다.

+ +

선의 두께는 지정된 경로의 가운데에 있는 획의 두께입니다. 이 말의 뜻은, 경로의 좌우로, 설정된 두께 반 만큼의 폭 영역이 그려진다는 것입니다. 캔버스 좌표는 픽셀을 직접 참조하지 않으므로, 선명한 수평 및 수직선을 얻기 위해 특별히 주의를 기울여야 합니다.

+ +

아래에 나오는 예제에서는, 선의 두께가 점점 증가하는 10개의 직선이 그려집니다. 가장 왼쪽의 선은 1.0 단위 폭입니다. 그러나, 경로의 위치 때문에 가장 왼쪽과 다른 모든 홀수 폭 두께 선은 선명하게 보이지 않습니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++){
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

선명한 선을 얻으려면 경로에 획을 어떻게 그려지는지 이해해야 합니다. 아래의 이미지를 보면, 격자는 캔버스의 좌표 격자를 나타냅니다. 격자선 사이에 있는 사각형은 실제 픽셀과 딱 맞아 떨어집니다. 아래에 있는 첫번째 이미지를 보면, (2,1)에서 (5,5)로 사각형이 채워져 있습니다. 사각형의 전체 영역(연한 붉은 색)은 픽셀 경계선 사이에 딱 맞아 떨어지기 때문에 채워진 사각형은 선명한 가장자리를 갖습니다.

+ +

+ +

만일 (3,1)에서 (3,5)로 그리는 직선의 두께가 1.0이라면, 두번째 이미지와 같은 상황이 됩니다. 채워진 실제 영역 (진한 파란색)은 패스의 양쪽에있는 픽셀의 절반까지만 확장됩니다. 이것은 1 픽셀을 채우는 것이 아니므로 근사값으로 화면에 그려지게 됩니다. 그래서 양옆의 영역(연한 파란색과 짙은 파란 색)으로, 실제 설정한 색과는 다른 흐릿한 색으로 채워지는 것입니다. 이전 예제에서 보듯이 선 두께가 1.0인 선에서 일어난 일입니다.

+ +

이렇게 되는 것을 막으려면, 경로를 아주 정밀하게 생성해야 합니다. 선의 두께가 1.0이면 경로의 양쪽으로 0.5 단위만큼이라는 것을 알고 있으니, (3.5,1)에서 (3.5,5)로 그리는 경로를 생성하는 세번째 이미지의 결과는 완벽히 정밀하게 1 픽셀 두께의 수직선이 됩니다.

+ +
+

참고: 위에 나온 수직선 그리기 예제를 살펴보면, Y 위치는 정수로 된 격자선 위치를 참조하고 있습니다. 그렇지 않았다면, 끝점에서 픽셀의 반을 차지한 상태로 보였을 것입니다. (초기값이 butt인 lineCap 스타일의 설정값에 따라 다르게 보입니다. 홀수 두께 선들의 좌표를 0.5 픽셀씩 조정하여 다시 계산하고 싶을지도 모릅니다. lineCap 스타일을 square로 설정함으로써, 끝점에서 선의 외곽 경계선은 픽셀에 딱 맞게 자동적으로 확장될 것입니다.)

+ +

경로의 시작 지점과 종료 지점의 끝점만이 영향을 받는다는 것에 주목하세요. 만약 closePath()로 경로가 닫힌다면, 시작 지점과 종료 지점은 없는 것입니다. 그 대신, 경로 안에 있는 모든 끝점들은, 초기 설정값이 miter인 lineJoin 스타일의 설정값을 사용하여 이전 부분 및 다음 부분과 이어지는데, 교차되는 점들로 이어진 부분들의 외곽 경계선을 자동적으로 확장하는 효과가 생깁니다. 그렇기 때문에 만약 이들 이어진 부분들이 수직 또는 수평이라면, 그려지는 선들은 각 끝점의 중심에 놓인 픽셀을 가득 채우게 될 것입니다. 이들 선 스타일에 대한 예제는 아래에 나옵니다.

+
+ +

짝수 두께의 선들은 반으로 나누어도 각각의 반은 정수의 양만큼이기 때문에 픽셀을 조정할 필요가 없습니다.

+ +

비트맵이 아닌 벡터 2D 그래픽으로 작업할 때, 작업을 시작할 때는 약간 힘들겠지만, 격자와 경로의 위치에 주의를 기울인다면, 크기를 키우거나 줄이거나 또는 어떠한 변형을 하더라도 그리려는 이미지는 똑바로 보일 것입니다. 1.0 두께의 수직선은 2배로 크기를 키웠을 때, 정확히 2 픽셀 두께의 선이 되며, 올바른 위치에 나타날 것입니다.

+ +

lineCap 예제

+ +

lineCap 속성은 그리려는 모든 선의 끝점 모양을 결정합니다. butt, round, square라는 세 가지 값을 가지며, 초기 설정값은 butt입니다.

+ +

+ +
+
butt
+
선의 끝이 좌표에 딱맞게 잘립니다.
+
round
+
선의 끝이 동그랗습니다.
+
square
+
선 끝에, 선 두께 반만큼의 사각형 영역이 더해집니다.
+
+ +

이 예제에서는, 각기 다른 lineCap 속성 값을 가진 선 세개가 그려집니다. 또한 각 선들의 차이점을 정확히 보이기 위한 안내선이 추가로 그려집니다. 세개의 선 모두, 이 안내선 위에 시작과 종료 좌표가 있습니다.

+ +

맨 왼쪽에 있는 선은 초기 설정값인 butt을 사용합니다. 안내선에 딱 맞게 선이 시작되고 끝이 납니다. 가운데에 있는 선은 round를 사용합니다. 선 두께의 반을 반지름으로 하는 반원이 끝에 붙습니다. 맨 오른쪽에 있는 선은 square를 사용합니다. 선 두께 만큼의 너비와 선 두께 반 만큼의 높이를 가진 네모 상자가 끝에 붙습니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // 안내선을 그린다
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // 선을 그린다
+  ctx.strokeStyle = 'black';
+  for (var i=0;i<lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

lineJoin 예제

+ +

lineJoin 속성은, 도형을 이루는 선이나 호나 곡선들이 연결되는 지점의 모양을 결정합니다. 끝점과 제어점이 정확히 같은 위치인, 길이가 0인 부분들은 제외된다.

+ +

이 속성에는 세 가지 값이 있는데, round, bevel, miter이며, 초기 설정값은 miter입니다. 두 부분들이 같은 방향으로 연결되어 있는 경우에는, lineJoin을 설정해도 아무런 효과가 나타나지 않습니다.

+ +

+ +
+
round
+
도형의 모서리를, 연결되는 부분들의 공통 끝점을 중심으로 하는 원 모양으로 만듭니다. 이때 원의 반지름은 선의 두께와 같습니다.
+
bevel
+
도형의 모서리를, 연결되는 부분들의 공통 끝점에서 세모 모양으로 만듭니다.
+
miter
+
도형의 모서리를, 두 부분의 바깥쪽 테두리 선을 각각 연장하여 교차된 점으로 생긴 마름모꼴 모양으로 만듭니다. miterLimit 속성값에 따라 모양이 달라집니다.
+
+ +

아래 예제에서 세 개의 경로를 그릴 것입니다. 세 경로는 각각 다른 lineJoin 속성값을 가집니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i<lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

miterLimit 속성 예제

+ +

위의 예제에서 볼 수 있듯이, 속성값을 miter로 하여 두 선이 연결되면, 연결되는 두 선의 바깥쪽 테두리는 연장선이 만나는 지점까지 확장됩니다. 연결된 두 선이 이루는 각도가 크면, 확장되는 영역이 크지 않지만, 각도가 작아짐(끝이 뾰족해짐)에 따라서 이 영역이 기하급수적으로 커질 수도 있습니다.

+ +

miterLimit 속성은 끝점이 만나는 지점과 테두리 연장선이 만나는 지점이 얼마나 떨어져 있을지를 결정합니다. 두 선이 이 값을 넘게 되면, lineJoin 속성의 bevel 값 모양이 적용됩니다. miterLimit 속성값(HTML {{HTMLElement("canvas")}}에서, 초기 설정값은 10.0)에 의해, 현재 좌표 방식 안에서, 선의 두께에 따라, 어느 정도까지 뾰족해질 수 있는지가 계산됩니다. 그래서 miterLimit은 현재 디스플레이 비율이나 경로의 변형 같은 것으로 각각 설정될 수 있습니다. 그렇게 하여 선의 모서리에만 영향을 줍니다.

+ +

더 자세히 얘기하자면, 뾰족함 제한(miter limit)은, 선 두께의 반과 확장되는 길이(HTML 캔버스에서, 선이 연결되는 바깥쪽 끝부분과, 경로에서 연결되는 두 부분의 공통 끝점 사이로 측정합니다.)의 최대 허용 비율입니다. 이것은 두 부분의 외곽선이 만나는 안쪽 점과 바깥쪽 점 사이 거리와, 선 두께의 최대 허용 비율과 같습니다. miter 값 모양이 아닌 bevel 값 모양으로 연결되는 지점의 최소 안쪽 각 반 만큼의 값과 같은 것입니다.

+ + + +

다음 예제에서는 miterLimit 값을 바꾸고 그 결과가 어떤지 바로 확인할 수 있습니다. 파란색 선은 지그재그 무늬 안에서 선들의 시작 지점과 종료 지점을 나타냅니다.

+ +

이 예제에서 miterLimit 값을 4.2보다 낮게 설정하면, 모든 연결 지점은 bevel 값 모양이 되어 파란색 선에 붙을 것입니다. miterLimit 값이 10보다 높다면, 거의 모든 연결 지점들이 파란색 선 바깥쪽에 있을 것입니다. 왼쪽으로 갈수록 파란색 선에서 더 많이 튀어나오는데, 왼쪽으로 갈수록 연결되는 각이 더 작아지기 때문입니다. 값을 5로 설정하면, 반은 bevel 값 모양으로, 반은 miter 값 모양이 됩니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 캔버스를 비운다
+  ctx.clearRect(0,0,150,150);
+
+  // 안내선을 그린다
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // 선 스타일을 설정한다
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // 입력 값을 검사한다
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // 선을 그린다
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i<24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

 

+ +

대시라인 사용하기

+ +

setLineDash 메소드와 lineDashOffset 속성은 선의 대시 패턴을 지정합니다.  setLineDash 메소드는 거리를 지정하는 숫자 목록을 받아 선과 틈을 교대로 그리며 lineDashOffset 속성은 패턴을 시작할 위치를 오프셋으로 설정합니다.

+ +

이 예제에서 우리는 행진하는 개미 효과를 만들고 있습니다. 컴퓨터 그래픽 프로그램의 선택 도구에서 흔히 볼 수있는 애니메이션 기술입니다. 테두리를 애니메이션화하여 사용자가 선택 테두리와 이미지 배경을 구별하는 데 도움이됩니다. 이 튜토리얼의 뒷부분에서 이 작업 및 다른 기본 애니메이션을 수행하는 방법을 배울 수 있습니다.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

그라디언트(Gradient)

+ +

다른 그래픽 프로그램들과 마찬가지로, 선형 및 원형의 그레이디언트를 사용할 수 있습니다. 다음 메소드 중 하나를 사용하여 {{domxref("CanvasGradient")}} 객체를 생성합니다. 그런 다음 이 객체를 fillStyle 또는 strokeStyle 속성에 할당 할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
시작점 좌표를 (x1, y1)로 하고, 종료점 좌표를 (x2, y2)로 하는 선형 그라디언트 오브젝트를 생성합니다.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
반지름이 r1이고 좌표 (x1, y1)을 중심으로 하는 원과, 반지름이 r2이고 좌표 (x2, y2)를 중심으로 하는 원을 사용하여 그라디언트가 생성됩니다.
+
+ +

예를 들면 다음과 같습니다.

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

CanvasGradient 객체를 만들었다면, addColorStop() 메소드를 사용하여, 오브젝트에 색을 적용할 수 있습니다.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
gradient 오브젝트에 새로운 색 중단점(color stop)을 생성합니다. position은 0.0에서 1.0 사이의 숫자이고 그라디언트에서 색상의 상대적인 위치를 정의합니다. color 인자는 CSS {{cssxref("<color>")}}를 나타내는 문자열이어야하고, 그라디언트가 (전환효과로) 진행되면서 도달한 지점의 색상을 의미합니다.
+
+ +

색 중단점은 원하는 만큼 마음대로 추가할 수 있습니다. 흰 색에서 검은 색으로 변하는 선형 그레이디언트를 만들려면 아래와 같이 합니다.

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

createLinearGradient 예제

+ +

이 예제에서 그레이디언트 두 개를 만들 것입니다. 예제에서 볼 수 있듯이, strokeStyle과 fillStyle 속성 모두 canvasGradient 오브젝트를 속성 값으로 가질 수 있습니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 그레이디언트를 생성한다
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // 외곽선과 채움 스타일에 그레이디언트를 적용한다
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // 도형을 그린다
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+
+ + + +

첫번째 그라디언트는 배경 그라디언트입니다. 보시다시피 같은 위치에 두 가지 색상을 지정했습니다. 매우 선명한 색상 전환을 만들기 위해 이 작업을 수행합니다(이 경우 흰색에서 녹색으로). 일반적으로 색상 중단점을 정의하는 순서는 중요하지 않지만, 이 특별한 경우에는 의미가 있습니다.

+ +

두 번째 그래디언트에서는 시작 색상 (위치 0.0)을 지정하지 않았는데, 자동으로 다음 색상 중단점의 색상으로 가정하기 때문에 반드시 필요하지는 않기 때문입니다. 따라서 위치 0.5에 검은색을 지정하면 시작부터 중단점까지 자동으로 검정색 그라이언트를 만듭니다.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

createRadialGradient 예제

+ +

이 예제에서는 원형 그레이디언트를 4개 만들 것입니다. 포토샵같은 프로그램에서 원형 그레이디언트를 만들 때는 하나의 점을 중심으로 그레이디언트를 만드는데, 캔버스의 원형 그레이디언트에서는 시작과 종료 지점 두군데를 제어할 수 있기 때문에, 기존의 프로그램에서 볼 수 있는 원형 그레이디언트보다는 더 복잡한 효과를 만들어 낼 수 있습니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 그라디언트를 생성한다
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // 도형을 그린다
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+
+ + + +

이 예제에서는 원형 그레이디언트에 사용되는 두 원의 중심을 달리하여 입체적인 공처럼 보이게 했습니다. 안쪽 원과 바깥쪽 원은 겹치지 않게 하는 것이 좋습니다. 왜냐하면 예상하기 힘든 이상한 결과가 나타날 수 있기 때문입니다.

+ +

그레이디언트의 마지막 색 적용 지점에서는 투명도를 적용하였습니다. 투명도가 적용된 지점에서 이전 지점까지의 색 변화를 보기 좋게 만들려면, 두 지점에 똑같은 색을 적용하면 되는데, 이 예제에서는 색의 값을 다른 방식으로 입력하여 헷갈릴 수도 있습니다. 첫번째 그레이디언트에 사용된 #019F62와 rgba(1,159,98,1)은 같은 색입니다.

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

패턴(Patterns)

+ +

이전 페이지의 예제 중 하나에서 일련의 루프를 사용하여 이미지 패턴을 만들었습니다. 그러나 훨씬 간단한 메소드 인 createPattern () 메소드가 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
새 캔버스 패턴 객체를 만들어 반환합니다. image는 {{domxref("CanvasImageSource")}}(즉, {{domxref("HTMLImageElement")}}, 다른 캔버스, {{HTMLElement("video")}} 요소 등등)입니다. type은 이미지 사용 방법을 나타내는 문자열입니다.
+
+ +

type은 패턴을 만들기 위해 이미지를 사용하는 방법을 지정하며, 다음 문자열 값 중 하나 여야합니다.

+ +
+
repeat
+
수직 및 수평 방향으로 이미지를 이어 붙입니다.
+
repeat-x
+
수평 방향으로만 이미지를 이어 붙입니다.
+
repeat-y
+
수직 방향으로만 이미지를 이어 붙입니다.
+
no-repeat
+
이미지를 이어 붙이지 않습니다. 이미지는 한번만 사용됩니다.
+
+ +

이 메소드를 사용하여 위에서 본 그라디언트 메소드와 매우 유사한 {{domxref ( "CanvasPattern")}} 객체를 생성합니다. 패턴을 생성하면 fillStyle 또는 strokeStyle 속성에 패턴을 할당 할 수 있습니다. 예를 들면 다음과 같습니다.

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+
+ +
+

참고: drawImage () 메서드와 마찬가지로 이 메소드를 호출하기 전에 이미지가 로드되었는지 확인해야합니다. 그렇지 않으면 패턴이 잘못 그려 질 수 있습니다.

+
+ +

createPattern 예제

+ +

이 마지막 예제에서, fillStyle 속성에 적용할 패턴을 만들 것입니다. 한 가지 눈여겨 볼 것은, 이미지 onload 핸들러 사용한다는 것입니다. 이미지를 패턴에 적용하기 전에 불러오기가 완료되었는지 확인하는 것입니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 패턴으로 사용할 이미지 오브젝트를 생성한다
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // 패턴을 생성한다
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

그림자

+ +

그림자 사용에는 네 개의 속성이 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
그림자가 객체에서 연장되어야하는 수평 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
그림자가 객체에서 연장되어야하는 수직 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
흐림(blur) 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
그림자 효과의 색상을 나타내는 표준 CSS 색상 값. 기본적으로 완전 검은색입니다.
+
+ +

shadowOffsetX 및 shadowOffsetY 속성은 그림자가 X 및 Y 방향으로 객체에서 얼마나 멀리 떨어져야하는지 나타냅니다. 이 값은 현재 변환 행렬의 영향을받지 않습니다. 음수값을 사용하면 그림자가 위로 또는 왼쪽으로 확장되고 양수값을 사용하면 그림자가 아래로 또는 오른쪽으로 확장됩니다. 기본값은 모두 0입니다.

+ +

shadowBlur 속성은 흐림 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을받지 않습니다. 기본값은 0입니다.

+ +

shadowColor 속성은 그림자 효과의 색상을 나타내는 표준 CSS 색상 값입니다. 기본값은 완전 검은색입니다.

+ +
+

알아둘 것: 음영은 source-over 합성 작업에만 사용됩니다.

+
+ +

그림자 있는 글자 예제

+ +

이 예제에서는 그림자가 있는 글자를 그립니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

다음 장에서 텍스트 그리기에 대한 font 속성과 fillText 메소드를 살펴 보겠습니다.

+ +

캔버스 채우기 규칙

+ +

fill (혹은 {{domxref("CanvasRenderingContext2D.clip", "clip")}} 및 {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}})을 사용할 때 한 점이 경로 안쪽 또는 바깥에 있는지 그리고 따라서 채워지는지 여부를 결정하기 위한 채우기 규칙 알고리즘을 선택적으로 제공 할 수 있습니다. 경로가 교차하거나 중첩 된 경우에 유용합니다.
+
+ 다음 두가지 값을 사용할 수 있습니다:

+ + + +

In this example we are using the evenodd rule.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..457d658172 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,310 @@ +--- +title: 기본 애니메이션 +slug: Web/HTML/Canvas/Tutorial/Basic_animations +tags: + - HTML5 + - 그래픽 + - 캔버스 +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +

{{HTMLElement("canvas")}} 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.

+

도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.

+

기본 애니메이션 단계

+

한 장면을 그리려면 아래와 같은 단계를 밟습니다.

+
    +
  1. 캔버스를 비웁니다.
    + 그리려는 도형이 (배경 이미지를 만들 때처럼) 캔버스를 가득 채우는 것이 아니라면, 이전에 그려진 모든 도형을 지울 필요가 있습니다. 가장 쉬운 방법은 clearRect() 메소드를 사용하는 것입니다.
    2. +
  2. 캔버스 상태를 저장합니다.
    + 캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있습니다.
    3. +
  3. 애니메이션할 도형을 그립니다.
    + 실제 장면을 그리는 단계입니다.
    4. +
  4. 캔버스 상태를 복원합니다.
    + 새로운 장면을 그리기 전에 저장된 상태를 복원합니다.
    5. +
+

애니메이션 제어하기

+

캔버스 메소드를 사용하거나 사용자 함수를 사용하여 캔버스에 도형들을 그립니다. 보통의 경우에서는, 코드 실행이 완료되면 캔버스에 나타나는 결과만을 보게 됩니다. 예를 들어,  for 반복문 안에서 애니메이션을 실행하는 것은 불가능합니다.

+

그래서 정해진 시간마다 그리기 함수를 실행하는 방법이 필요한 것입니다. 아래와 같이 애니메이션을 제어하는 두 가지 방법이 있습니다.

+

예정된 변경

+

정해진 시간마다 특정 함수를 부를 때 사용할 수 있는  {{domxref("window.setInterval()")}}과 {{domxref("window.setTimeout()")}} 함수가 있습니다.

+
+

알아둘 것: 현재는 애니메이션을 만드는 방법으로  {{domxref("window.requestAnimationFrame()")}} 메소드를 추천합니다. 이에 대한 튜토리얼은 곧 업데이트할 것입니다.

+
+
+
+ setInterval(function, delay)
+
+ delay 밀리세컨드(1,000분의 1초)마다 function 함수 반복 실행을 시작합니다.
+
+ setTimeout(function, delay)
+
+ delay 밀리세컨드(1,000분의 1초) 경과후, function 함수를 실행합니다.
+
+

사용자의 제어를  필요로 하지 않는 반복 실행에는  setInterval() 함수가 알맞을 것입니다.

+

사용자 상호 작용 변경

+

애니메이션을 제어하는 두번째 방법은 사용자 입력입니다. 게임을 만들려고 한다면, 애니메이션을 제어하기 위해 키보드나 마우스 이벤트를 사용할 수 있을 것입니다.  {{domxref("EventListener")}}를 설정하여, 사용자와 상호 작용하여 애니메이션 함수를 실행합니다.

+

사용자 상호 작용이 필요하다면, 우리가 만든 애니메이션용 프레임웍(framework)의 최소 기능 버전 또는 최대 기능 버전을 사용할 수 있을 것입니다.

+
var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);
+

또는

+
var myAnimation = new Daemon(null, animateShape, 500, Infinity);
+

아래 예제에서는, 애니메이션을 제어하기 위해 {{domxref("window.setInterval()")}}을 사용할 것입니다. 페이지 제일 아래쪽에 {{domxref("window.setTimeout()")}}을 사용한 예제 링크도 있습니다.

+

태양계 애니메이션

+

이 예제에서는 달이 지구를 돌고 지구가 태양을 도는 애니메이션을 만듭니다.

+
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  setInterval(draw,100);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // 캔버스를 비운다
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // 지구
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // 달
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // 지구 궤도
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+}
+
+ +

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+

시계 애니메이션

+

이 예제에서는, 현재 시각을 보여주는 움직이는 시계를 만듭니다.

+
function init(){
+  clock();
+  setInterval(clock,1000);
+}
+
+function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // 시계판 - 시
+  ctx.save();
+  for (var i=0;i<12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // 시계판 - 분
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // 시간 표시 - 시
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // 시간 표시 - 분
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // 시간 표시 - 초
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+}
+ +

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+

움직이는 파노라마 사진

+

이 예제에서는, 움직이는 파노라마 사진을 만듭니다. 사용할 그림은 위키피디어(Wikipedia)에서 구한 요세미티 국립공원입니다. 캔버스보다 큰 그림을 사용할 수도 있습니다.

+
var img = new Image();
+
+// 변수
+// 스크롤될 이미지, 방향, 속도를 바꾸려면 변수값을 바꾼다.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // 값이 작을 수록 빨라진다
+var scale = 1.05;
+var y = -4.5; // 수직 옵셋
+
+// 주요 프로그램
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // 캔버스보다 큰 이미지
+    if (imgW > CanvasXSize) { clearX = imgW; } // 캔버스보다 큰 이미지
+    else { clearX = CanvasXSize; }
+    if (imgH > CanvasYSize) { clearY = imgH; } // 캔버스보다 큰 이미지
+    else { clearY = CanvasYSize; }
+    // 캔버스 요소 얻기
+    ctx = document.getElementById('canvas').getContext('2d');
+    // 새로 그리기 속도 설정
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    // 캔버스를 비운다
+    ctx.clearRect(0,0,clearX,clearY);
+    // 이미지가 캔버스보다 작거나 같다면 (If image is <= Canvas Size)
+    if (imgW <= CanvasXSize) {
+        // 재설정, 처음부터 시작
+        if (x > (CanvasXSize)) { x = 0; }
+        // 추가 이미지 그리기
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    // 이미지가 캔버스보다 크다면 (If image is > Canvas Size)
+    else {
+        // 재설정, 처음부터 시작
+        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
+        // 추가 이미지 그리기
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    // 이미지 그리기
+    ctx.drawImage(img,x,y,imgW,imgH);
+    // 움직임 정도
+    x += dx;
+}
+
+

예제에 사용된 {{HTMLElement("canvas")}}의 크기는 아래와 같다. 캔버스의 너비가 변수 CanvasXSize값과 같고, 캔버스의 높이는 변수 CanvasYSize값과 같다는 것에 주목하라.

+
<canvas id="canvas" width="800" height="200"></canvas>
+

Live sample

+

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

+

또 다른 예제들

+
+
+ Gartic
+
+ 다중 사용자 지원 그리기 놀이.
+
+ Canvascape
+
+ 3D 어드벤처 게임 (1인칭 슈팅).
+
+ A basic ray-caster
+
+ 키보드를 사용한 애니메이션 제어 방법에 대한 좋은 예제.
+
+ canvas adventure
+
+ 키보드 제어를 사용하는 또다른 좋은 예제.
+
+ An interactive Blob
+
+ 물방울 갖고 놀기.
+
+ Flying through a starfield
+
+ 별, 동그라미, 네모가 떠다니는 우주를 누벼라.
+
+ iGrapher
+
+ 주식 시장 자료 차트 예제.
+
+

이것도 보세요

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..f455563e87 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,154 @@ +--- +title: 캔버스(Canvas) 기본 사용법 +slug: Web/HTML/Canvas/Tutorial/Basic_usage +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
+

{{HTMLElement ( "canvas")}} {{Glossary ( "HTML")}} 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리게 될 것입니다.

+
+ +

<canvas> 요소

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

{{HTMLElement ( "canvas")}}는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 {{HTMLElement ( "img")}} 요소처럼 보입니다. 실제로 <canvas> 요소에는 {{htmlattrxref ( "width", "canvas")}}와 {{htmlattrxref ( "height", "canvas")}}의 두 속성만 있습니다. 이것들은 모두 선택사항이며 {{Glossary ( "DOM")}} 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다. 요소는 {{Glossary ( "CSS")}}에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .

+ +
+

노트: 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <canvas> 속성에서 width 및 height 속성을 명시적으로 지정하십시오.

+
+ +

 

+ +

id 속성(어트리뷰트)는  <canvas> 요소에 국한되지 않는 글로벌HTML 속성 (global HTML attributes )중 하나로,  모든 HTML 요소에 적용 ( class 등등)될 수 있습니다.  대체로 항상 id 속성을 사용해 주는것이 좋은데, 이는 스크립트 내에서 구분을 쉽게 해 줄 수 있기 때문입니다.

+ +

<canvas>요소는 일반적인 이미지 ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다.  이 방법이 어떻게 사용되는지는 해당 챕터에서 확인 할 수 있습니다.  캔버스에 스타일링이 따로 지정 되있지 않았다면, 캔버스 스타일은 투명으로 설정되어있습니다.

+ +
+

대체 콘텐츠

+ +

<canvas> 요소는 {{HTMLElement("video")}}, {{HTMLElement("audio")}} 혹은 {{HTMLElement("picture")}}처럼 {{HTMLElement("img")}}와는 달리, 인터넷 익스플로러 9 이하의 버전이나 텍스트기반 브라우저 등과 같은, 캔버스를 지원하지 않는 오래된 브라우저들을 위한 대체 컨텐츠를 정의하기 쉽습니다. 여러분은 그러한 브라우저들을 위한 대체 컨텐츠를 제공해야 합니다.

+ +

대체 컨텐츠를 제공하는 것은 매우 간단합니다. <canvas>태그 안에  대체 컨텐츠를 삽입합니다. <canvas>태그 를 지원하지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링 합니다. <canvas>를 지원하는 브라우저는 컨테이너 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다.

+ +

예를 들어, 캔버스 내용에 대한 텍스트 설명을 제공하거나 동적으로 렌더링 된 내용의 정적 이미지를 제공 할 수 있습니다. 이것은 다음과 같이 보일 수있습니다:

+ +
<canvas id="stockGraph" width="150" height="150">
+  current stock price: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

사용자에게 캔버스를 지원하는 다른 브라우저를 사용하도록 하는 것은 캔버스를 해석하지 못하는 사용자에게 전혀 도움이 되지 않습니다. 유용한 대체 텍스트나 하위 DOM을 제공하는 것이 캔버스에 더 쉽게 접근할수 있도록 도움이 될 것입니다.

+ +

</canvas> 태그 필수

+ +

대체 컨텐츠가 제공되는 방식때문에, {{HTMLElement("img")}} 요소와 달리, {{HTMLElement("canvas")}} 요소는 닫는 태그(</canvas>)가 필요합니다. 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다.

+ +

대체 컨텐츠가 필요하지 않다면, 단순히 <canvas id="foo" ...></canvas>가 모든 미지원 브라우저에서 완전하게 호환됩니다.

+ +

렌더링 컨텍스트

+ +

{{HTMLElement("canvas")}} 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다. 본 튜토리얼에서는, 2D 렌더링 컨텍스트를 집중적으로 다룹니다. 다른 컨텍스트는 다른 렌더링 타입을 제공합니다. 예를 들어, WebGL은 OpenGL ES 을 기반으로 하는 3D 컨텍스트를 사용합니다.

+ +

캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. {{HTMLElement("canvas")}} 요소는 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다.  getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다. 본 튜토리얼에서 다루고 있는 2D 그래픽의 경우, {{domxref("CanvasRenderingContext2D")}}을 얻기위해 "2d"로 지정합니다.

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

첫 번째 줄의 스크립트는  {{domxref ( "document.getElementById()")}} 메서드를 호출하여 {{HTMLElement ( "canvas")}} 요소를 표시할 DOM을 검색합니다.  요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.

+ +
+

지원여부 검사

+ +

대체 콘텐츠는 {{HTMLElement ( "canvas")}}를 지원하지 않는 브라우저에 표시됩니다. 스크립트 역시 간단하게 getContext() 메소드의 존재 여부를 테스트함으로써 프로그래밍 방식으로 지원하는지를 확인할 수 있습니다. 위의 코드 예제는 다음과 같이 될 수 있습니다:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

템플릿 뼈대

+ +

다음은 이후의 예제들에서 시작점으로 사용될 수 있는 가장 최소한의 템플릿입니다.

+ +
+

알아두기: HTML 내에 스크립트(script)를 사용하는것은 좋은 연습 방법이 아닙니다. 다음의 예시에서는 간결하게 나타내기 위해 사용 한 것입니다.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

위 스크립트에 draw() 함수 문서가 호출되었는데, 이는 문서가 {{event("load")}} 이벤트를 수신하여 페이지 로딩이 완료될 때 한번 실행됩니다. 이 함수 혹은 이와 유사한 함수는, 페이지가 처음 로딩되는 한, {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, 혹은 또 다른 이벤트 핸들러 등을 이용하여 호출될 수 있습니다.

+ +

다음은 템플릿이 실제로 어떻게 실행되는지를 보여줍니다. 보이는 바와 같이, 초기에 blank 로 보여집니다.

+ +

{{EmbedLiveSample("A_skeleton_template", 160, 160)}}

+ +

기본 예제

+ +

먼저 두 개의 직사각형을 그린 간단한 예제를 보도록하겠습니다. 그 중 하나는 투명도(alpha transparency)를가집니다. 나중에 이 예제가 어떻게 작동하는지 자세히 살펴 보겠습니다.

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 50, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 50, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

이 예제는 다음과 같습니다.

+ +

{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html b/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..e3d74f5220 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html @@ -0,0 +1,293 @@ +--- +title: 도형 합성 예제 +slug: Web/HTML/Canvas/Tutorial/Compositing/Example +tags: + - HTML5 + - 그래픽 + - 예제 + - 캔버스 +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

이 샘플 프로그램에서는 여러 가지 도형 합성 방법을 보여줍니다. 출력은 다음과 같습니다:

+ +

{{ EmbedLiveSample('도형_합성_예제', '100%', '7250', '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}

+ +

도형 합성 예제

+ +

다음 코드에서는 프로그램의 나머지 부분에서 사용할 전역 값을 설정합니다.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'기본 설정으로, 새로운 도형이 원래 도형 위에 그려집니다.',
+'새로운 도형이 원래 도형과 겹치는 부분에만 그려지며, 나머지는 투명하게 설정됩니다.',
+'새로운 도형이 원래 도형과 겹치지 않는 부분에만 그려집니다.',
+'새로운 도형이 원래 도형과 겹치는 부분에만 그려집니다.',
+'새로운 도형이 원래 도형 아래에 그려집니다.',
+'원래 도형 중 새로운 도형과 겹치는 부분이 유지되며, 나머지는 투명하게 설정됩니다.',
+'원래 도형 중 새로운 도형과 겹치지 않는 부분이 유지됩니다.',
+'원래 도형 중 새로운 도형과 겹치는 부분만 유지됩니다. 새로운 도형은 원래 도형 아래에 그려집니다.',
+'두 도형이 겹치는 곳의 색상이 두 색상값을 합한 값으로 결정됩니다.',
+'새로운 도형만 그려집니다.',
+'두 도형이 겹치는 곳이 투명하게 변하며, 나머지는 평범하게 그려집니다.',
+'위쪽 레이어의 픽셀값이 아래쪽 레이어의 해당하는 픽셀값과 곱해지며, 결과적으로 어두운 이미지가 생성됩니다.',
+'픽셀값을 뒤집고 곱한 다음 도로 뒤집습니다. 결과적으로 밝은 이미지가 생성됩니다(multiply의 반대).',
+'multiply와 screen의 조합입니다. 아래쪽 레이어의 어두운 부분은 더 어두워지고, 밝은 부분은 더 밝아집니다.',
+'두 레이어 중 어두운 픽셀값을 취합니다.',
+'두 레이어 중 밝은 픽셀값을 취합니다.',
+'아래쪽 레이어의 픽셀값을 위쪽 레이어의 뒤집힌 픽셀값으로 나눕니다.',
+'아래쪽 레이어의 뒤집힌 픽셀값을 위쪽 레이어의 픽셀값으로 나누고, 그 값을 도로 뒤집습니다.',
+'overlay와 같이 multiply와 screen의 조합이지만, 위아래 레이어의 순서가 바뀐 상태입니다.',
+'조금 더 부드러운 hard-light입니다. 완전한 검은색/흰색에서 무조건 완전한 검은색/흰색이 나오지 않습니다.',
+'한쪽 레이어의 픽셀값에서 다른 쪽 레이어의 픽셀값을 뺍니다. 빼는 순서는 결과값이 양수가 나오는 순서입니다.',
+'difference와 비슷하지만 대비가 덜합니다.',
+'아래쪽 레이어의 채도(chroma)와 명도(luma)를 보존하고 위쪽 레이어의 색상(hue)을 적용합니다.',
+'아래쪽 레이어의 색상과 명도를 보존하고 위쪽 레이어의 채도를 적용합니다.',
+'아래쪽 레이어의 명도를 보존하고 위쪽 레이어의 색상과 채도를 적용합니다.',
+'아래쪽 레이어의 색상과 채도를 보존하고 위쪽 레이어의 명도를 적용합니다.'
+          ].reverse();
+var width = 320;
+var height = 340;
+
+ +

메인 프로그램

+ +

페이지를 불러오고 나면 다음 코드에서 예제를 준비하고 실행합니다:

+ +
window.onload = function() {
+    // lum in sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // 캔버스 크기 변경
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+
+ +

또한 다음 코드의 runComposite()가 여러 가지 작업을 처리하며, 어려운 부분은 보조 함수를 사용합니다.

+ +
function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('기존 도형', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('새로운 도형', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+
+ +

보조 함수

+ +

이 프로그램에서는 몇몇 보조 함수를 사용합니다.

+ +
var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
+ +
var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
+ +
// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/index.html b/files/ko/web/api/canvas_api/tutorial/compositing/index.html new file mode 100644 index 0000000000..108c493d9d --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/compositing/index.html @@ -0,0 +1,106 @@ +--- +title: 도형 합성 +slug: Web/HTML/Canvas/Tutorial/Compositing +tags: + - HTML5 + - 그래픽 + - 캔버스 +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +

이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데,  globalCompositeOperation 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.

+ +

globalCompositeOperation

+ +

기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 도형의 일정 영역을 가려 보이지 않게 하거나 캔버스의 특정 부분을 지우는 (clearRect() 메소드는 사각형의 영역만을 지우지만, 이같은 제한도 없다.) 등의 효과를 얻을 수도 있습니다.

+ +
+
globalCompositeOperation = type
+
새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다.
+
+ +

다음 예제의 코드를 확인하려면 도형 합성 예제를 확인해 주세요.

+ +

{{ EmbedLiveSample('도형_합성_예제', 750, 6750, '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}

+ +

잘라내기 경로(Clipping path)

+ +

 잘라내기 경로는 다른 캔버스 도형과 비슷하지만, 다른 도형에서 원하지 않는 부분을 가리는 가면과 같은 역할을 합니다. 오른쪽에 있는 그림을 보면 어떤 역할을 하는지 알 수 있을 것입니다. 붉은 별 모양이 잘라내기 경로입니다. 이 경로 밖에 있는 모든 것은 캔버스에 그려지지 않을 것입니다.

+ +

잘라내기 경로와 위에서 살펴본  globalCompositeOperation 속성을 비교해 보면,   source-in과 source-atop에서 비슷한 효과가 보입니다. 이들과 잘라내기 경로와의 가장 중요한 차이점은, 잘라내기 경로 자체는 캔버스에 전혀 그려지지 않는다는 것입니다. 잘라내기 경로는 제한된 영역 안에서 여러 가지 도형을 그리는 데에 적합합니다.

+ +

캔버스에 도형 그리기에서는 stroke()과 fill() 메소드만을 설명했었는데, clip()이라는 세 번째 메소드도 있습니다.

+ +
+
clip()
+
현재 그려지는 경로를 현재 잘라내기 경로로 만듭니다.
+
+ +

경로를 닫기 위해 closePath() 대신 clip()을 사용하고, 경로를 채우거나 윤곽선을 만드는 대신 잘라내기 경로로 만들 수 있습니다.

+ +

{{HTMLElement("canvas")}} 요소의 초기 설정값으로써, 캔버스는 캔버스와 똑같은 크기의 잘라내기 경로를 가집니다. 크기가 똑같기 때문에 잘라내기 효과는 나타나지 않습니다.

+ +

clip 예제

+ +

다음 예제에서는 특정 영역의 별들만 보이도록 동그란 모양의 잘라내기 경로를 사용할 것입니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0,0,150,150);
+  ctx.translate(75,75);
+
+  // 동그란 모양의 잘라내기 경로를 생성한다
+  ctx.beginPath();
+  ctx.arc(0,0,60,0,Math.PI*2,true);
+  ctx.clip();
+
+  // 배경을 그린다
+  var lingrad = ctx.createLinearGradient(0,-75,0,75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75,-75,150,150);
+
+  // 별을 그린다
+  for (var j=1;j<50;j++){
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75-Math.floor(Math.random()*150),
+                  75-Math.floor(Math.random()*150));
+    drawStar(ctx,Math.floor(Math.random()*4)+2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx,r){
+  ctx.save();
+  ctx.beginPath()
+  ctx.moveTo(r,0);
+  for (var i=0;i<9;i++){
+    ctx.rotate(Math.PI/5);
+    if(i%2 == 0) {
+      ctx.lineTo((r/0.525731)*0.200811,0);
+    } else {
+      ctx.lineTo(r,0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+ + + +

코드의 위쪽 몇 줄에서는 배경으로 캔버스 크기와 같은 검은색 네모를 그리고, 가운데로 원점을 옮깁니다. 그런 다음 호를 그리고 clip()을 사용하여 동그란 모양의 잘라내기 경로를 생성합니다. 캔버스 상태를 저장할 때 잘라내기 경로도 같이 저장됩니다. 이전의 잘라내기 경로를 보존하려면, 새로운 잘라내기 경로를 만들기 전에 캔버스 상태를 저장하면 됩니다.

+ +

잘라내기 경로를 만든 후에 그려지는 모든 것들은, 그 경로의 안쪽에서만 보입니다. 이는 그 다음에 그려지는 선형 그라디언트에서 확실히 볼 수 있습니다. 이렇게 하고 나서, drawStar() 함수를 사용하여 위치와 크기가 모두 다른 50개의 별을 그립니다. 이 별들은 잘라내기 경로 안쪽에만 나타납니다.

+ +

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..09df4b829d --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,577 @@ +--- +title: 캔버스(canvas)를 이용한 도형 그리기 +slug: Web/HTML/Canvas/Tutorial/Drawing_shapes +tags: + - Canvas + - 그래픽 + - 중급 + - 캔버스 + - 튜토리얼 +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

앞서 캔버스 환경 설정(canvas environment)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치, 곡선 등 의 기본적인 도형을 그릴수 있는지 익히실 수 있을 것 입니다.  캔버스 위에 물체를 그릴 때에는 path를 사용하는것이 필수적이므로 우리는 이것이 어떻게 사용되는지 볼 것입니다.

+
+ +

그리드

+ +

드로잉을 시작 하기에 앞서, 캔버스 그리드 혹은 좌표공간 (coordinate space) 에 대하여 이야기 해보겠습니다. 이전 페이지에서 이야기 했던 HTML 골격(skeleton)는 가로 세로 각각 150 픽셀의 캔버스 요소를 가지고 있습니다. 오른쪽에 보시면, 캔버스와 기본 그리드가 놓인것을 보실 수 있습니다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같습니다. 이 그리드의 원점은 좌측상단의 (0,0) 입니다. 모든 요소들은 이 원점을 기준으로 위치됩니다. 그렇기 때문에, 파란 사각형의 좌측상단은 왼쪽에서 x 픽셀, 위에서 y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x,y)가 됩니다. 이 튜토리얼 후반부에서 어떻게 원점을 이동하며, 그리드를 회전하고 같은 비율로 확대/축소할 수 있는지 살펴볼 것이지만, 지금은 기본에 충실하도록 합시다.

+ +

직사각형 그리기

+ +

{{Glossary("SVG")}} 와는 다르게, {{HTMLElement("canvas")}}는 오직 하나의 원시적인 도형만을 제공합니다. 바로 직사각형 입니다. 다른 모든 도형들은 무조건 하나 혹은 하나 이상의 path 와 여러 점으로 이어진 선으로 만들어집니다. 다행히도, 우리는 여러 path drawing 함수(function)들을 통해 아주 어려운 도형들도 그릴수 있습니다.

+ +

첫번째로, 직사각형을 봅시다. 캔버스 위에 직사각형을 그리는데에는 세가지 함수(function)가 있습니다:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
색칠된 직사각형을 그립니다.
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
직사각형 윤곽선을 그립니다.
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.
+
+ +

각각의 세 함수는 모두 같은 변수를 가집니다. x와 y는 캔버스의 좌측상단에서 사각형의 (원점으로부터 상대적인) 위치를 뜻하며,  width 와 height는 사각형의 크기를 뜻하게 됩니다.

+ +

전 페이지에서 보여드렸던 draw() 함수(function)를 이용하여 위의 세가지 함수를 아래의 예제에 적용해 보았습니다.

+ +

직사각형 도형 예제

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}
+ +

위 예제의 결과는 다음과 같습니다.

+ +

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

fillRect() 함수는 가로 세로 100 픽셀 사이즈의 검정 사각형을 그립니다. 이후 clearRect() 함수가 60x60 픽셀의 사각형 크기로 도형 중앙을 지우게 되고, strokeRect()은 이 빈 사각형 공간 안에 50x50 픽셀 사이즈의 윤곽선만 있는 사각형을 만들게 됩니다.

+ +

다음 페이지에서, 우리는 clearRect()를 대신하는 두개의 함수에 대해 살펴보고, 만들어진 도형의 색이나 윤곽선의 스타일을 바꾸는 방법들에 대하여 알아보도록 하겠습니다.

+ +

우리가 다음 섹션에서 보게될 path 함수와 다르게 세개의 직사각형 함수는 캔버스에 바로 그릴 수 있습니다.

+ +

경로 그리기

+ +

경로(path)는 직사각형 이외의 유일한 원시적인(primitive) 도형입니다. 경로는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡선을 이루고 두께와 색을 나타내게 됩니다. 경로나 하위 경로(sub-path)는 닫힐 수 있습니다. 경로를 이용하여 도형을 만들 때에는 몇가지 추가적인 단계를 거쳐야 합니다:

+ +
    +
  1. 경로를 생성합니다.
    2. +
  2. 그리기 명령어를 사용하여 경로상에 그립니다.
    3. +
  3. 경로가 한번 만들어졌다면, 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울수 있습니다.
    4. +
+ +

다음은 위의 단계들을 실행하기 위해 사용되는 함수입니다:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.
+
Path 메소드 (Path methods)
+
물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다.
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
윤곽선을 이용하여 도형을 그립니다.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
경로의 내부를 채워서 내부가 채워진 도형을 그립니다.
+
+ +

경로를 만들기 위한 첫번째 단계는 beginPath() 메소드를 사용하는 것 입니다. 내부적으로, 경로는 도형을 이루는 하위경로(선, 아치 등)들의 집합으로 이루어져있습니다. 이 메소드가 호출될 때 마다, 하위 경로의 모음은 초기화되며, 우리는 새로운 도형을 그릴 수 있게 됩니다.

+ +
참고:  현재 열린 path가  비어있는 경우 ( beginPath() 메소드를 사용한 직 후, 혹은캔버스를 새로 생성한 직후), 첫 경로 생성 명령은 실제 동작에 상관 없이 moveTo()로 여겨지게 됩니다. 그렇기 때문에 경로를 초기화한 직후에는 항상 명확하게 시작 위치를 설정해 두는것이 좋습니다.
+ +

두번째 단계는 실제로 경로가 그려지는 위치를 설정하는 메소드를 호출하는 것 입니다. 이 내용에 대해서는 곧 보실수 있습니다.

+ +

세번째 단계는 선택사항으로 closePath() 메소드를 호출하는 것 입니다. 이 메소드는 현재 점 위치와 시작점 위치를 직선으로 이어서 도형을 닫습니다. 이미 도형이 닫혔거나 한 점만 존재한다면, 이 메소드는 아무것도 하지 않습니다.

+ +
참고:  fill() 메소드 호출 시, 열린 도형은 자동으로 닫히게 되므로  closePath()메소드를 호출하지 않아도 됩니다. 이것은 stroke() 메소드에는 적용되지 않습니다.
+ +

삼각형 그리기

+ +

예를 들어, 삼각형을 그리기 위한 코드는 다음과 같습니다:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+
+ +

위 코드의 실행 결과는 다음과 같습니다:

+ +

{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+ +

펜(pen) 이동하기

+ +

가장 유용한 함수중에 실제로 어떤 것도 그리지 않지만 위에서 언급한 경로의 일부가 되는  moveTo() 함수가 있습니다. 이는 펜이나 연필을 종이위에서 들어 옆으로 옮기는것이라고 보시면 됩니다.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
펜을  x와 y 로 지정된 좌표로 옮깁니다.
+
+ +

캔버스가 초기화 되었거나 beginPath() 메소드가 호출되었을 때, 특정 시작점 설정을 위해 moveTo() 함수를 사용하는것이 좋습니다. 또한 moveTo()  함수는 연결되지 않은 경로를 그리는데에도 사용 할 수 있습니다. 아래의 스마일 아이콘을 봅시다.

+ +

코드 snippet을 사용해하여 직접 시도하여 보세요. 앞에서 보았던 draw() 함수(function)를 붙혀넣기 해 보세요.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
+    ctx.stroke();
+  }
+}
+
+ +

결과는 다음과 같습니다:

+ +

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

 moveTo()를 사용한 코드라인을 지우면 연결된 선들을 확인 할 수 있습니다

+ +
+

참고: arc() function에 대하여 더 알아보고 싶다면 아래의  {{anch("Arcs")}} 를 확인하세요.

+
+ +

선

+ +

직선을 그리기 위해서는 lineTo() 메소드를 사용할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.
+
+ +

이 메소드는 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요합니다. 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됩니다. 또한 시작점은 moveTo() 메소드를 통해 변경될 수 있습니다.

+ +

아래의 예시는 하나의 두 삼각형 (윤곽선 삼각형, 색칠된 삼각형)을 그립니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

새로운 경로를 지정하기 위해 beginPath() 메소드를 먼저 실행합니다. 그 다음 moveTo() 메소드를 가지고 시작점을 원하는 위치로 새롭게 지정 해 줍니다. 다음은, 두선을 그어 삼각형의 두 면을 그려줍니다.

+ +

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

여러분은 채워진 삼각형과 윤곽선 삼각형의 차이를 확인 하셨을 겁니다. 위에 언급했던 것 처럼, 경로가 채워지게 되면 그 도형은 자동으로 닫히게 되지만 윤곽선 삼각형에서는 그렇지 않기 때문입니다. 만약에 closePath() 메소드를 윤곽선 삼각형 코드에서 지운다면, 오직 두 선만 그려지게 되며 완벽한 삼각형으로 만들어지지 않습니다.

+ +

호(arc)

+ +

호나 원을 그리기위해서는 arc() 혹은 arcTo() 메소드를 사용합니다..

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
(x, y) 위치에 원점을 두면서, 반지름 r을 가지고,  startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
주어진 제어점들과 반지름으로 호를 그리고,  이전 점과 직선으로 연결합니다.
+
+ +

arc 메소드의 여섯개의 매개변수에 대하여 좀 더 자세하게 알아봅시다: x 와 y는 호를 그릴 때 필요한 원점 좌표입니다. 반지름(radius) 은 말 그대로 호의 반지름을 뜻합니다. startAngle 및 endAngle 매개 변수는 원의 커브를 따라 호의 시작점과 끝점을 라디안 단위로 정의합니다. 이 변수들은 x축을 기준으로 계산됩니다. Boolean 값을 가지는 anticlockwise 변수는 true일 때 호를 반시계 방향으로 그리게 되며, 그렇지 않을 경우에는 시계 방향으로 그리게 됩니다.

+ +
+

참고: arc 함수에서 각도는 각이 아닌 라디안 값을 사용합니다. 각도를 라디안으로 바꾸려면 다음의 자바스크립트(JavaScript) 코드를 사용하실 수 있습니다: radians = (Math.PI/180)*degrees.

+
+ +

다음의 예제는 우리가 이제껏 봐 왔던 예제들 보다 약간 더 복잡합니다. 이 예제는 12가지의 다양한 각도로 채워진 각기 다른 호를 그립니다.

+ +

두개의  for loops은 루프를 통해 호(arc)들의 행과 열을 읽기 위해 사용되었습니다. beginPath()를 사용해 각 호의 새로운 경로를 만듭니다. 코드 내에서, 각각의 매개변수들을 명확하게 보여주기 위해 변수로 정의 하였지만, 실제로 사용할때 꼭 필요한 것은 아닙니다.

+ +

x와 y 좌표는 충분히 명확하게 표기되어야 합니다.  radius 와 startAngle은 고정되어 있습니다. endAngle는 처음 180도 (반원) 에서 시작하고 이후 매번 90도씩 증가하다가 마지막 열에서 완벽한 원을 그립니다.

+ +

clockwise 매개 변수를 지정한 결과로 첫번째와 세번째 줄은 시계방향으로 원호들이 그려졌고 두번째와 네번째 줄에는 반시계방향의 원호들이 그려졌습니다. 마지막으로 if 문은 위 반쪽이 윤곽선으로, 아래 반쪽이 색으로 채워진 호들을 만들어 냅니다.

+ +
+

참고: 이 예제는 다른 예제들 보다 더 큰사이즈의 캔버스가 필요합니다: 150 x 200 픽셀

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // x coordinate
+        var y = 25 + i * 50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
+        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i > 1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+ +

베지어(Bezier) 곡선과 이차(Quadratic )곡선

+ +

다음 경로 타입은 베지어 곡선 (Bézier curves)으로, 삼차(cubic)와 이차(quadric) 변수가 모두 가능합니다. 이 타입은 대게 복잡한 유기체적 형태 (organic shape)를 그리는데 사용됩니다.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
cp1x 및 cp1y로 지정된 제어점을 사용하여 현재 펜의 위치에서 x와 y로 지정된 끝점까지 이차 베지어 곡선을 그립니다.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
(cp1x, cp1y) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 x 및 y로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.
+
+ +

오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명해주고 있습니다. 이차 베지에 곡선은 시작점과 끝점 (파란색 점) 그리고 하나의 제어점 (control point, 빨간 점으로 표시)을 가지고 있지만, 삼차 베지에 곡선은 두개의 제어점을 사용하고 있습니다.

+ +

두 메소드에 모두 사용되는 x와 y 변수는 모두 끝점의 좌표를 나타냅니다. 첫번째 제어점은 cp1x 와 cp1y 좌표로, 두번째 제어점은 cp2x 와 cp2y  좌표로 표시되었습니다.

+ +

이차 및 삼차 베지어 곡선을 사용하는 것은 매우 어려울 수 있습니다. Adobe Illustrator와 같은 벡터 드로잉 소프트웨어와는 달리, 우리는 현재 수행중인 작업에 대해 직접적인 시각적 피드백을 받을 수 없기 때문입니다. 이런 점은 복잡한 모양을 그리기 어렵도록 합니다. 다음 예제에서 우리는 간단한 유기체적 형태만 그리도록 하겠지만, 여러분이 연습과 시간을 투자 하신다면, 이후에 더욱 복잡한 도형을 그릴수 있게 될 것입니다.

+ +

이 예제는 아주 어려운 점은 없습니다. 두 경우 모두 연속된 곡선이 그려지면서 최종 모양이 완성됩니다.

+ +

이차 베지에 곡선(Quadratic Bezier curves)

+ +

이 예제는 여러개의 이차 베지어 곡선을 이용해 말풍선을 만들어 냅니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

삼차 베지어 곡선 (Cubic Bezier curves)

+ +

이 예제는 삼차 곡선을 이용하여 하트를 그립니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

직사각형

+ +

직사각형을 캔버스에 직접 그리는 {{anch("직사각형 그리기")}}에서 본 세 가지 메소드 외에 rect() 메소드도 있습니다. 이 메소드는 현재 열린 패스에 직사각형 경로를 추가합니다.

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
+
좌측상단이 (x, y)이고 폭과 높이가 width와 height인 직사각형을 그립니다.
+
+ +

이 메소드가 실행되기 전에, (x,y) 매개변수를 가진 moveTo() 메소드가 자동으로 호출됩니다. 즉, 현재의 펜위치가 자동으로 기본 좌표로 초기화 됩니다.

+ +

조합하기

+ +

이제까지 이 페이지의 예제들은 각각의 도형마다 하나의 path 함수를 가지고 있었습니다. 하지만 도형을 만드는데에 사용되는 경로의 종류와 개수는 제한이 없습니다. 그렇기 때문에 이 마지막 예제에서는 모든 경로 함수를 합쳐 여러 게임 캐릭터들을 그려보도록 하겠습니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx, 12, 12, 150, 150, 15);
+    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 53, 53, 49, 33, 10);
+    roundedRect(ctx, 53, 119, 49, 16, 6);
+    roundedRect(ctx, 135, 53, 49, 33, 10);
+    roundedRect(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for (var i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for (i = 0; i < 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for (i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + radius);
+  ctx.lineTo(x, y + height - radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.lineTo(x + width - radius, y + height);
+  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
+  ctx.lineTo(x + width, y + radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.lineTo(x + radius, y);
+  ctx.arcTo(x, y, x, y + radius, radius);
+  ctx.stroke();
+}
+
+ +

결과 이미지는 다음과 같습니다:

+ +

{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

+ +

이 예제는 보기보다 아주 간단하기 때문에 자세한 설명은 생략하겠습니다. 알아 두어야할 가장 중요한 부분은 fillStyle  코드와 사용된 유틸리티 함수 (roundedRect() 부분) 입니다. 유틸리티 함수를 사용하게 되면, 사용해야 할 코드의 양과 복잡함을 줄여주는데 도움을 줍니다.

+ +

이 튜토리얼에서 나중에 fillStyle에 대하여 조금 더 자세하게 알아보도록 하겠지만, 지금은 경로의 채우는 색을 기본값(흑백)에서 바꾸었다가 다시 기본값으로 바꾸는 정도로만 사용하였습니다.

+ +

Path2D 오브젝트 (Path2D objects)

+ +

마지막 예제에서 보았 듯이, 캔버스에 객체를 그리는 일련의 경로와 그리기 명령이 있을 수 있습니다. 코드를 단순화하고 성능을 향상시키기 위해 최근 버전의 브라우저에서 사용할 수있는 {{domxref("Path2D")}} 객체를 사용하여 이러한 드로잉 명령을 캐시하거나 기록 할 수 있습니다. 이로써 여러분은 경로를 빠르게 다시 실행 시킬 수 있습니다.

+ +

어떻게 Path2D object를 생성 할 수 있는지 확인해 봅시다:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
Path2D() 생성자는 새로운 Path2D 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.
+
+ +
new Path2D();     // empty path object
+new Path2D(path); // copy from another Path2D object
+new Path2D(d);    // path from SVG path data
+ +

moveTo, rect, arc 혹은 quadraticCurveTo 등과 같은 모든 경로 메소드 (path methods)들은  Path2D 객체에서 사용 가능합니다.

+ +

Path2D API는 또한 addPath 메소드를 사용하여 경로를 결합하는 방법을 추가합니다. 예를 들자면, 여러 요소를 사용하는 오브젝트를 만들 때 유용하게 사용 될 수 있습니다.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
옵션으로 변환 행렬(transformation matrix)을 사용하여 현재 경로에 경로를 추가합니다.
+
+ +

Path2D 예제

+ +

이 예제에서는, 직사각형과 원을 만들어 볼 것입니다. 나중에 사용할 것을 고려하여, 두 도형 모두 Path2D object로 저장 될 것입니다. 새로운 버전의 Path2D API에서는 여러 메소드들이 지금 사용하고있는 path가 아닌 Path2D object를 옵션으로 선택하여 사용 할 수 있도록 업데이트 되었습니다. 아래의 예제에서 보시면, stroke 와 fill 메소드가 오브젝트를 캔버스 위에 그리도록 path 변수와 함께 사용되었습니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

SVG paths 사용하기

+ +

새로운 캔버스 path2D API 또다른 강력한 특징 중 하나는, 캔버스의 path를 초기화 하기 위해 SVG path data를 사용한다는 것입니다. 이는 path 데이터를 이동시키며, SVG와 canvas 에서 재사용 할 수 있도록 해줍니다. 

+ +

path는 (M10 10) 점으로 이동한 다음, 수평하게 오른쪽으로 으로 80 포인트 (h 80)  만큼 이동합니다. 이후 수직으로 80포인트 (v 80) 내려간 다음, 80 포인트 왼쪽으로 (h -80) 수평하게 이동하고 다시 시작점 (z)으로 돌아갑니다. 예시는 이곳( Path2D constructor )에서 확인하실 수 있습니다.

+ +
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..2c789e85a4 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,164 @@ +--- +title: 텍스트 그리기 +slug: Drawing_text_using_a_canvas +tags: + - HTML + - 'HTML:Canvas' + - NeedsContent +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
+ +
+

이전 챕터에서 스타일과 컬러를 적용하는 방법에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.

+
+ +

텍스트 그리기

+ +

캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다.
+
+ +

fillText 예제

+ +

텍스트는 현재의 fillStyle을 사용하여 채워집니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+ +

strokeText 예제

+ +

텍스트는 현재의 strokeStyle을 이용하여 채워집니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+ +

텍스트 스타일 적용하기

+ +

 위의 예제에서 우리는 이미 텍스트를 기본 사이즈를 키우기 위하여 font 프로퍼티를 사용하였습니다. 그리고 캔버스에 표시되는 텍스트를 조정할 수 있는 속성이 더 있습니다. 

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 CSS {{cssxref("font")}} 프로퍼티와 동일한구문을 사용합니다. 기본값으로 sans-serif의 10px가 설정되어 있습니다.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
텍스트 정렬 설정. 사용가능한 값: start, end, left, right, center. 기본 값은 start 입니다.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
베이스라인 정렬 설정. 사용가능한 값: top, hanging, middle, alphabetic, ideographic, bottom. 기본 값은 alphabetic 입니다
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
글자 방향. 사용가능한 값: ltr, rtl, inherit. 기본 값은 inherit 입니다.
+
+ +

만약 CSS를 다뤄보신적이 있다면 이러한 프로퍼티들은 익숙하실겁니다.

+ +

다음에 나오는  WHATWG 예제 다이어그램은 textBaseline를 이용하여 다양한 베이스라인 설정을 보여줍니다.The top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square.

+ +

textBaseline 예제

+ +

아래의 코드를 수정하여 캔버스에서 어떻게 바뀌는지 실시간으로 확인해 보세요.

+ +
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

어드밴스드 텍스트 측정

+ +

만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 {{domxref("TextMetrics")}} 객체 리턴. 
+
+ +

다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+
+ +

Gecko 사용시 주의점

+ +

Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의 prefixed APIs가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다. 

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/finale/index.html b/files/ko/web/api/canvas_api/tutorial/finale/index.html new file mode 100644 index 0000000000..1241680c5c --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/finale/index.html @@ -0,0 +1,51 @@ +--- +title: Finale +slug: Web/HTML/Canvas/Tutorial/Finale +tags: + - 그래픽 + - 캔버스 + - 튜토리얼 +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
+ +
+

축하합니다 Canvas 튜토리얼을 모두 끝마쳤습니다! 이 정보는 웹에서 더 나은 2D 그래픽을 만드는데 도움이 됩니다.

+
+ +

더 많은 예시와 튜토리얼

+ +

이 사이트에는 다양한 데모와 canvas에 대한 추가 설명이 있다.

+ +
+
Codepen.io
+
프론트 엔드 개발자 playground 및 브라우저의 코드 편집기.
+
HTML5 Canvas Tutorials
+
대부분 canvas API의 예시
+
Game development
+
게임은 가장 인기있는 컴퓨터 활동 중 하나이다. 어떤 표준 규격의 웹 브라우저에서도 실행할 수 있는 더 나은 게임을 개발할 수 있도록 하기 위한 신기술이 끊임없이 등장하고 있다.
+
+ +

기타 웹API

+ +

이 API들는 canvas 및 그래픽으로 작업할 때 유용하다.

+ +
+
WebGL
+
3D를 포함한 복잡한 그래픽 렌더링을 위한 고급 API.
+
SVG
+
확장 가능한 Vector Graphics는 이미지를 벡터(선)과 형태의 집합으로 묘사하여 이미지를 그리는 크기에 상관없이 원활하게 확장할 수 있다.
+
Web Audio
+
Web Audio API는 개발자들이 오디오 소스 선택, 오디오에 효과 추가, 오디오 시각화 생성, 공간 효과 적용(예: 패닝)등을 할 수 있도록 웹 상에서 오디오를 제어하기 위한 다양하고 좋은 시스템을 제공한다.
+
+ +

문의사항

+ +
+
Stack Overflow
+
"canvas"가 태그된 문의사항.
+
Comments about this tutorial – the MDN documentation community
+
이 튜토리얼에 대해 의견이 있으시거나 저희에게 감사를 표하고 싶다면 언제든지 연락해주세요!
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..e720af3159 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,97 @@ +--- +title: 히트(Hit) 영역과 접근성 +slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
+ +
{{HTMLElement("canvas")}} 엘리먼트는 비트맵이며 그려진 객체에 대한 정보는 제공하지 않습니다. 캔버스 컨텐츠는 시멘틱 HTML과 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성을 위한 웹 사이트 또는 앱에서는 캔버스를 사용하지 않는 것이 좋습니다. 본 가이드라인은 접근성이 향상된 캔버스를 만드는데 도움이 될 것입니다.
+ +

대체 컨텐츠

+ +

<canvas> ... </ canvas> 태그 안의 내용은 캔버스 렌더링을 지원하지 않는 브라우저의 대체 컨텐츠로 사용할 수 있습니다. 또한 하위 DOM을 읽고 해석 할 수있는 보조 기술 사용자 (스크린 리더와 같은)에게도 매우 유용합니다. html5accessibility.com의 좋은 예가 이를 수행 할 수있는 방법을 보여줍니다.

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

Steve Faulkner의 NVDA가 이 예제를 어떻게 읽는지를 보여주는 동영상을 참고하시기 바랍니다.

+ +

ARIA 규칙

+ +

ARIA(Accessible Rich Internet Application)는 장애인이 사용자가 웹 콘텐츠 및 웹 응용 프로그램을보다 쉽게 사용할 수 있도록하는 방법을 정의합니다. ARIA 속성을 사용하여 캔버스 엘리먼트의 동작 및 용도를 설명 할 수 있습니다. 자세한 내용은 ARIA 및 ARIA 기술을 참조하십시오.

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

히트(Hit) 영역

+ +

마우스 좌표가 캔버스의 특정 영역 내에 있는지 여부는 문제를 해결하는 데 공통적입니다. 히트 영역 API를 사용하면 캔버스 영역을 정의 할 수 있으며 캔버스에 대화형 컨텐츠를 접근성 도구에 표시 할 수 있습니다. 히트 영역 API는 여러분이 히트 감지를 쉽게 할 수 있도록 하며 DOM 엘리먼트에 이벤트를 전달할 수 있도록 합니다. API에는 다음 세 가지 메소드가 있습니다 (현재 웹 브라우저에서는 아직 실험 중이며 브라우저 호환성 테이블을 확인하십시오).

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
히트 영역을 캔버스에 추가합니다.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
캔버스에서 해당 id를 가진 히트 영역을 제거합니다.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
캔버스에서 모든 히트 영역을 제거합니다.
+
+ +

경로에 히트 영역을 추가하고 {{domxref("MouseEvent.region")}} 속성을 확인하여 마우스가 영역을 히트하는지 테스트 할 수 있습니다.

+ +
<canvas id="canvas"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+</script>
+ +

addHitRegion() 메소드는 control 옵션을 이용하여 이벤트를 엘리먼트(즉, 캔버스의 자식으로)로 전달합니다.

+ +
ctx.addHitRegion({control: element});
+ +

예를 들어 {{HTMLElement("input")}} 엘리먼트로 전달하는 데 유용 할 수 있습니다. codepen 데모를 참조하십시오.

+ +

포커스 링(Focus rings)

+ +

키보드로 작업 할 때 포커스 링은 페이지 탐색에 도움이되는 편리한 표시기입니다. 캔버스 드로잉에 포커스 링을 그리려면 drawFocusIfNeeded 속성을 사용할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
지정된 엘리먼트에 포커스가있는 경우,이 메소드는 현재 경로 주위에 포커스 링을 그립니다.
+
+ +

또한 scrollPathIntoView() 메서드를 사용하여 포커스가있는 경우 엘리먼트를 화면에 표시 할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
현재 경로 또는 지정된 경로를 뷰로 스크롤합니다.
+
+ +

See also

+ + + +
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/ko/web/api/canvas_api/tutorial/index.html b/files/ko/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..03077163aa --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,62 @@ +--- +title: 캔버스 튜토리얼 +slug: Web/HTML/Canvas/Tutorial +tags: + - Canvas + - Graphic + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +
+ +
+

<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는) 애니메이션을 만드는 데에 사용될 수 있습니다. 오른쪽에 보이는 이미지들은 앞으로 설명하게 될 <canvas>를 사용하여 만들 수 있는 것들의 일부입니다.

+
+ +

이 튜토리얼은 <canvas> 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합니다.

+ +

<canvas>는 Apple의 Webkit에 처음 도입되어 Mac OS X 대시보드(Dashboard)에 사용되었고, 이후 다른 브라우저에도 구현되어 왔습니다. 현재 대부분의 주요 브라우저에서 지원됩니다.

+ +

시작하기 전 알아두어야 할 것

+ +

<canvas> 요소를 사용하는 것이 어려운 일은 아니지만, HTML과 자바스크립트에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 <canvas> 요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있습니다. 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, HTML height와 width 속성을 사용하여 바꿀 수 있습니다. 캔버스에 그림을 그리려면 자바스크립트 컨텍스트 오브젝트를 사용하며, 즉석에서 그림을 생성할 수 있습니다.

+ +

튜토리얼 내용

+ + + +

같이 보기

+ + + + + +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git a/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..460b5e893f --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,110 @@ +--- +title: 캔버스 최적화 +slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

{{HTMLElement("canvas")}} 엘리먼트는 웹에서 2D 그래픽을 렌더링하는 데 가장 널리 사용되는 도구 중 하나입니다. 그러나 웹 사이트와 앱이 Canvas API를 최대한으로 밀면 성능이 저하되기 시작합니다. 그러나 웹 사이트 및 앱이 Canvas API를 한계치까지 사용하면 성능이 저하되기 시작합니다. 이 글에서는 그래픽이 잘 동작하도록 보장하기 위해 캔버스 엘리먼트의 사용을 최적화하기위한 제안 사항을 제공합니다.

+
+ +

성능 팁

+ +

다음은 캔버스 성능을 개선하기 위한 팁 모음입니다.

+ +

캔버스에 표시되지 않는 비슷한 원시 혹은 반복 객체를 미리 그려라

+ +

만약 당신이 캔버스에 애니메이션 프레임을 그리면서 반복적인 작업이 발견된다면, 눈에 보이지 않는 숨겨진 캔버스 요소를 새로 만들고 그 캔버스에 미리 그려 넣는 방법을 고려하세요. 그렇게 하면 필요한 순간에 숨긴 캔버스에 그려진 이미지를 다시 주 캔버스 이미지에 그려넣어, 불필요한 렌더링 반복 작업을 줄여 성능 향상을 꾀할 수 있습니다.

+ +
myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas.width = myCanvas.width;
+myCanvas.offscreenCanvas.height = myCanvas.height;
+
+myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
+ +

부동 소수점 좌표를 피하고 대신 정수를 사용하라.

+ +

정수값들 없이 캔버스 상의 객체를 렌더링할 때 부가적인 픽셀 렌더링이 발생합니다.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

이렇게하면 앤티 앨리어싱(anti-aliasing) 효과를 만들기 위해 브라우저에서 추가 연산을 수행해야합니다. 예제에서 이를 방지하려면 {{jsxref("Math.floor()")}}를 사용하여 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} 호출에 사용된 모든 좌표를 반올림해야합니다.

+ +

drawImage에서 이미지 크기를 조정하지 마라.

+ +

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}에서 즉시 크기를 조정하지 말고 다양한 이미지 크기를 오프스크린(offscreen) 캔버스에 캐시하십시오.

+ +

복잡한 장면에 여러 개의 레이어 캔버스를 사용하라.

+ +

어플리케이션에서 일부 객체는 자주 이동하거나 변경해야하지만 다른 객체는 상대적으로 고정 위치에 남아야 합니다. 이런 상황에서 대응 가능한 최적화는 여러 <canvas> 엘리먼트를 사용하여 항목을 겹쳐서 만드는 것입니다.

+ +

예를 들어 상단에 UI, 중간에 게임 플레이 액션, 하단에 정적 배경이있는 게임이 있다고 가정 해 보겠습니다. 이 경우 게임을 세 개의 <canvas> 레이어로 나눌 수 있습니다. UI는 사용자 입력시에만 변경되며 게임 플레이 레이어는 모든 새 프레임마다 변경되며 배경은 일반적으로 변경되지 않습니다.

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black;
+  }
+
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3; }
+  #game-layer { z-index: 2; }
+  #background-layer { z-index: 1; }
+</style>
+
+ +

큰 배경 이미지는 일반 CSS를 사용하라.

+ +

정적 배경 이미지가있는 경우 CSS {{cssxref("background")}} 속성을 사용하여 일반 {{HTMLElement("div")}} 요소에 그릴 수 있으며 캔버스 아래에 배치 할 수 있습니다. 이렇게하면 모든 틱 마다 배경을 캔버스에 렌더링 할 필요가 없어집니다.

+ +

CSS 변환(transform)을 사용하여 캔버스 크기 조정하라.

+ +

CSS 변환(transform)은 GPU를 사용하기 때문에 더 빠릅니다. 가장 좋은 경우는 캔버스를 스케일링하지 않거나, 큰 캔버스를 축소하기보다 작은 캔버스를 확대하는 것입니다.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

투명도를 사용하지 마라.

+ +

응용 프로그램이 캔버스를 사용하고 투명 배경을 필요로하지 않는 경우 HTMLCanvasElement.getContext()를 사용하여 드로잉 컨텍스트를 만들 때 alpha 옵션을 false로 설정합니다. 이 정보는 렌더링을 최적화하기 위해 브라우저에서 내부적으로 사용할 수 있습니다.

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

추가 팁들

+ + + +

See also

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/transformations/index.html b/files/ko/web/api/canvas_api/tutorial/transformations/index.html new file mode 100644 index 0000000000..b93747b581 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/transformations/index.html @@ -0,0 +1,286 @@ +--- +title: 변형 (transformations) +slug: Web/HTML/Canvas/Tutorial/변형 +tags: + - CSS + - HTML + - 이동 + - 축소 + - 캔버스 + - 크기변형 + - 트랜스폼 + - 확대 +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
+ +
이 튜토리얼에 앞서 canvas 그리드와 좌표 공간에 대해 알아 보았습니다. 지금까지는 기본적인 그리드를 사용해 요구에 맞추어 전체 canvas의 크기를 바꾸기만 했습니다. Transformation(변형)에는 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대·축소까지 하는 더 강력한 방법들이 있습니다.
+ +

상태(state)의 저장과 복원

+ +

변형(transformation) 메소드을 살펴보기 전에 두 가지 다른 메소드를 보도록 하지요. 일단 여러분이 더 복잡한 그림(drawings)을 그리기 시작하면 반드시 있어야 하는 메소드들입니다.

+ +
+
{{domxref("CanvasRenderingContext2D.save", "save()")}}
+
canvas의 모든 상태를 저장합니다.
+
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+
가장 최근에 저장된 canvas 상태를 복원합니다.
+
+ +

Canvas 상태는 스택(stack)에 쌓입니다. save() 메소드가 호출될 때마다 현재 drawing 상태가 스택 위로 푸시됩니다. drawing 상태는 다음과 같이 이루어집니다.

+ + + +

여러분은 원하는 만큼 save() 메소드를 많이 호출할 수 있습니다. restore() 메소드를 호출할 때마다 마지막으로 저장된 상태가 스택에서 튀어나와 저장된 설정들을 모두 복원시킵니다.

+ +

save와 restore canvas 상태(state) 예제

+ +

사각형 세트를 연이어 그려서 drawing 상태를 가진 스택이 어떻게 기능하는지를 이 예제에서 설명하고자 합니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // 기본 설정으로 사각형을 그리기
+  ctx.save();                  // 기본 상태를 저장하기
+
+  ctx.fillStyle = '#09F';      // 설정 변경하기
+  ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기
+
+  ctx.save();                  // 현재 상태 저장하기
+  ctx.fillStyle = '#FFF';      // 설정 변경하기
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // 새로운 설정으로 사각형 그리기
+
+  ctx.restore();               // 이전 상태 복원하기
+  ctx.fillRect(45, 45, 60, 60);   // 복원된 설정으로 사각형 그리기
+
+  ctx.restore();               // 초기 상태를 복원하기
+  ctx.fillRect(60, 60, 30, 30);   // 복원된 설정으로 사각형 그리기
+}
+ + + +

첫 단계로 기본 설정으로 커다란 사각형을 그립니다. 그다음에는 이 상태를 저장하고 fill color를 바꿉니다. 그런 후에 두 번째이자 크기가 더 작은 파란 사각형을 그리고 그 상태를 저장합니다. 다시 한번 일부 drawing 설정을 바꾸고 세 번째 반투명한 흰 사각형을 그립니다. 

+ +

여기까지는 이전 섹션에서 했던 작업과 매우 유사합니다. 하지만 일단 첫 번째 restore() 문을 호출하면 스택에서 맨 위의 drawing 상태가 지워지고 설정이 복원됩니다. 만일 save()로 저장하지 않았다면, 이전 상태로 되돌리기 위해 fill color와 투명도를 일일이 바꿔주어야 했을 것입니다. 두 속성이라서 간단했을 테지만 그보다 더 많았으면 코드가 급속히 길어졌겠지요. 

+ +

두 번째 restore()문이 호출될 때, 초기 상태( 처음으로 save를 호출하기 전에 설정한 상태)가 복원되고 마지막 사각형은 한번 더 검게 그려집니다.

+ +

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+ +

이동(translating)

+ +

우리가 살펴볼 첫 번째 변형 메소드는 translate()입니다.  이 메소드는 그리드에서 canvas를 원점에서 다른 점으로 옮기는 데 사용됩니다. 

+ +
+
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+
그리드에서 canvas와 그 원점을 이동합니다. x는 이동시킬 수평 거리를 가리키고, y는 그리드에서 수직으로 얼마나 멀리 떨어지는지를 표시합니다. 
+
+ +

변형하기 전에 canvas 상태를 저장하는 것이 좋습니다. 대다수의 경우, 원래 상태로 되돌리려고 역이동(reverse translation)을 시키는 것보다 restore 메소드를 호출하는 것이 더욱 간편합니다. 게다가 루프(loop) 안에서 이동하는 거라면 canvas 상태를 저장하고 복원하지 마세요. canvas 모서리 밖에서 그려지는 바람에 drawing의 일부를 잃어버리게 될지 모릅니다. 

+ +

translate 예제

+ +

이 예제에서 canvas 원점의 이동에 관한 좋은 점을 일부 보여드리겠습니다. translate() 메소드를 쓰지 않으면 모든 사각형은 같은 위치 (0, 0)에 그려집니다. 또한, translate() 메소드는 사각형을 fillRect() function에서 좌표를 일일이 적으며 바꾸지 않아도 어디에나 위치할 수 있게 해줍니다. 이렇게 하면 이해하고 사용하기가 좀 더 쉽습니다. 

+ +

 draw() function에서 두 개의 루프(loops)를 이용해 fillRect() function을 아홉 번 호출합니다. 루프마다 canvas가 이동하고 사각형이 그려지며, canvas는 원래 상태로 되돌아 갑니다. fillRect()로의 호출이 translate()에 의지해 drawing 위치를 바꾸는데 어떻게 매번 같은 좌표를 사용하는지 눈여겨 보세요.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 3; i++) {
+    for (var j = 0; j < 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+ +

회전(rotating)

+ +

두 번째 변형 메소드는 rotate()입니다. canvas를 현재의 원점 둘레로 회전하는 데 사용합니다.

+ +
+
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+
canvas를 현재 원점을 기준으로 라디안의 angle 숫자만큼 시계방향으로 회전시킵니다.
+
+ +

회전의 중심점은 언제나 canvas 원점입니다. 중심점을 바꾸려면 translate() 메소드를 써서 canvas를 이동해야 합니다.

+ +

rotate 예제

+ +

이 예제는 사각형을 canvas 원점에서 먼저 회전하고 그다음에 translate()의 도움을 받아 사각형 자체의 중심에서 회전하는 데 rotate()를 사용합니다.

+ +
+

주의: 각도의 단위는 도(degree)가 아닌 라디안(radian)입니다.   변환하려면 radians = (Math.PI/180)*degrees.를 사용합니다.

+
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 좌측 사각형, canvas 원점에서 회전하기
+  ctx.save();
+  // 파란 사각형
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // 회색 사각형
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // 우측 사각형, 사각형 중심에서 회전하기
+  // 파란 사각형 그리기
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // 사각형 중심으로 이동하기
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // 회전
+  ctx.translate(-200, -80); // 예전 위치로 이동하기
+
+  // 회색 사각형 그리기
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+
+ +

사각형 자체의 중심 둘레로 회전하려면 사각형의 중심으로 canvas를 옮기세요. 그런 후에 canvas를 회전하고, 그 canvas를 0, 0로 되돌려 이동합니다. 그다음에 사각형을 그리세요.

+ + + +

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+ +

확대·축소(scaling)

+ +

다음 변형 메소드는 확대·축소(scaling)입니다. canvas 그리드에서 단위(units)를 키우거나 줄이는 데 사용합니다. 이는 벡터 모양과 비트맵(bitmaps) 요소를 축소하거나 확대해서 그리는 데 사용될 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+
canvas 단위를 수평으로 x만큼, 수직으로 y만큼 크기를 확대·축소합니다. 둘의 매개 변수는 실수입니다. 1.0보다 작은 값이면 단위의 크기를 축소하고, 1.0보다 큰 값이면 단위의 크기를 확대합니다. 값이 1.0이면 단위의 크기는 그대로입니다.
+
+ +

음수를 이용해서 축을 대칭 시킬 수 있습니다(가령 translate(0,canvas.height); scale(1,-1);로 쓰는 것처럼 말이죠. 좌측 하단 모서리에 있는 원점을 이용한, 잘 알려진 카르테시안 좌표계(Cartesian coordinate)인 것이지요.

+ +

기본적으로 canvas에서 하나의 단위는 정확히 1픽셀입니다. 예를 들어 0.5라는 확대·축소 비율을 적용한다면, 결과로 나오는 단위는 0.5 픽셀이 될 것이고, 고로 모양도 절반 크기로 그려질 것입니다. 이런 방식으로 크기 비율을 2.0으로 잡으면 단위 크기가 확대되어 하나의 단위는 이제 2픽셀이 되겠지요. 이 결과로 모양은 그만큼 2배로 커집니다.

+ +

scale 예제

+ +

마지막 예제로 다양한 확대·축소 비율을 이용해 모양을 그려보겠습니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 간단하지만 확대·축소 비율을 적용한 사각형 그리기
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // 수평으로 대칭하기
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}
+
+
+ + + +

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+ +

변형(transforms)

+ +

마지막으로, 다음의 변형(transform) 메소드들은 변환 행렬(transformation matrix)로 변경할 사항을 즉시 적용할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
+
인수(arguments)에 표시된 행렬을 이용해 현재 변환 행렬을 곱합니다. 변환 행렬은 다음과 같이 작성됩니다. 
+ [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+
+ +
+
만일 인수 중에 Infinity가 있다면, 변환 행렬은 예외 처리하는 메소드 대신에 반드시 infinite로 표시되어야 합니다.
+
+ +

이 function의 매개 변수들은 다음과 같습니다.

+ +
+
a (m11)
+
수평으로 확대·축소하기
+
b (m12)
+
수평으로 비스듬히 기울이기
+
c (m21)
+
수직으로 비스듬히 기울이기
+
d (m22)
+
수직으로 확대·축소하기
+
e (dx)
+
수평으로 이동하기
+
f (dy)
+
수직으로 이동하기
+
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+
현재 변형 상태를 단위 행렬로 재설정하고 나서 동일한 인수로 transform() 메소드를 적용합니다. 이는 기본적으로 현재의 변형을 무효로 한 후에 명시된 변형으로 바뀌는데, 한번에 모든 게 진행됩니다.
+
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+
현재 변형 상태를 단위 행렬로 재설정합니다. 이는 ctx.setTransform(1, 0, 0, 1, 0, 0); 호출과 같습니다.
+
+ +

transform과 setTransform 예제

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i <= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}
+
+ + + +

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/using_images/index.html b/files/ko/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..d9aae1c993 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,347 @@ +--- +title: Using images +slug: Web/HTML/Canvas/Tutorial/Using_images +tags: + - Advanced + - Canvas + - Graphics + - HTML + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
+ +
+

지금까지 우리는 Canvas를 가지고 스스로 도형을 만들고 그 도형에 스타일 적용 해 보았습니다. 이미지를 사용 하는 기능은 {{HTMLElement("canvas")}}의 가장 흥미로운 기능중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 다이나믹한 사진 도음들을 위해 사용 될 수 있습니다. PNG,GIF, JPEG등 브라우저에서 지원되는 포맷형태라면 어떠한 외부 이미지라도 사용 될 수 있습니다. 같은 페이지 소스에서 다른 Canvas요소로 만들어진 이미지 또한 사용할수 있습니다!

+
+ +

이미지를 캔버스로 불러오는것은 기본적으로 두 단계를 필요로 합니다:

+ +
    +
  1. {{domxref("HTMLImageElement")}} object를 참조하거나 다른 캔버스 요소를 소스로 사용합니다. 이는 URL을 가지고 이미지를 사용 할 수 있습니다.
    2. +
  2. drawImage() function을 사용하여 캔버스에 나타난 이미지 위에 그림을 그립니다.
    3. +
+ +

이 과정이 어떻게 되는지 봅시다.

+ +

이미지 불러오기

+ +

canvas API는 아래의 데이터 타입을 이미지 소스로 사용 할 수 있습니다:

+ +
+
{{domxref("HTMLImageElement")}}
+
{{HTMLElement("img")}} element와 마찬가지로, Image() constructor를 통해 만들어진 이미지입니다.
+
+ +
+
{{domxref("SVGImageElement")}}
+
{{SVGElement("image")}} element 를 사용해 불러온 이미지입니다.
+
+ + + +
+
{{domxref("HTMLVideoElement")}}
+
HTML {{HTMLElement("video")}} 요소를 이미지 소스로 사용하여 비디오의 현재 프레임을 이미지로 불러옵니다.
+
{{domxref("HTMLCanvasElement")}}
+
다른 {{HTMLElement("canvas")}} 요소를 이미지 소스로 사용합니다.
+
+ +

이렇게 얻은 소스들은 {{domxref("CanvasImageSource")}}.를 사용하여 불러 올 수 있습니다.

+ +

다음은 캔버스에 놓인 이미지를 사용하는 여러가지 방법입니다.

+ +

같은 페이지의 이미지 사용하기

+ +

우리는 다음을 사용하여 같은 페이지에 있는 캔버스나 이미지를 참고 할 수 있습니다.

+ + + +

다른 도메인의 이미지 사용하기

+ +

Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to drawImage(). If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas.

+ +

다른 캔버스 요소 (canvas elements) 사용하기

+ +

Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.

+ +

One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.

+ +

처음부터 이미지 만들기

+ +

Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient Image() constructor:

+ +
var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+
+ +

When this script gets executed, the image starts loading.

+ +

If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:

+ +
var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+
+ +

If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.

+ +

데이터를 사용하여 이미지 불러오기Embedding an image via data: URL

+ +

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

+ +
var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

+ +

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

+ +

비디오 프레임 사용하기Using frames from a video

+ +

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

+ +

이미지 그리기

+ +

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
+
+ +
+

SVG images must specify a width and height in the root <svg> element.

+
+ +

예제: 기본 선 그래프

+ +

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

The resulting graph looks like this:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

비례 크기 조정

+ +

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
+
+ +

예제: 이미지를 타일처럼 배치

+ +

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

+ +
+

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

The resulting canvas looks like this:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

이미지 자르기

+ +

The third and last variant of the drawImage() method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
+
+ +

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

+ +

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

+ +

예제: 이미지 프레임 넣기

+ +

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}
+ +

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

+ +

아트 갤러리 예제

+ +

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.

+ +

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

+ +

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

And here's some CSS to make things look nice:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Tying it all together is the JavaScript to draw our framed images:

+ +
function draw() {
+
+  // Loop through all images
+  for (var i = 0; i < document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

이미지 비율 습성(scaling behavior) 제어하기

+ +

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git a/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html new file mode 100644 index 0000000000..c9bb8b32ba --- /dev/null +++ b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,28 @@ +--- +title: Determining the dimensions of elements +slug: Determining_the_dimensions_of_elements +translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +--- +

엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.

+ +

공간을 얼마나 차지하나요?

+ +

표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, offsetWidth와 offsetHeight 속성을 사용하세요:

+ +

Image:Dimensions-offset.png

+ +

보이는 컨텐트의 크기는요?

+ +

패딩은 포함하되 경계선, 여백, 스크롤바는 포함시키지 않고 보이는 컨텐트가 실제로 차지하는 공간이 알고 싶다면, clientWidth와 clientHeight 속성을 사용하세요:

+ +

Image:Dimensions-client.png

+ +

컨텐트는 얼마나 크나요?

+ +

컨텐트의 실제 크기를 알고 싶다면(보여지는 부분만이 아닌 전체 컨텐트 크기), scrollWidth와 scrollHeight 속성을 사용하세요. 이 속성들은 엘리먼트 컨텐트의 전체 크기에 해당하는 너비와 높이를 반환합니다. 보여지는 영역이 작아서 스크롤바를 사용하고 있다해도 관계없습니다.

+ +

예를 들어, 600x400 픽셀 크기의 엘리먼트가 300x300 픽셀의 스크롤박스에서 보여진다면 scrollWidth는 600을, scrollHeight는 400을 각각 반환합니다.

+ +

참고자료

+ +

MSDN: Measuring Element Dimension and Location

diff --git a/files/ko/web/api/css_object_model/managing_screen_orientation/index.html b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html new file mode 100644 index 0000000000..934384d0bf --- /dev/null +++ b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html @@ -0,0 +1,136 @@ +--- +title: Managing screen orientation +slug: WebAPI/Managing_screen_orientation +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +

{{SeeCompatTable}}

+

Summary

+

Screen orientation 은 device orientation 과는 조금 다르다. 비록 장치가 방향을 감지 못하더라도 화면은 언제나 방향을 가지고 있다. 그리고 만약 장치가 방향을 알 수 있더라도 웹 어플리케이션의 인터페이스를 유지하거나 적응하기 위해 화면의 방향을 조정하는 능력을 갖는게 좋다.

+

화면의 방향을 다루기 위한 여러 방법이 있는데, CSS 와 JavaScript 이다. 첫 번째는 orientation media query 이다. 이것은 내용이 CSS를 사용해서 레이아웃을 조정하게 하는데,  브라우저 창이 가로 모드 (너비가 높이보다 큼) 또는 세로모드 (높이가 너비보다 큼) 여부에 달려 있다.

+

두번째 방법은 JavaScript Screen orientation API 인데 이것은 화면의 현재 방향을 구하고 잠그는데 사용할 수 있다.

+

Adjusting layout based on the orientation

+

방향 변환에서 가장 흔한 케이스 중 하나는 장치의 방향에 따라 내용의 레이아웃을 조정 하는 것이다. 예를 들자면, 당신은 버튼바를 장치 화면의 가장 긴 크기로 펼치고 싶어 할 수 있는데, media query를 이용해서 쉽고 자동으로 할 수 있다.

+

다음의 HTML code 예제를 보자

+
<ul id="toolbar">
+  <li>A</li>
+  <li>B</li>
+  <li>C</li>
+</ul>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
+
+

CSS 는 화면 방향에 따라 특정 스타일을 을 다루기 위해 orientation media query 에 의존한다

+
/* First let's define some common styles */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+
+

Once we have some common styles we can start defining a special case for the orientation

+
/* For portrait, we want the tool bar on top */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* For landscape, we want the tool bar stick on the left */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+
+

실행 결과를 보자

+ + + + + + + + + + + + + +
PortraitLandscape
{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}
+
+

Note: orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.

+
+

Locking the screen orientation

+
+

Warning: 이 API 는 실험적이며 현재 Firefox OS 와 Firefox for Android 에서 moz 접두사를 이용하여 사용할 수 있다.

+
+

몇몇 장치들은 (주로 모바일 장치) 사용자가 언제나 화면을 읽을 수 있게 장치의 방향에 따라 동적으로 화면의 방향을 변화시킬 수 있다. 만약 이러한 행위가 텍스트 컨텐츠에 적합하다면, 이러한 변화 때문에 고통 받을 수 있는 켄텐츠도 있다. 예를 들어, 장치의 방향에 따른 게임들은 이러한 방향전환 때문에 혼란스러울 수 있다.

+

Screen Orientation API 는 정확히 그러한 변화를 방지하기 위해 만들어졌다.

+

Listening orientation change

+

{{event("orientationchange")}} 이벤트는 장치가 화면의 방향을 변환할 때와 방향이  {{domxref("window.screen.orientation","screen.orientation")}} 속성과 함께 읽혀질 때 마다 불려 진다.  

+
screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+
+

Preventing orientation change

+

모든 웹 어플리케이션은 필요에 따라 스크린을 잠굴 수 있다. 화면은 {{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 함수를 사용하여 잠그고 {{domxref("window.screen.unlockOrientation","screen.unlockOrientation()")}}. 함수로 잠금 해제 한다.

+

{{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 는 적용 할 잠금의 종류를 정의하는 문자열  (또는 일련의 문자열) 을 수용한다. 수용하는 값들: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape (각각의 값들에 대해 좀 더 알려면  {{domxref("window.screen.lockOrientation","lockOrientation")}}  를 보라).

+
screen.lockOrientation('landscape');
+
+

Note: 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 {{event("orientationchange")}} 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.

+

그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 {{event("orientationchange")}} 이벤트를 호출 할 수 있다.

+
+

See also

+ diff --git a/files/ko/web/api/detecting_device_orientation/index.html b/files/ko/web/api/detecting_device_orientation/index.html new file mode 100644 index 0000000000..664842f66d --- /dev/null +++ b/files/ko/web/api/detecting_device_orientation/index.html @@ -0,0 +1,273 @@ +--- +title: 기기 방향 감지하기 +slug: WebAPI/Detecting_device_orientation +translation_of: 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/web/api/document/createevent/index.html b/files/ko/web/api/document/createevent/index.html new file mode 100644 index 0000000000..549a51bfdc --- /dev/null +++ b/files/ko/web/api/document/createevent/index.html @@ -0,0 +1,30 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +

{{APIRef("DOM")}}

+ +

새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.

+ +

Syntax

+ +
document.createEvent(type)
+ +
+
type
+
A string indicating the event type to create.
+
+ +

이 method는 명시된 타입인 새로운 DOM {{ domxref("Event") }} 객체를 반환하며 이는 반드시 사용 전에 초기화되어야만 합니다.

+ +

Example

+ +
var newEvent = document.createEvent("UIEvents");
+ +

Specification

+ + diff --git a/files/ko/web/api/document/getselection/index.html b/files/ko/web/api/document/getselection/index.html deleted file mode 100644 index c4d219fbde..0000000000 --- a/files/ko/web/api/document/getselection/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Document.getSelection() -slug: Web/API/Document/getSelection -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -

{{APIRef("DOM")}}

- -

이 메소드는 {{domxref("Window.getSelection()")}} 와 동일합니다. 이 메소드는 {{domxref("Selection")}} 형의 객체를 반환하는데, 이 객체는 현재 페이지에서 선택된 영역의 정보를 반영합니다.

diff --git a/files/ko/web/api/document_object_model/introduction/index.html b/files/ko/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..b31dbc43d9 --- /dev/null +++ b/files/ko/web/api/document_object_model/introduction/index.html @@ -0,0 +1,239 @@ +--- +title: DOM 소개 +slug: Web/API/Document_Object_Model/소개 +tags: + - DOM + - 가이드 + - 문서 +translation_of: Web/API/Document_Object_Model/Introduction +--- +

이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. 

+ +

DOM 이란?

+ +

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

+ +

웹 페이지는 일종의 문서(document)다.  이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

+ +

W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.

+ +

예를 들어, 표준 DOM 에서는 문서 안에서 모든 <P> elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다:

+ +
var paragraphs = document.getElementsByTagName("P");
+// paragraphs[0] is the first <p> element
+// paragraphs[1] is the second <p> element, etc.
+alert(paragraphs[0].nodeName);
+
+ +

웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다. 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것이다. 이 문서는 Gecko 기반의 브라우저에서 구현된 DOM 에 대한 object-by-object reference 를 제공한다.

+ +

DOM 과 자바스크립트

+ +

이 문서의 대부분의 예제와 같이, 위에서 사용된 예제는 {{glossary("JavaScript")}}이다. 위의 예제는 자바스크립트로 작성되었지만 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용되었다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.  

+ +

초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만,  나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:

+ +

API (web or XML page) = DOM + JS (scripting language)

+ +

DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다.  이 문서에서는 자바스크립트를 주로 사용하였지만, DOM 의 구현은 어떠한 언어에서도 가능하다. 아래는 파이썬을 사용한 예제이다:

+ +
# Python DOM example
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # DOM property of document object;
+p_list = doc.getElementsByTagName("para");
+
+ +

웹에서 자바스크립트 사용하기와 관련된 기술에 대한 추가정보는 자바스크립트 기술 개요 문서를 참조하라.

+ +

DOM 에 어떻게 접근할 수 있는가?

+ +

DOM 을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라우저는 자신만의 방법으로 DOM 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생하였다. (이 문제는 이 문서에서 피하고 싶어하는 주제이기도 하다.) 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 

+ +

스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 {{domxref("document")}} 또는 window elements 를 위한 API 를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 window object 로 부터 alert() 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.

+ +
<body onload="window.alert('welcome to my home page!');">
+
+ +

아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.

+ +
<html>
+  <head>
+    <script>
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

중요한 데이터 타입들

+ +

이 문서는 objects 와 types 을 최대한 간단하게 설명하려 한다. API 에는 우리가 반드시 알고 있어야 할 수많은 data types 이 있다는 사실을 염두해 두기 바란다.  이 문서에서는 nodes 는 elements 로, 노드의 arrays 는 nodeLists(또는 elements), attribute 노드들은 attributes 로 표현하였다.

+ +

아래의 표는 이러한 data types 에 대한 간략한 설명이다.

+ + + + + + + + + + + + + + + + + + + + + + + + +
document +

member 가 document type 의 object 를 리턴할 때(예를 들어 element의 ownerDocument property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 document object 에 대한 설명은 DOM document Reference 챕터를 참조하라.

+
element +

element 는 DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다. document.createElement() method 가 node 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 element 를 리턴한다고 좀 더 단순하게 말할 수 있다. element 객체들은 DOM Element interface 와 함께 좀 더 기본적인 Node interface 를 구현한 것이기 때문에 이 reference 에는 두 가지가 모두 포함되었다고 생각하면 된다.

+
nodeList +

nodeList 는 elements 의 배열이다. (document.getElementsByTagName() method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다:

+ +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ 위의 방식들은 동일한 것이다. item()method는 nodeList object 의 단일 method 이다. 두번째 방식은 list 에서 두번째 item 을 fetch 하는 전형적인 array syntax 이다.  
attribute +

attribute 가 member 에 의해 리턴되는 것은(예를 들어 createAttribute() method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다.

+
namedNodeMap +

namedNodeMap 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. namedNodeMap 는 이를 위해 item() method 가 있으며, namedNodeMap 에 item 을 추가하거나 삭제할 수 있다.

+
+ +

DOM interfaces

+ +

이 문서는 objects 와 DOM 에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element 가 HTMLFormElement interface 로부터 name property 를 얻고, className property 는  HTMLElement interface 로부터 얻는 것에 대해 별로 관심을 보이지 않는 것 같다. 두가지 경우 모두, property 는 form object 안에 있는 것이다. 

+ +

하지만 DOM 안에 구현된 objects 와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제  interfaces 와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하겠다.

+ +

Interfaces 와 Objects

+ +

많은 objects 가 여러 개의 다른 interfaces 와 연관되어 있다.  예를 들어, table object 는 createCaption, insertRow method 들이 포함된 {{domxref("HTMLTableElement")}} 을 구현한 것이다. table object 는 HTML element 이기도 하기 때문에, table 은 Element interface(DOM {{domxref("Element")}} Reference 챕터 참조)도 구현한다. 마지막으로, HTML element 는 DOM 이 연관되어 있는 한 nodes 트리(tree)에서 하나의 node 이다. nodes 트리는 웹 페이지 또는 XML 페이지를 위한 object model 을 구성한다. 때문에 table element 는 보다 기본적인 Element 에서 파생된 Node interface 를 구현하고 있다.

+ +

아래의 예제처럼, table object 를 참조하게 되면, 기본적으로 이들 3 가지 interfaces 를 사용할 수 있게 된다.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/Element interface
+for (var i = 0; i < tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+
+ +

DOM 의 핵심 Interfaces

+ +

이 섹션은 DOM 에서 가장 많이 사용되는 interfaces 를 정리해보았다. 여기에서는 이들 API 가 실제로 어떤 일을 하는지 설명하는 대신 DOM 을 사용하면서 자주 만나게 되는 methods 와 properties 를 보여줄 것이다.  이들 API 는 이 책의 마지막에 소개된 DOM 예제에서도 사용되었다.

+ +

Document 와 window objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 이다.  간단하게 설명하자면, window object 는 브라우저와 같다고 할 수 있으며, document object 는 root document 자체라고 할 수 있다. generic Node interface 로부터 상속받은 Element 와 Node, Element interfaces 가 협력하여 각각의 elements 에서 사용할 수 있는 수많은 methods 와 properties 를 제공한다. 이러한 elements 는 이전 섹션에서 설명한 table object 예제에서도 살펴봤듯이, elements 가 보유한 데이터를 처리할 수 있는 특정한 interfaces 도 가지고 있다.

+ +

아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다. 

+ + + +

DOM API 테스팅

+ +

이 문서는 사용자가 웹 개발에 사용할 수 있는 모든 interface 에 대한 예제를 제공한다. 예제는 <script> element 안에서 DOM 에 접근하는 완벽한 HTML 페이지 형태인 것도 있고, form 에서 script 를 실행하기 위해 버튼과 같은 interface 가 필요한 경우도 있으며, DOM 이 목록화되어 수행되는 HTML elements 도 있을 것이다. 사용자들은 이러한 예제를 새로운 HTML 문서에 복사하여 브라우저에서 실행할 수 있다. 

+ +

어떤 예제는 매우 간단할 수도 있다. HTML elements 에 대한 interface의 기본적인 관계만 보여주는 이러한 예제를 실행할 때는, 스크립트에서 쉽게 접근할 수 있는 test page 를 설정할 수도 있다. 아래의 예제는 interface를 테스트 할 수 있는 함수가 위치할 수 있는 header 안에  <script> element 제공한다. 이 함수는 retrieve, set, 조작할 수 있는 attributes 가 포함된 HTML elements 가 사용되었으며, 브라우저에서 이들 함수를 호출하기 위해 웹 UI 를 제공한다.

+ +

사용자는 자신이 관심있어 하는 DOM interfaces 를 테스트 하기 위해, 이 test page 를 사용하거나 이와 비슷한 것을 만들어 브라우저에서 어떻게 동작하는지 확인할 수 있다. 사용자는 test() 함수 내용을 필요에 따라 업데이트할 수 있다. (버튼 추가, elements 추가 등)

+ +
<html>
+  <head>
+    <title>DOM Tests</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr,value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>text</tt>color</b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">black
+          <option value="darkblue">darkblue
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">white
+          <option value="lightgrey">gray
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">blue
+          <option value="green">green
+        </select>  <small>
+        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+        (sample link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+
+ +

단일 페이지(예를 들어, 웹 페이지의 색상에 영향을 주는 property 설정하는) 안의 수많은 interfaces 를 테스트하기 위해 설정 버튼, textfield, 또는 다른 HTML elements를 사용하여 유사한 테스트 페이지를 만들 수 있다. 아래의 스크린샷은 테스트를 위해 어떻게 interfaces를 그룹화하는지에 대한 아이디어를 제공하고 있다.  

+ +
+
Figure 0.1 Sample DOM Test Page
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

이 예제에서 드롭다운 메뉴는 웹 페이지에서 DOM 접근가능한 배경색상(bgColor), 하이퍼링크 색상(aLink), 텍스트 색상(text)을 동적으로 업데이트한다. 어떻게 자신의 test pages 를 디자인하더라도, interface 테스트는 DOM 을 효과적으로 사용하는 법을 배우는 데 매우 중요한 수단임을 명심하라.

+ + + + + +
{{DefaultAPISidebar("DOM")}}
diff --git "a/files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" "b/files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" deleted file mode 100644 index b31dbc43d9..0000000000 --- "a/files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: DOM 소개 -slug: Web/API/Document_Object_Model/소개 -tags: - - DOM - - 가이드 - - 문서 -translation_of: Web/API/Document_Object_Model/Introduction ---- -

이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. 

- -

DOM 이란?

- -

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

- -

웹 페이지는 일종의 문서(document)다.  이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

- -

W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.

- -

예를 들어, 표준 DOM 에서는 문서 안에서 모든 <P> elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다:

- -
var paragraphs = document.getElementsByTagName("P");
-// paragraphs[0] is the first <p> element
-// paragraphs[1] is the second <p> element, etc.
-alert(paragraphs[0].nodeName);
-
- -

웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다. 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것이다. 이 문서는 Gecko 기반의 브라우저에서 구현된 DOM 에 대한 object-by-object reference 를 제공한다.

- -

DOM 과 자바스크립트

- -

이 문서의 대부분의 예제와 같이, 위에서 사용된 예제는 {{glossary("JavaScript")}}이다. 위의 예제는 자바스크립트로 작성되었지만 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용되었다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.  

- -

초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만,  나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:

- -

API (web or XML page) = DOM + JS (scripting language)

- -

DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다.  이 문서에서는 자바스크립트를 주로 사용하였지만, DOM 의 구현은 어떠한 언어에서도 가능하다. 아래는 파이썬을 사용한 예제이다:

- -
# Python DOM example
-import xml.dom.minidom as m
-doc = m.parse("C:\\Projects\\Py\\chap1.xml");
-doc.nodeName # DOM property of document object;
-p_list = doc.getElementsByTagName("para");
-
- -

웹에서 자바스크립트 사용하기와 관련된 기술에 대한 추가정보는 자바스크립트 기술 개요 문서를 참조하라.

- -

DOM 에 어떻게 접근할 수 있는가?

- -

DOM 을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라우저는 자신만의 방법으로 DOM 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생하였다. (이 문제는 이 문서에서 피하고 싶어하는 주제이기도 하다.) 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 

- -

스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 {{domxref("document")}} 또는 window elements 를 위한 API 를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 window object 로 부터 alert() 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.

- -
<body onload="window.alert('welcome to my home page!');">
-
- -

아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.

- -
<html>
-  <head>
-    <script>
-       // run this function when the document is loaded
-       window.onload = function() {
-
-         // create a couple of elements in an otherwise empty HTML page
-         var heading = document.createElement("h1");
-         var heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-
- -

중요한 데이터 타입들

- -

이 문서는 objects 와 types 을 최대한 간단하게 설명하려 한다. API 에는 우리가 반드시 알고 있어야 할 수많은 data types 이 있다는 사실을 염두해 두기 바란다.  이 문서에서는 nodes 는 elements 로, 노드의 arrays 는 nodeLists(또는 elements), attribute 노드들은 attributes 로 표현하였다.

- -

아래의 표는 이러한 data types 에 대한 간략한 설명이다.

- - - - - - - - - - - - - - - - - - - - - - - - -
document -

member 가 document type 의 object 를 리턴할 때(예를 들어 element의 ownerDocument property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 document object 에 대한 설명은 DOM document Reference 챕터를 참조하라.

-
element -

element 는 DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다. document.createElement() method 가 node 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 element 를 리턴한다고 좀 더 단순하게 말할 수 있다. element 객체들은 DOM Element interface 와 함께 좀 더 기본적인 Node interface 를 구현한 것이기 때문에 이 reference 에는 두 가지가 모두 포함되었다고 생각하면 된다.

-
nodeList -

nodeList 는 elements 의 배열이다. (document.getElementsByTagName() method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다:

- -
    -
  • list.item(1)
    • -
  • list[1]
    • -
- 위의 방식들은 동일한 것이다. item()method는 nodeList object 의 단일 method 이다. 두번째 방식은 list 에서 두번째 item 을 fetch 하는 전형적인 array syntax 이다.  
attribute -

attribute 가 member 에 의해 리턴되는 것은(예를 들어 createAttribute() method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다.

-
namedNodeMap -

namedNodeMap 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. namedNodeMap 는 이를 위해 item() method 가 있으며, namedNodeMap 에 item 을 추가하거나 삭제할 수 있다.

-
- -

DOM interfaces

- -

이 문서는 objects 와 DOM 에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element 가 HTMLFormElement interface 로부터 name property 를 얻고, className property 는  HTMLElement interface 로부터 얻는 것에 대해 별로 관심을 보이지 않는 것 같다. 두가지 경우 모두, property 는 form object 안에 있는 것이다. 

- -

하지만 DOM 안에 구현된 objects 와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제  interfaces 와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하겠다.

- -

Interfaces 와 Objects

- -

많은 objects 가 여러 개의 다른 interfaces 와 연관되어 있다.  예를 들어, table object 는 createCaption, insertRow method 들이 포함된 {{domxref("HTMLTableElement")}} 을 구현한 것이다. table object 는 HTML element 이기도 하기 때문에, table 은 Element interface(DOM {{domxref("Element")}} Reference 챕터 참조)도 구현한다. 마지막으로, HTML element 는 DOM 이 연관되어 있는 한 nodes 트리(tree)에서 하나의 node 이다. nodes 트리는 웹 페이지 또는 XML 페이지를 위한 object model 을 구성한다. 때문에 table element 는 보다 기본적인 Element 에서 파생된 Node interface 를 구현하고 있다.

- -

아래의 예제처럼, table object 를 참조하게 되면, 기본적으로 이들 3 가지 interfaces 를 사용할 수 있게 된다.

- -
var table = document.getElementById("table");
-var tableAttrs = table.attributes; // Node/Element interface
-for (var i = 0; i < tableAttrs.length; i++) {
-  // HTMLTableElement interface: border attribute
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
-}
-// HTMLTableElement interface: summary attribute
-table.summary = "note: increased border";
-
- -

DOM 의 핵심 Interfaces

- -

이 섹션은 DOM 에서 가장 많이 사용되는 interfaces 를 정리해보았다. 여기에서는 이들 API 가 실제로 어떤 일을 하는지 설명하는 대신 DOM 을 사용하면서 자주 만나게 되는 methods 와 properties 를 보여줄 것이다.  이들 API 는 이 책의 마지막에 소개된 DOM 예제에서도 사용되었다.

- -

Document 와 window objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 이다.  간단하게 설명하자면, window object 는 브라우저와 같다고 할 수 있으며, document object 는 root document 자체라고 할 수 있다. generic Node interface 로부터 상속받은 Element 와 Node, Element interfaces 가 협력하여 각각의 elements 에서 사용할 수 있는 수많은 methods 와 properties 를 제공한다. 이러한 elements 는 이전 섹션에서 설명한 table object 예제에서도 살펴봤듯이, elements 가 보유한 데이터를 처리할 수 있는 특정한 interfaces 도 가지고 있다.

- -

아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다. 

- - - -

DOM API 테스팅

- -

이 문서는 사용자가 웹 개발에 사용할 수 있는 모든 interface 에 대한 예제를 제공한다. 예제는 <script> element 안에서 DOM 에 접근하는 완벽한 HTML 페이지 형태인 것도 있고, form 에서 script 를 실행하기 위해 버튼과 같은 interface 가 필요한 경우도 있으며, DOM 이 목록화되어 수행되는 HTML elements 도 있을 것이다. 사용자들은 이러한 예제를 새로운 HTML 문서에 복사하여 브라우저에서 실행할 수 있다. 

- -

어떤 예제는 매우 간단할 수도 있다. HTML elements 에 대한 interface의 기본적인 관계만 보여주는 이러한 예제를 실행할 때는, 스크립트에서 쉽게 접근할 수 있는 test page 를 설정할 수도 있다. 아래의 예제는 interface를 테스트 할 수 있는 함수가 위치할 수 있는 header 안에  <script> element 제공한다. 이 함수는 retrieve, set, 조작할 수 있는 attributes 가 포함된 HTML elements 가 사용되었으며, 브라우저에서 이들 함수를 호출하기 위해 웹 UI 를 제공한다.

- -

사용자는 자신이 관심있어 하는 DOM interfaces 를 테스트 하기 위해, 이 test page 를 사용하거나 이와 비슷한 것을 만들어 브라우저에서 어떻게 동작하는지 확인할 수 있다. 사용자는 test() 함수 내용을 필요에 따라 업데이트할 수 있다. (버튼 추가, elements 추가 등)

- -
<html>
-  <head>
-    <title>DOM Tests</title>
-    <script type="application/javascript">
-    function setBodyAttr(attr,value){
-      if (document.body) eval('document.body.'+attr+'="'+value+'"');
-      else notSupported();
-    }
-    </script>
-  </head>
-  <body>
-    <div style="margin: .5in; height: 400;">
-      <p><b><tt>text</tt>color</b></p>
-      <form>
-        <select onChange="setBodyAttr('text',
-        this.options[this.selectedIndex].value);">
-          <option value="black">black
-          <option value="darkblue">darkblue
-        </select>
-        <p><b><tt>bgColor</tt></b></p>
-        <select onChange="setBodyAttr('bgColor',
-        this.options[this.selectedIndex].value);">
-          <option value="white">white
-          <option value="lightgrey">gray
-        </select>
-        <p><b><tt>link</tt></b></p>
-        <select onChange="setBodyAttr('link',
-        this.options[this.selectedIndex].value);">
-          <option value="blue">blue
-          <option value="green">green
-        </select>  <small>
-        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
-        (sample link)</a></small><br>
-      </form>
-      <form>
-        <input type="button" value="version" onclick="ver()" />
-      </form>
-    </div>
-  </body>
-</html>
-
- -

단일 페이지(예를 들어, 웹 페이지의 색상에 영향을 주는 property 설정하는) 안의 수많은 interfaces 를 테스트하기 위해 설정 버튼, textfield, 또는 다른 HTML elements를 사용하여 유사한 테스트 페이지를 만들 수 있다. 아래의 스크린샷은 테스트를 위해 어떻게 interfaces를 그룹화하는지에 대한 아이디어를 제공하고 있다.  

- -
-
Figure 0.1 Sample DOM Test Page
-Image:DOM_Ref_Introduction_to_the_DOM.gif
- -

이 예제에서 드롭다운 메뉴는 웹 페이지에서 DOM 접근가능한 배경색상(bgColor), 하이퍼링크 색상(aLink), 텍스트 색상(text)을 동적으로 업데이트한다. 어떻게 자신의 test pages 를 디자인하더라도, interface 테스트는 DOM 을 효과적으로 사용하는 법을 배우는 데 매우 중요한 수단임을 명심하라.

- - - - - -
{{DefaultAPISidebar("DOM")}}
diff --git a/files/ko/web/api/documentorshadowroot/getselection/index.html b/files/ko/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..c4d219fbde --- /dev/null +++ b/files/ko/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,9 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +

{{APIRef("DOM")}}

+ +

이 메소드는 {{domxref("Window.getSelection()")}} 와 동일합니다. 이 메소드는 {{domxref("Selection")}} 형의 객체를 반환하는데, 이 객체는 현재 페이지에서 선택된 영역의 정보를 반영합니다.

diff --git a/files/ko/web/api/element/accesskey/index.html b/files/ko/web/api/element/accesskey/index.html deleted file mode 100644 index 0fc48bd749..0000000000 --- a/files/ko/web/api/element/accesskey/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -tags: - - API - - Access Keys - - DOM - - Hotkeys - - NeedsContent - - 레퍼런스 - - 속성 - - 엘리먼트 - - 키보드 단축키 -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -
{{APIRef("DOM")}}
- -

Element.accessKey 속성은 주어진 사용자가 눌러 주어진 엘리먼트로 이동할 수 있는 키 입력 세트입니다.

- -
-

Element.accessKey 속성은 브라우저에 이미 바인딩 된 키와의 여러 충돌로 인해 거의 사용되지 않습니다. 이를 해결하기 위해, 브라우저는 다른 "적절한" 키(예, Alt + accesskey)와 함께 키가 눌렸을 때동작하도록 구현하였습니다.

-
- -

브라우저 호환성

- - - -

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

- -

함께 보기

- - diff --git a/files/ko/web/api/element/blur_event/index.html b/files/ko/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..3bbcc6acb0 --- /dev/null +++ b/files/ko/web/api/element/blur_event/index.html @@ -0,0 +1,154 @@ +--- +title: blur +slug: Web/Events/blur +translation_of: Web/API/Element/blur_event +--- +

blur 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 focusout 이벤트의 가장 다른점은 focusout 은 이벤트 버블링이 발생합니다.

+ +

General info

+ +
+
Specification
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None.
+
+ +

{{NoteStart}} 이 이벤트가 처리될때 {{domxref("Document.activeElement")}}의 값이 브라우저마다 다릅니다 ({{bug(452307)}}): IE10은 이 값을 포커스가 옮겨가는 엘리먼트에 추가하지만, 파이어폭스와 크롬은 도큐먼트의 body 에 추가합니다.{{NoteEnd}}

+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
+ +

이벤트 위임

+ +

이 이벤트에 이벤트 위임을 적용하는 방법은 두가지가 있습니다 : 브라우저가 지원한다면 focusout 이벤트를 사용하거나,   addEventListener의 "useCapture" 파라미터를 true로 설정하세요:

+ +

HTML Content

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

JavaScript Content

+ +
var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);
+ +

{{EmbedLiveSample('Event_delegation')}}

+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
+
+ +

[1] Prior to Gecko 24 {{geckoRelease(24)}} the interface for this event was {{domxref("Event")}}, not {{domxref("FocusEvent")}}. See ({{bug(855741)}}).

+ + + + diff --git a/files/ko/web/api/elementcssinlinestyle/style/index.html b/files/ko/web/api/elementcssinlinestyle/style/index.html new file mode 100644 index 0000000000..5976dd66bc --- /dev/null +++ b/files/ko/web/api/elementcssinlinestyle/style/index.html @@ -0,0 +1,41 @@ +--- +title: element.style +slug: Web/API/HTMLElement/style +tags: + - API + - HTML DOM + - HTMLElement + - Property + - Reference + - Style +translation_of: 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/web/api/event/createevent/index.html b/files/ko/web/api/event/createevent/index.html deleted file mode 100644 index 549a51bfdc..0000000000 --- a/files/ko/web/api/event/createevent/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Event.createEvent() -slug: Web/API/Event/createEvent -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent ---- -

{{APIRef("DOM")}}

- -

새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.

- -

Syntax

- -
document.createEvent(type)
- -
-
type
-
A string indicating the event type to create.
-
- -

이 method는 명시된 타입인 새로운 DOM {{ domxref("Event") }} 객체를 반환하며 이는 반드시 사용 전에 초기화되어야만 합니다.

- -

Example

- -
var newEvent = document.createEvent("UIEvents");
- -

Specification

- - diff --git "a/files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" "b/files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" deleted file mode 100644 index 403c340413..0000000000 --- "a/files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" +++ /dev/null @@ -1,419 +0,0 @@ ---- -title: Using Fetch -slug: Web/API/Fetch_API/Fetch의_사용법 -translation_of: Web/API/Fetch_API/Using_Fetch ---- -

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 {{domxref("GlobalFetch.fetch","fetch()")}} 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.

- -

이전에 이러한 기능을  {{domxref("XMLHttpRequest")}}에서 제공하고 있었습니다. Fetch는 이러한 API의 대체제로 {{domxref("ServiceWorker_API", "Service Workers")}}같은 기술로 간단히 이용하는것이 가능합니다. 또한 CORS나 HTTP확장같은  HTTP에 관련한 개념을 모아 정의하고 있습니다.

- -

Fetch의 기본 스펙은jQuery.ajax()와 기본적으로 두가지가 다르다는 사실에 유념해야합니다.

- - - -

기본적인 fetch는 누구라도 알기쉽고 간단하게 작성할 수 있습니다. 아래의 코드를 봐주시기 바랍니다.

- -
fetch('http://example.com/movies.json')
-  .then(function(response) {
-    return response.json();
-  })
-  .then(function(myJson) {
-    console.log(JSON.stringify(myJson));
-  });
- -

네트워크에서 JSON 파일을 가져 와서 콘솔에 인쇄합니다. 간단한 fetch() 사용 흐름은 인수 한개(가져올 자원의 경로)를 가져오고 응답을 포함하는 약속 ({{domxref ( "Response")}} 개체)을 반환하는 것입니다.

- -

이것은 단순한 HTTP Response이며, 실제 JSON이 아닙니다. response 객체로부터 사진을 가져오기 위해서는 {{domxref("Body.json","json()")}} 메서드를 사용할 필요가 있습니다. ({{domxref("Body")}}의 믹스인 (역주:php의 트레이드와 같은것입니다. )으로 정의되어, 이것은 {{domxref("Request")}} 객체와 {{domxref("Response")}} 객체의 쌍방에 구현되어 있습니다.

- -
-

노트: http Request와 http Response의 Body mixin은 Body 컨텐츠를 다른 mine 타입으로 사용하는 비슷한 메서드를 제공하고 있습니다.  상세한 내용은 {{anch("Body")}} 섹션을 참고해 주시기 바랍니다.

-
- -

Fetch Reqeust는 검색된 리소스로부터의 지시가 아닌 CSP의connect-src의 디렉티브(directive)에 의해 제어됩니다.

- -

리퀘스트의 옵션 적용

- -

fetch() 메서드에 두번째 파라미터를 적용하는것도 가능합니다. init 오브젝트는 다른 여러 세팅을 컨트롤 할 수 있게 해줍니다.

- -

모든 설정 가능한 옵션의 상세 설명은 {{domxref("GlobalFetch.fetch","fetch()")}}를 참고해주시기 바랍니다.

- -
// Example POST method implementation:
-
-postData('http://example.com/answer', {answer: 42})
-  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
-  .catch(error => console.error(error));
-
-function postData(url = '', data = {}) {
-  // Default options are marked with *
-    return fetch(url, {
-        method: 'POST', // *GET, POST, PUT, DELETE, etc.
-        mode: 'cors', // no-cors, cors, *same-origin
-        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-        credentials: 'same-origin', // include, *same-origin, omit
-        headers: {
-            'Content-Type': 'application/json',
-            // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        redirect: 'follow', // manual, *follow, error
-        referrer: 'no-referrer', // no-referrer, *client
-        body: JSON.stringify(data), // body data type must match "Content-Type" header
-    })
-    .then(response => response.json()); // parses JSON response into native JavaScript objects
-}
-
- -

자격 증명(credentials)이 포함된 Request 요청

- -

자격 증명이 포함된 인증서를 보내도록 하려면 fetch() 메서드에 credentials: 'include'를 추가하도록 합니다. 이것은 cross-origin 요청에서도 사용됩니다.

- -
fetch('https://example.com', {
-  credentials: 'include'
-})
- -

요청하려는 URL이 호출 스크립트와 동일한 origin을 가지고 있을때만 자격증명을 전송하려면 credentials: 'same-origin'를 추가해 주시기 바랍니다.

- -
// The calling script is on the origin 'https://example.com'
-
-fetch('https://example.com', {
-  credentials: 'same-origin'
-})
- -

브라우저의 보안을 유지하는것 대신 자격증명을 포함하지 않는것을 원한다면 credentials: 'omit'를 작성해 주시기 바랍니다.

- -
fetch('https://example.com', {
-  credentials: 'omit'
-})
-
- -

Uploading JSON data

- -

POST프로토콜로 JSON인코딩된 데이터를 보내기 위해 {{domxref("GlobalFetch.fetch","fetch()")}}를 사용합니다.

- -
var url = 'https://example.com/profile';
-var data = {username: 'example'};
-
-fetch(url, {
-  method: 'POST', // or 'PUT'
-  body: JSON.stringify(data), // data can be `string` or {object}!
-  headers:{
-    'Content-Type': 'application/json'
-  }
-}).then(res => res.json())
-.then(response => console.log('Success:', JSON.stringify(response)))
-.catch(error => console.error('Error:', error));
- -

Uploading a file

- -

<input type="file" /> input엘리먼트, {{domxref("FormData.FormData","FormData()")}}, {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}를 사용하여 파일을 업로드 할 수 있습니다.

- -
var formData = new FormData();
-var fileField = document.querySelector('input[type="file"]');
-
-formData.append('username', 'abc123');
-formData.append('avatar', fileField.files[0]);
-
-fetch('https://example.com/profile/avatar', {
-  method: 'PUT',
-  body: formData
-})
-.then(response => response.json())
-.catch(error => console.error('Error:', error))
-.then(response => console.log('Success:', JSON.stringify(response)));
- -

Uploading multiple files

- -

<input type="file" multiple /> input엘리먼트와{{domxref("FormData.FormData","FormData()")}}, {{domxref("GlobalFetch.fetch","fetch()")}}를 사용하여 파일 다중업로드를 할 수 있습니다.

- -
var formData = new FormData();
-var photos = document.querySelector('input[type="file"][multiple]');
-
-formData.append('title', 'My Vegas Vacation');
-for (var i = 0; i < photos.files.length; i++) {
-  formData.append('photos', photos.files[i]);
-}
-
-fetch('https://example.com/posts', {
-  method: 'POST',
-  body: formData
-})
-.then(response => response.json())
-.then(response => console.log('Success:', JSON.stringify(response)))
-.catch(error => console.error('Error:', error));
- -

문서 파일을 열단위로 처리하기

- -

응답하는 곳에서 읽는 덩어리들은 줄 단위로 깔끔하게 떨어지지 않으며 문자열이 아니라 Uint8Arrys(8비트 부호 없는 정수)입니다. 만약 텍스트 파일은 fetch하고 이것을 줄 단위로 처리하고자 한다면, 이런 복잡함을 다루는 것은 사용자에게 달려있습니다. 아래의 예시는 line iterator를 생성하여 처리하는 한가지 방법을 보여주고 있습니다. (간단하게 하기위해, 텍스트는 UTF-8이라고 가정하며,  fetch errors를 다루지 않는다고 합시다).

- -
async function* makeTextFileLineIterator(fileURL) {
-  const utf8Decoder = new TextDecoder("utf-8");
-  let response = await fetch(fileURL);
-  let reader = response.body.getReader();
-  let {value: chunk, done: readerDone} = await reader.read();
-  chunk = chunk ? utf8Decoder.decode(chunk) : "";
-
-  let re = /\n|\r|\r\n/gm;
-  let startIndex = 0;
-  let result;
-
-  for (;;) {
-    let result = re.exec(chunk);
-    if (!result) {
-      if (readerDone) {
-        break;
-      }
-      let remainder = chunk.substr(startIndex);
-      ({value: chunk, done: readerDone} = await reader.read());
-      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
-      startIndex = re.lastIndex = 0;
-      continue;
-    }
-    yield chunk.substring(startIndex, result.index);
-    startIndex = re.lastIndex;
-  }
-  if (startIndex < chunk.length) {
-    // last line didn't end in a newline char
-    yield chunk.substr(startIndex);
-  }
-}
-
-for await (let line of makeTextFileLineIterator(urlOfFile)) {
-  processLine(line);
-}
- -

fetch의 성공 여부를 체크

- -

한가지 예를 들자면, 네트워크 error가 발생했을때 또는 CORS 가 서버단에서 잘못 설정되어있다면 {{domxref("GlobalFetch.fetch","fetch()")}} promise 객체는 {{jsxref("TypeError")}} 메시지와 함께 반려 할것입니다. 비록 이 현상은 보통 허가 이슈나 그와 비슷한 것을 의미할지라도, 404 는 네트워크 error를 구성하지는 않습니다.  성공적인 fetch() 를 체크하는 정확한 방법은 promise 객체가 해결되었는지를 체크하는 것을 포함합니다. 그리고 {{domxref("Response.ok")}} property 가 "true"의 값을 가지고 있는지 확인하는 것입니다. 코드는 아래와 같이 구현될겁니다:

- -
fetch('flowers.jpg').then(function(response) {
-  if(response.ok) {
-    return response.blob();
-  }
-  throw new Error('Network response was not ok.');
-}).then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-}).catch(function(error) {
-  console.log('There has been a problem with your fetch operation: ', error.message);
-});
- -

request 객체를 fetch로 전달

- -

fetch()를 사용해 요청한 리소스의 경로를 전달하는것 대신{{domxref("Request.Request","Request()")}} 생성자를 사용해 Request 객체를 작성하여 fetch() 메서드를 인수로 전달하는것도 가능합니다.

- -
var myHeaders = new Headers();
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg', myInit);
-
-fetch(myRequest).then(function(response) {
-  return response.blob();
-}).then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
- -

fetch()메서드의 인수와 똑같은 인수를 Request()객체에 전달하여 적용하는것이 가능합니다. 또한 Request 객체의 클론을 생성하기 위해 이미 존재하는 Request 객체를 전달하는것도 가능합니다.

- -
var anotherRequest = new Request(myRequest,myInit);
- -

이것은 Request와 Resposne의 Body를 하나만 사용하고 있으므로 사용성이 높습니다.필요하면 init 객체를 변화시켜 Response나 Request를 재사용할 수 있도록 복사합니다. The copy must be made before the body is read, and reading the body in the copy will also mark it as read in the original request.

- -
-

노트: {{domxref("Request.clone","clone()")}} 메서드를 사용해 Request 객체의 클론을 생성할 수 있습니다. 다른 카피 메서드와 약간 다른 의미가 있습니다. 이전 요청의 body가 이미 읽어들여진 경우 전자는  실패하지만 clone()메서드는 실패하지 않습니다. 이 기능은 Response와 동일합니다.

-
- -

Headers

- -

{{domxref("Headers")}} 인터페이스에서  {{domxref("Headers.Headers","Headers()")}} 생성자를 사용해 헤더 객체를 생성할 수 있습니다. 헤더 객체는 Key와 Value로 이루어진 간단한 multi-map입니다.

- -
var content = "Hello World";
-var myHeaders = new Headers();
-myHeaders.append("Content-Type", "text/plain");
-myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
- -

똑같이 배열을 전달하거나 객체 리터럴을 생성자에 전달하는것으로 생성할 수 있습니다.

- -
myHeaders = new Headers({
-  "Content-Type": "text/plain",
-  "Content-Length": content.length.toString(),
-  "X-Custom-Header": "ProcessThisImmediately",
-});
- -

다음과 같은 코드로 헤더의 내용을 들여다 볼 수 있습니다.

- -
console.log(myHeaders.has("Content-Type")); // true
-console.log(myHeaders.has("Set-Cookie")); // false
-myHeaders.set("Content-Type", "text/html");
-myHeaders.append("X-Custom-Header", "AnotherValue");
-
-console.log(myHeaders.get("Content-Length")); // 11
-console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
-
-myHeaders.delete("X-Custom-Header");
-console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
- -

이러한 몇몇개의 조작법은 {{domxref("ServiceWorker_API","ServiceWorkers")}}에서밖에 도움되지 않지만 헤더를 조작하기 위해서 보다 나은 API를 제공하고 있습니다.

- -

모든 Header 메서드는 유효한 HTTP 헤더가 전달되지 않았을 경우 TypeError을 반환합니다. immutable Guard(다음 섹션 참고)가 설정되어 있는 경우에도 TypeError를 반환합니다. TypeError를 반환하지 않고 실패하는 경우도 있습니다. 다음 예를 참고해주시기 바랍니다.

- -
var myResponse = Response.error();
-try {
-  myResponse.headers.set("Origin", "http://mybank.com");
-} catch(e) {
-  console.log("은행이 아니잖아요!!");
-}
- -

헤더의 좋은 사용법으로 처리하기 전에 컨텐츠 타입으로 올바른가의 여부를 판별하는 방법이 있습니다. 예를 들어,

- -
fetch(myRequest).then(function(response) {
-    var contentType = response.headers.get('content-type');
-    if(contentType && contentType.includes('application/json')) {
-      return response.json();
-    }
-    throw new TypeError("Oops, we haven't got JSON!");
-  })
-  .then(function(json) { /* process your JSON further */ })
-  .catch(function(error) { console.log(error); });
- -

가드

- -

헤더는 리퀘스트를 송신할 수 있으며 리스폰스를 수신할 수 있습니다. 어떤 정보를 수정할 수 있게 하기 위해, 혹은 수정하기 위해 여러 종류의 제어가 가능합니다. 헤더는 guard 프로퍼티는 이것을 가능하게 합니다. 가드는 Request나 Response에 포함되지 않지만  헤더 객체에서 조작 가능한 여러 메서드들의 사용 가능 여부에 영향을 미칩니다.

- -

가드의 설정값은 다음과 같습니다.

- - - -
-

메모: request에서 가드된 헤더의Content-Length 헤더는 추가나 변경할 수 없는 가능성이 있습니다.  마찬가지로 리스폰스 헤더에 Set-Cookie를 삽입하는것은 불가능합니다.ServiceWorker는 동기 Reponse를 추출하여 쿠키를 설정합니다.

-
- -

Response 객체

- -

위에서 본 바와 같이 {{domxref("Response")}} 인스턴스들은 fetch() promise가 resolve됬을때 반환됩니다.

- -

아래는 어떤 리스폰스 객체라도 공통으로 사용되는 리스폰스 프로퍼티입니다.

- - - -

Response 객체는 개발자의 손에 의해 동적으로 만드는것이 가능합니다. 이 방법은 {{domxref("ServiceWorker_API", "ServiceWorkers")}}내에서 활약할 때가 많습니다. 예를들어 Request를 획득했을 때  {{domxref("FetchEvent.respondWith","respondWith()")}}메서드에 의해 커스텀된 리스폰스를 반환하는 경우가 있습니다.

- -
var myBody = new Blob();
-
-addEventListener('fetch', function(event) {
-  event.respondWith(
-    new Response(myBody, {
-      headers: { "Content-Type" : "text/plain" }
-    })
-  );
-});
- -

{{domxref("Response.Response","Response()")}} 생성자는 파라미터로써 두개의 객체를 전달하는것이 가능합니다.첫번째는 Response Body, 두번째는 초기화 객체({{domxref("Request.Request","Request()")}}의 클론을 생성하는 방법과 비슷합니다.) 입니다.

- - - -
-

付記: 정적 메서드 {{domxref("Response.error","error()")}}는 단순한 에러 Response를 반환합니다. {{domxref("Response.redirect","redirect()")}} 메서드 또한 지정한 URL에 리다이렉트할 Response를 반환합니다. 이것들은 Service Workers에서만 사용되고 있습니다.

-
- -

Body

- -

Request, Response 둘다 Body를 가지고 있습니다. body는 아래에서 기술한 타입들 중 하나의 인스턴스입니다.

- - - -

{{domxref("Body")}} 믹스인은 {{domxref("Request")}}나{{domxref("Response")}}에 구현되어, 콘텐츠를 추출하기 위해 아래의 메서드가 정의되어 있습니다. 이러한 메서드들은 전부 최종적으로 요청으로 반환된 값을 내장하고 있는 promise를 반환합니다.

- - - -

이것들은 비 텍스트 데이터를 XHR보다 훨씬 간단하게 사용하는것을 도와줍니다.

- -

Request 바디는 body 파라미터를 전달하는 것으로 설정할 수 있습니다.

- -
var form = new FormData(document.getElementById('login-form'));
-fetch("/login", {
-  method: "POST",
-  body: form
-})
- -

Both request and response (and by extension the fetch() function), will try to intelligently determine the content type. A request will also automatically set a Content-Type header if none is set in the dictionary.

- -

Feature detection(특징 추출)

- -

Fetch API support는{{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} or {{domxref("GlobalFetch.fetch","fetch()")}} on the {{domxref("Window")}} or {{domxref("Worker")}}로 존재여부를 확인함으로써 추출할 수 있습니다. 예를 들어:

- -
if (window.fetch) {
-    // run my fetch request here
-} else {
-    // do something with XMLHttpRequest?
- -

Polyfill

- -

Fetch를 지원하지 않는 브라우저를 위해 미지원 브라우저를 위한 Fetch Polyfill이 지원되고 있습니다.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Initial definition
- -

Browser compatibility

- -

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

- -

관련항목

- -
- - - -

{{DefaultAPISidebar("Fetch API")}} 

diff --git a/files/ko/web/api/fetch_api/using_fetch/index.html b/files/ko/web/api/fetch_api/using_fetch/index.html new file mode 100644 index 0000000000..403c340413 --- /dev/null +++ b/files/ko/web/api/fetch_api/using_fetch/index.html @@ -0,0 +1,419 @@ +--- +title: Using Fetch +slug: Web/API/Fetch_API/Fetch의_사용법 +translation_of: Web/API/Fetch_API/Using_Fetch +--- +

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 {{domxref("GlobalFetch.fetch","fetch()")}} 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.

+ +

이전에 이러한 기능을  {{domxref("XMLHttpRequest")}}에서 제공하고 있었습니다. Fetch는 이러한 API의 대체제로 {{domxref("ServiceWorker_API", "Service Workers")}}같은 기술로 간단히 이용하는것이 가능합니다. 또한 CORS나 HTTP확장같은  HTTP에 관련한 개념을 모아 정의하고 있습니다.

+ +

Fetch의 기본 스펙은jQuery.ajax()와 기본적으로 두가지가 다르다는 사실에 유념해야합니다.

+ + + +

기본적인 fetch는 누구라도 알기쉽고 간단하게 작성할 수 있습니다. 아래의 코드를 봐주시기 바랍니다.

+ +
fetch('http://example.com/movies.json')
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(myJson) {
+    console.log(JSON.stringify(myJson));
+  });
+ +

네트워크에서 JSON 파일을 가져 와서 콘솔에 인쇄합니다. 간단한 fetch() 사용 흐름은 인수 한개(가져올 자원의 경로)를 가져오고 응답을 포함하는 약속 ({{domxref ( "Response")}} 개체)을 반환하는 것입니다.

+ +

이것은 단순한 HTTP Response이며, 실제 JSON이 아닙니다. response 객체로부터 사진을 가져오기 위해서는 {{domxref("Body.json","json()")}} 메서드를 사용할 필요가 있습니다. ({{domxref("Body")}}의 믹스인 (역주:php의 트레이드와 같은것입니다. )으로 정의되어, 이것은 {{domxref("Request")}} 객체와 {{domxref("Response")}} 객체의 쌍방에 구현되어 있습니다.

+ +
+

노트: http Request와 http Response의 Body mixin은 Body 컨텐츠를 다른 mine 타입으로 사용하는 비슷한 메서드를 제공하고 있습니다.  상세한 내용은 {{anch("Body")}} 섹션을 참고해 주시기 바랍니다.

+
+ +

Fetch Reqeust는 검색된 리소스로부터의 지시가 아닌 CSP의connect-src의 디렉티브(directive)에 의해 제어됩니다.

+ +

리퀘스트의 옵션 적용

+ +

fetch() 메서드에 두번째 파라미터를 적용하는것도 가능합니다. init 오브젝트는 다른 여러 세팅을 컨트롤 할 수 있게 해줍니다.

+ +

모든 설정 가능한 옵션의 상세 설명은 {{domxref("GlobalFetch.fetch","fetch()")}}를 참고해주시기 바랍니다.

+ +
// Example POST method implementation:
+
+postData('http://example.com/answer', {answer: 42})
+  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
+  .catch(error => console.error(error));
+
+function postData(url = '', data = {}) {
+  // Default options are marked with *
+    return fetch(url, {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        mode: 'cors', // no-cors, cors, *same-origin
+        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: 'same-origin', // include, *same-origin, omit
+        headers: {
+            'Content-Type': 'application/json',
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        redirect: 'follow', // manual, *follow, error
+        referrer: 'no-referrer', // no-referrer, *client
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+    })
+    .then(response => response.json()); // parses JSON response into native JavaScript objects
+}
+
+ +

자격 증명(credentials)이 포함된 Request 요청

+ +

자격 증명이 포함된 인증서를 보내도록 하려면 fetch() 메서드에 credentials: 'include'를 추가하도록 합니다. 이것은 cross-origin 요청에서도 사용됩니다.

+ +
fetch('https://example.com', {
+  credentials: 'include'
+})
+ +

요청하려는 URL이 호출 스크립트와 동일한 origin을 가지고 있을때만 자격증명을 전송하려면 credentials: 'same-origin'를 추가해 주시기 바랍니다.

+ +
// The calling script is on the origin 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})
+ +

브라우저의 보안을 유지하는것 대신 자격증명을 포함하지 않는것을 원한다면 credentials: 'omit'를 작성해 주시기 바랍니다.

+ +
fetch('https://example.com', {
+  credentials: 'omit'
+})
+
+ +

Uploading JSON data

+ +

POST프로토콜로 JSON인코딩된 데이터를 보내기 위해 {{domxref("GlobalFetch.fetch","fetch()")}}를 사용합니다.

+ +
var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST', // or 'PUT'
+  body: JSON.stringify(data), // data can be `string` or {object}!
+  headers:{
+    'Content-Type': 'application/json'
+  }
+}).then(res => res.json())
+.then(response => console.log('Success:', JSON.stringify(response)))
+.catch(error => console.error('Error:', error));
+ +

Uploading a file

+ +

<input type="file" /> input엘리먼트, {{domxref("FormData.FormData","FormData()")}}, {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}를 사용하여 파일을 업로드 할 수 있습니다.

+ +
var formData = new FormData();
+var fileField = document.querySelector('input[type="file"]');
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response => response.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', JSON.stringify(response)));
+ +

Uploading multiple files

+ +

<input type="file" multiple /> input엘리먼트와{{domxref("FormData.FormData","FormData()")}}, {{domxref("GlobalFetch.fetch","fetch()")}}를 사용하여 파일 다중업로드를 할 수 있습니다.

+ +
var formData = new FormData();
+var photos = document.querySelector('input[type="file"][multiple]');
+
+formData.append('title', 'My Vegas Vacation');
+for (var i = 0; i < photos.files.length; i++) {
+  formData.append('photos', photos.files[i]);
+}
+
+fetch('https://example.com/posts', {
+  method: 'POST',
+  body: formData
+})
+.then(response => response.json())
+.then(response => console.log('Success:', JSON.stringify(response)))
+.catch(error => console.error('Error:', error));
+ +

문서 파일을 열단위로 처리하기

+ +

응답하는 곳에서 읽는 덩어리들은 줄 단위로 깔끔하게 떨어지지 않으며 문자열이 아니라 Uint8Arrys(8비트 부호 없는 정수)입니다. 만약 텍스트 파일은 fetch하고 이것을 줄 단위로 처리하고자 한다면, 이런 복잡함을 다루는 것은 사용자에게 달려있습니다. 아래의 예시는 line iterator를 생성하여 처리하는 한가지 방법을 보여주고 있습니다. (간단하게 하기위해, 텍스트는 UTF-8이라고 가정하며,  fetch errors를 다루지 않는다고 합시다).

+ +
async function* makeTextFileLineIterator(fileURL) {
+  const utf8Decoder = new TextDecoder("utf-8");
+  let response = await fetch(fileURL);
+  let reader = response.body.getReader();
+  let {value: chunk, done: readerDone} = await reader.read();
+  chunk = chunk ? utf8Decoder.decode(chunk) : "";
+
+  let re = /\n|\r|\r\n/gm;
+  let startIndex = 0;
+  let result;
+
+  for (;;) {
+    let result = re.exec(chunk);
+    if (!result) {
+      if (readerDone) {
+        break;
+      }
+      let remainder = chunk.substr(startIndex);
+      ({value: chunk, done: readerDone} = await reader.read());
+      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
+      startIndex = re.lastIndex = 0;
+      continue;
+    }
+    yield chunk.substring(startIndex, result.index);
+    startIndex = re.lastIndex;
+  }
+  if (startIndex < chunk.length) {
+    // last line didn't end in a newline char
+    yield chunk.substr(startIndex);
+  }
+}
+
+for await (let line of makeTextFileLineIterator(urlOfFile)) {
+  processLine(line);
+}
+ +

fetch의 성공 여부를 체크

+ +

한가지 예를 들자면, 네트워크 error가 발생했을때 또는 CORS 가 서버단에서 잘못 설정되어있다면 {{domxref("GlobalFetch.fetch","fetch()")}} promise 객체는 {{jsxref("TypeError")}} 메시지와 함께 반려 할것입니다. 비록 이 현상은 보통 허가 이슈나 그와 비슷한 것을 의미할지라도, 404 는 네트워크 error를 구성하지는 않습니다.  성공적인 fetch() 를 체크하는 정확한 방법은 promise 객체가 해결되었는지를 체크하는 것을 포함합니다. 그리고 {{domxref("Response.ok")}} property 가 "true"의 값을 가지고 있는지 확인하는 것입니다. 코드는 아래와 같이 구현될겁니다:

+ +
fetch('flowers.jpg').then(function(response) {
+  if(response.ok) {
+    return response.blob();
+  }
+  throw new Error('Network response was not ok.');
+}).then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+}).catch(function(error) {
+  console.log('There has been a problem with your fetch operation: ', error.message);
+});
+ +

request 객체를 fetch로 전달

+ +

fetch()를 사용해 요청한 리소스의 경로를 전달하는것 대신{{domxref("Request.Request","Request()")}} 생성자를 사용해 Request 객체를 작성하여 fetch() 메서드를 인수로 전달하는것도 가능합니다.

+ +
var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+ +

fetch()메서드의 인수와 똑같은 인수를 Request()객체에 전달하여 적용하는것이 가능합니다. 또한 Request 객체의 클론을 생성하기 위해 이미 존재하는 Request 객체를 전달하는것도 가능합니다.

+ +
var anotherRequest = new Request(myRequest,myInit);
+ +

이것은 Request와 Resposne의 Body를 하나만 사용하고 있으므로 사용성이 높습니다.필요하면 init 객체를 변화시켜 Response나 Request를 재사용할 수 있도록 복사합니다. The copy must be made before the body is read, and reading the body in the copy will also mark it as read in the original request.

+ +
+

노트: {{domxref("Request.clone","clone()")}} 메서드를 사용해 Request 객체의 클론을 생성할 수 있습니다. 다른 카피 메서드와 약간 다른 의미가 있습니다. 이전 요청의 body가 이미 읽어들여진 경우 전자는  실패하지만 clone()메서드는 실패하지 않습니다. 이 기능은 Response와 동일합니다.

+
+ +

Headers

+ +

{{domxref("Headers")}} 인터페이스에서  {{domxref("Headers.Headers","Headers()")}} 생성자를 사용해 헤더 객체를 생성할 수 있습니다. 헤더 객체는 Key와 Value로 이루어진 간단한 multi-map입니다.

+ +
var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+ +

똑같이 배열을 전달하거나 객체 리터럴을 생성자에 전달하는것으로 생성할 수 있습니다.

+ +
myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});
+ +

다음과 같은 코드로 헤더의 내용을 들여다 볼 수 있습니다.

+ +
console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+ +

이러한 몇몇개의 조작법은 {{domxref("ServiceWorker_API","ServiceWorkers")}}에서밖에 도움되지 않지만 헤더를 조작하기 위해서 보다 나은 API를 제공하고 있습니다.

+ +

모든 Header 메서드는 유효한 HTTP 헤더가 전달되지 않았을 경우 TypeError을 반환합니다. immutable Guard(다음 섹션 참고)가 설정되어 있는 경우에도 TypeError를 반환합니다. TypeError를 반환하지 않고 실패하는 경우도 있습니다. 다음 예를 참고해주시기 바랍니다.

+ +
var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("은행이 아니잖아요!!");
+}
+ +

헤더의 좋은 사용법으로 처리하기 전에 컨텐츠 타입으로 올바른가의 여부를 판별하는 방법이 있습니다. 예를 들어,

+ +
fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get('content-type');
+    if(contentType && contentType.includes('application/json')) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .then(function(json) { /* process your JSON further */ })
+  .catch(function(error) { console.log(error); });
+ +

가드

+ +

헤더는 리퀘스트를 송신할 수 있으며 리스폰스를 수신할 수 있습니다. 어떤 정보를 수정할 수 있게 하기 위해, 혹은 수정하기 위해 여러 종류의 제어가 가능합니다. 헤더는 guard 프로퍼티는 이것을 가능하게 합니다. 가드는 Request나 Response에 포함되지 않지만  헤더 객체에서 조작 가능한 여러 메서드들의 사용 가능 여부에 영향을 미칩니다.

+ +

가드의 설정값은 다음과 같습니다.

+ + + +
+

메모: request에서 가드된 헤더의Content-Length 헤더는 추가나 변경할 수 없는 가능성이 있습니다.  마찬가지로 리스폰스 헤더에 Set-Cookie를 삽입하는것은 불가능합니다.ServiceWorker는 동기 Reponse를 추출하여 쿠키를 설정합니다.

+
+ +

Response 객체

+ +

위에서 본 바와 같이 {{domxref("Response")}} 인스턴스들은 fetch() promise가 resolve됬을때 반환됩니다.

+ +

아래는 어떤 리스폰스 객체라도 공통으로 사용되는 리스폰스 프로퍼티입니다.

+ + + +

Response 객체는 개발자의 손에 의해 동적으로 만드는것이 가능합니다. 이 방법은 {{domxref("ServiceWorker_API", "ServiceWorkers")}}내에서 활약할 때가 많습니다. 예를들어 Request를 획득했을 때  {{domxref("FetchEvent.respondWith","respondWith()")}}메서드에 의해 커스텀된 리스폰스를 반환하는 경우가 있습니다.

+ +
var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});
+ +

{{domxref("Response.Response","Response()")}} 생성자는 파라미터로써 두개의 객체를 전달하는것이 가능합니다.첫번째는 Response Body, 두번째는 초기화 객체({{domxref("Request.Request","Request()")}}의 클론을 생성하는 방법과 비슷합니다.) 입니다.

+ + + +
+

付記: 정적 메서드 {{domxref("Response.error","error()")}}는 단순한 에러 Response를 반환합니다. {{domxref("Response.redirect","redirect()")}} 메서드 또한 지정한 URL에 리다이렉트할 Response를 반환합니다. 이것들은 Service Workers에서만 사용되고 있습니다.

+
+ +

Body

+ +

Request, Response 둘다 Body를 가지고 있습니다. body는 아래에서 기술한 타입들 중 하나의 인스턴스입니다.

+ + + +

{{domxref("Body")}} 믹스인은 {{domxref("Request")}}나{{domxref("Response")}}에 구현되어, 콘텐츠를 추출하기 위해 아래의 메서드가 정의되어 있습니다. 이러한 메서드들은 전부 최종적으로 요청으로 반환된 값을 내장하고 있는 promise를 반환합니다.

+ + + +

이것들은 비 텍스트 데이터를 XHR보다 훨씬 간단하게 사용하는것을 도와줍니다.

+ +

Request 바디는 body 파라미터를 전달하는 것으로 설정할 수 있습니다.

+ +
var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+})
+ +

Both request and response (and by extension the fetch() function), will try to intelligently determine the content type. A request will also automatically set a Content-Type header if none is set in the dictionary.

+ +

Feature detection(특징 추출)

+ +

Fetch API support는{{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} or {{domxref("GlobalFetch.fetch","fetch()")}} on the {{domxref("Window")}} or {{domxref("Worker")}}로 존재여부를 확인함으로써 추출할 수 있습니다. 예를 들어:

+ +
if (window.fetch) {
+    // run my fetch request here
+} else {
+    // do something with XMLHttpRequest?
+ +

Polyfill

+ +

Fetch를 지원하지 않는 브라우저를 위해 미지원 브라우저를 위한 Fetch Polyfill이 지원되고 있습니다.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

관련항목

+ +
+ + + +

{{DefaultAPISidebar("Fetch API")}} 

diff --git a/files/ko/web/api/fullscreen_api/index.html b/files/ko/web/api/fullscreen_api/index.html new file mode 100644 index 0000000000..d7f561a95c --- /dev/null +++ b/files/ko/web/api/fullscreen_api/index.html @@ -0,0 +1,198 @@ +--- +title: Using fullscreen mode +slug: Web/Guide/DOM/Using_full_screen_mode +translation_of: Web/API/Fullscreen_API +--- +
{{DefaultAPISidebar("Fullscreen API")}}
+ +

Fullscreen API 는 특정 요소{{DOMxRef("Element")}}(와 해당 자손들을)를 full-screen mode로 표시하고, 더 이상 필요하지 않으면 full-screen mode를 종료하는 메서드를 추가합니다. 이렇게 하면 사용자의 전체 화면을 사용하여, 온라인 게임과 같은 원하는 내용을 표시할 수 있습니다. full-screen mode가 종료될 때까지 화면에서 브라우저의 모든 유저 인터페이스 요소와 기타 응용 프로그램을 제거할 수 있습니다.

+ +

API 사용 방법에 대한 자세한 내용은 Guide to the Fullscreen API 문서를 참조하세요.

+ +
+

주의: 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 {{anch("Browser compatibility")}} 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, Fscreen 과 같은 라이브러리를 사용할 수 있습니다.

+
+ +

Interfaces

+ +

Fullscreen API 에는 자체 인터페이스가 없습니다. 대신에, full-screen 기능을 제공하는데 필요한 메서드, 속성(property), 이벤트 핸들러를 추가하기 위해, 다음 섹션에 나열된 것과 같은 몇 가지 다른 인터페이스를 추가합니다.

+ +

Methods

+ +

Fullscreen API 는 {{DOMxRef("Document")}}, {{DOMxRef("Element")}} 인터페이스에 메서드를 추가하여 full-screen mode를 설정하거나 해제할 수 있습니다.

+ +

Methods on the Document interface

+ +
+
{{DOMxRef("Document.exitFullscreen()")}}
+
{{Glossary("user agent")}} 가 full-screen mode에서 창 모드로 다시 전환되도록 요청합니다. full-screen mode가 완전히 종료되면 {{jsxref("Promise")}} resolved 를 반환합니다.
+
+ +

Methods on the Element interface

+ +
+
{{DOMxRef("Element.requestFullscreen()")}}
+
유저 에이전트가 지정한 요소(그리고 그 자손들까지)를 full-screen mode로 설정하고, 브라우저의 모든 UI 요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다. full-screen mode가 활성화되면 {{jsxref("Promise")}} resolved를 반환합니다.
+
+ +

Properties

+ +

{{DOMxRef("Document")}} 인터페이스는 full-screen mode가 지원되고 사용 가능한지, full-screen mode가 현재 활성화 되어있는지, 어떤 요소가 스크린을 사용하고 있는지 확인하는데 사용할 수 있는 속성(property)을 제공합니다.

+ +
+
{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}
+
fullscreenElement 속성은 DOM(혹은 shadow DOM)에서 현재 full-screen mode로 표시되는 요소{{DOMxRef("Element")}}를 알려줍니다. 이것이 null인 경우, document는 full-screen mode가 아닙니다.
+
{{DOMxRef("Document.fullscreenEnabled")}}
+
fullscreenEnabled 속성(property)은 full-screen mode를 사용할 수 있는지 여부를 알려줍니다. 이유가 어떻든(예를들어, "fullscreen" 기능이 허락되지 않거나, full-screen mode가 지원되지 않는 경우) full-screen mode를 사용할 수 없으면 false 입니다.
+
+ +

Event handlers

+ +

Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 {{DOMxRef("Document")}} 와{{DOMxRef("Element")}} 인터페이스 에서 사용할 수 있습니다.

+ +
+

주의: 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. 자바스크립트 코드로 추가해야만 합니다.

+
+ +

Event handlers on documents

+ +
+
{{DOMxRef("Document.onfullscreenchange")}}
+
문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenchange")}} 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다.
+
{{DOMxRef("Document.onfullscreenerror")}}
+
전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.
+
+ +

Event handlers on elements

+ +
+
{{DOMxRef("Element.onfullscreenchange")}}
+
{{Event("fullscreenchange")}} 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다.
+
{{DOMxRef("Element.onfullscreenerror")}}
+
full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.
+
+ +

Obsolete properties

+ +
+
{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}
+
문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 true, 그렇지 않으면 false의 Boolean 값입니다. +
주의: 대신에 {{DOMxRef("Document")}} 나 {{DOMxRef("ShadowRoot")}} 에서 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 속성(property)을 사용하세요. 그것이 null이 아닌 경우 {{DOMxRef("Element")}}가 full-screen mode로 표시됩니다.
+
+
+ +

Events

+ +

Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다.

+ +
+
{{Event("fullscreenchange")}}
+
full-screen mode를 사용하거나, 사용하지 않도록 전환할 때 {{DOMxRef("Document")}} 혹은{{DOMxRef("Element")}} 로 보냅니다.
+
{{Event("fullscreenerror")}}
+
full-screen mode를 사용하거나, 사용하지 않도록 전환하려고 시도하는 중에 오류가 발생하면 Document 또는 Element 로 보냅니다.
+
+ +

Dictionaries

+ +
+
{{DOMxRef("FullscreenOptions")}}
+
{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}을 호출할 때 지정할 수 있는 옵션 설정을 제공합니다.
+
+ +

Controlling access

+ +

Feature Policy을 사용하여 full-screen mode의 유효성을 제어할 수 있습니다. full-screen mode는 "fullscreen"으로 식별되고, 기본 허용 목록 값은 "self" 입니다. 이는 최상위(top-level) 문서 컨텍스트에서 full-screen mode가 허용된다는 것을 의미하며, 최상위(top-most) 문서와 같은 출처에서 로드 된 중첩 된 컨텍스트에도 적용됩니다.

+ +

기능 정책을 사용하여 API에 대한 액세스를 제어하는 자세한 내용은 Using Feature Policy을 참조하세요.

+ +

Usage notes

+ +

사용자는 ESC (혹은 F11) 키를 누르기만하면 사이트 또는 앱이 프로그래밍 방식으로 기다리는 대신에, full-screen mode를 종료하도록 선택할 수 있습니다. 유저 인터페이스의 어딘가에 사용자에게 이 옵션을 사용할 수 있음을 알리는, 적절한 유저 인터페이스 요소를 제공해야 합니다.

+ +
+

주의: 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 Alt-Tab)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다.

+
+ +

Example

+ +

이 예제에서는 비디오가 웹 페이지에 표시됩니다. Return 또는 Enter 키를 누르면, 사용자가 비디오의 창과 full-screen 표시를 전환할 수 있습니다.

+ +

View Live Examples

+ +

Watching for the Enter key

+ +

페이지가 로드되면, 이 코드가 실행되어 Enter 키 를 주시하는 이벤트 리스너를 설정합니다.

+ +
document.addEventListener("keypress", function(e) {
+  if (e.keyCode === 13) {
+    toggleFullScreen();
+  }
+}, false);
+
+ +

Toggling full-screen mode

+ +

이 코드는 사용자가 Enter 키를 누를 때, 위의 이벤트 핸들러에 의해 호출됩니다.

+ +
function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+ +

먼저 {{DOMxRef("Document", "document")}}의 fullscreenElement 속성(attribute)값을 살펴보겠습니다. 실제 배포 시에는 이 시점에 접두어가 붙은 버전(예를들어, mozFullscreenElement, msFullscreenElement, webkitFullscreenElement)을 확인해야 합니다. 값이 null인 경우, 문서는 현재 window mode에 있으므로, full-screen mode로 전환해야 합니다. 그렇지 않으면, 이 요소는 지금 full-screen mode 상태입니다. full-screen mode로 전환하는 작업은, {{HTMLElement("video")}}요소에서 {{DOMxRef("Element.requestFullscreen()")}}을 호출하여 수행합니다.

+ +

full-screen mode가 이미 활성화 된 경우(fullscreenElement 가 null이 아닌 경우), document에서 {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}}을 호출하여 full-screen mode를 종료합니다.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Initial version.
+ +

Browser compatibility

+ +

Document.fullscreen

+ +
+ + +

{{Compat("api.Document.fullscreen")}}

+ +

Document.fullscreenEnabled

+ +
+ + +

{{Compat("api.Document.fullscreenEnabled")}}

+
+
+ +

See also

+ + diff --git a/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..e5f9913376 --- /dev/null +++ b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -0,0 +1,165 @@ +--- +title: Geolocation API 사용하기 +slug: WebAPI/Using_geolocation +tags: + - Geolocation API + - Guide + - Intermediate +translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +--- +

{{securecontext_header}}{{APIRef("Geolocation API")}}
+ Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.

+ +

geolocation 객체

+ +

Geolocation API는 {{domxref("navigator.geolocation")}} 객체를 통해 사용할 수 있습니다.

+ +

geolocation 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것입니다. 존재 여부는 다음과 같이 알아낼 수 있습니다.

+ +
if('geolocation' in navigator) {
+  /* 위치정보 사용 가능 */
+} else {
+  /* 위치정보 사용 불가능 */
+}
+
+ +

현재 위치 가져오기

+ +

{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} 메서드를 호출해서 사용자의 현재 위치를 얻을 수 있습니다. getCurrentPosition()은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청합니다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출합니다. 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수도 있습니다. 세 번째 매개변수 역시 선택 항목이며, 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체입니다.

+ +
+

참고: {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}의 기본값에서는 최대한 빠르게 낮은 정밀도의 응답을 반환합니다. 정확하지 않더라도 빠른 정보가 필요한 상황에서 유용합니다. 예를 들어, GPS 기능을 가진 장비는 보정 과정에 수 분이 걸릴 수도 있으므로 IP 위치와 WiFi 등 정확하지 않은 출처에 기반한 위치 정보를 반환할 수 있습니다.

+
+ +
navigator.geolocation.getCurrentPosition((position) => {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});
+ +

위의 예제는 사용자 위치가 확인되면 doSomething() 함수를 실행합니다.

+ +

현재 위치 추적하기

+ +

장치가 이동했거나 더 정확한 정보를 사용할 수 있어서 위치 정보가 바뀐 경우 호출할 콜백 함수를 {{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드로 설정할 수 있으며, {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 같은 매개변수를 받습니다. 콜백은 계속해서 호출될 수 있으므로, 브라우저가 사용자의 이동 시, 또는 고정밀 위치 기술을 사용할 수 있는 시점에 새로운 위치 정보를 제공할 수 있습니다. getCurrentPosition()과 마찬가지로 선택 사항인 오류 콜백 역시 여러 번 호출할 수 있습니다.

+ +
+

참고: {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}을 먼저 호출하지 않고도 {{domxref("Geolocation.watchPosition", "watchPosition()")}}을 사용할 수 있습니다.

+
+ +
const watchID = navigator.geolocation.watchPosition((position) => {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});
+ +

{{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드는 위치 추적 요청의 고유 식별자를 나타내는 숫자값을 반환합니다. 해당 식별자를 {{domxref("Geolocation.clearWatch","clearWatch()")}} 메서드에 전달해서 추적을 종료할 수 있습니다.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

응답 미세 조정

+ +

{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 {{domxref("Geolocation.watchPosition","watchPosition()")}} 둘 다 성공 콜백, 실패 콜백 외에도 PositionOptions 객체를 받을 수 있습니다.

+ +

PositionsOptions 객체를 사용하면 고정밀도 활성화 여부, 위치 정보의 캐시 수명(수명이 끝나기 전까지는 이전에 반환한 위치 정보를 저장해뒀다가, 같은 요청을 또 받을 경우 그대로 반환합니다), 그리고 위치 정보 요청의 응답을 대기할 최대 대기시간을 지정할 수 있습니다.

+ +

옵션 객체를 사용한 {{domxref("Geolocation.watchPosition","watchPosition")}}의 호출 예시는 다음과 같습니다.

+ +
function success(position) {
+  doSomething(position.coords.latitude, position.coords.longitude);
+}
+
+function error() {
+  alert('Sorry, no position available.');
+}
+
+const options = {
+  enableHighAccuracy: true,
+  maximumAge: 30000,
+  timeout: 27000
+};
+
+const watchID = navigator.geolocation.watchPosition(success, error, options);
+ +

위치 표현

+ +

사용자의 위치는 {{domxref("GeolocationPosition")}} 객체를 담은 {{domxref("GeolocationCoordinates")}} 객체를 사용하여 표현합니다.

+ +

GeolocationPosition은 단 두 가지만 가집니다. 하나는 GeolocationCoordinates 인스턴스를 가진 coords 속성이고, 다른 하나는 위치 정보의 기록 시점을 나타내는 {{domxref("DOMTimeStamp")}} 인스턴스입니다.

+ +

GeolocationCoordinates 인스턴스는 다수의 속성을 갖지만, 그 중 가장 많이 쓰게 될 항목은 지도의 지점을 가리킬 때 사용할 latitude와 longitude입니다. 따라서 대부분의 Geolocation 성공 콜백은 아래와 같이 꽤 간단한 형태입니다.

+ +
function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Do something with your latitude and longitude
+}
+ +

그러나 GeolocationCoordinates 객체에서 고도, 속도, 장치의 방향, 위경도와 고도의 정확도 등 다른 다양한 정보도 가져올 수 있습니다.

+ +

오류 처리

+ +

getCurrentPosition() 또는 watchPosition()에 오류 콜백을 제공한 경우, 콜백은 첫 번째 매개변수로 GeolocationPositionError 객체를 받습니다. 해당 객체는 오류의 유형을 나타내는 code 속성과, 사람이 읽을 수 있는 형태로 오류 코드의 뜻을 설명한 message 속성을 갖습니다.

+ +

다음 형태로 사용할 수 있습니다.

+ +
function errorCallback(error) {
+  alert(`ERROR(${error.code}): ${error.message}`);
+};
+ +

예제

+ +

다음 예제는 Geolocation API를 사용해 사용자의 위경도를 가져옵니다. 성공한 경우, 사용자의 위치를 가리키는 openstreetmap.org 링크를 생성해 하이퍼링크에 할당합니다.

+ + + +

HTML

+ +
<button id = "find-me">Show my location</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+ +

JavaScript

+ +
function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if(!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+ +

결과

+ +

{{EmbedLiveSample('예제', 350, 150)}}

diff --git a/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html new file mode 100644 index 0000000000..122e835b75 --- /dev/null +++ b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -0,0 +1,343 @@ +--- +title: Drag Operations +slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations +translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

다음은 드래그 & 드랍(drag & drop) 동작 실행 시 각 단계에 대한 설명입니다.

+ +

이 문서에 설명된 드래그 동작은 {{domxref("DataTransfer")}} 인터페이스를 사용합니다. 이 문서에서는 {{domxref("DataTransferItem")}} 인터페이스나 {{domxref("DataTransferItemList")}} 인터페이스를 사용하지 않습니다.

+ +

Draggable 속성

+ +

웹 페이지 안에서 특정 상황에 기본 드래그(default drag) 행위가 사용될 경우가 있습니다. 선택된 텍스트(text selections), 이미지 또는 링크가 여기에 포함됩니다. 이미지나 링크가 드래그될 때, 이미지나 링크의 URL이 드래그 데이터(drag data)로 설정되고 드래그가 시작됩니다. 다른 요소의 경우, 기본 드래그가 발생할 선택(selections)에 포함되어 있어야 합니다(For other elements, they must be part of a selection for a default drag to occur). 이 효과를 보기 위해서는 웹 페이지의 어떤 영역을 선택하고 마우스를 클릭한 채로 드래그하면 됩니다. 드래그가 발생할 때 마우스 포인터로 선택 영역에 대한 OS별 렌더링이 표시됩니다. 이 행위는 기본 드래그 행위인 경우에만 발생하는 것으로 드래그되는 데이터를 조정할 리스너가 없는 경우에는 작동하지 않습니다.

+ +

HTML에서 이미지나 링크 그리고 선택(selections)에 대한 기본 행위를 제외한 나머지 요소는 기본적으로 드래그되지 않습니다. XUL에서는 모든 요소가 드래그 가능합니다.

+ +

다른 HTML 요소를 드래그할 수 있게 하려면 세 가지가 이루어져야 합니다:

+ + + +

컨텐츠의 일부 영역을 드래그할 수 있도록 만드는 예제는 다음과 같습니다.

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
+  This text <strong>may</strong> be dragged.
+</div>
+
+ +

요소를 드래그할 수 있게 하기 위해서는 {{htmlattrxref("draggable")}} 속성이 true로 설정되어야 합니다. 이 속성이 생략되거나 false로 설정되면 해당 요소는 드래그할 수 없으며, 대신 텍스트가 선택됩니다. {{htmlattrxref("draggable")}} 속성은 이미지나 링크를 포함한 어떤 요소에서도 사용할 수 있습니다. 하지만, 이미지나 링크에 대해서는 기본값이 true로 설정되어 있으므로 이들 요소에 대해 드래깅할 수 없게 만들 경우에만 {{htmlattrxref("draggable")}} 속성의 값을 false로 설정하면 됩니다.

+ +

어떤 요소가 드래그 가능한 경우, 해당 요소 내의 텍스트나 다른 요소는 마우스를 클릭하고 드래그하는 통상적인 방식으로는 선택할 수 없게 됩니다. 대신, 사용자가 alt 키를 누른채로 마우스로 텍스트를 선택하거나 키보드를 이용해 선택할 수 있습니다.

+ +

XUL 요소에 대해서는 {{htmlattrxref("draggable")}} 속성을 사용할 필요가 없으며, 모든 XUL 요소는 드래그가 가능합니다.

+ +
<button label="Drag Me" ondragstart="event.dataTransfer.setData('text/plain', 'Drag Me Button');">
+
+ +

드래그 작업 시작

+ +

이 예제에서는 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 속성을 이용하여 {{event("dragstart")}} 이벤트에 대한 리스너를 추가합니다.

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
+  This text <strong>may</strong> be dragged.
+</div>
+
+ +

사용자가 드래그를 시작할 때, {{event("dragstart")}} 이벤트가 발생합니다. 이 예제에서는 드래그할 요소에 {{event("dragstart")}} 리스너가 추가되었습니다; 하지만, 대부분의 다른 이벤트가 그렇듯이 상위 요소에서 드래그 이벤트를 포착할 수 있습니다. {{event("dragstart")}} 이벤트 내에서 아래에서 설명하는 바와 같이 피드백 이미지(feedback image)나 드래그 효과와 그리고 드래그 데이터를 명시할 수 있습니다. 기본 이미지나 드래그 효과는 대부분의 상황에 적합하게 되어 있으며, 드래그 데이터만 필요합니다.

+ +

데이터 드래그

+ +

모든 {{domxref("DragEvent","drag events")}}는 드래그 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}}라는 속성이 존재합니다 (dataTransfer는 {{domxref("DataTransfer")}} 객체입니다).

+ +

드래그가 발생할 때, 데이터는 어떤 것이 드래그되는지를 구분할 수 있는 드래그와 연관되어야 합니다(When a drag occurs, data must be associated with the drag which identifies what is being dragged). 예를 들어, 선택된 텍스트가 드래그될 경우 드래그 데이터 항목에 연관된 데이터는 텍스트 자체입니다. 이와 유사하게, 웹 페이지 상의 링크가 드래그될 경우에 드래그 데이터 항목은 링크의 URL이됩니다.

+ +

{{domxref("DataTransfer","drag data")}}는 두 가지 정보를 담고 있는데, 데이터의 유형(또는 형식)과 데이터 값입니다. 형식은 (텍스트 데이터에 해당하는 text/plain과 같은) 형식 문자열(type string) 값이고, 값은 텍스트의 문자열입니다. 드래그가 시작되면, 데이터와 형식을 제공하는 데이터를 추가해야 합니다. 드래그되는 동안, {{event("dragenter")}} 이벤트와 {{event("dragover")}} 이벤트에 대한 이벤트 리스너에서 드래그되는 데이터의 형식을 사용해 드랍이 허용되는지 확인할 수 있습니다. 예를 들어, 링크가 허용되는 드랍 대상(drop target)은 text/uri-list 형식의 링크인지 확인합니다. 드랍 이벤트 동안 리스너는 드래그 대상(being dragged)으로부터 데이터를 추출해 드랍되는 위치에 삽입합니다.

+ +

{{domxref("DataTransfer","drag data's")}}의 {{domxref("DataTransfer.types","types")}} 속성은 text/plain or image/jpeg과 같은 {{domxref("DOMString")}} MIME-type 목록을 반환홥니다. 여러분은 자신만의 형식을 만들 수도 있습니다. 가장 흔하게 사용되는 형식은 권장 드래그 데이터 형식(Recommended Drag Types)에서 소개하고 있습니다.

+ +

드래그에는 여러 가지 다른 형식의 데이터 항목이 포함될 수 있습니다. 이를 통해 사용자 정의 형식(custom types)과 같은 보다 특정한 형식의 데이터를 주로 제공하지만, 특정한 유형을 지원하지 않는 드롭 대상에 대해 대체 데이터(fallback data)를 제공할 수도 있습니다. text/plain 형식의 일반적인 텍스트 데이터가 가장 단순한 형식의 데이터일 것입니다.이 형식의 데이터는 단순히 텍스트 형식으로 표시될 것입니다.

+ +

{{domxref("DragEvent.dataTransfer","dataTransfer")}} 내에 드래그 데이터 항목(drag data item)을 설정하기 위해서는 {{domxref("DataTransfer.setData","setData()")}} 메서드를 이용합니다. 이 메서드는 각각 데이터 형식과 데이터 값인 두 개의 인자가 필요합니다. 예를 들어:

+ +
event.dataTransfer.setData("text/plain", "Text to drag");
+
+ +

이 경우, 데이터 값은 "Text to drag"이고 형식은 text/plain입니다.

+ +

여러 형식의 데이터를 제공할 수도 있습니다. 이를 위해서는 서로 다른 형식으로 {{domxref("DataTransfer.setData","setData()")}} 메서드를 여러 번 호출합니다. 이 때, 가장 세부적인 형식에서 덜 세부적인 형식의 순으로 호출해야 합니다.

+ +
var dt = event.dataTransfer;
+dt.setData("application/x-bookmark", bookmarkString);
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+
+ +

여기서 데이터는 세가지 유형으로 추가됩니다. 첫번째 형식의 'application2x-bookmark'는 사용자 지정 형식입니다. 다른 응용 프로그램에서는 이 형식을 지원하지 않지만 동일한 사이트 또는 응용 프로그램의 영역 간 드래그할 경우, 이 사용자 지정 형식을 사용할 수 있습니다. 또한 다른 형식의 데이터를 제공함으로써 덜 세부적인 형태로 다른 애플리케이션으로의 드래그도 지원할 수 있습니다. 다른 형식이 하나의 URL또는 텍스트 형식만 제공할 때, 'application2x-bookmark' 형식은 해당 어플리케이션 내에서 사용될 경우 더 상세한 데이터를 제공할 수 있습니다

+ +

이 예제에서 text/uri-list와 text/plain은 동일한 데이터를 담고있음에 주목하시기 바랍니다. 이렇게 해도 되지만, 꼭 이럴 필요는 없습니다.

+ +

동일한 형식으로 데이터를 두 번 추가하려고 하면 새로운 데이터가 기존 데이터를 대체하지만 형식 목록 내에서 이전 데이터(old data)와 같은 위치에 있게 됩니다.

+ +

{{domxref("DataTransfer.clearData","clearData()")}} 메서드를 이용해 해당 데이터를 지울 수 있는데, 이 메서드는 지우고자 하는 데이터의 형식을 인자로 가집니다.

+ +
event.dataTransfer.clearData("text/uri-list");
+
+ +

{{domxref("DataTransfer.clearData","clearData()")}} 메서드에 대한 형식 인자는 선택적입니다. 형식을 지정하지 않으면 모든 형식과 연관된 데이터가 지워집니다. 드래그할 때, 드래그 데이터 항목이 없거나 이후에 모든 항목이 삭제되면 드래그가 발생하지 않습니다.

+ +

드래그 피드백 이미지 설정

+ +

드래그가 발생할 때, 드래그 대상("{{event("dragstart")}}" 이벤트가 발생한 요소)으로부터 반투명한 이미지가 생성되고 드래그 하는 동안 마우스 포인터를 따라 움직입니다. 이 이미지는 자동으로 생성되며, 따로 생성할 필요가 없습니다. 하지만, {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 이용해 사용자 정의 드래그 피드백 이미지를 지정할 수 있습니다.

+ +
event.dataTransfer.setDragImage(image, xOffset, yOffset);
+
+ +

세 개의 인자는 필수입니다. 첫 번째 인자는 이미지에 대한 참조(reference)입니다. 이 참조는 일반적으로 이미지에 대한 참조이나 캔버스(canvas)나 다른 요소를 지정할 수도 있습니다. 피드백 이미지는 단순하게 화면에 표시된 이미지의 모양으로부터 생성되지만, 이미지의 경우 원래 크기로 그려집니다. {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드의 두 번째와 세 번째 인자는 마우스 포인터에 대해 상대적인 옵셋(offsets)으로 이미지가 나타날 위치를 의미합니다.

+ +

문서 내에 있지 않은 이미지나 캔버스를 사용하는 것 역시 가능합니다. 이 기법은 다음의 예제와 같이 캔버스 요소를 이용해 드래그 이미지를 사용자 정의 형태로 그리고자 할 때 유용합니다:

+ +
function dragWithCustomImage(event) {
+  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
+  canvas.width = canvas.height = 50;
+
+  var ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  var dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+
+ +

이 예제에서, 드래그 이미지를 표시할 캔버스를 하나 생성합니다. 캔버스는 너비가 와 높이가 모두 50 픽셀이고, 마우스 포인터가 이미지의 중앙에 위치하도록 옵셋(offsets)을 너비와 높이의 절반(25)으로 설정했습니다.

+ +

{{h2_gecko_minversion("Using XUL panels as drag images", "9.0")}}

+ +

Gecko 개발자일 경우 (Mozilla 어플리케이션 개발자든 add-on 개발자든 상관 없이), Gecko 9.0 {{geckoRelease("9.0")}}에 드래그 피드백 이미지로 XUL {{XULElem("panel")}} 요소를 사용할 수 있도록 하는 지원이 추가되었습니다. 간단히 {{XULElem("panel")}} 요소를 {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드로 전달하기만 하면 됩니다.

+ +

다음 XUL {{XULElem("panel")}}를 살펴보시기 바랍니다:

+ +
<panel id="panel" style="opacity: 0.6">
+  <description id="pb">Drag Me</description>
+</panel>
+
+<vbox align="start" style="border: 1px solid black;" ondragstart="startDrag(event)">
+  <description>Drag Me</description>
+</vbox>
+
+ +

위의 예에서 사용자가 {{XULElem("vbox")}}를 클릭하고 드래그하기 시작하면, 아래의 startDrag() 함수가 호출됩니다.

+ +
function startDrag(event) {
+  event.dataTransfer.setData("text/plain", "<strong>Body</strong>");
+  event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20);
+}
+
+ +

이 함수는 해당 패널을 드래그 이미지로 사용하고, HTML 형식의 "<strong>Body</strong>"을 데이터로 가집니다. 텍스트 편집기에 패널을 드랍하면 "Body"라는 텍스트가 드랍된 위치에 삽입됩니다.

+ +

드래그 효과

+ +

드래그할 때, 여러 가지 작업이 수행될 수 있습니다. copy 작업은 드래그되는 데이터가 현재 위치에서 드랍되는 위치로 복사될 것임을 나타냅니다. move 작업은 드래그되는 데이터가 이동될 것임을 나타내고, link 작업은 특정 형태의 관계(relationship)나 연결(connection)이 소스와 드랍되는 위치 사이에 생성될 것임을 나타냅니다.

+ +

드래그 소스(drag source)에 대해 {{event("dragstart")}} 이벤트 리스너의 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 설정함으로써, 이 세 가지 작업 중 어떤 것을 허용할 것인지를 지정할 수 있습니다.

+ +
event.dataTransfer.effectAllowed = "copy";
+
+ +

이 예제에서는, 복사만 허용됩니다. 다양한 방식으로 값을 조합할 수 있습니다:

+ +
+
none
+
어떤 작업도 허용하지 않음.
+
copy
+
복사만 허용
+
move
+
이동만 허용
+
link
+
연결만 허용
+
copyMove
+
복사 또는 이동만 허용
+
copyLink
+
복사 또는 연결만 허용
+
linkMove
+
연결 또는 이동만 허용
+
all
+
복사, 이동 및 연결 모두 허용
+
+ +

이 값들은 반드시 위에 나열한 것과 정확하게 일치해야 함에 유의하시기 바랍니다. 예를 들어, {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 copyMove로 설정하면 복사와 이동 작업이 허용되나 연결(link) 작업은 금지됩니다. {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 변경하지 않으면 'all' 값과 마찬가지로 어떤 작업도 허용됩니다. 따라서, 특정한 유형의 작업을 제외시키고 싶지 않다면 이 속성을 조정할 필요가 없습니다.

+ +

드래그 작업 중에 {{event("dragenter")}} 또는 {{event("dragover")}} 이벤트에 대한 리스너는 어떤 작업이 허용되어 있는지 알기 위해 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 확인할 수 있습니다. 관련된 속성으로, {{domxref("DataTransfer.dropEffect","dropEffect")}}는 이들 이벤트 중 하나에서 수행되어야 하는 단일 작업을 지정하기 위해 설정되어야 할 속성입니다. {{domxref("DataTransfer.dropEffect","dropEffect")}}에 유효한 값은 none, copy, move, 또는 link입니다. 이 속성에 값의 조합은 허용되지 않습니다.

+ +

{{event("dragenter")}}나 {{event("dragover")}} 이벤트가 발생하면 사용자가 요청하는 효과로 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성이 초기화됩니다. 사용자는 한정자 키를 눌러 원하는 효과로 수정할 수 있습니다. 플랫폼에 따라 정확한 키가 달라질 수 있지만, 일반적으로 쉬프트(Shift)와 컨트롤(Control) 키가 복사하기, 이동하기, 연결하기 간 전환에 사용됩니다. 마우스 포인터를 원하는 작업을 나타내도록 변경할 수 있습니다; 예를 들어, 복사 작업에 대해서는 마우스 포인터 옆에 더하기 기호가 표시된 커서가 나타날 수 있습니다.

+ +

{{event("dragenter")}} 또는 {{event("dragover")}} 이벤트가 발생하는 동안 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 변경할 수 있는데, 예를 들자면, 특정 작업만 지원되는 특수한 드랍 대상(drop target)일 경우가 그렇습니다. {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 수정하여 사용자 효과(user effect)를 오버라이드하여 특정한 드랍 작업이 발생하게 할 수 있습니다. 이 효과는 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성에 열거된 것 중의 하나 이어야 함에 유의하시기 바랍니다. 그렇지 않을 경우, 허용되는 대체 값으로 설정되게 됩니다.

+ +
event.dataTransfer.dropEffect = "copy";
+
+ +

이 예제에서는 복사가 수행될 효과입니다.

+ +

이 경우에는 이벤트를 취소하지 않는 것이 좋지만 none 값을 사용하여 이 위치에서 드롭이 허용되지 않음을 나타낼 수 있습니다.

+ +

{{event("drop")}}와 {{event("dragend")}} 이벤트 내에서{{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 확인하면 최종적으로 어떤 효과가 선택되었는지를 알 수 있습니다. 선택된 효과가 "move"였다면, {{event("dragend")}} 이벤트 내에서 드래그 소스의 원본 데이터가 삭제되어야 합니다.

+ +

드랍 대상 지정하기

+ +

{{event("dragenter")}}와 {{event("dragover")}} 이벤트에 대한 리스너는 유효한 드랍 대상인지, 즉 드래그된 아이템이 드랍될 수 있는 곳인지를 나타내는데 사용할 수 있습니다. 웹 페이지 또는 어플리케이션의 대부분의 영역은 데이터를 드랍할 수 있는 유효한 영역이 아닙니다. 따라서, 이들 이벤트에 대한 기본적인 처리는 드랍을 허용하지 않는 것입니다.

+ +

드랍을 허용하길 원한다면, 해당 이벤트를 취소하는 기본 처리를 막아야 합니다. 속성 정의(attribute-defined) 이벤트 리스너로부터 false를 반환 받거나 해당 이벤트의 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하면 됩니다. 후자는 별도의 스크립트에 정의된 함수에 더 적합합니다.

+ +
<div ondragover="return false">
+<div ondragover="event.preventDefault()">
+
+ +

{{event("dragenter")}} and {{event("dragover")}} 두 이벤트 모두에서 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하는 것은 그 위치에 드랍이 허용되는 것을 나타냅니다. 하지만, 일반적으로 특정한 상황에서만, 예를 들자면 링크가 드래그될 때만 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하길 원할 것입니다. 이렇게 하기 위해서는 조건을 확인하여 조건이 충족될 때에만 해당 이벤트를 취소하는 함수를 호출합니다. 조건이 충족되지 않을 경우, 이벤트를 취소하지 않으면 사용자가 마우스 버튼을 놓더라도 드랍은 발생하지 않을 것입니다.

+ +

data transfer의 드래그 데이터 형식에 따라 드랍을 허용하거나 기각하는 경우가 대부분일 것입니다(예를 들어, 이미지나 링크를 허용하거나 둘 다 허용하는 경우). 이렇게 하기 위해서는 이벤트의 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 속성의 {{domxref("DataTransfer.types","types")}} 속성을 확인합니다. {{domxref("DataTransfer.types","types")}} 속성은 드래그가 시작될 때 추가된 형식 문자열의 배열을 반환하는데, 그 순서는 가장 세부적인 형식에서 가장 덜 세부적인 형식의 순서입니다.

+ +
function contains(list, value) {
+    for( var i = 0; i < list.length; ++i ) {
+        if(list[i] === value) return true;
+    }
+    return false;
+}
+
+function doDragOver(event) {
+  var isLink = contains( event.dataTransfer.types, "text/uri-list");
+  if (isLink) {
+    event.preventDefault();
+  }
+}
+ +

이 예제에서 형식 목록 내에 text/uri-list 형식이 존재하는지 확인하기 위해 contains 메서드를사용합니다. 존재할 경우에는 드랍을 허용하기 위해 이벤트가 취소될 것입니다. 드래그 데이터가 링크를 포함하지 않았다면, 해당 이벤트는 취소되지 않을 것이고 그 위치에 대한 드랍이 발생하지 않을 것입니다.

+ +

수행되어야 하는 작업 형식을 더 세부적으로 설정하길 원한다면, {{domxref("DataTransfer.effectAllowed","effectAllowed")}}나 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 각각 설정하거나 동시에 둘 다를 설정하고 싶을 것입니다. 두 속성을 변경하더라도 해당 이벤트를 취소하지 않으면 아무런 영향이 없을 것입니다.

+ +

Updates to DataTransfer.types

+ +

최신 스펙에는 {{domxref("DataTransfer.types")}}이 {{domxref("DOMStringList")}}(이 속성은 Fiirefox 52 이상에서 지원됨)이 아닌 {{domxref("DOMString")}} 형식의 고정배열(fronzen array)을 반환하도록 명시하고 있음에 유의하시기 바랍니다.

+ +

그 결과로, contains 메서드는 해당 속성에 대해 더 이상 동작하지 않으며; 특정 형식의 데이터가 제공되는지 확인하기 위해서는 다음 코드와 같이 includes 메서드를 사용해야 합니다:

+ +
if ([...event.dataTransfer.types].includes('text/html')) {
+  // Do something
+}
+ +

일부 특성 검출(feature detection)을 이용해 types에 대해 어떤 메서드가 지원되는지를 판별하고 적절하게 코드를 실행할 수 있습니다.

+ +

Drop Feedback

+ +

There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property. Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.

+ +

However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the -moz-drag-over CSS pseudoclass on a drop target.

+ +
.droparea:-moz-drag-over {
+  border: 1px solid black;
+}
+
+ +

In this example, the element with the class droparea will receive a 1 pixel black border while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the {{event("dragenter")}} event. Note that you must cancel the {{event("dragenter")}} event for this pseudoclass to apply, as this state is not checked for the {{event("dragover")}} event.

+ +

For more complex visual effects, you can also perform other operations during the {{event("dragenter")}} event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an image or separator element, for example, and simply insert it into the document during the {{event("dragenter")}} event.

+ +

The {{event("dragover")}} event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a {{event("dragover")}} event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.

+ +

Finally, the {{event("dragleave")}} event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the -moz-drag-over pseudoclass will be removed automatically. The {{event("dragleave")}} event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.

+ +

Performing a Drop

+ +

When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last {{event("dragenter")}} or {{event("dragover")}} event, and then the drop will be successful, and a {{event("drop")}} event will fire at the target. Otherwise, the drag operation is cancelled, and no {{event("drop")}} event is fired.

+ +

During the {{event("drop")}} event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.

+ +

As with all drag-related events, the event's {{domxref("DataTransfer","dataTransfer")}} property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.

+ +
function onDrop(event) {
+  var data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+
+ +

The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a {{event("dragover")}} event.

+ +

In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element.

+ +

In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop so that the default browser handling does not handle the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.

+ +

You can retrieve other types of data as well. If the data is a link, it should have the type text/uri-list. You could then insert a link into the content.

+ +
function doDrop(event) {
+  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
+  for (let line of lines) {
+    if (line.startsWith("#"))
+      continue;
+
+    let link = document.createElement("a");
+    link.href = line;
+    link.textContent = line;
+    event.target.appendChild(link);
+  }
+  event.preventDefault();
+}
+
+ +

This example inserts a link from the dragged data. As you might be able to guess from the name, the text/uri-list type actually may contain a list of URLs, each on a separate line. In this code, we use the split to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.

+ +

For simple cases, you can use the special type URL just to retrieve the first valid URL in the list. For example:

+ +
var link = event.dataTransfer.getData("URL");
+
+ +

This eliminates the need to check for comments or iterate through lines yourself; however, it is limited to only the first URL in the list.

+ +

The URL type is a special type used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.

+ +

Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are supported by a drop target.

+ +

The following example returns the data associated with the best-supported format:

+ +
function doDrop(event) {
+  var types = event.dataTransfer.types;
+  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  types = supportedTypes.filter((value) => types.includes(value));
+  if (types.length)
+    var data = event.dataTransfer.getData(types[0]);
+  event.preventDefault();
+}
+
+ +

This method relies on JavaScript functionality available in Firefox 3. However, the code could be adjusted to support other platforms.

+ +

Finishing a Drag

+ +

Once the drag is complete, a {{event("dragend")}} event is fired at the source of the drag (the same element that received the {{event("dragstart")}} event). This event will fire if the drag was successful[1] or if it was cancelled. However, you can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine what drop operation occurred.

+ +

If the {{domxref("DataTransfer.dropEffect","dropEffect")}} property has the value none during a {{event("dragend")}}, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if it was successful.

+ +

A drop can occur inside the same window or over another application. The {{event("dragend")}} event will always fire regardless. The event's {{domxref("MouseEvent.screenX","screenX")}} and {{domxref("MouseEvent.screenY","screenY")}} properties will be set to the screen coordinate where the drop occurred.

+ +

After the {{event("dragend")}} event has finished propagating, the drag and drop operation is complete.

+ +

[1] In Gecko, {{event("dragend")}} is not dispatched if the source node is moved or removed during the drag (e.g. on drop or {{event("dragover")}}).  bug 460801

+ +

See also

+ + diff --git a/files/ko/web/api/html_drag_and_drop_api/index.html b/files/ko/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..70a4295284 --- /dev/null +++ b/files/ko/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,303 @@ +--- +title: HTML 드래그 앤 드롭 API +slug: Web/API/HTML_드래그_앤_드롭_API +tags: + - HTML5 + - XUL + - 가이드 + - 개요 + - 고급 + - 드래그 앤 드롭 + - 이벤트 +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

{{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}

+ +

HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 draggable 요소를 마우스로 선택해 droppable 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.

+ +

웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.

+ +

이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.

+ +

드래그 이벤트

+ +

HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 {{domxref("DragEvent","drag events")}} 를  {{domxref("MouseEvent","mouse events")}} 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( {{event("drag")}}와 {{event("dragover")}}).

+ +

모든 드래그 이벤트는 글로벌 이벤트 핸들러와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
이벤트이벤트 핸들러설명
{{domxref('Document/drag_이벤트', 'drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}요소나 텍스트 블록을 드래그 할 때 발생한다.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}} +

드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) (드래그 끝내기를 보시오)

+
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} +

드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. (드롭 대상 지정하기를 보시오.)

+
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} +

요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.

+
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} +

드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.

+
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}} +

요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)

+
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} +

사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. (드래그 시작하기를 보시오.)

+
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}} +

요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. (드롭하기를 보시오.)

+
+ +

참고: dragstart와 dragend 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다.

+ +

인터페이스

+ +

HTML 드래그와 드롭 인터페이스는 {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}}, {{domxref("DataTransferItemList")}} 입니다.

+ +

{{domxref("DataTransfer")}} 객체는 드래그 형태나 드래그 데이터 (하나 이상의 아이템), 각 드래그 아이템의 종류 (MIME 종류) 와 같은 드래그 이벤트의 상태를 담고 있습니다. {{domxref("DataTransfer")}} 는 또한 드래그 데이터에 아이템을 추가하거나 제거하는 메소드를 가지고 있습니다. The {{domxref("DragEvent")}} 와 {{domxref("DataTransfer")}} 인터페이스만 있으면 어플리케이션에 HTML 드래그 앤 드롭 기능을 추가할 수 있습니다. 참고로 파이어폭스는 {{domxref("DataTransfer")}}에 {{anch("Gecko specific interfaces","Gecko-specific extensions")}} 와 같은 파이어폭스에서만 동작하는 추가적인 확장을 제공합니다. 

+ +

{{domxref("DataTransfer")}}는 {{domxref("DataTransferItem")}}의 {{domxref("DataTransferItemList","목록")}} 인 {{domxref("DataTransfer.items","items")}} 프로퍼티를 가지고 있습니다. 각 {{domxref("DataTransferItem")}} 는 하나의 드래그 아이템을 나타내고 각 아이템은 데이터의 종류 (string 혹은 file) 를 나타내는 {{domxref("DataTransferItem.kind","kind")}} 프로퍼티와 데이터 아이템의 종류 (MIME 종류) 를 나타내는 {{domxref("DataTransferItem.type","type")}} 프로퍼티를 가집니다. {{domxref("DataTransferItem")}}은 드래그 아이템의 데이터를 가져오는 메소드를 제공합니다.

+ +

{{domxref("DataTransferItemList")}} 객체는 {{domxref("DataTransferItem")}}의 리스트입니다. 이 리스트 객체는 세 개의 메소드 - 드래그 아이템을 리스트에 추가하거나, 리스트에서 아이템을 삭제하거나, 모든 드래그 아이템을 리스트에서 삭제하는 메소드 - 를 가집니다.

+ +

A key difference between the {{domxref("DataTransfer")}} and {{domxref("DataTransferItem")}} interfaces is that the former uses the synchronous {{domxref("DataTransfer.getData","getData()")}} method to access a drag item's data, whereas the later uses the asynchronous {{domxref("DataTransferItem.getAsString","getAsString()")}} method to access a drag item's data.

+ +

{{domxref("DataTransfer")}}와 {{domxref("DataTransferItem")}}의 가장 중요한 차이점은 전자는 드래그 아이템의 데이터에 접근하기 위해 동기 메소드인 {{domxref("DataTransfer.getData","getData()")}}를 사용하는데 반해, 후자는 비동기 메소드인 {{domxref("DataTransferItem.getAsString","getAsString()")}}를 사용한다는 점입니다.

+ +

참고: {{domxref("DragEvent")}} and {{domxref("DataTransfer")}}는 여러 데스크탑 브라우저에서 폭넓게 지원하고 있습니다. 하지만 {{domxref("DataTransferItem")}}와 {{domxref("DataTransferItemList")}}는 제한적으로 사용 가능합니다. 드래그 앤 드롭의 상호 운용성에 대한 더 많은 정보를 찾아보기 위해 {{anch("Interoperability")}}를 보십시오.

+ +

Gecko 한정 인터페이스

+ +

모질라와 파이어폭스는 표준 드래그 앤 드롭 모델에서 제공하지 않는 몇가지 기능들을 추가로 제공합니다. 여러 개의 아이템을 동시에 드래그하거나 파일과 같이 문자열이 아닌 데이터를 드래그 하기 위한 여러 편리한 기능을 제공합니다. 더 많은 정보를 찾아보기 위해, Dragging and Dropping Multiple Items을 보십시오. 덧붙여, 모든 Gecko 한정 프로퍼티나 Gecko 한정 메소드를 찾아보기 위해 {{domxref("DataTransfer")}} 참조 페이지도 보시기 바랍니다.

+ +

기본

+ +

이번 절은 드래그 앤 드롭 기능을 추가하기 위한 기본적인 방법을 요약하고 있습니다. 각 절은 단계를 설명하고, 짧은 코드 예제와 추가적인 정보를 위한 링크를 포함합니다.

+ +

어떤 것이 draggable인지 확인하기

+ +

하나의 요소를 draggable로 만들기 위해서는 {{htmlattrxref("draggable")}}와 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 전역 이벤트 핸들러를 아래 예제 코드와 같이 추가해야합니다.

+ +
function dragstart_handler(ev) {
+ console.log("dragStart");
+ // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+}
+
+
+ +
<script>
+  function dragstart_handler(ev) {
+    // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+    ev.dataTransfer.setData("text/plain", ev.target.id);
+  }
+
+  window.addEventListener('DOMContentLoaded', () => {
+    // id를 통해 element를 가져옵니다.
+    const element = document.getElementById("p1");
+    // 'dragstart' 이벤트 리스터를 추가합니다.
+    element.addEventListener("dragstart", dragstart_handler);
+  });
+</script>
+
+<p id="p1" draggable="true">This element is draggable.</p>
+ +

추가 정보를 위해 draggable attribute reference와 Drag operations guide를 참고하세요.

+ +

드래그 데이터 정의하기

+ +

드래그할 때 자유롭게 데이터 아이템을 포함할 수 있습니다. 각 데이터 아이템은 특정 type의 {{domxref("DOMString","문자열")}}이며, 보통 text/html와 같은 MIME type입니다.

+ +

각 {{domxref("DragEvent","drag event")}} 은 이벤트 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 를 가집니다. 이 프로퍼티는 ({{domxref("DataTransfer")}} 객체) 드래그 데이터를 관리하는 메소드를 가집니다. {{domxref("DataTransfer.setData","setData()")}} 는 아래 코드 예제와 같이 아이템을 드래그 데이터에 추가할 때 사용합니다.

+ +
function dragstart_handler(ev) {
+  // 드래그 데이터를 추가합니다.
+  ev.dataTransfer.setData("text/plain", ev.target.id);
+  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
+  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
+}
+
+ +

드래그 앤 드롭에 사용할 수 있는 공통 데이터 타입 (텍스트, HTML, 링크, 파일 등) 의 목록을 보려면, Recommended Drag Types를 참고하십시오. 드래그 데이터에 대한 추가적인 정보를 위해서는 Drag Data를 참고하십시오.

+ +

드래그 이미지 정의하기

+ +

브라우저는 드래그 하는 동안 마우스 포인터 옆에 나타나는 이미지를 기본적으로 제공합니다. 어플리케이션에서 다른 이미지를 사용하기 원한다면 아래 예제와 같이 {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 사용할 수 있습니다.

+ +
function dragstart_handler(ev) {
+  // 드래그 이미지로 사용할 이미지를 만듭니다.
+  // 참고: "example.gif"를 존재하는 이미지로 바꾸지 않으면 기본 드래그 이미지를 사용합니다.
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+
+ +

드래그 이미지에 대해 더 알아보려면, Setting the Drag Feedback Image를 참고하세요.

+ +

드래그 효과 정의하기

+ +

{{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티는 드래그 앤 드롭 도중에 사용자에게 피드백 (보통 시각적인) 을 제공하기 위해 사용합니다. 브라우저가 드래그 하는 동안 어떤 마우스 포인터를 보여줄 지 결정합니다. 사용자가 마우스 포인터를 대상 드롭 요소에 올려놓으면, 브라우저는 드래그 효과에 적합한 마우스 포인터를 보여줄 것입니다.

+ +

세 개의 효과가 정의되어 있습니다:

+ +

copy는 현재 위치에서 드롭하는 위치로 데이터가 복사될 것을 암시합니다.

+ +

move는 현재 위치에서 드롭하는 위치로 데이터가 이동할 것을 암시합니다.

+ +

link는 드래그하는 위치와 드롭하는 위치 간의 일종의 관계나 연결이 맺어진 다는 것을 암시합니다.

+ +

특정 위치에서는 특정 효과가 허용된다는 것을 알려주기 위해 드래그 하는 도중에 효과가 변할 수 있습니다. 허용되는 경우에만 해당 위치에 드롭할 수 있습니다.

+ +

다음 예제는 어떻게 이 프로퍼티를 사용하는지 보여줍니다.

+ +
function dragstart_handler(ev) {
+  // 드래그 효과를 copy로 지정합니다.
+  ev.dataTransfer.dropEffect = "copy";
+}
+
+ +

더 자세한 설명은 Drag Effects를 참고하세요.

+ +

드롭 지역 정의하기

+ +

기본적으로는 브라우저는 HTML 요소에 뭔가를 드롭했을 때 아무 일도 일어나지 않도록 합니다. 특정 요소가 드롭 지역 혹은 droppable로 만들기 위해서는 해당 요소가 {{domxref("GlobalEventHandlers.ondragover","ondragover")}}와 {{domxref("GlobalEventHandlers.ondrop","ondrop")}} 이벤트 핸들러 속성을 가져야합니다. 아래 예제는 두 요소를 어떻게 사용하고, 각 요소에 포함된 기본적인 이벤트 핸들러를 보여줍니다.

+ +
<script>
+function dragover_handler(ev) {
+ ev.preventDefault();
+ // dropEffect를 move로 설정.
+ ev.dataTransfer.dropEffect = "move";
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
+ const data = ev.dataTransfer.getData("text/plain");
+ ev.target.appendChild(document.getElementById(data));
+}
+</script>
+
+<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
+ +

각 핸들러는 {{domxref("Event.preventDefault","preventDefault()")}} 를 호출해 추가적인 이벤트 (터치 이벤트나 포인터 이벤트) 가 일어나지 않도록 합니다.

+ +

추가적인 정보는, Specifying Drop Targets를 참고하세요.

+ +

드롭 효과 다루기

+ +

{{event("drop")}} 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 {{domxref("DataTransfer.getData","getData()")}}를 사용합니다. 추가로, {{domxref("DataTransfer.dropEffect","dropEffect")}} 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다.

+ +

아래 예제는 드롭 핸들러가 드래그 데이터로부터 드래그하는 요소의 id를 가져와 드래그하는 요소를 드롭하는 요소로 옮기기위해 사용합니다.

+ +
<script>
+function dragstart_handler(ev) {
+ // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+ ev.dataTransfer.setData("application/my-app", ev.target.id);
+ ev.dataTransfer.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
+ // Get the id of the target and add the moved element to the target's DOM
+ const data = ev.dataTransfer.getData("application/my-app");
+ ev.target.appendChild(document.getElementById(data));
+}
+</script>
+
+<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
+<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>
+ +

더 많은 정보를 위해 Performing a Drop을 보십시오.

+ +

드래그가 끝나면

+ +

드래그가 끝나면 드래그한 요소에 {{event("dragend")}} 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. {{event("dragend")}} 이벤트 핸들러는 {{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다.

+ +

드래그 끝을 다루기 위한 더 많은 정보는 Finishing a Drag를 참고하세요. 

+ +

상호 운용성

+ +

DataTransferItem interface's Browser Compatibility table에 나온 대로, 드래그 앤 드롭은 상대적으로 여러 데스크톱 브라우저에서 폭넓게 사용할 수 있습니다 ({{domxref("DataTransferItem")}}는 {{domxref("DataTransferItemList")}} 덜 지원하지만). 또한 모바일 브라우저에서는 매우 한정적으로 사용할 수 있습니다.

+ +

예제와 데모

+ + + +

명세서 

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dnd")}}{{Spec2('HTML WHATWG')}}
+ +

더보기

+ + diff --git "a/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" "b/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" deleted file mode 100644 index 122e835b75..0000000000 --- "a/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Drag Operations -slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations -translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

다음은 드래그 & 드랍(drag & drop) 동작 실행 시 각 단계에 대한 설명입니다.

- -

이 문서에 설명된 드래그 동작은 {{domxref("DataTransfer")}} 인터페이스를 사용합니다. 이 문서에서는 {{domxref("DataTransferItem")}} 인터페이스나 {{domxref("DataTransferItemList")}} 인터페이스를 사용하지 않습니다.

- -

Draggable 속성

- -

웹 페이지 안에서 특정 상황에 기본 드래그(default drag) 행위가 사용될 경우가 있습니다. 선택된 텍스트(text selections), 이미지 또는 링크가 여기에 포함됩니다. 이미지나 링크가 드래그될 때, 이미지나 링크의 URL이 드래그 데이터(drag data)로 설정되고 드래그가 시작됩니다. 다른 요소의 경우, 기본 드래그가 발생할 선택(selections)에 포함되어 있어야 합니다(For other elements, they must be part of a selection for a default drag to occur). 이 효과를 보기 위해서는 웹 페이지의 어떤 영역을 선택하고 마우스를 클릭한 채로 드래그하면 됩니다. 드래그가 발생할 때 마우스 포인터로 선택 영역에 대한 OS별 렌더링이 표시됩니다. 이 행위는 기본 드래그 행위인 경우에만 발생하는 것으로 드래그되는 데이터를 조정할 리스너가 없는 경우에는 작동하지 않습니다.

- -

HTML에서 이미지나 링크 그리고 선택(selections)에 대한 기본 행위를 제외한 나머지 요소는 기본적으로 드래그되지 않습니다. XUL에서는 모든 요소가 드래그 가능합니다.

- -

다른 HTML 요소를 드래그할 수 있게 하려면 세 가지가 이루어져야 합니다:

- - - -

컨텐츠의 일부 영역을 드래그할 수 있도록 만드는 예제는 다음과 같습니다.

- -
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
-  This text <strong>may</strong> be dragged.
-</div>
-
- -

요소를 드래그할 수 있게 하기 위해서는 {{htmlattrxref("draggable")}} 속성이 true로 설정되어야 합니다. 이 속성이 생략되거나 false로 설정되면 해당 요소는 드래그할 수 없으며, 대신 텍스트가 선택됩니다. {{htmlattrxref("draggable")}} 속성은 이미지나 링크를 포함한 어떤 요소에서도 사용할 수 있습니다. 하지만, 이미지나 링크에 대해서는 기본값이 true로 설정되어 있으므로 이들 요소에 대해 드래깅할 수 없게 만들 경우에만 {{htmlattrxref("draggable")}} 속성의 값을 false로 설정하면 됩니다.

- -

어떤 요소가 드래그 가능한 경우, 해당 요소 내의 텍스트나 다른 요소는 마우스를 클릭하고 드래그하는 통상적인 방식으로는 선택할 수 없게 됩니다. 대신, 사용자가 alt 키를 누른채로 마우스로 텍스트를 선택하거나 키보드를 이용해 선택할 수 있습니다.

- -

XUL 요소에 대해서는 {{htmlattrxref("draggable")}} 속성을 사용할 필요가 없으며, 모든 XUL 요소는 드래그가 가능합니다.

- -
<button label="Drag Me" ondragstart="event.dataTransfer.setData('text/plain', 'Drag Me Button');">
-
- -

드래그 작업 시작

- -

이 예제에서는 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 속성을 이용하여 {{event("dragstart")}} 이벤트에 대한 리스너를 추가합니다.

- -
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
-  This text <strong>may</strong> be dragged.
-</div>
-
- -

사용자가 드래그를 시작할 때, {{event("dragstart")}} 이벤트가 발생합니다. 이 예제에서는 드래그할 요소에 {{event("dragstart")}} 리스너가 추가되었습니다; 하지만, 대부분의 다른 이벤트가 그렇듯이 상위 요소에서 드래그 이벤트를 포착할 수 있습니다. {{event("dragstart")}} 이벤트 내에서 아래에서 설명하는 바와 같이 피드백 이미지(feedback image)나 드래그 효과와 그리고 드래그 데이터를 명시할 수 있습니다. 기본 이미지나 드래그 효과는 대부분의 상황에 적합하게 되어 있으며, 드래그 데이터만 필요합니다.

- -

데이터 드래그

- -

모든 {{domxref("DragEvent","drag events")}}는 드래그 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}}라는 속성이 존재합니다 (dataTransfer는 {{domxref("DataTransfer")}} 객체입니다).

- -

드래그가 발생할 때, 데이터는 어떤 것이 드래그되는지를 구분할 수 있는 드래그와 연관되어야 합니다(When a drag occurs, data must be associated with the drag which identifies what is being dragged). 예를 들어, 선택된 텍스트가 드래그될 경우 드래그 데이터 항목에 연관된 데이터는 텍스트 자체입니다. 이와 유사하게, 웹 페이지 상의 링크가 드래그될 경우에 드래그 데이터 항목은 링크의 URL이됩니다.

- -

{{domxref("DataTransfer","drag data")}}는 두 가지 정보를 담고 있는데, 데이터의 유형(또는 형식)과 데이터 값입니다. 형식은 (텍스트 데이터에 해당하는 text/plain과 같은) 형식 문자열(type string) 값이고, 값은 텍스트의 문자열입니다. 드래그가 시작되면, 데이터와 형식을 제공하는 데이터를 추가해야 합니다. 드래그되는 동안, {{event("dragenter")}} 이벤트와 {{event("dragover")}} 이벤트에 대한 이벤트 리스너에서 드래그되는 데이터의 형식을 사용해 드랍이 허용되는지 확인할 수 있습니다. 예를 들어, 링크가 허용되는 드랍 대상(drop target)은 text/uri-list 형식의 링크인지 확인합니다. 드랍 이벤트 동안 리스너는 드래그 대상(being dragged)으로부터 데이터를 추출해 드랍되는 위치에 삽입합니다.

- -

{{domxref("DataTransfer","drag data's")}}의 {{domxref("DataTransfer.types","types")}} 속성은 text/plain or image/jpeg과 같은 {{domxref("DOMString")}} MIME-type 목록을 반환홥니다. 여러분은 자신만의 형식을 만들 수도 있습니다. 가장 흔하게 사용되는 형식은 권장 드래그 데이터 형식(Recommended Drag Types)에서 소개하고 있습니다.

- -

드래그에는 여러 가지 다른 형식의 데이터 항목이 포함될 수 있습니다. 이를 통해 사용자 정의 형식(custom types)과 같은 보다 특정한 형식의 데이터를 주로 제공하지만, 특정한 유형을 지원하지 않는 드롭 대상에 대해 대체 데이터(fallback data)를 제공할 수도 있습니다. text/plain 형식의 일반적인 텍스트 데이터가 가장 단순한 형식의 데이터일 것입니다.이 형식의 데이터는 단순히 텍스트 형식으로 표시될 것입니다.

- -

{{domxref("DragEvent.dataTransfer","dataTransfer")}} 내에 드래그 데이터 항목(drag data item)을 설정하기 위해서는 {{domxref("DataTransfer.setData","setData()")}} 메서드를 이용합니다. 이 메서드는 각각 데이터 형식과 데이터 값인 두 개의 인자가 필요합니다. 예를 들어:

- -
event.dataTransfer.setData("text/plain", "Text to drag");
-
- -

이 경우, 데이터 값은 "Text to drag"이고 형식은 text/plain입니다.

- -

여러 형식의 데이터를 제공할 수도 있습니다. 이를 위해서는 서로 다른 형식으로 {{domxref("DataTransfer.setData","setData()")}} 메서드를 여러 번 호출합니다. 이 때, 가장 세부적인 형식에서 덜 세부적인 형식의 순으로 호출해야 합니다.

- -
var dt = event.dataTransfer;
-dt.setData("application/x-bookmark", bookmarkString);
-dt.setData("text/uri-list", "http://www.mozilla.org");
-dt.setData("text/plain", "http://www.mozilla.org");
-
- -

여기서 데이터는 세가지 유형으로 추가됩니다. 첫번째 형식의 'application2x-bookmark'는 사용자 지정 형식입니다. 다른 응용 프로그램에서는 이 형식을 지원하지 않지만 동일한 사이트 또는 응용 프로그램의 영역 간 드래그할 경우, 이 사용자 지정 형식을 사용할 수 있습니다. 또한 다른 형식의 데이터를 제공함으로써 덜 세부적인 형태로 다른 애플리케이션으로의 드래그도 지원할 수 있습니다. 다른 형식이 하나의 URL또는 텍스트 형식만 제공할 때, 'application2x-bookmark' 형식은 해당 어플리케이션 내에서 사용될 경우 더 상세한 데이터를 제공할 수 있습니다

- -

이 예제에서 text/uri-list와 text/plain은 동일한 데이터를 담고있음에 주목하시기 바랍니다. 이렇게 해도 되지만, 꼭 이럴 필요는 없습니다.

- -

동일한 형식으로 데이터를 두 번 추가하려고 하면 새로운 데이터가 기존 데이터를 대체하지만 형식 목록 내에서 이전 데이터(old data)와 같은 위치에 있게 됩니다.

- -

{{domxref("DataTransfer.clearData","clearData()")}} 메서드를 이용해 해당 데이터를 지울 수 있는데, 이 메서드는 지우고자 하는 데이터의 형식을 인자로 가집니다.

- -
event.dataTransfer.clearData("text/uri-list");
-
- -

{{domxref("DataTransfer.clearData","clearData()")}} 메서드에 대한 형식 인자는 선택적입니다. 형식을 지정하지 않으면 모든 형식과 연관된 데이터가 지워집니다. 드래그할 때, 드래그 데이터 항목이 없거나 이후에 모든 항목이 삭제되면 드래그가 발생하지 않습니다.

- -

드래그 피드백 이미지 설정

- -

드래그가 발생할 때, 드래그 대상("{{event("dragstart")}}" 이벤트가 발생한 요소)으로부터 반투명한 이미지가 생성되고 드래그 하는 동안 마우스 포인터를 따라 움직입니다. 이 이미지는 자동으로 생성되며, 따로 생성할 필요가 없습니다. 하지만, {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 이용해 사용자 정의 드래그 피드백 이미지를 지정할 수 있습니다.

- -
event.dataTransfer.setDragImage(image, xOffset, yOffset);
-
- -

세 개의 인자는 필수입니다. 첫 번째 인자는 이미지에 대한 참조(reference)입니다. 이 참조는 일반적으로 이미지에 대한 참조이나 캔버스(canvas)나 다른 요소를 지정할 수도 있습니다. 피드백 이미지는 단순하게 화면에 표시된 이미지의 모양으로부터 생성되지만, 이미지의 경우 원래 크기로 그려집니다. {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드의 두 번째와 세 번째 인자는 마우스 포인터에 대해 상대적인 옵셋(offsets)으로 이미지가 나타날 위치를 의미합니다.

- -

문서 내에 있지 않은 이미지나 캔버스를 사용하는 것 역시 가능합니다. 이 기법은 다음의 예제와 같이 캔버스 요소를 이용해 드래그 이미지를 사용자 정의 형태로 그리고자 할 때 유용합니다:

- -
function dragWithCustomImage(event) {
-  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
-  canvas.width = canvas.height = 50;
-
-  var ctx = canvas.getContext("2d");
-  ctx.lineWidth = 4;
-  ctx.moveTo(0, 0);
-  ctx.lineTo(50, 50);
-  ctx.moveTo(0, 50);
-  ctx.lineTo(50, 0);
-  ctx.stroke();
-
-  var dt = event.dataTransfer;
-  dt.setData('text/plain', 'Data to Drag');
-  dt.setDragImage(canvas, 25, 25);
-}
-
- -

이 예제에서, 드래그 이미지를 표시할 캔버스를 하나 생성합니다. 캔버스는 너비가 와 높이가 모두 50 픽셀이고, 마우스 포인터가 이미지의 중앙에 위치하도록 옵셋(offsets)을 너비와 높이의 절반(25)으로 설정했습니다.

- -

{{h2_gecko_minversion("Using XUL panels as drag images", "9.0")}}

- -

Gecko 개발자일 경우 (Mozilla 어플리케이션 개발자든 add-on 개발자든 상관 없이), Gecko 9.0 {{geckoRelease("9.0")}}에 드래그 피드백 이미지로 XUL {{XULElem("panel")}} 요소를 사용할 수 있도록 하는 지원이 추가되었습니다. 간단히 {{XULElem("panel")}} 요소를 {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드로 전달하기만 하면 됩니다.

- -

다음 XUL {{XULElem("panel")}}를 살펴보시기 바랍니다:

- -
<panel id="panel" style="opacity: 0.6">
-  <description id="pb">Drag Me</description>
-</panel>
-
-<vbox align="start" style="border: 1px solid black;" ondragstart="startDrag(event)">
-  <description>Drag Me</description>
-</vbox>
-
- -

위의 예에서 사용자가 {{XULElem("vbox")}}를 클릭하고 드래그하기 시작하면, 아래의 startDrag() 함수가 호출됩니다.

- -
function startDrag(event) {
-  event.dataTransfer.setData("text/plain", "<strong>Body</strong>");
-  event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20);
-}
-
- -

이 함수는 해당 패널을 드래그 이미지로 사용하고, HTML 형식의 "<strong>Body</strong>"을 데이터로 가집니다. 텍스트 편집기에 패널을 드랍하면 "Body"라는 텍스트가 드랍된 위치에 삽입됩니다.

- -

드래그 효과

- -

드래그할 때, 여러 가지 작업이 수행될 수 있습니다. copy 작업은 드래그되는 데이터가 현재 위치에서 드랍되는 위치로 복사될 것임을 나타냅니다. move 작업은 드래그되는 데이터가 이동될 것임을 나타내고, link 작업은 특정 형태의 관계(relationship)나 연결(connection)이 소스와 드랍되는 위치 사이에 생성될 것임을 나타냅니다.

- -

드래그 소스(drag source)에 대해 {{event("dragstart")}} 이벤트 리스너의 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 설정함으로써, 이 세 가지 작업 중 어떤 것을 허용할 것인지를 지정할 수 있습니다.

- -
event.dataTransfer.effectAllowed = "copy";
-
- -

이 예제에서는, 복사만 허용됩니다. 다양한 방식으로 값을 조합할 수 있습니다:

- -
-
none
-
어떤 작업도 허용하지 않음.
-
copy
-
복사만 허용
-
move
-
이동만 허용
-
link
-
연결만 허용
-
copyMove
-
복사 또는 이동만 허용
-
copyLink
-
복사 또는 연결만 허용
-
linkMove
-
연결 또는 이동만 허용
-
all
-
복사, 이동 및 연결 모두 허용
-
- -

이 값들은 반드시 위에 나열한 것과 정확하게 일치해야 함에 유의하시기 바랍니다. 예를 들어, {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 copyMove로 설정하면 복사와 이동 작업이 허용되나 연결(link) 작업은 금지됩니다. {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 변경하지 않으면 'all' 값과 마찬가지로 어떤 작업도 허용됩니다. 따라서, 특정한 유형의 작업을 제외시키고 싶지 않다면 이 속성을 조정할 필요가 없습니다.

- -

드래그 작업 중에 {{event("dragenter")}} 또는 {{event("dragover")}} 이벤트에 대한 리스너는 어떤 작업이 허용되어 있는지 알기 위해 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 확인할 수 있습니다. 관련된 속성으로, {{domxref("DataTransfer.dropEffect","dropEffect")}}는 이들 이벤트 중 하나에서 수행되어야 하는 단일 작업을 지정하기 위해 설정되어야 할 속성입니다. {{domxref("DataTransfer.dropEffect","dropEffect")}}에 유효한 값은 none, copy, move, 또는 link입니다. 이 속성에 값의 조합은 허용되지 않습니다.

- -

{{event("dragenter")}}나 {{event("dragover")}} 이벤트가 발생하면 사용자가 요청하는 효과로 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성이 초기화됩니다. 사용자는 한정자 키를 눌러 원하는 효과로 수정할 수 있습니다. 플랫폼에 따라 정확한 키가 달라질 수 있지만, 일반적으로 쉬프트(Shift)와 컨트롤(Control) 키가 복사하기, 이동하기, 연결하기 간 전환에 사용됩니다. 마우스 포인터를 원하는 작업을 나타내도록 변경할 수 있습니다; 예를 들어, 복사 작업에 대해서는 마우스 포인터 옆에 더하기 기호가 표시된 커서가 나타날 수 있습니다.

- -

{{event("dragenter")}} 또는 {{event("dragover")}} 이벤트가 발생하는 동안 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 변경할 수 있는데, 예를 들자면, 특정 작업만 지원되는 특수한 드랍 대상(drop target)일 경우가 그렇습니다. {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 수정하여 사용자 효과(user effect)를 오버라이드하여 특정한 드랍 작업이 발생하게 할 수 있습니다. 이 효과는 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성에 열거된 것 중의 하나 이어야 함에 유의하시기 바랍니다. 그렇지 않을 경우, 허용되는 대체 값으로 설정되게 됩니다.

- -
event.dataTransfer.dropEffect = "copy";
-
- -

이 예제에서는 복사가 수행될 효과입니다.

- -

이 경우에는 이벤트를 취소하지 않는 것이 좋지만 none 값을 사용하여 이 위치에서 드롭이 허용되지 않음을 나타낼 수 있습니다.

- -

{{event("drop")}}와 {{event("dragend")}} 이벤트 내에서{{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 확인하면 최종적으로 어떤 효과가 선택되었는지를 알 수 있습니다. 선택된 효과가 "move"였다면, {{event("dragend")}} 이벤트 내에서 드래그 소스의 원본 데이터가 삭제되어야 합니다.

- -

드랍 대상 지정하기

- -

{{event("dragenter")}}와 {{event("dragover")}} 이벤트에 대한 리스너는 유효한 드랍 대상인지, 즉 드래그된 아이템이 드랍될 수 있는 곳인지를 나타내는데 사용할 수 있습니다. 웹 페이지 또는 어플리케이션의 대부분의 영역은 데이터를 드랍할 수 있는 유효한 영역이 아닙니다. 따라서, 이들 이벤트에 대한 기본적인 처리는 드랍을 허용하지 않는 것입니다.

- -

드랍을 허용하길 원한다면, 해당 이벤트를 취소하는 기본 처리를 막아야 합니다. 속성 정의(attribute-defined) 이벤트 리스너로부터 false를 반환 받거나 해당 이벤트의 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하면 됩니다. 후자는 별도의 스크립트에 정의된 함수에 더 적합합니다.

- -
<div ondragover="return false">
-<div ondragover="event.preventDefault()">
-
- -

{{event("dragenter")}} and {{event("dragover")}} 두 이벤트 모두에서 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하는 것은 그 위치에 드랍이 허용되는 것을 나타냅니다. 하지만, 일반적으로 특정한 상황에서만, 예를 들자면 링크가 드래그될 때만 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하길 원할 것입니다. 이렇게 하기 위해서는 조건을 확인하여 조건이 충족될 때에만 해당 이벤트를 취소하는 함수를 호출합니다. 조건이 충족되지 않을 경우, 이벤트를 취소하지 않으면 사용자가 마우스 버튼을 놓더라도 드랍은 발생하지 않을 것입니다.

- -

data transfer의 드래그 데이터 형식에 따라 드랍을 허용하거나 기각하는 경우가 대부분일 것입니다(예를 들어, 이미지나 링크를 허용하거나 둘 다 허용하는 경우). 이렇게 하기 위해서는 이벤트의 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 속성의 {{domxref("DataTransfer.types","types")}} 속성을 확인합니다. {{domxref("DataTransfer.types","types")}} 속성은 드래그가 시작될 때 추가된 형식 문자열의 배열을 반환하는데, 그 순서는 가장 세부적인 형식에서 가장 덜 세부적인 형식의 순서입니다.

- -
function contains(list, value) {
-    for( var i = 0; i < list.length; ++i ) {
-        if(list[i] === value) return true;
-    }
-    return false;
-}
-
-function doDragOver(event) {
-  var isLink = contains( event.dataTransfer.types, "text/uri-list");
-  if (isLink) {
-    event.preventDefault();
-  }
-}
- -

이 예제에서 형식 목록 내에 text/uri-list 형식이 존재하는지 확인하기 위해 contains 메서드를사용합니다. 존재할 경우에는 드랍을 허용하기 위해 이벤트가 취소될 것입니다. 드래그 데이터가 링크를 포함하지 않았다면, 해당 이벤트는 취소되지 않을 것이고 그 위치에 대한 드랍이 발생하지 않을 것입니다.

- -

수행되어야 하는 작업 형식을 더 세부적으로 설정하길 원한다면, {{domxref("DataTransfer.effectAllowed","effectAllowed")}}나 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 각각 설정하거나 동시에 둘 다를 설정하고 싶을 것입니다. 두 속성을 변경하더라도 해당 이벤트를 취소하지 않으면 아무런 영향이 없을 것입니다.

- -

Updates to DataTransfer.types

- -

최신 스펙에는 {{domxref("DataTransfer.types")}}이 {{domxref("DOMStringList")}}(이 속성은 Fiirefox 52 이상에서 지원됨)이 아닌 {{domxref("DOMString")}} 형식의 고정배열(fronzen array)을 반환하도록 명시하고 있음에 유의하시기 바랍니다.

- -

그 결과로, contains 메서드는 해당 속성에 대해 더 이상 동작하지 않으며; 특정 형식의 데이터가 제공되는지 확인하기 위해서는 다음 코드와 같이 includes 메서드를 사용해야 합니다:

- -
if ([...event.dataTransfer.types].includes('text/html')) {
-  // Do something
-}
- -

일부 특성 검출(feature detection)을 이용해 types에 대해 어떤 메서드가 지원되는지를 판별하고 적절하게 코드를 실행할 수 있습니다.

- -

Drop Feedback

- -

There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property. Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.

- -

However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the -moz-drag-over CSS pseudoclass on a drop target.

- -
.droparea:-moz-drag-over {
-  border: 1px solid black;
-}
-
- -

In this example, the element with the class droparea will receive a 1 pixel black border while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the {{event("dragenter")}} event. Note that you must cancel the {{event("dragenter")}} event for this pseudoclass to apply, as this state is not checked for the {{event("dragover")}} event.

- -

For more complex visual effects, you can also perform other operations during the {{event("dragenter")}} event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an image or separator element, for example, and simply insert it into the document during the {{event("dragenter")}} event.

- -

The {{event("dragover")}} event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a {{event("dragover")}} event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.

- -

Finally, the {{event("dragleave")}} event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the -moz-drag-over pseudoclass will be removed automatically. The {{event("dragleave")}} event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.

- -

Performing a Drop

- -

When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last {{event("dragenter")}} or {{event("dragover")}} event, and then the drop will be successful, and a {{event("drop")}} event will fire at the target. Otherwise, the drag operation is cancelled, and no {{event("drop")}} event is fired.

- -

During the {{event("drop")}} event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.

- -

As with all drag-related events, the event's {{domxref("DataTransfer","dataTransfer")}} property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.

- -
function onDrop(event) {
-  var data = event.dataTransfer.getData("text/plain");
-  event.target.textContent = data;
-  event.preventDefault();
-}
-
- -

The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a {{event("dragover")}} event.

- -

In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element.

- -

In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop so that the default browser handling does not handle the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.

- -

You can retrieve other types of data as well. If the data is a link, it should have the type text/uri-list. You could then insert a link into the content.

- -
function doDrop(event) {
-  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
-  for (let line of lines) {
-    if (line.startsWith("#"))
-      continue;
-
-    let link = document.createElement("a");
-    link.href = line;
-    link.textContent = line;
-    event.target.appendChild(link);
-  }
-  event.preventDefault();
-}
-
- -

This example inserts a link from the dragged data. As you might be able to guess from the name, the text/uri-list type actually may contain a list of URLs, each on a separate line. In this code, we use the split to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.

- -

For simple cases, you can use the special type URL just to retrieve the first valid URL in the list. For example:

- -
var link = event.dataTransfer.getData("URL");
-
- -

This eliminates the need to check for comments or iterate through lines yourself; however, it is limited to only the first URL in the list.

- -

The URL type is a special type used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.

- -

Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are supported by a drop target.

- -

The following example returns the data associated with the best-supported format:

- -
function doDrop(event) {
-  var types = event.dataTransfer.types;
-  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
-  types = supportedTypes.filter((value) => types.includes(value));
-  if (types.length)
-    var data = event.dataTransfer.getData(types[0]);
-  event.preventDefault();
-}
-
- -

This method relies on JavaScript functionality available in Firefox 3. However, the code could be adjusted to support other platforms.

- -

Finishing a Drag

- -

Once the drag is complete, a {{event("dragend")}} event is fired at the source of the drag (the same element that received the {{event("dragstart")}} event). This event will fire if the drag was successful[1] or if it was cancelled. However, you can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine what drop operation occurred.

- -

If the {{domxref("DataTransfer.dropEffect","dropEffect")}} property has the value none during a {{event("dragend")}}, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if it was successful.

- -

A drop can occur inside the same window or over another application. The {{event("dragend")}} event will always fire regardless. The event's {{domxref("MouseEvent.screenX","screenX")}} and {{domxref("MouseEvent.screenY","screenY")}} properties will be set to the screen coordinate where the drop occurred.

- -

After the {{event("dragend")}} event has finished propagating, the drag and drop operation is complete.

- -

[1] In Gecko, {{event("dragend")}} is not dispatched if the source node is moved or removed during the drag (e.g. on drop or {{event("dragover")}}).  bug 460801

- -

See also

- - diff --git "a/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" "b/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" deleted file mode 100644 index 70a4295284..0000000000 --- "a/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: HTML 드래그 앤 드롭 API -slug: Web/API/HTML_드래그_앤_드롭_API -tags: - - HTML5 - - XUL - - 가이드 - - 개요 - - 고급 - - 드래그 앤 드롭 - - 이벤트 -translation_of: Web/API/HTML_Drag_and_Drop_API ---- -

{{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}

- -

HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 draggable 요소를 마우스로 선택해 droppable 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.

- -

웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.

- -

이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.

- -

드래그 이벤트

- -

HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 {{domxref("DragEvent","drag events")}} 를  {{domxref("MouseEvent","mouse events")}} 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( {{event("drag")}}와 {{event("dragover")}}).

- -

모든 드래그 이벤트는 글로벌 이벤트 핸들러와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
이벤트이벤트 핸들러설명
{{domxref('Document/drag_이벤트', 'drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}요소나 텍스트 블록을 드래그 할 때 발생한다.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}} -

드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) (드래그 끝내기를 보시오)

-
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} -

드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. (드롭 대상 지정하기를 보시오.)

-
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} -

요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.

-
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} -

드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.

-
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}} -

요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)

-
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} -

사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. (드래그 시작하기를 보시오.)

-
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}} -

요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. (드롭하기를 보시오.)

-
- -

참고: dragstart와 dragend 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다.

- -

인터페이스

- -

HTML 드래그와 드롭 인터페이스는 {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}}, {{domxref("DataTransferItemList")}} 입니다.

- -

{{domxref("DataTransfer")}} 객체는 드래그 형태나 드래그 데이터 (하나 이상의 아이템), 각 드래그 아이템의 종류 (MIME 종류) 와 같은 드래그 이벤트의 상태를 담고 있습니다. {{domxref("DataTransfer")}} 는 또한 드래그 데이터에 아이템을 추가하거나 제거하는 메소드를 가지고 있습니다. The {{domxref("DragEvent")}} 와 {{domxref("DataTransfer")}} 인터페이스만 있으면 어플리케이션에 HTML 드래그 앤 드롭 기능을 추가할 수 있습니다. 참고로 파이어폭스는 {{domxref("DataTransfer")}}에 {{anch("Gecko specific interfaces","Gecko-specific extensions")}} 와 같은 파이어폭스에서만 동작하는 추가적인 확장을 제공합니다. 

- -

{{domxref("DataTransfer")}}는 {{domxref("DataTransferItem")}}의 {{domxref("DataTransferItemList","목록")}} 인 {{domxref("DataTransfer.items","items")}} 프로퍼티를 가지고 있습니다. 각 {{domxref("DataTransferItem")}} 는 하나의 드래그 아이템을 나타내고 각 아이템은 데이터의 종류 (string 혹은 file) 를 나타내는 {{domxref("DataTransferItem.kind","kind")}} 프로퍼티와 데이터 아이템의 종류 (MIME 종류) 를 나타내는 {{domxref("DataTransferItem.type","type")}} 프로퍼티를 가집니다. {{domxref("DataTransferItem")}}은 드래그 아이템의 데이터를 가져오는 메소드를 제공합니다.

- -

{{domxref("DataTransferItemList")}} 객체는 {{domxref("DataTransferItem")}}의 리스트입니다. 이 리스트 객체는 세 개의 메소드 - 드래그 아이템을 리스트에 추가하거나, 리스트에서 아이템을 삭제하거나, 모든 드래그 아이템을 리스트에서 삭제하는 메소드 - 를 가집니다.

- -

A key difference between the {{domxref("DataTransfer")}} and {{domxref("DataTransferItem")}} interfaces is that the former uses the synchronous {{domxref("DataTransfer.getData","getData()")}} method to access a drag item's data, whereas the later uses the asynchronous {{domxref("DataTransferItem.getAsString","getAsString()")}} method to access a drag item's data.

- -

{{domxref("DataTransfer")}}와 {{domxref("DataTransferItem")}}의 가장 중요한 차이점은 전자는 드래그 아이템의 데이터에 접근하기 위해 동기 메소드인 {{domxref("DataTransfer.getData","getData()")}}를 사용하는데 반해, 후자는 비동기 메소드인 {{domxref("DataTransferItem.getAsString","getAsString()")}}를 사용한다는 점입니다.

- -

참고: {{domxref("DragEvent")}} and {{domxref("DataTransfer")}}는 여러 데스크탑 브라우저에서 폭넓게 지원하고 있습니다. 하지만 {{domxref("DataTransferItem")}}와 {{domxref("DataTransferItemList")}}는 제한적으로 사용 가능합니다. 드래그 앤 드롭의 상호 운용성에 대한 더 많은 정보를 찾아보기 위해 {{anch("Interoperability")}}를 보십시오.

- -

Gecko 한정 인터페이스

- -

모질라와 파이어폭스는 표준 드래그 앤 드롭 모델에서 제공하지 않는 몇가지 기능들을 추가로 제공합니다. 여러 개의 아이템을 동시에 드래그하거나 파일과 같이 문자열이 아닌 데이터를 드래그 하기 위한 여러 편리한 기능을 제공합니다. 더 많은 정보를 찾아보기 위해, Dragging and Dropping Multiple Items을 보십시오. 덧붙여, 모든 Gecko 한정 프로퍼티나 Gecko 한정 메소드를 찾아보기 위해 {{domxref("DataTransfer")}} 참조 페이지도 보시기 바랍니다.

- -

기본

- -

이번 절은 드래그 앤 드롭 기능을 추가하기 위한 기본적인 방법을 요약하고 있습니다. 각 절은 단계를 설명하고, 짧은 코드 예제와 추가적인 정보를 위한 링크를 포함합니다.

- -

어떤 것이 draggable인지 확인하기

- -

하나의 요소를 draggable로 만들기 위해서는 {{htmlattrxref("draggable")}}와 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 전역 이벤트 핸들러를 아래 예제 코드와 같이 추가해야합니다.

- -
function dragstart_handler(ev) {
- console.log("dragStart");
- // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
- ev.dataTransfer.setData("text/plain", ev.target.id);
-}
-
-
- -
<script>
-  function dragstart_handler(ev) {
-    // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
-    ev.dataTransfer.setData("text/plain", ev.target.id);
-  }
-
-  window.addEventListener('DOMContentLoaded', () => {
-    // id를 통해 element를 가져옵니다.
-    const element = document.getElementById("p1");
-    // 'dragstart' 이벤트 리스터를 추가합니다.
-    element.addEventListener("dragstart", dragstart_handler);
-  });
-</script>
-
-<p id="p1" draggable="true">This element is draggable.</p>
- -

추가 정보를 위해 draggable attribute reference와 Drag operations guide를 참고하세요.

- -

드래그 데이터 정의하기

- -

드래그할 때 자유롭게 데이터 아이템을 포함할 수 있습니다. 각 데이터 아이템은 특정 type의 {{domxref("DOMString","문자열")}}이며, 보통 text/html와 같은 MIME type입니다.

- -

각 {{domxref("DragEvent","drag event")}} 은 이벤트 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 를 가집니다. 이 프로퍼티는 ({{domxref("DataTransfer")}} 객체) 드래그 데이터를 관리하는 메소드를 가집니다. {{domxref("DataTransfer.setData","setData()")}} 는 아래 코드 예제와 같이 아이템을 드래그 데이터에 추가할 때 사용합니다.

- -
function dragstart_handler(ev) {
-  // 드래그 데이터를 추가합니다.
-  ev.dataTransfer.setData("text/plain", ev.target.id);
-  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
-  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
-}
-
- -

드래그 앤 드롭에 사용할 수 있는 공통 데이터 타입 (텍스트, HTML, 링크, 파일 등) 의 목록을 보려면, Recommended Drag Types를 참고하십시오. 드래그 데이터에 대한 추가적인 정보를 위해서는 Drag Data를 참고하십시오.

- -

드래그 이미지 정의하기

- -

브라우저는 드래그 하는 동안 마우스 포인터 옆에 나타나는 이미지를 기본적으로 제공합니다. 어플리케이션에서 다른 이미지를 사용하기 원한다면 아래 예제와 같이 {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 사용할 수 있습니다.

- -
function dragstart_handler(ev) {
-  // 드래그 이미지로 사용할 이미지를 만듭니다.
-  // 참고: "example.gif"를 존재하는 이미지로 바꾸지 않으면 기본 드래그 이미지를 사용합니다.
-  var img = new Image();
-  img.src = 'example.gif';
-  ev.dataTransfer.setDragImage(img, 10, 10);
-}
-
- -

드래그 이미지에 대해 더 알아보려면, Setting the Drag Feedback Image를 참고하세요.

- -

드래그 효과 정의하기

- -

{{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티는 드래그 앤 드롭 도중에 사용자에게 피드백 (보통 시각적인) 을 제공하기 위해 사용합니다. 브라우저가 드래그 하는 동안 어떤 마우스 포인터를 보여줄 지 결정합니다. 사용자가 마우스 포인터를 대상 드롭 요소에 올려놓으면, 브라우저는 드래그 효과에 적합한 마우스 포인터를 보여줄 것입니다.

- -

세 개의 효과가 정의되어 있습니다:

- -

copy는 현재 위치에서 드롭하는 위치로 데이터가 복사될 것을 암시합니다.

- -

move는 현재 위치에서 드롭하는 위치로 데이터가 이동할 것을 암시합니다.

- -

link는 드래그하는 위치와 드롭하는 위치 간의 일종의 관계나 연결이 맺어진 다는 것을 암시합니다.

- -

특정 위치에서는 특정 효과가 허용된다는 것을 알려주기 위해 드래그 하는 도중에 효과가 변할 수 있습니다. 허용되는 경우에만 해당 위치에 드롭할 수 있습니다.

- -

다음 예제는 어떻게 이 프로퍼티를 사용하는지 보여줍니다.

- -
function dragstart_handler(ev) {
-  // 드래그 효과를 copy로 지정합니다.
-  ev.dataTransfer.dropEffect = "copy";
-}
-
- -

더 자세한 설명은 Drag Effects를 참고하세요.

- -

드롭 지역 정의하기

- -

기본적으로는 브라우저는 HTML 요소에 뭔가를 드롭했을 때 아무 일도 일어나지 않도록 합니다. 특정 요소가 드롭 지역 혹은 droppable로 만들기 위해서는 해당 요소가 {{domxref("GlobalEventHandlers.ondragover","ondragover")}}와 {{domxref("GlobalEventHandlers.ondrop","ondrop")}} 이벤트 핸들러 속성을 가져야합니다. 아래 예제는 두 요소를 어떻게 사용하고, 각 요소에 포함된 기본적인 이벤트 핸들러를 보여줍니다.

- -
<script>
-function dragover_handler(ev) {
- ev.preventDefault();
- // dropEffect를 move로 설정.
- ev.dataTransfer.dropEffect = "move";
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
- const data = ev.dataTransfer.getData("text/plain");
- ev.target.appendChild(document.getElementById(data));
-}
-</script>
-
-<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
- -

각 핸들러는 {{domxref("Event.preventDefault","preventDefault()")}} 를 호출해 추가적인 이벤트 (터치 이벤트나 포인터 이벤트) 가 일어나지 않도록 합니다.

- -

추가적인 정보는, Specifying Drop Targets를 참고하세요.

- -

드롭 효과 다루기

- -

{{event("drop")}} 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 {{domxref("DataTransfer.getData","getData()")}}를 사용합니다. 추가로, {{domxref("DataTransfer.dropEffect","dropEffect")}} 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다.

- -

아래 예제는 드롭 핸들러가 드래그 데이터로부터 드래그하는 요소의 id를 가져와 드래그하는 요소를 드롭하는 요소로 옮기기위해 사용합니다.

- -
<script>
-function dragstart_handler(ev) {
- // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
- ev.dataTransfer.setData("application/my-app", ev.target.id);
- ev.dataTransfer.dropEffect = "move";
-}
-function dragover_handler(ev) {
- ev.preventDefault();
- ev.dataTransfer.dropEffect = "move"
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
- // Get the id of the target and add the moved element to the target's DOM
- const data = ev.dataTransfer.getData("application/my-app");
- ev.target.appendChild(document.getElementById(data));
-}
-</script>
-
-<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
-<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>
- -

더 많은 정보를 위해 Performing a Drop을 보십시오.

- -

드래그가 끝나면

- -

드래그가 끝나면 드래그한 요소에 {{event("dragend")}} 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. {{event("dragend")}} 이벤트 핸들러는 {{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다.

- -

드래그 끝을 다루기 위한 더 많은 정보는 Finishing a Drag를 참고하세요. 

- -

상호 운용성

- -

DataTransferItem interface's Browser Compatibility table에 나온 대로, 드래그 앤 드롭은 상대적으로 여러 데스크톱 브라우저에서 폭넓게 사용할 수 있습니다 ({{domxref("DataTransferItem")}}는 {{domxref("DataTransferItemList")}} 덜 지원하지만). 또한 모바일 브라우저에서는 매우 한정적으로 사용할 수 있습니다.

- -

예제와 데모

- - - -

명세서 

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dnd")}}{{Spec2('HTML WHATWG')}}
- -

더보기

- - diff --git a/files/ko/web/api/htmlelement/accesskey/index.html b/files/ko/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..0fc48bd749 --- /dev/null +++ b/files/ko/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,35 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - Access Keys + - DOM + - Hotkeys + - NeedsContent + - 레퍼런스 + - 속성 + - 엘리먼트 + - 키보드 단축키 +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +

Element.accessKey 속성은 주어진 사용자가 눌러 주어진 엘리먼트로 이동할 수 있는 키 입력 세트입니다.

+ +
+

Element.accessKey 속성은 브라우저에 이미 바인딩 된 키와의 여러 충돌로 인해 거의 사용되지 않습니다. 이를 해결하기 위해, 브라우저는 다른 "적절한" 키(예, Alt + accesskey)와 함께 키가 눌렸을 때동작하도록 구현하였습니다.

+
+ +

브라우저 호환성

+ + + +

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

+ +

함께 보기

+ + diff --git a/files/ko/web/api/htmlelement/dataset/index.html b/files/ko/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 2b2a891dca..0000000000 --- a/files/ko/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - HTMLOrForeignElement - - Property - - Read-only - - Reference -translation_of: 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/web/api/htmlelement/innertext/index.html b/files/ko/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..414fab5c00 --- /dev/null +++ b/files/ko/web/api/htmlelement/innertext/index.html @@ -0,0 +1,88 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +tags: + - API + - DOM + - HTMLElement + - Property + - Reference +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLElement")}} 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.

+ +
+

참고: innerText는 {{domxref("Node.textContent")}}와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.

+
+ +

구문

+ +
const renderedText = htmlElement.innerText
+htmlElement.innerText = string
+
+ +

값

+ +

요소의 렌더링 된 텍스트 콘텐츠를 나타내는 {{domxref("DOMString")}}. 요소 자체가 렌더링 중이 아니라면 {{domxref("Node.textContent")}} 속성의 값과 동일합니다.

+ +

예제

+ +

다음 예제는 innerText와 {{domxref("Node.textContent")}}를 비교합니다. innerText가 {{htmlElement("br")}} 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.

+ +

HTML

+ +
<h3>원본 요소:</h3>
+<p id="source">
+  <style>#source { color: red; }</style>
+아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
+  <span style="display:none">숨겨진 글</span>
+</p>
+<h3>textContent 결과:</h3>
+<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
+<h3>innerText 결과:</h3>
+<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
+ +

JavaScript

+ +
const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.innerHTML = source.textContent;
+innerTextOutput.innerHTML = source.innerText;
+ +

결과

+ +

{{EmbedLiveSample("예제", 700, 450)}}

+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/web/api/htmlelement/style/index.html b/files/ko/web/api/htmlelement/style/index.html deleted file mode 100644 index 5976dd66bc..0000000000 --- a/files/ko/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: element.style -slug: Web/API/HTMLElement/style -tags: - - API - - HTML DOM - - HTMLElement - - Property - - Reference - - Style -translation_of: 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/web/api/htmlelement/tabindex/index.html b/files/ko/web/api/htmlelement/tabindex/index.html deleted file mode 100644 index 7cbb0fa1f0..0000000000 --- a/files/ko/web/api/htmlelement/tabindex/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: element.tabIndex -slug: Web/API/HTMLElement/tabIndex -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: 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/web/api/htmlmediaelement/abort_event/index.html b/files/ko/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..2278a24c24 --- /dev/null +++ b/files/ko/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,74 @@ +--- +title: abort +slug: Web/Events/abort +tags: + - DOM + - Event + - Reference + - 레퍼런스 + - 이벤트 +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +

abort 이벤트는 리소스의 로딩이 중단되었을 때, 발생합니다.

+ +

개요

+ +
+
스펙
+
DOM L3
+
인터페이스
+
유저 인터페이스에서 발생하면 UIEvent, 그렇지 않으면 Event.
+
버블
+
안됨
+
취소 가능
+
안됨
+
타겟
+
Element
+
디폴트 액션
+
없음
+
+ +

속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성타입설명
target {{readonlyInline}}EventTarget이벤트 타겟 (DOM tree의 최상위 타겟).
type {{readonlyInline}}DOMString이벤트의 타입
bubbles {{readonlyInline}}Boolean이벤트가 버블링 되는지 안되는지
cancelable {{readonlyInline}}Boolean이벤트가 취소 가능한지 아닌지
view {{readonlyInline}}WindowProxydocument.defaultView (document의 window )
detail {{readonlyInline}}long (float)0.
diff --git a/files/ko/web/api/htmlorforeignelement/dataset/index.html b/files/ko/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..2b2a891dca --- /dev/null +++ b/files/ko/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,127 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - HTMLOrForeignElement + - Property + - Read-only + - Reference +translation_of: 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/web/api/htmlorforeignelement/tabindex/index.html b/files/ko/web/api/htmlorforeignelement/tabindex/index.html new file mode 100644 index 0000000000..7cbb0fa1f0 --- /dev/null +++ b/files/ko/web/api/htmlorforeignelement/tabindex/index.html @@ -0,0 +1,26 @@ +--- +title: element.tabIndex +slug: Web/API/HTMLElement/tabIndex +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: 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/web/api/navigation_timing_api/index.html b/files/ko/web/api/navigation_timing_api/index.html new file mode 100644 index 0000000000..c9a0c1465b --- /dev/null +++ b/files/ko/web/api/navigation_timing_api/index.html @@ -0,0 +1,137 @@ +--- +title: 내비게이션 타이밍(Navigation Timing) +slug: Navigation_timing +translation_of: Web/API/Navigation_timing_API +--- +

Navigation Timing API는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.

+

다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.

+
function onLoad() {
+  var now = new Date().getTime();
+  var page_load_time = now - performance.timing.navigationStart;
+  console.log("User-perceived page loading time: " + page_load_time);
+}
+
+

{{domxref("PerformanceTiming")}} 인터페이스로 접근할 수 있는 밀리 초 단위로 주어진 측정된 이벤트가 많이 있습니다. 발생하는 순서로 된 이벤트 목록입니다.

+ +

window.performance.navigation 객체는 리다이렉트(redirect), 앞/뒤 버튼, 혹은 보통의 URL 로딩이 어떤 페이지 로드를 일으키는지(trigger) 아는 데 사용할 수 있는 두 속성을 저장합니다.

+

window.performance.navigation.type:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
상수값설명
TYPE_NAVIGATENEXT0아래 목록의 TYPE_RELOAD과 TYPE_BACK_FORWARD가 사용하는 것 외에, 링크 클릭하기, 사용자 에이전트(UA) 주소 바에 URL 입력하기, 폼 전송, 스크립트 연산으로 초기화하기로 시작한 내비게이션.
TYPE_RELOAD1리로드(reload) 연산 혹은 location.reload() 메소드를 통한 내비게이션.
TYPE_BACK_FORWARD2히스토리 순회(traversal) 연산을 통한 내비게이션
TYPE_UNDEFINED255위 값으로 정의되지 않는 어떠한 내비게이션 타입.
+

window.performance.navigation.redirectCount는 마지막 페이지에 도달할 때까지, 만일 있다면 몇 번의 리다이렉션이 일어났는지를 나타냅니다.

+

Navigation Timing API는 XHR로 서버에 보낸 클라이언트 쪽 성능 데이터를 모을 뿐 아니라 이전 페이지 언로드(unload) 시간, 도메인 룩업(look up) 시간, window.onload 전체 시간 등 다른 방법으로 측정하기 매우 어려운 데이터를 측정하는 데 사용할 수 있습니다.

+

예제

+

어떤 페이지를 로딩하는 데 필요한 전체 시간 계산하기.

+
var perfData = window.performance.timing;
+var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+
+

요청 응답 시간 계산하기.

+
var connectTime = perfData.responseEnd - perfData.requestStart;
+

링크

+ +

브라우저 호환

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChrome**Firefox (Gecko)*Internet ExplorerOpera*Safari (WebKit)
Basic support +

6

+ 		+

7

+

 

+ 		915{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.015.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

 

diff --git a/files/ko/web/api/navigator/connection/index.html b/files/ko/web/api/navigator/connection/index.html new file mode 100644 index 0000000000..1afa39d9c1 --- /dev/null +++ b/files/ko/web/api/navigator/connection/index.html @@ -0,0 +1,105 @@ +--- +title: window.navigator.connection +slug: Web/API/NetworkInformation/connection +translation_of: Web/API/Navigator/connection +--- +

{{ Apiref() }}

+

{{ SeeCompatTable() }}

+

요약

+

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 연결이 과금되는 지와 같은 정보를 알려줍니다. 이를 이용해서 사용자의 연결에 기반해서 높은 품질의 콘텐츠를 제공할지 낮은 품질의 콘텐츠를 제공할지 선택할 수 있습니다.

+

속성

+
+
+ {{domxref("window.navigator.connection.bandwidth", "connection.bandwidth")}} {{ReadOnlyInline}}
+
+ 현재 연결에 대한 다운로드 대역폭을 MB/s 단위의 double 형태로 알려줍니다. 사용자가 오프라인일 경우는 0이고 알 수 없을 경우에는 infinity로 나옵니다.
+
+ {{domxref("window.navigator.connection.metered", "connection.metered")}} {{ReadOnlyInline}}
+
+ 연결이 과금이 되는 경우(예를 들어 pay-per-use) Boolean 형의 true가 반환됩니다.
+
+

이벤트 핸들러

+
+
+ {{domxref("window.navigator.connection.onchange", "connection.onchange")}}
+
+ {{event("change")}} 이벤트에 대한 이벤트 핸들러 속성입니다. 연결 정보가 변경될 때 이벤트가 발생합니다.
+
+
+

주의: connection 객체는 이벤트를 다루기 위한 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드를 사용할 수 있는 {{domxref("EventTarget")}}을 상속받습니다.

+
+

명세

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
+

브라우저 호환성

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support20? {{ property_prefix("webkit") }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+

Gecko 관련 내용

+ +

관련 내용

+ diff --git a/files/ko/web/api/network_information_api/index.html b/files/ko/web/api/network_information_api/index.html new file mode 100644 index 0000000000..9526bd2d5f --- /dev/null +++ b/files/ko/web/api/network_information_api/index.html @@ -0,0 +1,46 @@ +--- +title: Network Information API +slug: WebAPI/Network_Information +translation_of: Web/API/Network_Information_API +--- +

{{ SeeCompatTable() }}

+

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: {{domxref("window.navigator.connection")}}.

+

연결상태 변경 감지

+

이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.

+
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("The connection is metered!");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+
+

명세

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
+

브라우저 호환성

+

{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}

+

관련 내용

+ diff --git a/files/ko/web/api/networkinformation/connection/index.html b/files/ko/web/api/networkinformation/connection/index.html deleted file mode 100644 index 1afa39d9c1..0000000000 --- a/files/ko/web/api/networkinformation/connection/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: window.navigator.connection -slug: Web/API/NetworkInformation/connection -translation_of: Web/API/Navigator/connection ---- -

{{ Apiref() }}

-

{{ SeeCompatTable() }}

-

요약

-

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 연결이 과금되는 지와 같은 정보를 알려줍니다. 이를 이용해서 사용자의 연결에 기반해서 높은 품질의 콘텐츠를 제공할지 낮은 품질의 콘텐츠를 제공할지 선택할 수 있습니다.

-

속성

-
-
- {{domxref("window.navigator.connection.bandwidth", "connection.bandwidth")}} {{ReadOnlyInline}}
-
- 현재 연결에 대한 다운로드 대역폭을 MB/s 단위의 double 형태로 알려줍니다. 사용자가 오프라인일 경우는 0이고 알 수 없을 경우에는 infinity로 나옵니다.
-
- {{domxref("window.navigator.connection.metered", "connection.metered")}} {{ReadOnlyInline}}
-
- 연결이 과금이 되는 경우(예를 들어 pay-per-use) Boolean 형의 true가 반환됩니다.
-
-

이벤트 핸들러

-
-
- {{domxref("window.navigator.connection.onchange", "connection.onchange")}}
-
- {{event("change")}} 이벤트에 대한 이벤트 핸들러 속성입니다. 연결 정보가 변경될 때 이벤트가 발생합니다.
-
-
-

주의: connection 객체는 이벤트를 다루기 위한 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드를 사용할 수 있는 {{domxref("EventTarget")}}을 상속받습니다.

-
-

명세

- - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
-

브라우저 호환성

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support20? {{ property_prefix("webkit") }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-

Gecko 관련 내용

- -

관련 내용

- diff --git a/files/ko/web/api/node/innertext/index.html b/files/ko/web/api/node/innertext/index.html deleted file mode 100644 index 414fab5c00..0000000000 --- a/files/ko/web/api/node/innertext/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Node.innerText -slug: Web/API/Node/innerText -tags: - - API - - DOM - - HTMLElement - - Property - - Reference -translation_of: Web/API/HTMLElement/innerText ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("HTMLElement")}} 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.

- -
-

참고: innerText는 {{domxref("Node.textContent")}}와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.

-
- -

구문

- -
const renderedText = htmlElement.innerText
-htmlElement.innerText = string
-
- -

값

- -

요소의 렌더링 된 텍스트 콘텐츠를 나타내는 {{domxref("DOMString")}}. 요소 자체가 렌더링 중이 아니라면 {{domxref("Node.textContent")}} 속성의 값과 동일합니다.

- -

예제

- -

다음 예제는 innerText와 {{domxref("Node.textContent")}}를 비교합니다. innerText가 {{htmlElement("br")}} 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.

- -

HTML

- -
<h3>원본 요소:</h3>
-<p id="source">
-  <style>#source { color: red; }</style>
-아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
-  <span style="display:none">숨겨진 글</span>
-</p>
-<h3>textContent 결과:</h3>
-<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
-<h3>innerText 결과:</h3>
-<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
- -

JavaScript

- -
const source = document.getElementById('source');
-const textContentOutput = document.getElementById('textContentOutput');
-const innerTextOutput = document.getElementById('innerTextOutput');
-
-textContentOutput.innerHTML = source.textContent;
-innerTextOutput.innerHTML = source.innerText;
- -

결과

- -

{{EmbedLiveSample("예제", 700, 450)}}

- -

명세

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.
- -

브라우저 호환성

- - - -

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

- -

같이 보기

- - diff --git a/files/ko/web/api/notifications_api/using_the_notifications_api/index.html b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html new file mode 100644 index 0000000000..351361d2af --- /dev/null +++ b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html @@ -0,0 +1,265 @@ +--- +title: 알림 API 사용하기 +slug: WebAPI/Using_Web_Notifications +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

웹 페이지나 앱에서 알림(Notifications) API를 사용하면 페이지 외부에 표시되는 알림을 보낼 수 있습니다. 이것은 시스템 레벨에서 처리되는 것으로 애플리케이션이 유휴 상태거나 백그라운드에 있더라도 웹 앱이 사용자에게 정보를 보낼 수 있습니다. 이 글에서는 여러분의 앱에서 이 API를 사용하기 위한 기초를 알아봅니다.

+ +

일반적으로 시스템 알림은 운영 체계의 표준 알림 메커니즘을 말합니다. 예를 들어 일반적인 데스크톱 시스템이나 모바일 장치의 브로드캐스트 알림을 생각해봅시다.

+ +

+ +

물론 시스템 알림 시스템은 플랫폼 및 브라우저에 따라 다양하지만 괜찮습니다. 알림 API는 범용적으로 작성돼서 대부분의 시스템 알림 시스템과 호환됩니다.

+ +

예시

+ +

웹 알림의 대표적인 사용 사례는 웹 기반 메일이나 IRC 애플리케이션입니다. 새 메시지가 도착하면 사용자가 다른 애플리케이션으로 다른 일을 하더라도 사용자에게 알릴 필요가 있습니다. 요즘은 Slack 등 이러한 사례를 많이 찾아볼 수 있습니다.

+ +

우리는 웹 알림을 사용하는 방법을 좀더 잘 알 수 있도록 실제적인 예시 — 할 일 목록 앱 —를 작성했습니다. 데이터는 로컬에서 IndexedDB로 저장하고 사용자 알림은 할 일 기한이 됐을 때 시스템 알림을 사용합니다. 할 일 목록 코드를 다운로드하거나, 앱의 라이브 실행을 보세요.

+ +

권한 요청하기

+ +

앱이 알림을 보내려면 먼저 사용자가 애플리케이션에 해당 권한을 허용해줘야 합니다. 이는 API가 웹페이지 외부와 상호작용할 때 통상적인  요구 사항입니다. 최소 한번은 사용자가 해당 애플리케이션이 알림을 표시할 수 있는 권한을 허용해줄 필요가 있으며 이로써 사용자는 어떤 앱/사이트가 알림을 보일 수 있는지 제어할 수 있습니다.

+ +

과거에 푸시 알림에 대한 악용 때문에 웹 브라우저와 개발자는 그런 문제를 완화할 수 있는 전략을 구현하게 되었습니다. 알림을 발생시키려면 사용자 제스처(예: 단추 클릭)에 대한 응답으로만 가능합니다. 이것은 모범적인 방식일 뿐 아니라 — 사용자에게 미동의 알림으로 스팸을 보내면 안됩니다 — 실제로도 전향적인 브라우저는 사용자 제스처에 대한 응답으로 촉발되지 않은 알림은 명시적으로 불허합니다. 파이어폭스는 이미 72 버전부터 이렇게 하고 있으며 사파리도 하고 있습니다.

+ +

또한 크롬과 파이어폭스에서는 사이트가 보안 콘텍스트(즉, HTTPS)가 아니면 알림을 아예 요청할 수 없으며 크로스 오리진 {{htmlelement("iframe")}}으로부터의 알림 권한은 요청할 수 없게 되었습니다. 

+ +

현재 권한 상태 확인하기

+ +

권한을 이미 가지고 있는지 확인하려면 {{domxref("Notification.permission")}} 읽기 전용 속성의 값을 확인하면 됩니다. 다음 세 가지 값이 있을 수 있습니다.

+ +
+
default
+
사용자에게 아직 권한을 요구하지 않았으며 따라서 알림을 표시하지 않습니다.
+
granted
+
사용자에게 알림 표시 권한을 요구했으며 사용자는 권한을 허용했습니다.
+
denied
+
사용자가 명시적으로 알림 표시 권한을 거부했습니다.
+
+ +

권한 획득하기

+ +

아직 알림 표시 권한이 허용되지 않았다면 애플리케이션은 {{domxref("Notification.requestPermission()")}} 메서드를 사용하여 사용자에게 권한을 요청할 필요가 있습니다. 간단하게는 아래와 같이 넣습니다.

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

여기서는 프로미스 방식의 메서드 버전을 사용합니다. 과거 버전을 지원하려면 아래와 같이 과거의 콜백 버전을 사용해야 할 수 있습니다.

+ +
Notification.requestPermission();
+ +

콜백 버전은 콜백 함수를 옵셔널하게 받을 수 있으며 사용자가 표시 권한 요청에 응답한 후에 호출됩니다.

+ +

예시

+ +

우리가 만드는 할 일 데모에서는 "알림 허용" 단추를 둬서 누르면 앱의 알림 권한을 요청합니다.

+ +
<button id="enable">알림 허용</button>
+ +

누르면 다음 askNotificationPermission() 함수를 호출합니다.

+ +
function askNotificationPermission() {
+  // 권한을 실제로 요구하는 함수
+  function handlePermission(permission) {
+    // 사용자의 응답에 관계 없이 크롬이 정보를 저장할 수 있도록 함
+    if(!('permission' in Notification)) {
+      Notification.permission = permission;
+    }
+
+    // 사용자 응답에 따라 단추를 보이거나 숨기도록 설정
+    if(Notification.permission === 'denied' || Notification.permission === 'default') {
+      notificationBtn.style.display = 'block';
+    } else {
+      notificationBtn.style.display = 'none';
+    }
+  }
+
+  // 브라우저가 알림을 지원하는지 확인
+  if (!('Notification' in window)) {
+    console.log("이 브라우저는 알림을 지원하지 않습니다.");
+  } else {
+    if(checkNotificationPromise()) {
+      Notification.requestPermission()
+      .then((permission) => {
+        handlePermission(permission);
+      })
+    } else {
+      Notification.requestPermission(function(permission) {
+        handlePermission(permission);
+      });
+    }
+  }
+}
+ +

두 번째 메인 블록을 먼저 보면 알림이 지원되는지 확인하는 것을 알 수 있습니다. 지원하는 경우 그에 따라 Notification.requestPermission()의 프로미스 기반 버전이 지원되는지 보는 확인을 실행합니다. 맞다면 프로미스 기반 버전을 실행하고(사파리 외에는 전부 지원됨) 아니라면 과거의 콜백 기반 버전을 실행합니다(사파리에서 지원).

+ +

코드 중복을 피하기 위해 뒷 처리 수행 코드를 handlePermission() 함수에 넣었는데 이 함수가 코드에서 첫 번째 메인 블록입니다. 그 안에서는 Notification.permission 값을 명시적으로 설정하고(크롬의 일부 과거 버전에서는 이게 자동으로 안됩니다) 사용자가 권한 대화창에서 선택한 결과에 따라 단추를 보이거나 숨깁니다. 권한이 이미 허용됐는지 보여주려는 것은 아니고 사용자가 권한을 거부한 경우 나중에 다시 선택할 수 있도록 해주는 것입니다.

+ +

참고: 크롬 37 버전 전에는 load 이벤트 핸들러에서 {{domxref("Notification.requestPermission()")}}을 호출할 수 없었습니다(이슈 274284 참고).

+ +

requestPermission() 프로미스 기능 알아내기

+ +

위에서 우리는 브라우저가 Notification.requestPermission()의 프로미스 버전을 지원하는지 확인해야 한다고 했습니다. 아래와 같이 했습니다.

+ +
function checkNotificationPromise() {
+    try {
+      Notification.requestPermission().then();
+    } catch(e) {
+      return false;
+    }
+
+    return true;
+  }
+ +

기본적으로 requestPermission()에 .then() 메서드가 있는지 알아보는 것입니다. 맞다면 계속 진행하고 true를 반환합니다. 실패라면 catch() {} 블록에서 false를 반환합니다.

+ +

알림 만들기 

+ +

알림 만들기는 쉬워서 {{domxref("Notification")}} 생성자만 사용하면 됩니다. 이 생성자는 알림에 표시할 제목과 {{domxref("Notification.icon","icon")}}이나 텍스트 {{domxref("Notification.body","body")}} 같은 알림 조작 옵션 몇 가지를 받도록 돼 있습니다.

+ +

예를 들어 할일 목록 예시에서 아래 코드로 필요시 알림을 만듭니다(createNotification() 함수에서 찾을 수 있음).

+ +
var img = '/to-do-notifications/img/icon-128.png';
+var text = '아! "' + title + '" 작업 기한이 만료됐습니다.';
+var notification = new Notification('할 일 목록', { body: text, icon: img });
+
+ +

알림 닫기

+ +

파이어폭스와 사파리는 알림을 자동으로 금방(약 4초) 닫습니다. 이것은 운영 체계 수준에서도 발생합니다. 그런데 크롬 같은 다른 브라우저는 그렇지 않습니다. 모든 브라우저에서 알림이 닫히게 하려면 {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수에서 {{domxref("Notification.close")}} 함수를 호출하여 알림을 4초 후에 닫으면 됩니다. bind()를 사용하여 close() 호출이 알림에 연동되게 하는 것도 해줘야 합니다.

+ +
setTimeout(notification.close.bind(notification), 4000);
+ +
+

참고: "close" 이벤트를 받았을 때 알림을 닫은 것이 사용자인지는 보장할 수 없습니다. 이것은 규격과도 일치합니다. 규격에서는 "알림이 닫힐 때 그것이 기반 알림 플랫폼에 의한 것이든지 사용자에 의한 것이든지 닫기 절차가 실행돼야 한다."고 기술하고 있습니다.

+
+ +

알림 이벤트

+ +

{{domxref("Notification")}} 인스턴스에 촉발되는 이벤트는 다음 네 가지입니다.

+ +
+
click
+
사용자가 알림을 클릭하면 촉발됩니다.
+
close
+
알림이 닫힌 후 촉발됩니다.
+
error
+
알림에 문제가 있을 경우 촉발되며 대개 어떤 이유에 의해 알림을 표시할 수 없는 경우입니다.
+
show
+
알림이 사용자에게 표시되면 촉발됩니다.
+
+ +

이 이벤트들은 {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, {{domxref("Notification.onerror","onerror")}}, {{domxref("Notification.onshow","onshow")}} 핸들러로 추적할 수 있습니다. {{domxref("Notification")}}이 {{domxref("EventTarget")}}을 상속하기 때문에 {{domxref("EventTarget.addEventListener","addEventListener()")}} 메서드를 사용할 수 있습니다.

+ +

기존 알림 대체하기

+ +

사용자가 잠깐 사이에 알림을 많이 받는 것은 바람직하지 않습니다. 예를 들어 메신저 애플리케이션이 모든 수신 메시지를 사용자에게 알리는데 그게 아주 많다면요? 사용자가 알림 때문에 대량 스팸을 받지 않도록 알림 대기열(큐)을 수정해서 걸려 있는 알림 하나나 여럿을 새로운 알림 하나로 대체할 수 있습니다.

+ +

이를 위해 새 알림에 태그를 붙일 수 있습니다. 알림에 이미 같은 태그가 있고 표시되지 않았다면 새 알림으로 이전 알림을 대체하는 것입니다. 같은 태그의 알림이 이미 표시됐다면 이전 알림을 닫고 새 알림을 표시합니다.

+ +

태그 예시

+ +

다음과 같은 간단한 HTML을 봅시다.

+ +
<button>알림 실행!</button>
+ +

다수의 알림을 아래 방법으로 처리할 수 있습니다.

+ +
window.addEventListener('load', function () {
+  // 처음에는 알림 권한이 있는지 확인함
+  // 없으면 권한 요구
+  if (Notification && Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // 사용자가 알림을 받는 데 동의한 경우
+    // 알림 10개를 보내본다
+    if (Notification && Notification.permission === "granted") {
+      var i = 0;
+      // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
+      var interval = window.setInterval(function () {
+        // 태그 덕분에 "안녕! 9" 알림만 보여야 함
+        var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // 사용자가 알림을 받을지 말지 답하지 않은 경우
+    // 참고: 크롬 때문에 권한 속성이 설정됐는지 알 수 없으므로
+    // "기본" 값을 확인하는 것은 안전하지 않음
+    else if (Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // 사용자가 ok한 경우
+        if (status === "granted") {
+          var i = 0;
+          // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
+          var interval = window.setInterval(function () {
+            // 태그 덕분에 "안녕! 9" 알림만 보여야 함
+            var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // 그 외의 경우 일반적인 모달 alert로 폴백
+        else {
+          alert("안녕!");
+        }
+      });
+    }
+
+    // 사용자가 알림을 거부한 경우
+    else {
+      // 일반적인 모달 alert로 폴백
+      alert("안녕!");
+    }
+  });
+});
+ +

라이브 결과는 아래에서 보세요.

+ +

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

+ +

규격

+ + + + + + + + + + + + + + + + +
규격상태비고
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}현행 표준
+ +

브라우저 호환성

+ +

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

+ +

참고

+ + diff --git a/files/ko/web/api/proximity_events/index.html b/files/ko/web/api/proximity_events/index.html new file mode 100644 index 0000000000..ad1687ddd2 --- /dev/null +++ b/files/ko/web/api/proximity_events/index.html @@ -0,0 +1,119 @@ +--- +title: Proximity +slug: WebAPI/Proximity +translation_of: Web/API/Proximity_Events +--- +

{{ SeeCompatTable }}

+

Summary

+

근접 이벤트는 사용자가 디바이스에 가까이 갔을때를 알 수 있는 간단한 벙법이다.

+

예를 들어,  사용자가 전화가 걸려왔을 때 디바이스에 귀를 가까이 하면, 근접 이벤트들은 스마트폰의 화면이 꺼지게 하여 이러한 변화에 대응할 수 있게 해준다.

+
+

Note: 당연히 이 API는 근접 센서를 가진 장치를 필요로 하며, 이 근접 센서는 대게 모바일 다비이스들에서만 이용 가능하다. 근접 센서가 없는 장치들에서는 근접 이벤트들을 지원할 수는 있을 지 몰라도 해당 이벤트들은 절대 발생하지 않을 것이다.

+
+

Proximity Events

+

다비이스 근접 센서가 장치와 대상 사이의 변화를 감지했을 때, 센서는 그  변화를 브라우저에게 알린다. 브라우저는 그 알림을 받으면 그 변화에 대해 {{domxref("DeviceProximityEvent")}} 이벤트를 발생시킨다. 그리고 더 대략적인 변화(more rough change)를 알리기 위해  {{domxref("UserProximityEvent")}} 이벤트를 발생시킨다.

+

window object 레벨에서  {{domxref("EventTarget.addEventListener","addEventListener")}} 메소드 ({{event("deviceproximity")}} 또는 {{event("userproximity")}} 이벤트명) 를 이용하여 근접 이벤트를 전달받을 수 있다. 또한 {{domxref("window.ondeviceproximity")}} 또는 {{domxref("window.onuserproximity")}} 프로퍼티에 이벤트 핸들러를 붙이는 방법으로도 이벤트를 전달받을 수 있다.

+

일단 이벤트가 전달되면, 그 이벤트 오브젝트는 다음과 같은 여러 종류의 정보에 접근할 수 있게 해준다:

+ +

Example

+
window.addEventListener('userproximity', function(event) {
+  if (event.near) {
+    // let's power off the screen
+    navigator.mozPower.screenEnabled = false;
+  } else {
+    // Otherwise, let's power on the screen
+    navigator.mozPower.screenEnabled = true;
+  }
+});
+

Specifications

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Proximity Events', '', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Initial specification
+

Browser compatibility

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{ CompatGeckoMobile("15.0") }}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+

See also

+ diff --git a/files/ko/web/api/screen.onorientationchange/index.html b/files/ko/web/api/screen.onorientationchange/index.html deleted file mode 100644 index dc1a76013f..0000000000 --- a/files/ko/web/api/screen.onorientationchange/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: window.screen.onorientationchange -slug: Web/API/Screen.onorientationchange -translation_of: Web/API/Screen/onorientationchange ---- -

{{ ApiRef() }}

-

{{SeeCompatTable}}

-

Summary

-

{{ event("orientationchange")}} 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.

-

Syntax

-
screen.onorientationchange = funcRef;
-
-

funcRef 는 함수로의 참조 이다.

-

Specifications

- - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Screen Orientation')}}{{Spec2('Screen Orientation')}}Draft specification.
-

Browser compatibility

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-

Gecko notes

-

이 API 는 현재 초안형태이다. 오직 B2G 와 안드로이드용 Firefox 에서 prefixed method (onmozorientationchange) 형태로만 구현된다.

-

See also

- diff --git a/files/ko/web/api/screen/onorientationchange/index.html b/files/ko/web/api/screen/onorientationchange/index.html new file mode 100644 index 0000000000..dc1a76013f --- /dev/null +++ b/files/ko/web/api/screen/onorientationchange/index.html @@ -0,0 +1,85 @@ +--- +title: window.screen.onorientationchange +slug: Web/API/Screen.onorientationchange +translation_of: Web/API/Screen/onorientationchange +--- +

{{ ApiRef() }}

+

{{SeeCompatTable}}

+

Summary

+

{{ event("orientationchange")}} 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.

+

Syntax

+
screen.onorientationchange = funcRef;
+
+

funcRef 는 함수로의 참조 이다.

+

Specifications

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Screen Orientation')}}{{Spec2('Screen Orientation')}}Draft specification.
+

Browser compatibility

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+

Gecko notes

+

이 API 는 현재 초안형태이다. 오직 B2G 와 안드로이드용 Firefox 에서 prefixed method (onmozorientationchange) 형태로만 구현된다.

+

See also

+ diff --git a/files/ko/web/api/streams_api/concepts/index.html b/files/ko/web/api/streams_api/concepts/index.html new file mode 100644 index 0000000000..9c993b81a3 --- /dev/null +++ b/files/ko/web/api/streams_api/concepts/index.html @@ -0,0 +1,115 @@ +--- +title: Streams API 컨셉 +slug: Web/API/Streams_API/컨셉 +translation_of: Web/API/Streams_API/Concepts +--- +
{{apiref("Streams")}}
+ +

The Streams API adds a very useful set of tools to the web platform, providing objects allowing JavaScript to programmatically access streams of data received over the network and process them as desired by the developer. Some of the concepts and terminology associated with streams might be new to you — this article explains all you need to know.

+ +

Readable streams

+ +

A readable stream is a data source represented in JavaScript by a {{domxref("ReadableStream")}} object that flows from an underlying source — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from.

+ +

There are two types of underlying source:

+ + + +

컨The data is read sequentially in small pieces called chunks. A chunk can be a single byte, or it can be something larger such as a typed array of a certain size. A single stream can contain chunks of different sizes and types.

+ +

+ +

The chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. An internal queue keeps track of the chunks that have not yet been read (see the Internal queues and queueing strategies section below).

+ +

The chunks inside the stream are read by a reader — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. The reader plus the other processing code that goes along with it is called a consumer.

+ +

There is also a construct you’ll use called a controller — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished).

+ +

Only one reader can read a stream at a time; when a reader is created and starts reading a stream (an active reader), we say it is locked to it. If you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can tee streams, see the Teeing section below)

+ +

Note that there are two different types of readable stream. As well as the conventional readable stream there is a type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as BYOB, or “bring your own buffer”) sources. These allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. Which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the {{domxref("ReadableStream.ReadableStream()")}} constructor page).

+ +
+

Important: Byte streams are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.

+
+ +

You can make use of ready-made readable streams via mechanisms like a {{domxref("Response.body")}} from a fetch request, or roll your own streams using the {{domxref("ReadableStream.ReadableStream()")}} constructor.

+ +

Teeing

+ +

Even though only a single reader can read a stream at once, it is possible to split a stream into two identical copies, which can then be read by two separate readers. This is called teeing.

+ +

In JavaScript, this is achieved via the {{domxref("ReadableStream.tee()")}} method — it outputs an array containing two identical copies of the original readable stream, which can then be read independently by two separate readers.

+ +

You might do this for example in a ServiceWorker if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you’d need two copies to do this.

+ +

+ +

Writable streams

+ +

A writable stream is a destination into which you can write data, represented in JavaScript by a {{domxref("WritableStream")}} object. This serves as an abstraction over the top of an underlying sink — a lower-level I/O sink into which raw data is written.

+ +

The data is written to the stream via a writer, one chunk at a time. A chunk can take a multitude of forms, just like the chunks in a reader. You can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a producer.

+ +

When a writer is created and starts writing to a stream (an active writer), it is said to be locked to it. Only one writer can write to a writable stream at one time. If you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it.

+ +

An internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink.

+ +

There is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished).

+ +

+ +

You can make use of writable streams using the {{domxref("WritableStream.WritableStream()")}} constructor. These currently have very limited availability in browsers.

+ +

Pipe chains

+ +

The Streams API makes it possible to pipe streams into one another (or at least it will do when browsers implement the relevant functionality) using a structure called a pipe chain. There are two methods available in the spec to facilitate this:

+ + + +

The start of the pipe chain is called the original source, and the end is called the ultimate sink.

+ +

+ +
+

Note: This functionality isn't fully thought through yet, or available in many browsers. At some point the spec writers hope to add something like a TransformStream class to make creating transform streams easier.

+
+ +

Backpressure

+ +

An important concept in streams is backpressure — this is the process by which a single stream or a pipe chain regulates the speed of reading/writing. When a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bottleneck anywhere.

+ +

To use backpressure in a ReadableStream, we can ask the controller for the chunk size  desired by the consumer by querying the {{domxref("ReadableStreamDefaultController.desiredSize")}} attribute on the controller. If it is too low, our ReadableStream can tell its underlying source to stop sending data, and we backpressure along the stream chain.

+ +

If later on the consumer again wants to receive data, we can use the pull method in the stream creation to tell our underlying source to feed our stream with data.

+ +

Internal queues and queuing strategies

+ +

As mentioned earlier, the chunks in a stream that have not yet been processed and finished with are kept track of by an internal queue.

+ + + +

Internal queues employ a queuing strategy, which dictates how to signal backpressure based on the internal queue state.

+ +

In general, the strategy compares the size of the chunks in the queue to a value called the high water mark, which is the largest total chunk size that the queue can realistically manage.

+ +

The calculation performed is

+ +
high water mark - total size of chunks in queue = desired size
+ +

The desired size is the size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size. After the calculation is performed, chunk generation will be slowed down/sped up as appropriate to keep the stream flowing as fast as possible while keeping the desired size above zero. If the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which results in problems.

+ +
+

Note: What happens in the case of zero or negative desired size hasn’t really been defined in the spec so far. Patience is a virtue.

+
+ +

As an example, let's take a chunk size of 1, and a high water mark of 3. This means that up to 3 chunks can be enqueued before the high water mark is reached and backpressure is applied.

diff --git "a/files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" "b/files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" deleted file mode 100644 index 9c993b81a3..0000000000 --- "a/files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Streams API 컨셉 -slug: Web/API/Streams_API/컨셉 -translation_of: Web/API/Streams_API/Concepts ---- -
{{apiref("Streams")}}
- -

The Streams API adds a very useful set of tools to the web platform, providing objects allowing JavaScript to programmatically access streams of data received over the network and process them as desired by the developer. Some of the concepts and terminology associated with streams might be new to you — this article explains all you need to know.

- -

Readable streams

- -

A readable stream is a data source represented in JavaScript by a {{domxref("ReadableStream")}} object that flows from an underlying source — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from.

- -

There are two types of underlying source:

- - - -

컨The data is read sequentially in small pieces called chunks. A chunk can be a single byte, or it can be something larger such as a typed array of a certain size. A single stream can contain chunks of different sizes and types.

- -

- -

The chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. An internal queue keeps track of the chunks that have not yet been read (see the Internal queues and queueing strategies section below).

- -

The chunks inside the stream are read by a reader — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. The reader plus the other processing code that goes along with it is called a consumer.

- -

There is also a construct you’ll use called a controller — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished).

- -

Only one reader can read a stream at a time; when a reader is created and starts reading a stream (an active reader), we say it is locked to it. If you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can tee streams, see the Teeing section below)

- -

Note that there are two different types of readable stream. As well as the conventional readable stream there is a type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as BYOB, or “bring your own buffer”) sources. These allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. Which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the {{domxref("ReadableStream.ReadableStream()")}} constructor page).

- -
-

Important: Byte streams are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.

-
- -

You can make use of ready-made readable streams via mechanisms like a {{domxref("Response.body")}} from a fetch request, or roll your own streams using the {{domxref("ReadableStream.ReadableStream()")}} constructor.

- -

Teeing

- -

Even though only a single reader can read a stream at once, it is possible to split a stream into two identical copies, which can then be read by two separate readers. This is called teeing.

- -

In JavaScript, this is achieved via the {{domxref("ReadableStream.tee()")}} method — it outputs an array containing two identical copies of the original readable stream, which can then be read independently by two separate readers.

- -

You might do this for example in a ServiceWorker if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you’d need two copies to do this.

- -

- -

Writable streams

- -

A writable stream is a destination into which you can write data, represented in JavaScript by a {{domxref("WritableStream")}} object. This serves as an abstraction over the top of an underlying sink — a lower-level I/O sink into which raw data is written.

- -

The data is written to the stream via a writer, one chunk at a time. A chunk can take a multitude of forms, just like the chunks in a reader. You can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a producer.

- -

When a writer is created and starts writing to a stream (an active writer), it is said to be locked to it. Only one writer can write to a writable stream at one time. If you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it.

- -

An internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink.

- -

There is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished).

- -

- -

You can make use of writable streams using the {{domxref("WritableStream.WritableStream()")}} constructor. These currently have very limited availability in browsers.

- -

Pipe chains

- -

The Streams API makes it possible to pipe streams into one another (or at least it will do when browsers implement the relevant functionality) using a structure called a pipe chain. There are two methods available in the spec to facilitate this:

- - - -

The start of the pipe chain is called the original source, and the end is called the ultimate sink.

- -

- -
-

Note: This functionality isn't fully thought through yet, or available in many browsers. At some point the spec writers hope to add something like a TransformStream class to make creating transform streams easier.

-
- -

Backpressure

- -

An important concept in streams is backpressure — this is the process by which a single stream or a pipe chain regulates the speed of reading/writing. When a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bottleneck anywhere.

- -

To use backpressure in a ReadableStream, we can ask the controller for the chunk size  desired by the consumer by querying the {{domxref("ReadableStreamDefaultController.desiredSize")}} attribute on the controller. If it is too low, our ReadableStream can tell its underlying source to stop sending data, and we backpressure along the stream chain.

- -

If later on the consumer again wants to receive data, we can use the pull method in the stream creation to tell our underlying source to feed our stream with data.

- -

Internal queues and queuing strategies

- -

As mentioned earlier, the chunks in a stream that have not yet been processed and finished with are kept track of by an internal queue.

- - - -

Internal queues employ a queuing strategy, which dictates how to signal backpressure based on the internal queue state.

- -

In general, the strategy compares the size of the chunks in the queue to a value called the high water mark, which is the largest total chunk size that the queue can realistically manage.

- -

The calculation performed is

- -
high water mark - total size of chunks in queue = desired size
- -

The desired size is the size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size. After the calculation is performed, chunk generation will be slowed down/sped up as appropriate to keep the stream flowing as fast as possible while keeping the desired size above zero. If the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which results in problems.

- -
-

Note: What happens in the case of zero or negative desired size hasn’t really been defined in the spec so far. Patience is a virtue.

-
- -

As an example, let's take a chunk size of 1, and a high water mark of 3. This means that up to 3 chunks can be enqueued before the high water mark is reached and backpressure is applied.

diff --git a/files/ko/web/api/vibration_api/index.html b/files/ko/web/api/vibration_api/index.html new file mode 100644 index 0000000000..16271ff248 --- /dev/null +++ b/files/ko/web/api/vibration_api/index.html @@ -0,0 +1,100 @@ +--- +title: Vibration API +slug: Web/Guide/API/Vibration/Vibration +translation_of: Web/API/Vibration_API +--- +
{{DefaultAPISidebar("Vibration API")}}
+ +

요즘 나오는 대부분은 모바일 디바이스는 바이브레이션 하드웨어를 포함하고 있다. 소프트웨어 코드를 이용해 바이브레이션 하드웨어를 제어하면, 모바일 디바이스를 흔들리게 만들어 사용자에게 물리적인 피드백을 제공할 수 있다.

+ +

Vibration API는 웹앱들이 기기에 장착된 물리 진동장치를 통해 진동을 전달할 수 있도록 해줍니다. 하지만 대응하는 진동 장치가 없는 기기일 경우 아무일도 일어나지 않습니다.

+ +

Describing vibrations

+ +

바이브레이션은 온오프 펄스들의 패턴이라고 할 수 있는데, 이 펄스들은 아마도 다양한 길이를 가질 것이다. 이 패턴은 아마 하나의 정수값으로 구성될 수 있는데 이 정수값은 진동이 일어날 밀리세컨드 수를 의미한다. 또한 이 패턴은 정수 배열이 될 수도 있는데 이것은 진동과 정지들의 패턴을 의미한다. 바이브레이션은 {{domxref("window.navigator.vibrate()")}} 라는 하나의 메소드로 제어된다.

+ +

한번 진동시키기

+ +

여러분은 다음과 같이 하나의 값 또는 하나의 값으로 구성된 배열을 명시함으로써 바이브레이션 하드웨어를 1회 진동시킬 수 있을 것이다.

+ +
window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+
+ +

이 두 가지 예제들은 디바이스를 200ms 동안 진동시킨다.

+ +

패턴이 있는 진동 만들기

+ +

배 열에 있는 값들은 다바이스가 진동해야 하는 시간과 진동하지 않아야 하는 시간을 번갈아가며 적어놓은 것이다. 배열에 있는 각 값은 하나의 정수로 변환된 후 차례대로 장치가 진동해야 하는 시간, 장치가 진동하지 않아야 하는 시간으로 해석된다. 다음 예제를 보자.

+ +
window.navigator.vibrate([200, 100, 200]);
+
+ +

이 예제는 장치를 200ms 동안 진동시킨 후 100ms 동안 멈추게 하고 그 후 다시 200ms 동안 장치를 진동시킨다.

+ +

여 러분은 여러분이 원하는 진동/정지 페어를 명시할 수 있다. 그리고 배열 내에 홀수 또는 짝수개의 값들을 명시할 수도 있다. 이렇게 하는 이유는 각각의 진동 시간이 끝나면 디바이스의 진동은 자동적으로 멈추게 되므로 배열의 마지막 값이 정지에 해당하는 값이라면 그 값은 아무 의미가 없기 때문이다.

+ +

이미 실행중인 진동 캔슬하기

+ +

{{domxref("window.navigator.vibrate()")}} 메소드를 0값을 호출하거나, 빈 배열, 0값으로 구성된 배열로 호출하면 현재 진행중인 진동패턴은 취소될 것이다.

+ +

지속적인 진동 내보내기

+ +

Some basic setInterval and clearInterval action will allow you to create persistent vibration:

+ +
var vibrateInterval;
+
+// Starts vibration at passed in level
+function startVibrate(duration) {
+    navigator.vibrate(duration);
+}
+
+// Stops vibration
+function stopVibrate() {
+    // Clear interval and stop persistent vibrating
+    if(vibrateInterval) clearInterval(vibrateInterval);
+    navigator.vibrate(0);
+}
+
+// Start persistent vibration at given duration and interval
+// Assumes a number value is given
+function startPeristentVibrate(duration, interval) {
+    vibrateInterval = setInterval(function() {
+        startVibrate(duration);
+    }, interval);
+}
+ +

Of course the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).

+ +

Why use Vibration API?

+ +

This API is clearly targeted toward mobile devices. The Vibration API would be good for alerts within mobile web applications, and would be especially awesome when used in games or media-heavy applications. Imagine watching a video on your mobile device, and during an explosion scene, your phone got a bit of a shake. Or playing Bomberman and feeling a gentle kick when a block explodes!

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Initial specification.
+ +

브라우저 호환성

+ +
{{Compat("api.Navigator.vibrate")}}
+ +

같이 보기

+ + diff --git a/files/ko/web/api/web_workers_api/basic_usage/index.html b/files/ko/web/api/web_workers_api/basic_usage/index.html deleted file mode 100644 index eb0e309e8e..0000000000 --- a/files/ko/web/api/web_workers_api/basic_usage/index.html +++ /dev/null @@ -1,908 +0,0 @@ ---- -title: 웹 워커 사용하기 -slug: Web/API/Web_Workers_API/basic_usage -translation_of: Web/API/Web_Workers_API/Using_web_workers ---- -
-

웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공합니다. 워커 스레드는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 또한 워커는 ( responseXML 과 channel속성이 언제나 null이지만) XMLHttpRequest 를 사용하여 I/O작업을 수행할 수도 있습니다. 워커는 생성이 된 후에 생성자가 명시한 이벤트 핸들러로 메세지를 올려서 자신의 하위 작업(spawning task)에 메세지를 전달할 수 도 있습니다. 본 글에서 전용 워커와 공유 워커에 대하여 소개합니다.

-
- -

Web Workers API

- -

Worker는 생성자(예를 들면 {{domxref("Worker.Worker", "Worker()")}})를 사용하여 생성된 객체이며 이름있는 자바스크립트 파일(이 파일은 Worker 스레드에서 실행하는 코드를 가집니다)을 실행합니다. 또한 Worker는 현재의 {{domxref("window")}}와는 다른 글로벌 컨텍스트에서 실행됩니다. 따라서 {{domxref("Worker")}} 내에서 현재의 글로벌 스코프를 접근하기 위해 ({{domxref("window.self","self")}} 대신에) {{domxref("window")}}를 사용해도 오류가 돌아옵니다.

- -

Worker의 콘텍스트는 Dedicated Workers(한 개의 스크립트가 이용하는 표준적인 Workers)일 경우{{domxref("DedicatedWorkerGlobalScope")}} 객체로 제공됩니다. (Shared Workers의 경우는 {{domxref("SharedWorkerGlobalScope")}}). Dedicated Worker 는 Worker 를 처음에 생성한 스크립트만 액세스 할 수 있습니다. 반면에 Shared Worker는, 복수의 스크립트에서 액세스 할 수 있습니다.

- -
-

메모: Worker 의 레퍼런스 문서나 추가적인 가이드에 대해서는 The Web Workers API landing page를 봐 주세요.

-
- -

Worker Thread에서는 몇 가지 제한 하에서 어떤 코드라도 실행할 수 있습니다. 예를 들어, Worker내에서는 직접 DOM 를 조작할 수 없습니다. 그리고 {{domxref("window")}} 객체의 기본 메서드나 속성에서 사용할 수 없는 것들이 있습니다. 그럼에도 WebSockets과 IndexedDB, Data Store API(Firefox OS 한정)와 같은 데이터 스토리지 메커니즘 등, window에 있는 다수의 아이템을 사용할 수 있습니다.자세한 것은 Functions and classes available to workers를 봐 주세요.

- -

Worker와 메인 스레드 사이에서는 메시지 시스템을 통해 데이터를 발송합니다. 양쪽 모두 postMessage() 메서드를 사용하여 메시지를 발송하고, onmessage이벤트 핸들러에 의해 메시지에 응답합니다(메시지는 {{event("Message")}}이벤트의 data 속성에 들어갑니다). 데이터는 공유되지 않고 복사됩니다.

- -

Worker 는 새로운 Worker 를 작성할 수 있습니다만, 생성된 Worker는 같은 부모 페이지일 경우에 한합니다. 추가적으로 Worker는 네트워크 I/O를 위한 XMLHttpRequest를 사용할 수 있으나,  responseXML의 exception과 channel속성의 XMLHttpRequest는 항상 null을 반환합니다.

- -

Dedicated workers

- -

As mentioned above, a dedicated worker is only accessible by the script that called it. In this section we'll discuss the JavaScript found in our Basic dedicated worker example (run dedicated worker): This allows you to enter two numbers to be multiplied together. The numbers are sent to a dedicated worker, multiplied together, and the result is returned to the page and displayed.

- -

This example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. More advanced details are covered later on in the article.

- -

Worker feature detection

- -

For slightly more controlled error handling and backwards compatibility, it is a good idea to wrap your worker accessing code in the following (main.js):

- -
if (window.Worker) {
-
-  ...
-
-}
- -

Spawning a dedicated worker

- -

Creating a new worker is simple. All you need to do is call the {{domxref("Worker.Worker", "Worker()")}} constructor, specifying the URI of a script to execute in the worker thread (main.js):

- -
var myWorker = new Worker("worker.js");
- -

Sending messages to and from a dedicated worker

- -

The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.onmessage", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this (main.js):

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

So here we have two {{htmlelement("input")}} elements represented by the variables first and second; when the value of either is changed, myWorker.postMessage([first.value,second.value]) is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message.

- -

In the worker, we can respond when the message is received by writing an event handler block like this (worker.js):

- -
onmessage = function(e) {
-  console.log('Message received from main script');
-  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-  console.log('Posting message back to main script');
-  postMessage(workerResult);
-}
- -

The onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute. Here we simply multiply together the two numbers then use postMessage() again, to post the result back to the main thread.

- -

Back in the main thread, we use onmessage again, to respond to the message sent back from the worker:

- -
myWorker.onmessage = function(e) {
-  result.textContent = e.data;
-  console.log('Message received from worker');
-}
- -

Here we grab the message event data and set it as the textContent of the result paragraph, so the user can see the result of the calculation.

- -
-

Note: The URI passed as a parameter to the Worker constructor must obey the same-origin policy .

- -

There is currently disagreement among browsers vendors on what URIs are of the same-origin; Gecko 10.0 {{geckoRelease("10.0")}} and later do allow data URIs and Internet Explorer 10 does not allow Blob URIs as a valid script for workers.

-
- -
-

Note: Notice that onmessage and postMessage() need to be hung off the Worker object when used in the main script thread, but not when used in the worker. This is because, inside the worker, the worker is effectively the global scope.

-
- -
-

Note: When a message is passed between the main thread and worker, it is copied or "transferred" (moved), not shared. Read {{anch("Transferring data to and from workers further details", "Transferring data to and from workers: further details")}} for a much more thorough explanation.

-
- -

Terminating a worker

- -

If you need to immediately terminate a running worker from the main thread, you can do so by calling the worker's {{domxref("Worker", "terminate")}} method:

- -
myWorker.terminate();
- -

The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.

- -

In the worker thread, workers may close themselves by calling their own {{domxref("WorkerGlobalScope", "close")}} method:

- -
close();
- -

Handling errors

- -

When a runtime error occurs in the worker, its onerror event handler is called. It receives an event named error which implements the ErrorEvent interface.

- -

The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's preventDefault() method.

- -

The error event has the following three fields that are of interest:

- -
-
message
-
A human-readable error message.
-
filename
-
The name of the script file in which the error occurred.
-
lineno
-
The line number of the script file on which the error occurred.
-
- -

Spawning subworkers

- -

Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the same origin as the parent page. Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page. This makes it easier for workers to keep track of where their dependencies are.

- -

Importing scripts and libraries

- -

Worker threads have access to a global function, importScripts(), which lets them import scripts. It accepts zero or more URIs as parameters to resources to import; all of the following examples are valid:

- -
importScripts();                         /* imports nothing */
-importScripts('foo.js');                 /* imports just "foo.js" */
-importScripts('foo.js', 'bar.js');       /* imports two scripts */
-importScripts('//example.com/hello.js'); /* You can import scripts from other origins */
- -

The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, NETWORK_ERROR is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{domxref("window.setTimeout()")}}) will still be functional though. Function declarations after the importScripts()method are also kept, since these are always evaluated before the rest of the code.

- -
-

Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.

-
- -

Shared workers

- -

A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers. In this section we'll discuss the JavaScript found in our Basic shared worker example (run shared worker): This is very similar to the basic dedicated worker example, except that it has two functions available handled by different script files: multiplying two numbers, or squaring a number. Both scripts use the same worker to do the actual calculation required.

- -

Here we'll concentrate on the differences between dedicated and shared workers. Note that in this example we have two HTML pages, each with JavaScript applied that uses the same single worker file.

- -
-

Note: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host, and port).

-
- -
-

Note: In Firefox, shared workers cannot be shared between documents loaded in private and non-private windows ({{bug(1177621)}}).

-
- -

Spawning a shared worker

- -

Spawning a new worker is pretty much the same as with a dedicated worker, but with a different constructor name (see index.html and index2.html) — each one has to spin up the worker using code like the following:

- -
var myWorker = new SharedWorker("worker.js");
- -

One big difference is that with a shared worker you have to communicate via a port object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers).

- -

The port connection needs to be started either implicitly by use of the onmessage event handler or explicitly with the start()method before any messages can be posted. Although the multiply.js and worker.js files in the demo currently call the start()method, those calls are not necessary since the onmessage event handler is being used. Calling start() is only needed if the message event is wired up via the addEventListener() method.

- -

When using the start() method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed.

- -
myWorker.port.start();  // called in parent thread
- -
port.start(); // called in worker thread, assuming the port variable references a port
- -

Sending messages to and from a shared worker

- -

Now messages can be sent to the worker as before, but the postMessage() method has to be invoked through the port object (again, you'll see similar constructs in both multiply.js and square.js):

- -
squareNumber.onchange = function() {
-  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
-  console.log('Message posted to worker');
-}
- -

Now, on to the worker. There is a bit more complexity here as well (worker.js):

- -
onconnect = function(e) {
-  var port = e.ports[0];
-
-  port.onmessage = function(e) {
-    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-    port.postMessage(workerResult);
-  }
-}
- -

First, we use an onconnect handler to fire code when a connection to the port happens (i.e. when the onmessage event handler in the parent thread is setup, or when the start() method is explicitly called in the parent thread).

- -

We use the ports attribute of this event object to grab the port and store it in a variable.

- -

Next, we add a message handler on the port to do the calculation and return the result to the main thread. Setting up this messagehandler in the worker thread also implicitly opens the port connection back to the parent thread, so the call to port.start() is not actually needed, as noted above.

- -

Finally, back in the main script, we deal with the message (again, you'll see similar constructs in both multiply.js and square.js):

- -
myWorker.port.onmessage = function(e) {
-  result2.textContent = e.data;
-  console.log('Message received from worker');
-}
- -

When a message comes back through the port from the worker, we check what result type it is, then insert the calculation result inside the appropriate result paragraph.

- -

About thread safety

- -

The {{domxref("Worker")}} interface spawns real OS-level threads, and mindful programmers may be concerned that concurrency can cause “interesting” effects in your code if you aren't careful.

- -

However, since web workers have carefully controlled communication points with other threads, it's actually very hard to cause concurrency problems. There's no access to non-threadsafe components or the DOM. And you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code.

- -

Content security policy

- -

Workers are considered to have their own execution context, distinct from the document that created them. For this reasons they are, in general, not governed by the content security policy of the document (or parent worker) that created them. So for example, suppose a document is served with the following header:

- -
Content-Security-Policy: script-src 'self'
- -

Among other things, this will prevent any scripts it includes from using eval(). However, if the script constructs a worker, code running in the worker's context will be allowed to use eval().
-
- To specify a content security policy for the worker, set a Content-Security-Policy response header for the request which delivered the worker script itself.
-
- The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the CSP of the document or worker than created it.

- -

Transferring data to and from workers: further details

- -

Data passed between the main page and workers is copied, not shared. Objects are serialized as they're handed to the worker, and subsequently, de-serialized on the other end. The page and worker do not share the same instance, so the end result is that a duplicate is created on each end. Most browsers implement this feature as structured cloning.

- -

To illustrate this, let's create for didactical purpose a function named emulateMessage(), which will simulate the behavior of a value that is cloned and not shared during the passage from a worker to the main page or vice versa:

- -
function emulateMessage (vVal) {
-    return eval("(" + JSON.stringify(vVal) + ")");
-}
-
-// Tests
-
-// test #1
-var example1 = new Number(3);
-console.log(typeof example1); // object
-console.log(typeof emulateMessage(example1)); // number
-
-// test #2
-var example2 = true;
-console.log(typeof example2); // boolean
-console.log(typeof emulateMessage(example2)); // boolean
-
-// test #3
-var example3 = new String("Hello World");
-console.log(typeof example3); // object
-console.log(typeof emulateMessage(example3)); // string
-
-// test #4
-var example4 = {
-    "name": "John Smith",
-    "age": 43
-};
-console.log(typeof example4); // object
-console.log(typeof emulateMessage(example4)); // object
-
-// test #5
-function Animal (sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
-}
-var example5 = new Animal("Cat", 3);
-alert(example5.constructor); // Animal
-alert(emulateMessage(example5).constructor); // Object
- -

A value that is cloned and not shared is called message. As you will probably know by now, messages can be sent to and from the main thread by using postMessage(), and the message event's {{domxref("MessageEvent.data", "data")}} attribute contains data passed back from the worker.

- -

example.html: (the main page):

- -
var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
-  console.log("Worker said : " + oEvent.data);
-};
-
-myWorker.postMessage("ali");
- -

my_task.js (the worker):

- -
postMessage("I\'m working before postMessage(\'ali\').");
-
-onmessage = function (oEvent) {
-  postMessage("Hi " + oEvent.data);
-};
- -

The structured cloning algorithm can accept JSON and a few things that JSON can't — like circular references.

- -

Passing data examples

- -

Example #1: Create a generic "asynchronous eval()"

- -

The following example shows how to use a worker in order to asynchronously execute any JavaScript code allowed in a worker, through eval() within the worker:

- -
// Syntax: asyncEval(code[, listener])
-
-var asyncEval = (function () {
-  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
-
-  oParser.onmessage = function (oEvent) {
-    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
-    delete aListeners[oEvent.data.id];
-  };
-
-  return function (sCode, fListener) {
-    aListeners.push(fListener || null);
-    oParser.postMessage({
-      "id": aListeners.length - 1,
-      "code": sCode
-    });
-  };
-})();
- -

The data URL is equivalent to a network request, with the following response:

- -
onmessage = function (oEvent) {
-  postMessage({
-    "id": oEvent.data.id,
-    "evaluated": eval(oEvent.data.code)
-  });
-}
- -

Sample usage:

- -
// asynchronous alert message...
-asyncEval("3 + 2", function (sMessage) {
-    alert("3 + 2 = " + sMessage);
-});
-
-// asynchronous print message...
-asyncEval("\"Hello World!!!\"", function (sHTML) {
-    document.body.appendChild(document.createTextNode(sHTML));
-});
-
-// asynchronous void...
-asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
- -

Example #2: Advanced passing JSON Data and creating a switching system

- -

If you have to pass some complex data and have to call many different functions both on the main page and in the Worker, you can create a system which groups everything together.

- -

First, we create a QueryableWorker class that takes the url of the worker, a default listener, and an error handler, and this class is gonna keep track of a list of listeners and help us communicate wirh the worker:

- -
function QueryableWorker(url, defaultListener, onError){
-    var instance = this,
-        worker = new Worker(url),
-        listeners = {};
-
-    this.defaultListener = defaultListener || function(){};
-
-    if (onError) {worker.onerror = onError;}
-
-    this.postMessage = function(message){
-        worker.postMessage(message);
-    }
-
-    this.terminate = function(){
-        worker.terminate();
-    }
-}
- -

Then we add the methods of adding/removing listeners:

- -
this.addListeners = function(name, listener){
-    listeners[name] = listener;
-}
-
-this.removeListeners = function(name){
-    delete listeners[name];
-}
- -

Here we let the worker handle two simple operations for illuatration: getting the difference of two numbers and making an alert after three seconds. In order to acheieve that we first implement a sendQuery method which queries if the worker actually has the corresponding methods to do what we want.

- -
/*
-  This functions takes at least one argument, the method name we want to query.
-  Then we can pass in the arguments that the method needs.
- */
-this.sendQuery = function(){
-    if (arguments.length < 1){
-         throw new TypeError("QueryableWorker.sendQuery takes at least one argument");
-         return;
-    }
-    worker.postMessage({
-        "queryMethod": arguments[0],
-        "queryArguments": Array.prototype.slice.call(arguments, 1)
-    });
-}
- -

We finish QueryableWorker with the onmessage method. If the worker has the corresponding methods we queried, it should return the name of the corresponding listener and the arguments it needs, we just need to find it in listeners.:

- -
worker.onmessage = function(event){
-    if (event.data instanceof Object &&
-        event.data.hasOwnProperty("queryMethodListener") &&
-        event.data.hasOwnProperty("queryMethodArguments")){
-        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
-    } else {
-        this.defaultListener.call(instance, event.data);
-    }
-}
- -

Now onto the worker.  First we need to have the methods to handle the two simple operations:

- -
var queryableFunctions = {
-    getDifference: function(a, b){
-        reply("printStuff", a - b);
-    },
-    waitSomeTime: function(){
-        setTimeout(function(){
-            reply("doAlert", 3, "seconds");
-        }, 3000);
-    }
-}
-
-function reply(){
-    if (arguments.length < 1) {
-        throw new TypeError("reply - takes at least one argument");
-        return;
-    }
-    postMessage({
-        queryMethodListener: arguments[0],
-        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
-    });
-}
-
-/* This method is called when main page calls QueryWorker's postMessage method directly*/
-function defaultReply(message){
-    // do something
-}
- -

And the onmessage method is now trivial:

- -
onmessage = function(event){
-    if (event.data instanceof Object &&
-        event.data.hasOwnProperty("queryMethod") &&
-        event.data.hasOwnProperty("queryMethodArguments")){
-        queryableFunctions[event.data.queryMethod]
-            .apply(self, event.data.queryMethodArguments);
-    } else {
-        defaultReply(event.data);
-    }
-}
- -

Here are the full implementation:

- -

example.html (the main page):

- -
<!doctype html>
-  <html>
-    <head>
-      <meta charset="UTF-8"  />
-      <title>MDN Example - Queryable worker</title>
-    <script type="text/javascript">
-    /*
-      QueryableWorker instances methods:
-        * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
-        * postMessage(string or JSON Data): see Worker.prototype.postMessage()
-        * terminate(): terminates the Worker
-        * addListener(name, function): adds a listener
-        * removeListener(name): removes a listener
-      QueryableWorker instances properties:
-        * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
-     */
-    function QueryableWorker(url, defaultListener, onError){
-      var instance = this,
-      worker = new Worker(url),
-      listeners = {};
-
-      this.defaultListener = defaultListener || function(){};
-
-      if (onError) {worker.onerror = onError;}
-
-      this.postMessage = function(message){
-        worker.postMessage(message);
-      }
-
-      this.terminate = function(){
-        worker.terminate();
-      }
-
-      this.addListeners = function(name, listener){
-        listeners[name] = listener;
-      }
-
-      this.removeListeners = function(name){
-        delete listeners[name];
-      }
-
-      worker.onmessage = function(event){
-        if (event.data instanceof Object &&
-          event.data.hasOwnProperty("queryMethodListener") &&
-          event.data.hasOwnProperty("queryMethodArguments")){
-          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
-        } else {
-          this.defaultListener.call(instance, event.data);
-        }
-      }
-    }
-
-    // your custom "queryable" worker
-    var myTask = new QueryableWorker("my_task.js");
-
-    // your custom "listeners"
-    myTask.addListener("printStuff", function (result) {
-      document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + result + "!"));
-    });
-
-    myTask.addListener("doAlert", function (time, unit) {
-      alert("Worker waited for " + time + " " + unit + " :-)");
-    });
-</script>
-</head>
-<body>
-  <ul>
-    <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
-    <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li>
-    <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li>
-  </ul>
-</body>
-</html>
- -

my_task.js (the worker):

- -
var queryableFunctions = {
-  // example #1: get the difference between two numbers:
-  getDifference: function (nMinuend, nSubtrahend) {
-      reply("printSomething", nMinuend - nSubtrahend);
-  },
-  // example #2: wait three seconds
-  waitSomeTime: function () {
-      setTimeout(function() { reply("doAlert", 3, "seconds"); }, 3000);
-  }
-};
-
-// system functions
-
-function defaultReply (message) {
-  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
-  // do something
-}
-
-function reply () {
-  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
-  postMessage({ "queryMethodListener": arguments[0], "queryMethodArguments": Array.prototype.slice.call(arguments, 1) });
-}
-
-onmessage = function (oEvent) {
-  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("queryMethod") && oEvent.data.hasOwnProperty("queryMethodArguments")) {
-    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
-  } else {
-    defaultReply(oEvent.data);
-  }
-};
- -

It is possible to switch the content of each mainpage -> worker and worker -> mainpage message. And the property names "queryMethod", "queryMethodListeners", "queryMethodArguments" can be anything as long as they are consistent in QueryableWorker and the worker.

- -

Passing data by transferring ownership (transferable objects)

- -

Google Chrome 17+ and Firefox 18+ contain an additional way to pass certain types of objects (transferable objects, that is objects implementing the {{domxref("Transferable")}} interface) to or from a worker with high performance. Transferable objects are transferred from one context to another with a zero-copy operation, which results in a vast performance improvement when sending large data sets. Think of it as pass-by-reference if you're from the C/C++ world. However, unlike pass-by-reference, the 'version' from the calling context is no longer available once transferred. Its ownership is transferred to the new context. For example, when transferring an {{domxref("ArrayBuffer")}} from your main app to a worker script, the original {{domxref("ArrayBuffer")}} is cleared and no longer usable. Its content is (quite literally) transferred to the worker context.

- -
// Create a 32MB "file" and fill it.
-var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
-for (var i = 0; i < uInt8Array.length; ++i) {
-  uInt8Array[i] = i;
-}
-
-worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
- -
-

Note: For more information on transferable objects, performance, and feature-detection for this method, read Transferable Objects: Lightning Fast! on HTML5 Rocks.

-
- -

Embedded workers

- -

There is not an "official" way to embed the code of a worker within a web page, like {{HTMLElement("script")}} elements do for normal scripts. But a {{HTMLElement("script")}} element that does not have a src attribute and has a type attribute that does not identify an executable MIME type can be considered a data block element that JavaScript could use. "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>MDN Example - Embedded worker</title>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
-  var myVar = "Hello World!";
-  // Rest of your worker code goes here.
-</script>
-<script type="text/javascript">
-  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
-  function pageLog (sMsg) {
-    // Use a fragment: browser will only render/reflow once.
-    var oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement("br"));
-    document.querySelector("#logDisplay").appendChild(oFragm);
-  }
-</script>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
-  onmessage = function (oEvent) {
-    postMessage(myVar);
-  };
-  // Rest of your worker code goes here.
-</script>
-<script type="text/javascript">
-  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
-
-  // In the past...:
-  // blob builder existed
-  // ...but now we use Blob...:
-  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
-
-  // Creating a new document.worker property containing all our "text/js-worker" scripts.
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function (oEvent) {
-    pageLog("Received: " + oEvent.data);
-  };
-
-  // Start the worker.
-  window.onload = function() { document.worker.postMessage(""); };
-</script>
-</head>
-<body><div id="logDisplay"></div></body>
-</html>
- -

The embedded worker is now nested into a new custom document.worker property.

- -

It is also worth noting that you can also convert a function into a Blob, then generate an object URL from that blob. For example:

- -
function fn2workerURL(fn) {
-  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
-  return URL.createObjectURL(blob)
-}
- -

Further examples

- -

This section provides further examples of how to use web workers.

- -

Performing computations in the background

- -

Workers are mainly useful for allowing your code to perform processor-intensive calculations without blocking the user interface thread. In this example, a worker is used to calculate Fibonacci numbers.

- -

The JavaScript code

- -

The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.

- -
var results = [];
-
-function resultReceiver(event) {
-  results.push(parseInt(event.data));
-  if (results.length == 2) {
-    postMessage(results[0] + results[1]);
-  }
-}
-
-function errorReceiver(event) {
-  throw event.data;
-}
-
-onmessage = function(event) {
-  var n = parseInt(event.data);
-
-  if (n == 0 || n == 1) {
-    postMessage(n);
-    return;
-  }
-
-  for (var i = 1; i <= 2; i++) {
-    var worker = new Worker("fibonacci.js");
-    worker.onmessage = resultReceiver;
-    worker.onerror = errorReceiver;
-    worker.postMessage(n - i);
-  }
- };
- -

The worker sets the property onmessage to a function which will receive messages sent when the worker object's postMessage() is called (note that this differs from defining a global variable of that name, or defining a function with that name. var onmessage and function onmessage will define global properties with those names, but they will not register the function to receive messages sent by the web page that created the worker). This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.

- -

The HTML code

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8"  />
-    <title>Test threads fibonacci</title>
-  </head>
-  <body>
-
-  <div id="result"></div>
-
-  <script language="javascript">
-
-    var worker = new Worker("fibonacci.js");
-
-    worker.onmessage = function(event) {
-      document.getElementById("result").textContent = event.data;
-      dump("Got: " + event.data + "\n");
-    };
-
-    worker.onerror = function(error) {
-      dump("Worker error: " + error.message + "\n");
-      throw error;
-    };
-
-    worker.postMessage("5");
-
-  </script>
-  </body>
-</html>
- -

The web page creates a div element with the ID result , which gets used to display the result, then spawns the worker. After spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message.

- -

Finally, a message is sent to the worker to start it.

- -

Try this example.

- -

Performing web I/O in the background

- -

You can find an example of this in the article Using workers in extensions .

- -

Dividing tasks among multiple workers

- -

As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.

- -

Other types of worker

- -

In addition to dedicated and shared web workers, there are other types of worker available:

- - - -

Functions and interfaces available in workers

- -

You can use most standard JavaScript features inside a web worker, including:

- - - -

The main thing you can't do in a Worker is directly affect the parent page. This includes manipulating the DOM and using that page's objects. You have to do it indirectly, by sending a message back to the main script via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, then actioning the changes from there.

- -
-

Note: For a complete list of functions available to workers, see Functions and interfaces available to workers.

-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#toc-workers')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers')}}{{Spec2('Web Workers')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4[1]{{CompatGeckoDesktop("1.9.1")}}10.010.6[1]4[2]
Shared workers4[1]{{CompatGeckoDesktop(29)}}{{CompatNo}}10.65
- {{CompatNo}} 6.1[4]
Passing data using structured cloning13{{CompatGeckoDesktop(8)}}10.011.56
Passing data using transferable objects17 {{property_prefix("webkit")}}
- 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[3]
- 23		{{CompatGeckoDesktop(21)}}11156[3]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44[1]3.51.0.110.011.5[1]5.1[2]
Shared workers{{CompatNo}}4[1]81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using structured cloning{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using transferable objects{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
- -

[1] Chrome and Opera give an error "Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'." when you try to run a worker locally. It needs to be on a proper domain.

- -

[2] As of Safari 7.1.2, you can call console.log from inside a worker, but it won't print anything to the console. Older versions of Safari don't allow you to call console.log from inside a worker.

- -

[3] This feature is implemented prefixed as webkitURL.

- -

[4] Safari removed SharedWorker support.

- -

See also

- - diff --git a/files/ko/web/api/web_workers_api/using_web_workers/index.html b/files/ko/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..eb0e309e8e --- /dev/null +++ b/files/ko/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,908 @@ +--- +title: 웹 워커 사용하기 +slug: Web/API/Web_Workers_API/basic_usage +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +
+

웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공합니다. 워커 스레드는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 또한 워커는 ( responseXML 과 channel속성이 언제나 null이지만) XMLHttpRequest 를 사용하여 I/O작업을 수행할 수도 있습니다. 워커는 생성이 된 후에 생성자가 명시한 이벤트 핸들러로 메세지를 올려서 자신의 하위 작업(spawning task)에 메세지를 전달할 수 도 있습니다. 본 글에서 전용 워커와 공유 워커에 대하여 소개합니다.

+
+ +

Web Workers API

+ +

Worker는 생성자(예를 들면 {{domxref("Worker.Worker", "Worker()")}})를 사용하여 생성된 객체이며 이름있는 자바스크립트 파일(이 파일은 Worker 스레드에서 실행하는 코드를 가집니다)을 실행합니다. 또한 Worker는 현재의 {{domxref("window")}}와는 다른 글로벌 컨텍스트에서 실행됩니다. 따라서 {{domxref("Worker")}} 내에서 현재의 글로벌 스코프를 접근하기 위해 ({{domxref("window.self","self")}} 대신에) {{domxref("window")}}를 사용해도 오류가 돌아옵니다.

+ +

Worker의 콘텍스트는 Dedicated Workers(한 개의 스크립트가 이용하는 표준적인 Workers)일 경우{{domxref("DedicatedWorkerGlobalScope")}} 객체로 제공됩니다. (Shared Workers의 경우는 {{domxref("SharedWorkerGlobalScope")}}). Dedicated Worker 는 Worker 를 처음에 생성한 스크립트만 액세스 할 수 있습니다. 반면에 Shared Worker는, 복수의 스크립트에서 액세스 할 수 있습니다.

+ +
+

메모: Worker 의 레퍼런스 문서나 추가적인 가이드에 대해서는 The Web Workers API landing page를 봐 주세요.

+
+ +

Worker Thread에서는 몇 가지 제한 하에서 어떤 코드라도 실행할 수 있습니다. 예를 들어, Worker내에서는 직접 DOM 를 조작할 수 없습니다. 그리고 {{domxref("window")}} 객체의 기본 메서드나 속성에서 사용할 수 없는 것들이 있습니다. 그럼에도 WebSockets과 IndexedDB, Data Store API(Firefox OS 한정)와 같은 데이터 스토리지 메커니즘 등, window에 있는 다수의 아이템을 사용할 수 있습니다.자세한 것은 Functions and classes available to workers를 봐 주세요.

+ +

Worker와 메인 스레드 사이에서는 메시지 시스템을 통해 데이터를 발송합니다. 양쪽 모두 postMessage() 메서드를 사용하여 메시지를 발송하고, onmessage이벤트 핸들러에 의해 메시지에 응답합니다(메시지는 {{event("Message")}}이벤트의 data 속성에 들어갑니다). 데이터는 공유되지 않고 복사됩니다.

+ +

Worker 는 새로운 Worker 를 작성할 수 있습니다만, 생성된 Worker는 같은 부모 페이지일 경우에 한합니다. 추가적으로 Worker는 네트워크 I/O를 위한 XMLHttpRequest를 사용할 수 있으나,  responseXML의 exception과 channel속성의 XMLHttpRequest는 항상 null을 반환합니다.

+ +

Dedicated workers

+ +

As mentioned above, a dedicated worker is only accessible by the script that called it. In this section we'll discuss the JavaScript found in our Basic dedicated worker example (run dedicated worker): This allows you to enter two numbers to be multiplied together. The numbers are sent to a dedicated worker, multiplied together, and the result is returned to the page and displayed.

+ +

This example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. More advanced details are covered later on in the article.

+ +

Worker feature detection

+ +

For slightly more controlled error handling and backwards compatibility, it is a good idea to wrap your worker accessing code in the following (main.js):

+ +
if (window.Worker) {
+
+  ...
+
+}
+ +

Spawning a dedicated worker

+ +

Creating a new worker is simple. All you need to do is call the {{domxref("Worker.Worker", "Worker()")}} constructor, specifying the URI of a script to execute in the worker thread (main.js):

+ +
var myWorker = new Worker("worker.js");
+ +

Sending messages to and from a dedicated worker

+ +

The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.onmessage", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this (main.js):

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

So here we have two {{htmlelement("input")}} elements represented by the variables first and second; when the value of either is changed, myWorker.postMessage([first.value,second.value]) is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message.

+ +

In the worker, we can respond when the message is received by writing an event handler block like this (worker.js):

+ +
onmessage = function(e) {
+  console.log('Message received from main script');
+  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  console.log('Posting message back to main script');
+  postMessage(workerResult);
+}
+ +

The onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute. Here we simply multiply together the two numbers then use postMessage() again, to post the result back to the main thread.

+ +

Back in the main thread, we use onmessage again, to respond to the message sent back from the worker:

+ +
myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

Here we grab the message event data and set it as the textContent of the result paragraph, so the user can see the result of the calculation.

+ +
+

Note: The URI passed as a parameter to the Worker constructor must obey the same-origin policy .

+ +

There is currently disagreement among browsers vendors on what URIs are of the same-origin; Gecko 10.0 {{geckoRelease("10.0")}} and later do allow data URIs and Internet Explorer 10 does not allow Blob URIs as a valid script for workers.

+
+ +
+

Note: Notice that onmessage and postMessage() need to be hung off the Worker object when used in the main script thread, but not when used in the worker. This is because, inside the worker, the worker is effectively the global scope.

+
+ +
+

Note: When a message is passed between the main thread and worker, it is copied or "transferred" (moved), not shared. Read {{anch("Transferring data to and from workers further details", "Transferring data to and from workers: further details")}} for a much more thorough explanation.

+
+ +

Terminating a worker

+ +

If you need to immediately terminate a running worker from the main thread, you can do so by calling the worker's {{domxref("Worker", "terminate")}} method:

+ +
myWorker.terminate();
+ +

The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.

+ +

In the worker thread, workers may close themselves by calling their own {{domxref("WorkerGlobalScope", "close")}} method:

+ +
close();
+ +

Handling errors

+ +

When a runtime error occurs in the worker, its onerror event handler is called. It receives an event named error which implements the ErrorEvent interface.

+ +

The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's preventDefault() method.

+ +

The error event has the following three fields that are of interest:

+ +
+
message
+
A human-readable error message.
+
filename
+
The name of the script file in which the error occurred.
+
lineno
+
The line number of the script file on which the error occurred.
+
+ +

Spawning subworkers

+ +

Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the same origin as the parent page. Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page. This makes it easier for workers to keep track of where their dependencies are.

+ +

Importing scripts and libraries

+ +

Worker threads have access to a global function, importScripts(), which lets them import scripts. It accepts zero or more URIs as parameters to resources to import; all of the following examples are valid:

+ +
importScripts();                         /* imports nothing */
+importScripts('foo.js');                 /* imports just "foo.js" */
+importScripts('foo.js', 'bar.js');       /* imports two scripts */
+importScripts('//example.com/hello.js'); /* You can import scripts from other origins */
+ +

The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, NETWORK_ERROR is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{domxref("window.setTimeout()")}}) will still be functional though. Function declarations after the importScripts()method are also kept, since these are always evaluated before the rest of the code.

+ +
+

Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.

+
+ +

Shared workers

+ +

A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers. In this section we'll discuss the JavaScript found in our Basic shared worker example (run shared worker): This is very similar to the basic dedicated worker example, except that it has two functions available handled by different script files: multiplying two numbers, or squaring a number. Both scripts use the same worker to do the actual calculation required.

+ +

Here we'll concentrate on the differences between dedicated and shared workers. Note that in this example we have two HTML pages, each with JavaScript applied that uses the same single worker file.

+ +
+

Note: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host, and port).

+
+ +
+

Note: In Firefox, shared workers cannot be shared between documents loaded in private and non-private windows ({{bug(1177621)}}).

+
+ +

Spawning a shared worker

+ +

Spawning a new worker is pretty much the same as with a dedicated worker, but with a different constructor name (see index.html and index2.html) — each one has to spin up the worker using code like the following:

+ +
var myWorker = new SharedWorker("worker.js");
+ +

One big difference is that with a shared worker you have to communicate via a port object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers).

+ +

The port connection needs to be started either implicitly by use of the onmessage event handler or explicitly with the start()method before any messages can be posted. Although the multiply.js and worker.js files in the demo currently call the start()method, those calls are not necessary since the onmessage event handler is being used. Calling start() is only needed if the message event is wired up via the addEventListener() method.

+ +

When using the start() method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed.

+ +
myWorker.port.start();  // called in parent thread
+ +
port.start(); // called in worker thread, assuming the port variable references a port
+ +

Sending messages to and from a shared worker

+ +

Now messages can be sent to the worker as before, but the postMessage() method has to be invoked through the port object (again, you'll see similar constructs in both multiply.js and square.js):

+ +
squareNumber.onchange = function() {
+  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
+  console.log('Message posted to worker');
+}
+ +

Now, on to the worker. There is a bit more complexity here as well (worker.js):

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.onmessage = function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  }
+}
+ +

First, we use an onconnect handler to fire code when a connection to the port happens (i.e. when the onmessage event handler in the parent thread is setup, or when the start() method is explicitly called in the parent thread).

+ +

We use the ports attribute of this event object to grab the port and store it in a variable.

+ +

Next, we add a message handler on the port to do the calculation and return the result to the main thread. Setting up this messagehandler in the worker thread also implicitly opens the port connection back to the parent thread, so the call to port.start() is not actually needed, as noted above.

+ +

Finally, back in the main script, we deal with the message (again, you'll see similar constructs in both multiply.js and square.js):

+ +
myWorker.port.onmessage = function(e) {
+  result2.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

When a message comes back through the port from the worker, we check what result type it is, then insert the calculation result inside the appropriate result paragraph.

+ +

About thread safety

+ +

The {{domxref("Worker")}} interface spawns real OS-level threads, and mindful programmers may be concerned that concurrency can cause “interesting” effects in your code if you aren't careful.

+ +

However, since web workers have carefully controlled communication points with other threads, it's actually very hard to cause concurrency problems. There's no access to non-threadsafe components or the DOM. And you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code.

+ +

Content security policy

+ +

Workers are considered to have their own execution context, distinct from the document that created them. For this reasons they are, in general, not governed by the content security policy of the document (or parent worker) that created them. So for example, suppose a document is served with the following header:

+ +
Content-Security-Policy: script-src 'self'
+ +

Among other things, this will prevent any scripts it includes from using eval(). However, if the script constructs a worker, code running in the worker's context will be allowed to use eval().
+
+ To specify a content security policy for the worker, set a Content-Security-Policy response header for the request which delivered the worker script itself.
+
+ The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the CSP of the document or worker than created it.

+ +

Transferring data to and from workers: further details

+ +

Data passed between the main page and workers is copied, not shared. Objects are serialized as they're handed to the worker, and subsequently, de-serialized on the other end. The page and worker do not share the same instance, so the end result is that a duplicate is created on each end. Most browsers implement this feature as structured cloning.

+ +

To illustrate this, let's create for didactical purpose a function named emulateMessage(), which will simulate the behavior of a value that is cloned and not shared during the passage from a worker to the main page or vice versa:

+ +
function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+console.log(typeof example1); // object
+console.log(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+console.log(typeof example2); // boolean
+console.log(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String("Hello World");
+console.log(typeof example3); // object
+console.log(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+console.log(typeof example4); // object
+console.log(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Object
+ +

A value that is cloned and not shared is called message. As you will probably know by now, messages can be sent to and from the main thread by using postMessage(), and the message event's {{domxref("MessageEvent.data", "data")}} attribute contains data passed back from the worker.

+ +

example.html: (the main page):

+ +
var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");
+ +

my_task.js (the worker):

+ +
postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};
+ +

The structured cloning algorithm can accept JSON and a few things that JSON can't — like circular references.

+ +

Passing data examples

+ +

Example #1: Create a generic "asynchronous eval()"

+ +

The following example shows how to use a worker in order to asynchronously execute any JavaScript code allowed in a worker, through eval() within the worker:

+ +
// Syntax: asyncEval(code[, listener])
+
+var asyncEval = (function () {
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+})();
+ +

The data URL is equivalent to a network request, with the following response:

+ +
onmessage = function (oEvent) {
+  postMessage({
+    "id": oEvent.data.id,
+    "evaluated": eval(oEvent.data.code)
+  });
+}
+ +

Sample usage:

+ +
// asynchronous alert message...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// asynchronous print message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// asynchronous void...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
+ +

Example #2: Advanced passing JSON Data and creating a switching system

+ +

If you have to pass some complex data and have to call many different functions both on the main page and in the Worker, you can create a system which groups everything together.

+ +

First, we create a QueryableWorker class that takes the url of the worker, a default listener, and an error handler, and this class is gonna keep track of a list of listeners and help us communicate wirh the worker:

+ +
function QueryableWorker(url, defaultListener, onError){
+    var instance = this,
+        worker = new Worker(url),
+        listeners = {};
+
+    this.defaultListener = defaultListener || function(){};
+
+    if (onError) {worker.onerror = onError;}
+
+    this.postMessage = function(message){
+        worker.postMessage(message);
+    }
+
+    this.terminate = function(){
+        worker.terminate();
+    }
+}
+ +

Then we add the methods of adding/removing listeners:

+ +
this.addListeners = function(name, listener){
+    listeners[name] = listener;
+}
+
+this.removeListeners = function(name){
+    delete listeners[name];
+}
+ +

Here we let the worker handle two simple operations for illuatration: getting the difference of two numbers and making an alert after three seconds. In order to acheieve that we first implement a sendQuery method which queries if the worker actually has the corresponding methods to do what we want.

+ +
/*
+  This functions takes at least one argument, the method name we want to query.
+  Then we can pass in the arguments that the method needs.
+ */
+this.sendQuery = function(){
+    if (arguments.length < 1){
+         throw new TypeError("QueryableWorker.sendQuery takes at least one argument");
+         return;
+    }
+    worker.postMessage({
+        "queryMethod": arguments[0],
+        "queryArguments": Array.prototype.slice.call(arguments, 1)
+    });
+}
+ +

We finish QueryableWorker with the onmessage method. If the worker has the corresponding methods we queried, it should return the name of the corresponding listener and the arguments it needs, we just need to find it in listeners.:

+ +
worker.onmessage = function(event){
+    if (event.data instanceof Object &&
+        event.data.hasOwnProperty("queryMethodListener") &&
+        event.data.hasOwnProperty("queryMethodArguments")){
+        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+    } else {
+        this.defaultListener.call(instance, event.data);
+    }
+}
+ +

Now onto the worker.  First we need to have the methods to handle the two simple operations:

+ +
var queryableFunctions = {
+    getDifference: function(a, b){
+        reply("printStuff", a - b);
+    },
+    waitSomeTime: function(){
+        setTimeout(function(){
+            reply("doAlert", 3, "seconds");
+        }, 3000);
+    }
+}
+
+function reply(){
+    if (arguments.length < 1) {
+        throw new TypeError("reply - takes at least one argument");
+        return;
+    }
+    postMessage({
+        queryMethodListener: arguments[0],
+        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
+    });
+}
+
+/* This method is called when main page calls QueryWorker's postMessage method directly*/
+function defaultReply(message){
+    // do something
+}
+ +

And the onmessage method is now trivial:

+ +
onmessage = function(event){
+    if (event.data instanceof Object &&
+        event.data.hasOwnProperty("queryMethod") &&
+        event.data.hasOwnProperty("queryMethodArguments")){
+        queryableFunctions[event.data.queryMethod]
+            .apply(self, event.data.queryMethodArguments);
+    } else {
+        defaultReply(event.data);
+    }
+}
+ +

Here are the full implementation:

+ +

example.html (the main page):

+ +
<!doctype html>
+  <html>
+    <head>
+      <meta charset="UTF-8"  />
+      <title>MDN Example - Queryable worker</title>
+    <script type="text/javascript">
+    /*
+      QueryableWorker instances methods:
+        * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+        * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+        * terminate(): terminates the Worker
+        * addListener(name, function): adds a listener
+        * removeListener(name): removes a listener
+      QueryableWorker instances properties:
+        * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+     */
+    function QueryableWorker(url, defaultListener, onError){
+      var instance = this,
+      worker = new Worker(url),
+      listeners = {};
+
+      this.defaultListener = defaultListener || function(){};
+
+      if (onError) {worker.onerror = onError;}
+
+      this.postMessage = function(message){
+        worker.postMessage(message);
+      }
+
+      this.terminate = function(){
+        worker.terminate();
+      }
+
+      this.addListeners = function(name, listener){
+        listeners[name] = listener;
+      }
+
+      this.removeListeners = function(name){
+        delete listeners[name];
+      }
+
+      worker.onmessage = function(event){
+        if (event.data instanceof Object &&
+          event.data.hasOwnProperty("queryMethodListener") &&
+          event.data.hasOwnProperty("queryMethodArguments")){
+          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+        } else {
+          this.defaultListener.call(instance, event.data);
+        }
+      }
+    }
+
+    // your custom "queryable" worker
+    var myTask = new QueryableWorker("my_task.js");
+
+    // your custom "listeners"
+    myTask.addListener("printStuff", function (result) {
+      document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + result + "!"));
+    });
+
+    myTask.addListener("doAlert", function (time, unit) {
+      alert("Worker waited for " + time + " " + unit + " :-)");
+    });
+</script>
+</head>
+<body>
+  <ul>
+    <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
+    <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li>
+    <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li>
+  </ul>
+</body>
+</html>
+ +

my_task.js (the worker):

+ +
var queryableFunctions = {
+  // example #1: get the difference between two numbers:
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // example #2: wait three seconds
+  waitSomeTime: function () {
+      setTimeout(function() { reply("doAlert", 3, "seconds"); }, 3000);
+  }
+};
+
+// system functions
+
+function defaultReply (message) {
+  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
+  // do something
+}
+
+function reply () {
+  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "queryMethodListener": arguments[0], "queryMethodArguments": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("queryMethod") && oEvent.data.hasOwnProperty("queryMethodArguments")) {
+    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
+  } else {
+    defaultReply(oEvent.data);
+  }
+};
+ +

It is possible to switch the content of each mainpage -> worker and worker -> mainpage message. And the property names "queryMethod", "queryMethodListeners", "queryMethodArguments" can be anything as long as they are consistent in QueryableWorker and the worker.

+ +

Passing data by transferring ownership (transferable objects)

+ +

Google Chrome 17+ and Firefox 18+ contain an additional way to pass certain types of objects (transferable objects, that is objects implementing the {{domxref("Transferable")}} interface) to or from a worker with high performance. Transferable objects are transferred from one context to another with a zero-copy operation, which results in a vast performance improvement when sending large data sets. Think of it as pass-by-reference if you're from the C/C++ world. However, unlike pass-by-reference, the 'version' from the calling context is no longer available once transferred. Its ownership is transferred to the new context. For example, when transferring an {{domxref("ArrayBuffer")}} from your main app to a worker script, the original {{domxref("ArrayBuffer")}} is cleared and no longer usable. Its content is (quite literally) transferred to the worker context.

+ +
// Create a 32MB "file" and fill it.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i < uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+ +
+

Note: For more information on transferable objects, performance, and feature-detection for this method, read Transferable Objects: Lightning Fast! on HTML5 Rocks.

+
+ +

Embedded workers

+ +

There is not an "official" way to embed the code of a worker within a web page, like {{HTMLElement("script")}} elements do for normal scripts. But a {{HTMLElement("script")}} element that does not have a src attribute and has a type attribute that does not identify an executable MIME type can be considered a data block element that JavaScript could use. "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>MDN Example - Embedded worker</title>
+<script type="text/js-worker">
+  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
+  var myVar = "Hello World!";
+  // Rest of your worker code goes here.
+</script>
+<script type="text/javascript">
+  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
+  function pageLog (sMsg) {
+    // Use a fragment: browser will only render/reflow once.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+</script>
+<script type="text/js-worker">
+  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Rest of your worker code goes here.
+</script>
+<script type="text/javascript">
+  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
+
+  // In the past...:
+  // blob builder existed
+  // ...but now we use Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Creating a new document.worker property containing all our "text/js-worker" scripts.
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Start the worker.
+  window.onload = function() { document.worker.postMessage(""); };
+</script>
+</head>
+<body><div id="logDisplay"></div></body>
+</html>
+ +

The embedded worker is now nested into a new custom document.worker property.

+ +

It is also worth noting that you can also convert a function into a Blob, then generate an object URL from that blob. For example:

+ +
function fn2workerURL(fn) {
+  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
+  return URL.createObjectURL(blob)
+}
+ +

Further examples

+ +

This section provides further examples of how to use web workers.

+ +

Performing computations in the background

+ +

Workers are mainly useful for allowing your code to perform processor-intensive calculations without blocking the user interface thread. In this example, a worker is used to calculate Fibonacci numbers.

+ +

The JavaScript code

+ +

The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.

+ +
var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i <= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };
+ +

The worker sets the property onmessage to a function which will receive messages sent when the worker object's postMessage() is called (note that this differs from defining a global variable of that name, or defining a function with that name. var onmessage and function onmessage will define global properties with those names, but they will not register the function to receive messages sent by the web page that created the worker). This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.

+ +

The HTML code

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"  />
+    <title>Test threads fibonacci</title>
+  </head>
+  <body>
+
+  <div id="result"></div>
+
+  <script language="javascript">
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  </script>
+  </body>
+</html>
+ +

The web page creates a div element with the ID result , which gets used to display the result, then spawns the worker. After spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message.

+ +

Finally, a message is sent to the worker to start it.

+ +

Try this example.

+ +

Performing web I/O in the background

+ +

You can find an example of this in the article Using workers in extensions .

+ +

Dividing tasks among multiple workers

+ +

As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.

+ +

Other types of worker

+ +

In addition to dedicated and shared web workers, there are other types of worker available:

+ + + +

Functions and interfaces available in workers

+ +

You can use most standard JavaScript features inside a web worker, including:

+ + + +

The main thing you can't do in a Worker is directly affect the parent page. This includes manipulating the DOM and using that page's objects. You have to do it indirectly, by sending a message back to the main script via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, then actioning the changes from there.

+ +
+

Note: For a complete list of functions available to workers, see Functions and interfaces available to workers.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#toc-workers')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers')}}{{Spec2('Web Workers')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4[1]{{CompatGeckoDesktop("1.9.1")}}10.010.6[1]4[2]
Shared workers4[1]{{CompatGeckoDesktop(29)}}{{CompatNo}}10.65
+ {{CompatNo}} 6.1[4]
Passing data using structured cloning13{{CompatGeckoDesktop(8)}}10.011.56
Passing data using transferable objects17 {{property_prefix("webkit")}}
+ 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[3]
+ 23		{{CompatGeckoDesktop(21)}}11156[3]
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44[1]3.51.0.110.011.5[1]5.1[2]
Shared workers{{CompatNo}}4[1]81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using structured cloning{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using transferable objects{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ +

[1] Chrome and Opera give an error "Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'." when you try to run a worker locally. It needs to be on a proper domain.

+ +

[2] As of Safari 7.1.2, you can call console.log from inside a worker, but it won't print anything to the console. Older versions of Safari don't allow you to call console.log from inside a worker.

+ +

[3] This feature is implemented prefixed as webkitURL.

+ +

[4] Safari removed SharedWorker support.

+ +

See also

+ + diff --git a/files/ko/web/api/webgl_api/cross-domain_textures/index.html b/files/ko/web/api/webgl_api/cross-domain_textures/index.html deleted file mode 100644 index 94e969e37a..0000000000 --- a/files/ko/web/api/webgl_api/cross-domain_textures/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: 크로스-도메인 텍스쳐 -slug: Web/API/WebGL_API/Cross-Domain_Textures -tags: - - WebGL - - 웹지엘 - - 크로스 도메인 - - 텍스쳐 -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures -translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures ---- -

WebGL 텍스쳐 로딩은 크로스-도메인 접근 규칙에 따라 제약을 받습니다. 여러분이 만든 컨텐츠에서 다른 도메인의 텍스쳐, 즉, 크로스-도메인 텍스쳐를 로딩하려면 CORS 승인이 필요합니다. CORS에 대한 자세한 내용은 HTTP access control을 참고하시기 바랍니다.

- -

CORS 승인된 이미지를 WebGL 텍스쳐에 사용하는 방법에 대한 설명은 hacks.mozilla.org 문서와 예제를 참고하시기 바랍니다.

- -
-

역자 주 : 예제 링크가 깨져있는데, 원문에도 깨진 링크가 포함되어 있습니다.

-
- -
-

Note: WebGL 텍스쳐에 대한 CORS 지원과 이미지 요소의 crossOrigin 속성이 {{Gecko("8.0")}}에 구현되어 있습니다.

-
- -

내용이 변경되어 오염된(tainted) 쓰기 전용의 2D 캔버스는 WebGL 텍스쳐로 사용될 수 없습니다. 예를 들어 크로스-도메인 이미지가 그려진 2D {{ HTMLElement("canvas") }}는 오염된 2D 캔버스라고 할 수 있습니다.

- -
-

Note: 캔버스 2D의 drawImage에 대한 CORS 지원은 {{Gecko("9.0")}}에 구현되어 있습니다. 따라서 {{Gecko("9.0")}}에서부터는, CORS 승인된 크로스-도메인 이미지는 2D 캔버스를 오염시키지 않으며, CORS 승인된 크로스-도메인 이미지가 그려진 2D 캔버스도 WebGL 텍스쳐로 사용할 수 있습니다.

-
- -
-

Note: 크로스-도메인 비디오에 대한 CORS 지원과 {{ HTMLElement("video") }}요소의 crossorigin 속성은 {{Gecko("12.0")}}에 구현되어 있습니다.

-
- -

{{ languages( { "ja": "ja/WebGL/Cross-Domain_Textures", "ko": "ko/Web/WebGL/Cross-Domain_Textures"} ) }}

diff --git a/files/ko/web/api/websockets_api/index.html b/files/ko/web/api/websockets_api/index.html new file mode 100644 index 0000000000..8b6fd20b1a --- /dev/null +++ b/files/ko/web/api/websockets_api/index.html @@ -0,0 +1,172 @@ +--- +title: 웹 소켓 +slug: WebSockets +translation_of: Web/API/WebSockets_API +--- +

웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.

+ +
+

인터페이스

+ +
+
WebSocket
+
웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스
+
CloseEvent
+
연결이 종료 되었을 때 웹 소켓 객체에 의해 전달된 이벤트
+
MessageEvent
+
서버로 부터 메시지가 수신 되었을 때 웹 소켓 객체에 의해 전달된 이벤트
+
+
+ +
+

도구

+ + + + + + +
+ +

같이 보기

+ + + +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능ChromeFirefox (Gecko)Internet ExplorerOperaSafari
버전 76 지원 {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
버전 7 지원 {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
버전 10 지원 {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
표준 - RFC 6455 지원16{{CompatGeckoDesktop("11.0")}}1012.106.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
버전 76 지원 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
버전 7 지원 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
버전 8 지원 (IETF draft 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
표준 - RFC 6455 지원16 (Chrome){{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
+
+ +

Gecko

+ +

파이어폭스는 발전하는 웹 소켓 규격을 지속적으로 지원하고 있습니다. 파이어폭스 6은 웹 소켓 프로토콜 버전 7을, 파이어폭스 7은 버전 8을 지원합니다. (IETF 초안 10) 파이어폭스 모바일은 7.0부터 웹 소켓을 지원합니다.

+ +

Gecko 6.0

+ +

Gecko 6.0 {{geckoRelease("6.0")}} 이전엔 WebSocket 객체가 존재하였으며, 일부 사이트가 WebSocket 서비스는 접두어가 붙지 않는 것이라고 생각하기도 했습니다. 이 객체는 MozWebSocket으로 개명되었습니다.

+ +

Gecko 7.0

+ +

Gecko 7.0 {{geckoRelease("7.0")}} 이후로 고급 환경 설정의 network.websocket.max-connections 항목을 통해 동시에 열릴 수 있는 웹 소켓 연결의 최대값을 지정할 수 있습니다. 기본값은 200입니다.

+ +

Gecko 8.0

+ +

Gecko 8.0 {{geckoRelease("8.0")}} 이후로 웹 소켓 규격 초안의 변경에 따라 웹 소켓의 deflate 스트림 확장이 비활성화 되었습니다. 이는 일부 사이트의 호환성 문제를 해결합니다.

+ +

Gecko 11.0

+ +

Gecko 11.0 이전에는 모든 메시지가 16 MB를 넘을 수 없었으나, 지금은 최대 2 GB까지 가능합니다. 그러나 (특히 모바일에서) 권장되는 방법은 아닙니다. 충분한 메모리를 가지지 못한 장치에서는 통신이 실패하게 될 것입니다.

+ +

추가적으로 바이너리 데이터를 위한 ArrayBuffer 지원이 구현되었습니다.

+ +

Gecko 11.0부터 웹 소켓 API는 더이상 접두사가 붙지 않습니다.

+ +
주의: 파이어폭스 4, 5에서 웹 소켓이 비활성화 돼있었던 가장 주요한 이유는 프로토콜 설계의 보안성 문제 때문이었습니다. 이는 파이어폭스 6에서 상위 버전의 프로토콜을 구현함으로써 해결되었습니다.
+ +
{{HTML5ArticleTOC}}
diff --git a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..e7826d8595 --- /dev/null +++ b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,191 @@ +--- +title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기 +slug: WebSockets/Writing_WebSocket_client_applications +tags: + - 가이드 + - 네트워킹 + - 예제 + - 웹소켓 + - 웹소켓API + - 클라이언트 +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +

WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.

+ +
Note: 우리에게는 작동하는 chat/server 시스템 예제 코드 조각이 있습니다. 이는 우리의 인프라가 WebSocket 예제들을 제대로 호스팅할 수 있는 환경이 되면 공유할 것입니다.
+ +

{{AvailableInWorkers}}

+ +

WebSocket 객체 생성하기

+ +

WebSocket 프로토콜을 사용하여 통신하기 위해서는 WebSocket객체를 생성해야 합니다. 이 객체는 자동으로 서버로의 연결을 열려고 할 것입니다.

+ +

WebSocket 생성자는 하나의 필수 파라미터와 하나의 선택 파라미터를 받습니다.

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+ +
+
url
+
연결할 URL으로, 이것은 WebSocket 서버가 응답할 URL이어야 합니다.
+
protocols {{ optional_inline() }}
+
하나의 프로토콜 문자열, 또는 프로토콜 문자열의 배열입니다. 이 문자열들은 서브 프로토콜을 지정하는데 사용되어, 하나의 서버가 여러 개의 WebSocket 서브 프로토콜을 구현할 수 있도록 해줍니다. 예를 들어, 하나의 서버가 처리하는 상호작용이 지정된 protocols에 따라 달라지도록 할 수 있습니다. 만약 프로토콜 문자열을 지정하지 않으면 빈 문자열을 넣은 것으로 간주됩니다.
+
+ +

생성자는 예외를 발생시킬 수 있습니다:

+ +
+
SECURITY_ERR
+
접속을 시도하고 있는 포트가 차단되었습니다.
+
+ +
+
+ +

연결 에러

+ +

만약 연결 시도 중 에러가 발생하면, 먼저 "error"란 이름의 이벤트가 WebSocket 오브젝트로 전달되고, 그로 인해 onerror 핸들러가 실행됩니다. 그 후에 연결이 종료되는 이유를 가리키는 CloseEvent 이벤트가 WebSocket 오브젝트로 전달되고, 그로 인해 onclose 핸들러가 실행됩니다.

+ +

Firefox 11부터는 보통 에러 메세지에 대한 설명이 Mozillia 플랫폼의 콘솔에 표시되며, CloseEvent로부터는 RFC 6455, Section 7.4에 정의되어 있는 연결 종료 코드를 받게 됩니다.

+ +

예제

+ +

이 간단한 예제는 새 웹소켓 오브젝트를 생성하여 ws://www.example.com/socketserver 서버에 접속하는것을 보여줍니다. 이 예제에서는 커스텀 프로토콜인 "protocolOne" 을 리퀘스트에 같이 지정합니다. (이 프로토콜을 지정하는 부분은 생략될 수 있습니다.)

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+
+ +

반환된 exampleSocket 오브젝트의 exampleSocket.readyState 값은 CONNECTING 입니다. readyState 값은 연결이 수립되어 데이터가 전송 가능한 상태가 되면 OPEN 으로 변경됩니다.

+ +

만약 여러개의 프로토콜을 유연하게 대응할 수 있는 구조를 가지고 있다면, 연결 시에 배열을 통해 프로토콜의 목록을 지정할 수 있습니다.

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+
+ +

연결이 수립되면(readyState 가 OPEN 이 되었을 때), exampleSocket.protocol 값을 조사하여 서버가 어떤 프로토콜을 선택했는지 알아낼 수 있습니다.

+ +

위의 예제에서 ws 는 http 를 대체합니다. 비슷하게 wss 는 https 를 대체합니다. 웹소켓 연결은 HTTP 업그레이드 메카니즘에 의해 수행되기 때문에 HTTP 서버 주소 지정에 대한 프로토콜 업그레이드 요청은 암시적입니다.  (ws://www.example.com 또는 wss://www.example.com. 같이)

+ +

서버에 데이터 전송하기

+ +

한번 연결이 수립되면 이제부터는 서버로 데이터를 전송할 수 있습니다. 이것을 하기 위해서는 단순히 WebSocket 오브젝트의 send() 호출하여 보내고 싶은 메세지를 지정하기만 하면 됩니다.:

+ +
exampleSocket.send("Here's some text that the server is urgently awaiting!");
+
+ +

보낼 수 있는 데이터는 String , {{ domxref("Blob") }},  또는 ArrayBuffer 입니다.

+ +
Note: 버전 11 아래의 파이어폭스는 String 데이터 전송만을 지원합니다.
+ +

연결을 맺는것은 비동기 작업이고 실패하기 쉬운 작업이기 때문에, WebSocket 오브젝트를 생성하자마자  send() 로 데이터 전송을 시도하는것은 성공하지 않을 가능성이 있습니다. 우리는 연결이 수립된 이후에만 데이터를 전송하도록 하기 위해 onopen 핸들러를 정의하고, 이 위에서 작업합니다.

+ +
exampleSocket.onopen = function (event) {
+  exampleSocket.send("Here's some text that the server is urgently awaiting!");
+};
+
+ +

데이터 전송에 JSON 사용하기

+ +

JSON 을 사용하면 서버에 복잡한 데이터를 편리하게 보낼 수 있습니다. 예를 들어, 채팅 프로그램이 서버와 JSON으로 캡슐화된 패킷 데이터를 주고받는 프로토콜을 구현한것을 상상해 볼 수 있습니다.:

+ +
// Send text to all users through the server
+function sendText() {
+  // Construct a msg object containing the data the server needs to process the message from the chat client.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Send the msg object as a JSON-formatted string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Blank the text input element, ready to receive the next line of text from the user.
+  document.getElementById("text").value = "";
+}
+
+ +

서버로부터 데이터 수신하기

+ +

WebSockets는 event-driven API 입니다; 메세지가 수신되면 "message" 이벤트가 onmessage 함수로 전달되게 됩니다. 아래와 같은 코드를 작성하여 수신되는 데이터를 받아볼 수 있습니다.:

+ +
exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+
+ +

JSON 오브젝트를 받아서 처리하기

+ +

상단의 {{ anch("데이터 전송에 JSON 사용하기") }} 에서 작업한 코드와 연관되는 클라이언트를 생각해 봅시다. 클라이언트에서 받을 수 있는 패킷들의 목록은 다음과 같을 것 입니다.:

+ + + +

위의 메세지들을 받아서 처리하는 코드는 아래와 같을 것 입니다.:

+ +
exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
+      break;
+    case "message":
+      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
+      break;
+    case "rejectusername":
+      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i < msg.users.length; i++) {
+        ul += msg.users[i] + "<br>";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+
+ +

여기서 우리는 JSON.parse() 를 통해 JSON 오브젝트를 자바스크립트 오브젝트로 변환합니다. 그 다음 콘텐츠에 따라 분기하고 처리하는 로직을 가집니다.

+ +

Text data format

+ +

웹소켓을 통해 전달되는 텍스트들은 UTF-8 포멧을 가집니다.

+ +

Gecko 9.0 {{ geckoRelease("9.0") }} 먼저 버전들은 유효한 UTF-8 텍스트가 아닌 문자가 들어올 경우 연결이 종료되었습니다. 지금은 이 값들을 정상적으로 허용합니다.

+ +

연결을 종료하기

+ +

웹 소켓 사용을 마쳤다면 close() 메소드를 호출해 연결을 종료합니다.:

+ +
exampleSocket.close();
+
+ +

연결을 닫아버리기 전에 bufferedAmount 어트리뷰트를 조사하여 아직 네트워크에 전달되지 않은 데이터가 있는지 검사하는것도 좋은 방법입니다.

+ +

보안에 대한 고려 사항

+ +

웹소켓은 혼합된 연결 환경에서 이용되어서는안됩니다. 예를들어 HTTPS를 이용해 로드된 페이지에서 non-secure 웹소켓 연결을 수립하는것(또는 반대) 처럼 말입니다. 몇몇 브라우저들은 이를 강제로 금지하고 있습니다. 파이어폭스 버전 8이상도 이를 금지합니다.

+ +

{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}

diff --git a/files/ko/web/api/websockets_api/writing_websocket_servers/index.html b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..24c3cbe6c0 --- /dev/null +++ b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,258 @@ +--- +title: 웹소켓 서버 작성하기 +slug: WebSockets/Writing_WebSocket_servers +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

{{gecko_minversion_header("2")}}

+ +

개요

+ +

웹 소켓 서버는 특정한 프로토콜을 따르는 서버의 임의 포트를 리스닝하고 있는 TCP 어플리케이션입니다. 사용자 서버를 만드는 작업은 두려운 일일수도 있습니다. 하지만, 당신이 선택한 플랫폼상에서 간단한 웹 소켓 서버를 구현하는것은 쉬울것입니다.  

+ +

웹 소켓 서버는 C(++), Python, PHP, server-side JavaScript등과 같은 Berkeley sockets을 지원하는 어떠한 server-side 프로그래밍 언어로도 개발될 수 있습니다. 이것은 어느 특정한 언어의 자습서는 아니지만, 당신 자신의 서버를 개발하는것을 용이하게 하는 지침으로써의 역할을 합니다.

+ +

당신은 HTTP가 작동하는 방식과 중간정도의 개발 경험이 있어야만 합니다. 개발언어에서 제공하는 TCP 소켓에 대한 지식이 요구될 수도 있습니다. 이 지침의 범위는 당신이 웹 소켓서버를 개발하기위해 필요한 최소한의 지식에 대해 소개하는것입니다.

+ +
+

최신의 공식 웹 소켓 문서인 RFC 6455를 읽으세요. 1과 4-7 섹션이 특별히 서버개발자에게 흥미로운 부분입니다. 10 섹션에서는 보안에 대해 논의하며, 당신의 서버를 공개하기전 해당 부분을 반드시 정독하여 읽어보셔야만합니다.

+
+ +

이 페이지에서 웹 소켓 서버는 매우 약간만 설명되어 있습니다. 웹 소켓 서버는 종종 다른 특정한 이유로 인해 분리되거나 전문화됩니다. 따라서 웹 소켓과의 핸드 쉐이크를 감지하거나 미리 처리하거나 또는 클라이언트들을 실제 웹 소켓 서버에 보내기위해 일반적으로 HTTP 서버와 같은 reverse proxy를 사용합니다. 이는 쿠키나 인증을 처리하기 위해 당신의 서버 코드를 잔뜩 작성하지 않아도 된다는 것을 의미합니다.

+ +

Step 1: The WebSocket Handshake

+ +

먼저 서버는 표준 TCP 소켓을 사용하여 연결하려는 소켓을 위해 반드시 듣고 있어야 합니다. 당신의 플랫폼에 따라 서버는 이미 준비가 되어있을수도 있습니다. 예를들어, 당신의 서버가 example.com에 port가 8000인 채로 듣고 있다고 가정해봅시다. 

+ +
+

경고: 서버에서 아무 포트나 선택하여 연결할 수 있지만, 80 또는 443 포트가 아닌 다른 연결은 방화벽/프록시에 의해 문제를 일으킬 수 있습니다. TLS/SSL 보안 연결인 443 포트와의 연결이 가장 쉬울 것입니다. 현재 대부분의 브라우저(특히 Firefox 8+)는 안전한 페이지라 할지라도 보안 연결이 아닌 웹소켓 연결은 허용되지 않습니다.

+
+ +

웹소켓의 핸드셰이크 과정은 HTTP를 바탕으로 이루어집니다. 자세한 연결 과정은 다루지 않으나, 각 요청자는 연결 과정이 제대로 이루어질때까지 요청을 보류합니다. 서버는 클라이언트가 요청하는 모든 것을 주의깊게 이해해야 하고, 그렇지 않을 경우 보안 이슈가 일어날 수 있습니다.

+ +

클라이언트 핸드쉐이크 요청

+ +

당신이 웹 소켓 서버를 개발 중이라도, 클라이언트는 여전히 웹 소켓 핸드쉐이킹 과정을 시작합니다. 따라서, 당신은 클라이언트의 요청을 이해하기 위한 방법을 이해해야합니다. 클라이언트는 아래와 같아 보이는 매우 표준적인 HTTP 요청을 보낼것입니다.(HTTP 버전은 반드시 1.1. 혹은 그 이상이어하며, 반드시 GET방식이어야합니다.)

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

이외에도 클라이언트는 여러 메세지나 서브프로토콜을 추가해 보낼 수도 있습니다. User-Agent, Referer, Cookie와 같은 공통 헤더나, 인증 헤더도 말이죠. 자세한 사항은 다음을 참조하세요. 원하는 대로 요청에 무엇이든지 첨부하여 보낼 수 있으며 웹소켓과 관련이 없을 경우 무시합니다. 통상적으로, 리버스 프록시가 이미 그런 기능을 담당하고 있을 겁니다.

+ +

잘못된 값을 가지거나 형식이 잘못된 헤더의 경우, 서버는 "400 Bad Request" 응답을 보내 즉시 소켓을 종료시켜야 합니다. HTTP 응답 바디에 핸드셰이크에 실패한 이유가 명시되어 있지만, 브라우저 상에서 명시적으로 나타내진 않습니다. 서버가 웹소켓의 버전 인식을 실패할 경우, 인식 가능한 버전을 명시해 Sec-WebSocket-Version 요청을 보내야 합니다. (최신 가이드 v13에서 설명되어 있습니다) 이제, 가장 흥미로운 헤더인 Sec-WebSocket-Key을 살펴봅니다.

+ +
+

팁: 모든 브라우저는 Origin header를 보냅니다. 이 헤더는 보안을 위해 활용되며, (checking for same origin, whitelisting/ blacklisting, etc.) 활용하고 싶지 않다면 403 Forbidden을 보냅니다. 하지만 non-browser 에이전트가 위조된 Origin을 보낼수도 있다는 것을 명심해야 합니다. 따라서 대부분의 애플리케이션은 이 헤더가 없는 요청을 거부합니다.

+
+ +
+

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

+
+ +
+

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

+
+ +

서버가 보내는 핸드쉐이크 응답

+ +

위와 같은 요청을 받으면 서버 역시도 HTTP 구조의 응답을 보내주어야 합니다. 자세한 내용은 아래와 같습니다.(각각의 헤더 끝에는 \r\n을 그리고 가장 마지막에는 한번 더 \r\n을 넣는걸 잊지 마세요.)

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Additionally, the server can decide on extension/subprotocol requests here; see Miscellaneous for details. The Sec-WebSocket-Accept part is interesting. The server must derive it from the Sec-WebSocket-Key that the client sent. To get it, concatenate the client's Sec-WebSocket-Key and "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" together (it's a "magic string"), take the SHA-1 hash of the result, and return the base64 encoding of the hash.

+ +
+

FYI: This seemingly overcomplicated process exists so that it's obvious to the client whether or not the server supports WebSockets. This is important because security issues might arise if the server accepts a WebSockets connection but interprets the data as a HTTP request.

+
+ +

So if the Key was "dGhlIHNhbXBsZSBub25jZQ==", the Accept will be "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Once the server sends these headers, the handshake is complete and you can start swapping data!

+ +
+

The server can send other headers like Set-Cookie, or ask for authentication or redirects via other status codes, before sending the reply handshake.

+
+ +

클라이언트 추적

+ +

웹소켓 프로토콜과 직접적인 연관은 없지만, 이 항목에서 언급할만한 의미가 있습니다. 웹소켓 서버는 이미 연결된 클라이언트들의 반복적인 연결(hand shaking)을 막기위해 클라이언트의 소켓 상태를 추적해야합니다. 같은 IP 주소를 가지는 클라이언트는 여러번 연결을 시도 할 수 있습니다.(하지만, 서버는 Denial-of-Service attacks 을 위해 너무 많은 연결 요청을 거부할 수 있습니다).

+ +

Step 2: 데이터 프레임 교환

+ +

Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using XOR encryption (with a 32-bit key). Section 5 of the specification describes this in detail.

+ +

데이터 프레임 포멧

+ +

모든 데이터 프레임 (서버->클라이언트 / 클라이언트 -> 서버) 은 아래의 구조를 따릅니다:

+ +
 0               1               2               3
+ 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+ 4               5               6               7
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+ 8               9               10              11
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+ 12              13              14              15
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+
+ +

RSV1-3 는 사용되지 않습니다. 이 필드들은 확장 프로토콜 또는 미래를 위해 예약되었습니다.

+ +

MASK 비트는 메세지가 인코딩되어있는지의 여부를 나타냅니다.클라이언트가 서버로 보내는 메세지는 항상 마스킹되어야합니다. 따라서 서버는 클라이언트로부터 받은 이 필드가 항상 1임을 기대할 수 있습니다. (만약 클라이언트가 마스킹되지 않은 메세지를 보낸다면 서버는 연결을 종료해야 합니다. 참고 : section 5.1 of the spec ).
+ 서버가 클라이언트에게 보내는 메세지는 MASK 필드가 항상 0이고 데이터는 마스킹되지 않은 상태여야 합니다. 마스킹이 어떻게 이루어지는지 / 마스킹된 메세지를 어떻게 디코딩하는지는 나중에 설명합니다.
+ (주의: wss 연결이라고 하더라도 클라이언트가 보내는 패킷은 항상 마스킹되어야 합니다.)

+ +

opcode 필드는 뒤따라오는 payload 데이터가 어떠한 포멧인지를 나타냅니다. 0x0은 continuation, 0x1은 텍스트(항상 UTF-8), 0x2는 바이너리 데이터 / 나머지 값은 "컨트롤 코드"에 사용됩니다. (컨트롤 코드에 대해서는 나중에 다루게 됩니다.) 현재 버전의 웹소켓 프로토콜에서는 0x3 / 0x7 / 0xB~0xF는 아무런 의미도 지니고있지 않습니다.

+ +

FIN 비트는 이 메세지가 마지막임을 나타냅니다. 만약 FIN 비트가 0이라면 서버는 뒤에 더 따라오게 될 메세지들까지 수신해야 합니다. FIN 비트가 1일 경우에는 전체 메세지가 수신되었으므로 이를 처리합니다. 이 부분에 대해서는 뒤에 다시 설명합니다.

+ +

Payload 길이 알아내기

+ +

수신한 프레임으로부터 payload 데이터를 읽기 위해서는 payload length 필드를 읽어야 합니다. 불행히도 이는 약간 복잡한 작업을 거치는데 아래 순서대로 처리해 주세요.

+ +
    +
  1. 9번째부터 15번재까지의 비트를 읽습니다. 이를 unsigned integer로 취급한 다음 값이 125거나 이보다 작을 경우 이 자체가 payload length 입니다. 이 경우에는 2, 3 과정은 필요 없습니다. 하지만 126이면 2번으로, 127일 경우 3번으로 가주세요
    2. +
  2. 다음 16비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다.
    3. +
  3. 다음 64비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다. (최상위 비트는 항상 0이어야 합니다.)
    4. +
+ +

마스킹된 Payload 데이터 디코딩하기

+ +

MASK 비트가 설정되어 있디만 32비트 사이즈의 Masking-Key 필드 또한 존재하게 됩니다. 
+ 아래 의사코드는 Payload 데이터를 ENCODED / Masking-Key 필드를 MASK 라고 가정하고 데이터를 디코딩하는 방법을 보여줍니다. ENCODED값을 0부터 순회하면서 MASK의 i % 4에 해당하는 1바이트와 XOR 연산을 수행합니다.

+ +

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

이제 DECODED 데이터를 가지고 프로토콜에 맞게 활용하면 됩니다.

+ +

Message Fragmentation

+ +

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

+ +

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

+ +

Pings and Pongs: The Heartbeat of WebSockets

+ +

핸드쉐이크가 끝난 시점부터 서버 혹은 클라이언트는 언제든지 ping 패킷을 보낼 수 있습니다. 만약 ping 패킷이 수신되면 수신자는 가능한 빨리 응답으로 pong 패킷을 보내야 합니다. (ping에서 전달된 payload와 동일한 payload를 붙여서 pong을 보냅니다. 이 경우 최대 payload length는 125입니다.) 서버는 주기적으로 ping을 보내 클라이언트가 아직 살아있는 상태인지 체크할 수 있습니다.

+ +

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

+ +
+

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

+
+ +

Step 4: Closing the connection

+ +

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

+ +

Miscellaneous

+ +
+

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

+
+ +

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

+ +

Extensions

+ +
+

This section needs expansion. Please edit if you are equipped to do so.

+
+ +

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

+ +
+

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

+
+ +

TODO

+ +

서브프로토콜

+ +

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

+ +
+

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

+
+ +

클라이언트는 핸드쉐이크 요청 시에 특정한 서브프로콜의 목록을 같이 보낼 수 있습니다. Sec-WebSocket-Protocol 헤더에 사용하기를 원하는 서브프로토콜의 목록을 같이 보냅니다.

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

또는 아래와 같이 보낼 수도 있습니다.:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

클라이언트로부터 서브프로토콜 요청을 받으면, 서버는 그 중에서 자신이 지원할 수 있는 서브프로토콜을 하나 골라야 합니다. 만약 클라이언트가 보낸 목록 중, 여러개를 지원할 수 있다면 지원하는 목록 중 가장 첫번째 서브프로토콜을 보내주세요. 

+ +

Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

서버는 반드시 하나의 Sec-Websocket-Protocol 헤더만을 송신해야 합니다.
+ 만약 서버가 어떠한 서브프로토콜도 지원하고 싶지 않다면 Sec-Websocket-Protocol 헤더를 빼고 보내주세요. 빈 값을 넣어서 보내도 안됩니다.
+ 서버가 아무 서브프로토콜을 지원하지 않겠다고 한다면 클라이언트는 연결을 닫아버릴수도 있습니다.

+
+ +

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

+ +
+

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

+
+ +

같이 보기

+ + diff --git a/files/ko/web/api/window/domcontentloaded_event/index.html b/files/ko/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..24db56aa91 --- /dev/null +++ b/files/ko/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,77 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +tags: + - Event + - Reference + - Web + - Window +translation_of: Web/API/Window/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.

+ + + + + + + + + + + + + + + + + + + + +
확산예
취소 가능예 (although specified as a simple event that isn't cancelable)
인터페이스{{domxref("Event")}}
이벤트 처리기 속성아니오
+ +

DOMContentLoaded의 원본 대상은 다 불러온 {{domxref("Document")}}입니다. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} event.

+ +

A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use load where DOMContentLoaded would be more appropriate.

+ +

예제

+ +

기본 용도

+ +
window.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+});
+
+ +

사양

+ + + + + + + + + + + + + + +
사양상태
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Window.DOMContentLoaded_event")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/window/load_event/index.html b/files/ko/web/api/window/load_event/index.html new file mode 100644 index 0000000000..baef50af25 --- /dev/null +++ b/files/ko/web/api/window/load_event/index.html @@ -0,0 +1,128 @@ +--- +title: load +slug: Web/Events/load +tags: + - Event + - 이벤트 +translation_of: Web/API/Window/load_event +--- +

load 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.

+ +

 

+ +

예제

+ +

Window

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("All resources finished loading!");
+  });
+</script>
+ +

script 엘리먼트

+ +
<script>
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Script finished loading and executing");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+</script>
+ +

일반 정보

+ +
+
스펙
+
DOM L3
+
인터페이스
+
UIEvent
+
Bubbles
+
No
+
취소가능 여부
+
No
+
타겟
+
Window,Document,Element
+
기본 동작
+
None.
+
+ +

속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성타입설명
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Whether the event is cancellable or not.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

스펙 정보

+ + + + + + + + + + + + + + + + + + + +
스펙상태코멘트
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}} +

이것은 문서 로딩이 끝날때 수행되는 단계와 연결되는 섹션과 연결됩니다. 'load' 이벤트는 많은 엘리먼트들에서도 발생합니다. 그리고 스펙 문서에서는 많은 곳에서 "load이벤트를 지연할 수 있는" 것들을 언급한다는 것을 주의하십시오.

+
+ +

관련 이벤트

+ + diff --git a/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html new file mode 100644 index 0000000000..7b338a83fa --- /dev/null +++ b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html @@ -0,0 +1,429 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +tags: + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.

+ +

문법

+ +
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
+var timeoutID = window.setTimeout(code[, delay]);
+window.setTimeout(function, milliseconds);
+
+ +

매개변수

+ +
+
func
+
{{jsxref("function")}}이 타이머가 만료된 뒤 실행됩니다.
+
code
+
선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행됩니다.
+ 이 구문은 {{jsxref("Global_Objects/eval", "eval()")}}을 사용하는 것과 같은 보안 위험성을 이유로 권장되지 않습니다.
+
delay {{optional_inline}}
+
타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간입니다.
+ 만약 이 매개변수를 생략하면, 0이 값으로 사용됩니다. 실제 지연시간은 더 길어질 수 있습니다;
+ 아래 {{anch("Reasons for delays longer than specified")}}를 참고하세요.
+
param1, ..., paramN {{optional_inline}}
+
타이머가 만료되고 {{anch("func")}}에 전달되는 추가적인 매개변수들입니다.
+
+ +
+

Internet Explorer 9 이하에서는 함수에 추가적인 매개변수들을 전달하는 기능이 동작하지 않습니다.
+ 만약 브라우저에서 이 기능을 사용하고 싶다면, {{anch("polyfill")}}을 사용하세요. (Callback arguments를 봐주세요)

+
+ +

반환 값

+ +

반환되는 timeoutID는 숫자이고, setTimeout()을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 입니다;
+ 이 값은 타이머를 취소시키기 위해 {{domxref("WindowTimers.clearTimeout()")}}에 전달할 수도 있습니다.

+ +

setTimeout()과 {{domxref("WindowTimers.setInterval", "setInterval()")}}는 같은 ID 공간을 공유하기 때문에, clearTimeout()과 {{domxref("WindowTimers.clearInterval", "clearInterval()")}} 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작합니다.
+ 하지만 명확성을 위해, 코드를 유지보수할 때 혼란을 피하기 위해 항상 일치시켜야 합니다.

+ +

예제

+ +

다음 예제는 웹 페이지에 2개의 간단한 버튼을 설정하고 setTimeout()과 clearTimeout()에 연결합니다.
+ 첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 clearTimeout()에 사용되는 ID가 저장됩니다.
+ 두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소할 수 있습니다.

+ +

HTML

+ +
<p>Live Example</p>
+<button onclick="delayedAlert();">Show an alert box after two seconds</button>
+<p></p>
+<button onclick="clearAlert();">Cancel alert before it happens</button>
+
+ +

JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

결과

+ +

{{EmbedLiveSample('Example')}}
+ clearTimeout() 예제도 봐주세요.

+ +

Polyfill

+ +

하나 이상의 매개변수를 콜백 함수에 넘겨야 하는데, setTimeout() 또는 setInterval()을 사용하여 추가적인 매개변수를 보내는 것을 브라우저에서 지원하지 않는다면(e.g. Internet Explorer 9 이하), HTML5 표준 매개변수 전달 기능을 사용 가능하게 하는 이 polyfill을 넣을 수 있습니다. 그저 아래 코드를 스크립트를 상단에 작성해주시면 됩니다.

+ +
/*\
+|*|
+|*|  임의의 매개변수를 자바스크립트 타이머의 콜백함수에 전달하기 위한 Polyfill (HTML5 표준 명세).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+
+ +

IE

+ +

IE9 이하를 포함하는 모든 모바일/데스크톱 브라우저에서 자바스크립트를 남용하지 않는 완벽한 해결책으로 , JavaScript 조건부 주석을 사용할 수 있습니다:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 9)
+  (function(f){
+     window.setTimeout=f(window.setTimeout);
+     window.setInterval=f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+
+ +

혹은 IE HTML 조건부 기능을 기반으로 깔끔하게 접근할 수 있습니다:

+ +
<!--[if lte IE 9]><script>
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+</script><![endif]-->
+
+ +

예시

+ +

다른 해결책으로는 익명 함수를 callback으로 호출하여 사용할 수 있으나, 이 방법은 비용이 더 비쌉니다.

+ +
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+
+ +

위 예제는 arrow function으로도 작성하실 수 있습니다.

+ +
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
+
+ +

다른 하나는 function's bind를 이용하는 것 입니다.

+ +
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+
+ +

"this" 문제

+ +

setTimeout()에 매개변수(혹은 다른 함수)를 전달할 때, 당신의 기대와는 다르게 this의 값이 호출될 것이다. 해당 이슈에 대한 자세한 사항은 JavaScript reference를 참고해주세요.

+ +

설명

+ +

setTimeout()에 의해 실행된 코드는 별도의 실행 컨텍스트에서 setTimeout이 호출된 함수로 호출됩니다.  호출된 함수에 대해서는 this 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 window) 객체, strict모드에서 undefined를 기본 값으로 합니다. 다음 예제를 봐주세요: 

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+ +

위와 같이 동작하는 이유는 myMethod 호출될 때, this는 myArray로 설정되므로, 함수 내에서의 this[속성]은 myArray[속성]와 같습니다. 하지만, 다음 예제를 보면:

+ +
setTimeout(myArray.myMethod, 1000); // 1초 뒤 "[Window 객체]" 출력
+setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 뒤 "undefined" 출력
+ +

myArray.myMethod 함수는 setTimeout에 전달되고, 호출될 때 this는 설정되어 있지 않아 window 객체를 기본값으로 합니다. forEach, reduce 등 Array 메서드 같이 this를 매개변수로 넘길 수 있는 옵션 또한 없습니다. 그리고 아래에서 보다시피, call을 사용해 this를 설정하는 것도 동작하지 않습니다.

+ +
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+
+ +

가능한 해결책

+ +

일반적인 해결책은 this 설정이 필요한 곳을 함수로 감싸는 것(Wrapper Function) 입니다:

+ +
setTimeout(function(){myArray.myMethod()}, 2000); // 2초 뒤"zero,one,two" 출력
+setTimeout(function(){myArray.myMethod('1')}, 2500); // 2.5초 뒤"one" 출력
+ +

화살표 함수(Arrow Function) 역시 가능한 대안입니다:

+ +
setTimeout(() => {myArray.myMethod()}, 2000); // 2초 뒤 "zero,one,two" 출력
+setTimeout(() => {myArray.myMethod('1')}, 2500); // 2.5초 뒤 "one" after 2.5 출력
+ +

this 문제를 해결하는 또다른 방법은 전역함수 setTimeout()과 setInterval()를 this 객체를 전달할 수 있는 전역함수로 대체하고 Function.prototype.call을 사용하여 콜백을 설정합니다:

+ +
// Enable setting 'this' in JavaScript timers
+
+var __nativeST__ = window.setTimeout,
+    __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
위 2개의 대안들은 IE의 타이 콜백함수에 임의의 매개변수를 전달하는 HTML5 표준 또한 가능하게 합니다.
+ +

새로운 기능 테스트:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +
JavaScript 1.8.5은 주어진 함수에 대한 모든 호출의 this 값을 설정하기 위한 Function.prototype.bind() 메서드를 도입하였습니다. 이렇게 하면 wrapper 함수를 사용하지 않고 콜백에 this 값을 설정할 수 있습니다.
+ +

bind()를 사용한 예제:

+ +
myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length > 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+
+ +

참고

+ +

Timeout은 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}을 사용하면 취소됩니다. 함수를 반복해서 호출해야 한다면 (e.g., N 밀리초마다), {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 사용을 고려해보세요.

+ +

setTimeout()을 호출한 쓰레드가 종료될 때까지 함수나 코드 조각이 실행될 수 없다는 점에 유의해야합니다. 예를들어:

+ +
function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');
+ +

콘솔에 이렇게 쓰여질겁니다:

+ +
After setTimeout
+foo has been called
+ +

그 이유는 setTimeout가 지연시간 0으로 호출되었지만, queue에 배치되어 다음 기회에 실행되도록 예정되기 때문입니다. 현재 실행중인 코드는 queue에 있는 함수들이 실행되기 전에 완료되고, 실행 순서가 예상과 다를 수 있습니다.

+ +

문자열을 넘길경우

+ +

 setTimeout()에 함수대신 문자열을 넘기면 eval 사용했을 때와 같은 위험성을 가집니다.

+ +
// 권장
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// 비권장
+window.setTimeout("alert('Hello World!');", 500);
+
+ +

setTimeout에 전달된 문자열은 전역 context에서 해석하므로, setTimeout()이 호출된 로컬 context의 Symbol은 문자열이 코드로 해석될 때 사용할 수 없습니다.

+ +

지정된 것보다 더 오래 지연되는 이유

+ +

타임아웃이 예상보다 더 늦게까지 지연되는 데는 여러가지 이유가 있습니다. 이 문단에서는 일반적인 이유에 대해서 설명합니다.

+ +

중첩된 타임아웃이 4ms 이하일 경우

+ +

역사적으로 브라우저들은 setTimeout() "clamping"을 구현했습니다: "최소 지연" 한계보다 작은 지연을 가진 setTimeout() 호출은 최소 지연을 사용하도록 강제됩니다.

+ +

실제로, 4ms는 HTML5 스펙에 명시되어 있고 2010년 이후에 출시된 브라우저들은 일관성을 유지하고 있습니다. {{geckoRelease("5.0")}} 이전에 출시된 브라우저들은, 타임아웃(중첩 5이상)의 최소 지연시간은 10ms였습니다.

+ +

최신 브라우저에서 0ms 타임아웃을 구현하려면, 이곳에 설명된 {{domxref("window.postMessage()")}}를 사용할 수 있습니다.

+ +

비활성 탭에서 타임아웃이1000ms에 여러 번 일어날 경우

+ +

부하와 배터리 사용양을 줄이기 위해서, 비활성화 탭들에서 타임아웃이 1초에 여러번 일어나지 않도록 "clamping" 됩니다.

+ +

Firefox는 5버전부터 이 동작을 구현했습니다. ({{bug(633421)}}참고, 1000ms 상수는  dom.min_background_timeout_value 설정을 통해 수정할 수 있습니다)
+ Chrome은  11버전부터 구현했습니다 (crbug.com/66078).

+ +

Android용 Firefox는 {{bug(736602)}} 이후 버전 14부터 백그라운드 탭에 15분의 타임아웃을 사용하고, 완전히 unload도 할 수 있습니다.

+ +

타임아웃 지연

+ +

"clamping"과 더불어, 타임아웃은 다른 작업들로 인해 바쁜 페이지에서 늦게 실행될 수 있습니다.

+ +

최대 지연 값

+ +

Internet Explorer, Chrome, Safari, and Firefox 포함하는 브라우저들은 내부적으로 32-bit 부호있는 정수로 지연 값을 저장합니다. 이로 인해 2147483647보다 더 큰 지연을 사용할 때 정수 오버플로우가 발생하여, 타임아웃이 즉시 실행됩니다.

+ +

사양

+ + + + + + + + + + + + + + +
사양상태주석
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
+ +

지원 브라우저

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능ChromeFirefox (Gecko)Internet ExplorerOperaSafari
기본1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Callback 매개변수 지원[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
기본1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Callback 매개변수 지원[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] 첫번째 form에서 매개변수를 지원하는지에 대한 여부.

+ +

더 알아보기

+ + diff --git a/files/ko/web/api/windowtimers/settimeout/index.html b/files/ko/web/api/windowtimers/settimeout/index.html deleted file mode 100644 index 7b338a83fa..0000000000 --- a/files/ko/web/api/windowtimers/settimeout/index.html +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: WindowTimers.setTimeout() -slug: Web/API/WindowTimers/setTimeout -tags: - - setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -

타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.

- -

문법

- -
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
-var timeoutID = window.setTimeout(code[, delay]);
-window.setTimeout(function, milliseconds);
-
- -

매개변수

- -
-
func
-
{{jsxref("function")}}이 타이머가 만료된 뒤 실행됩니다.
-
code
-
선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행됩니다.
- 이 구문은 {{jsxref("Global_Objects/eval", "eval()")}}을 사용하는 것과 같은 보안 위험성을 이유로 권장되지 않습니다.
-
delay {{optional_inline}}
-
타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간입니다.
- 만약 이 매개변수를 생략하면, 0이 값으로 사용됩니다. 실제 지연시간은 더 길어질 수 있습니다;
- 아래 {{anch("Reasons for delays longer than specified")}}를 참고하세요.
-
param1, ..., paramN {{optional_inline}}
-
타이머가 만료되고 {{anch("func")}}에 전달되는 추가적인 매개변수들입니다.
-
- -
-

Internet Explorer 9 이하에서는 함수에 추가적인 매개변수들을 전달하는 기능이 동작하지 않습니다.
- 만약 브라우저에서 이 기능을 사용하고 싶다면, {{anch("polyfill")}}을 사용하세요. (Callback arguments를 봐주세요)

-
- -

반환 값

- -

반환되는 timeoutID는 숫자이고, setTimeout()을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 입니다;
- 이 값은 타이머를 취소시키기 위해 {{domxref("WindowTimers.clearTimeout()")}}에 전달할 수도 있습니다.

- -

setTimeout()과 {{domxref("WindowTimers.setInterval", "setInterval()")}}는 같은 ID 공간을 공유하기 때문에, clearTimeout()과 {{domxref("WindowTimers.clearInterval", "clearInterval()")}} 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작합니다.
- 하지만 명확성을 위해, 코드를 유지보수할 때 혼란을 피하기 위해 항상 일치시켜야 합니다.

- -

예제

- -

다음 예제는 웹 페이지에 2개의 간단한 버튼을 설정하고 setTimeout()과 clearTimeout()에 연결합니다.
- 첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 clearTimeout()에 사용되는 ID가 저장됩니다.
- 두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소할 수 있습니다.

- -

HTML

- -
<p>Live Example</p>
-<button onclick="delayedAlert();">Show an alert box after two seconds</button>
-<p></p>
-<button onclick="clearAlert();">Cancel alert before it happens</button>
-
- -

JavaScript

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("That was really slow!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-
- -

결과

- -

{{EmbedLiveSample('Example')}}
- clearTimeout() 예제도 봐주세요.

- -

Polyfill

- -

하나 이상의 매개변수를 콜백 함수에 넘겨야 하는데, setTimeout() 또는 setInterval()을 사용하여 추가적인 매개변수를 보내는 것을 브라우저에서 지원하지 않는다면(e.g. Internet Explorer 9 이하), HTML5 표준 매개변수 전달 기능을 사용 가능하게 하는 이 polyfill을 넣을 수 있습니다. 그저 아래 코드를 스크립트를 상단에 작성해주시면 됩니다.

- -
/*\
-|*|
-|*|  임의의 매개변수를 자바스크립트 타이머의 콜백함수에 전달하기 위한 Polyfill (HTML5 표준 명세).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-
- -

IE

- -

IE9 이하를 포함하는 모든 모바일/데스크톱 브라우저에서 자바스크립트를 남용하지 않는 완벽한 해결책으로 , JavaScript 조건부 주석을 사용할 수 있습니다:

- -
/*@cc_on
-  // conditional IE < 9 only fix
-  @if (@_jscript_version <= 9)
-  (function(f){
-     window.setTimeout=f(window.setTimeout);
-     window.setInterval=f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-
- -

혹은 IE HTML 조건부 기능을 기반으로 깔끔하게 접근할 수 있습니다:

- -
<!--[if lte IE 9]><script>
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-</script><![endif]-->
-
- -

예시

- -

다른 해결책으로는 익명 함수를 callback으로 호출하여 사용할 수 있으나, 이 방법은 비용이 더 비쌉니다.

- -
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
-
- -

위 예제는 arrow function으로도 작성하실 수 있습니다.

- -
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
-
- -

다른 하나는 function's bind를 이용하는 것 입니다.

- -
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-
- -

"this" 문제

- -

setTimeout()에 매개변수(혹은 다른 함수)를 전달할 때, 당신의 기대와는 다르게 this의 값이 호출될 것이다. 해당 이슈에 대한 자세한 사항은 JavaScript reference를 참고해주세요.

- -

설명

- -

setTimeout()에 의해 실행된 코드는 별도의 실행 컨텍스트에서 setTimeout이 호출된 함수로 호출됩니다.  호출된 함수에 대해서는 this 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 window) 객체, strict모드에서 undefined를 기본 값으로 합니다. 다음 예제를 봐주세요: 

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
- -

위와 같이 동작하는 이유는 myMethod 호출될 때, this는 myArray로 설정되므로, 함수 내에서의 this[속성]은 myArray[속성]와 같습니다. 하지만, 다음 예제를 보면:

- -
setTimeout(myArray.myMethod, 1000); // 1초 뒤 "[Window 객체]" 출력
-setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 뒤 "undefined" 출력
- -

myArray.myMethod 함수는 setTimeout에 전달되고, 호출될 때 this는 설정되어 있지 않아 window 객체를 기본값으로 합니다. forEach, reduce 등 Array 메서드 같이 this를 매개변수로 넘길 수 있는 옵션 또한 없습니다. 그리고 아래에서 보다시피, call을 사용해 this를 설정하는 것도 동작하지 않습니다.

- -
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-
- -

가능한 해결책

- -

일반적인 해결책은 this 설정이 필요한 곳을 함수로 감싸는 것(Wrapper Function) 입니다:

- -
setTimeout(function(){myArray.myMethod()}, 2000); // 2초 뒤"zero,one,two" 출력
-setTimeout(function(){myArray.myMethod('1')}, 2500); // 2.5초 뒤"one" 출력
- -

화살표 함수(Arrow Function) 역시 가능한 대안입니다:

- -
setTimeout(() => {myArray.myMethod()}, 2000); // 2초 뒤 "zero,one,two" 출력
-setTimeout(() => {myArray.myMethod('1')}, 2500); // 2.5초 뒤 "one" after 2.5 출력
- -

this 문제를 해결하는 또다른 방법은 전역함수 setTimeout()과 setInterval()를 this 객체를 전달할 수 있는 전역함수로 대체하고 Function.prototype.call을 사용하여 콜백을 설정합니다:

- -
// Enable setting 'this' in JavaScript timers
-
-var __nativeST__ = window.setTimeout,
-    __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
- -
위 2개의 대안들은 IE의 타이 콜백함수에 임의의 매개변수를 전달하는 HTML5 표준 또한 가능하게 합니다.
- -

새로운 기능 테스트:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-
- -
JavaScript 1.8.5은 주어진 함수에 대한 모든 호출의 this 값을 설정하기 위한 Function.prototype.bind() 메서드를 도입하였습니다. 이렇게 하면 wrapper 함수를 사용하지 않고 콜백에 this 값을 설정할 수 있습니다.
- -

bind()를 사용한 예제:

- -
myArray = ["zero", "one", "two"];
-myBoundMethod = (function (sProperty) {
-    console.log(arguments.length > 0 ? this[sProperty] : this);
-}).bind(myArray);
-
-myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
-myBoundMethod(1); // prints "one"
-setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
-setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
-
- -

참고

- -

Timeout은 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}을 사용하면 취소됩니다. 함수를 반복해서 호출해야 한다면 (e.g., N 밀리초마다), {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 사용을 고려해보세요.

- -

setTimeout()을 호출한 쓰레드가 종료될 때까지 함수나 코드 조각이 실행될 수 없다는 점에 유의해야합니다. 예를들어:

- -
function foo(){
-  console.log('foo has been called');
-}
-setTimeout(foo, 0);
-console.log('After setTimeout');
- -

콘솔에 이렇게 쓰여질겁니다:

- -
After setTimeout
-foo has been called
- -

그 이유는 setTimeout가 지연시간 0으로 호출되었지만, queue에 배치되어 다음 기회에 실행되도록 예정되기 때문입니다. 현재 실행중인 코드는 queue에 있는 함수들이 실행되기 전에 완료되고, 실행 순서가 예상과 다를 수 있습니다.

- -

문자열을 넘길경우

- -

 setTimeout()에 함수대신 문자열을 넘기면 eval 사용했을 때와 같은 위험성을 가집니다.

- -
// 권장
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// 비권장
-window.setTimeout("alert('Hello World!');", 500);
-
- -

setTimeout에 전달된 문자열은 전역 context에서 해석하므로, setTimeout()이 호출된 로컬 context의 Symbol은 문자열이 코드로 해석될 때 사용할 수 없습니다.

- -

지정된 것보다 더 오래 지연되는 이유

- -

타임아웃이 예상보다 더 늦게까지 지연되는 데는 여러가지 이유가 있습니다. 이 문단에서는 일반적인 이유에 대해서 설명합니다.

- -

중첩된 타임아웃이 4ms 이하일 경우

- -

역사적으로 브라우저들은 setTimeout() "clamping"을 구현했습니다: "최소 지연" 한계보다 작은 지연을 가진 setTimeout() 호출은 최소 지연을 사용하도록 강제됩니다.

- -

실제로, 4ms는 HTML5 스펙에 명시되어 있고 2010년 이후에 출시된 브라우저들은 일관성을 유지하고 있습니다. {{geckoRelease("5.0")}} 이전에 출시된 브라우저들은, 타임아웃(중첩 5이상)의 최소 지연시간은 10ms였습니다.

- -

최신 브라우저에서 0ms 타임아웃을 구현하려면, 이곳에 설명된 {{domxref("window.postMessage()")}}를 사용할 수 있습니다.

- -

비활성 탭에서 타임아웃이1000ms에 여러 번 일어날 경우

- -

부하와 배터리 사용양을 줄이기 위해서, 비활성화 탭들에서 타임아웃이 1초에 여러번 일어나지 않도록 "clamping" 됩니다.

- -

Firefox는 5버전부터 이 동작을 구현했습니다. ({{bug(633421)}}참고, 1000ms 상수는  dom.min_background_timeout_value 설정을 통해 수정할 수 있습니다)
- Chrome은  11버전부터 구현했습니다 (crbug.com/66078).

- -

Android용 Firefox는 {{bug(736602)}} 이후 버전 14부터 백그라운드 탭에 15분의 타임아웃을 사용하고, 완전히 unload도 할 수 있습니다.

- -

타임아웃 지연

- -

"clamping"과 더불어, 타임아웃은 다른 작업들로 인해 바쁜 페이지에서 늦게 실행될 수 있습니다.

- -

최대 지연 값

- -

Internet Explorer, Chrome, Safari, and Firefox 포함하는 브라우저들은 내부적으로 32-bit 부호있는 정수로 지연 값을 저장합니다. 이로 인해 2147483647보다 더 큰 지연을 사용할 때 정수 오버플로우가 발생하여, 타임아웃이 즉시 실행됩니다.

- -

사양

- - - - - - - - - - - - - - -
사양상태주석
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
- -

지원 브라우저

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
기능ChromeFirefox (Gecko)Internet ExplorerOperaSafari
기본1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Callback 매개변수 지원[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
기능AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
기본1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Callback 매개변수 지원[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] 첫번째 form에서 매개변수를 지원하는지에 대한 여부.

- -

더 알아보기

- - diff --git a/files/ko/web/api/xmlhttprequest/timeout/index.html b/files/ko/web/api/xmlhttprequest/timeout/index.html deleted file mode 100644 index 4ecc599f9d..0000000000 --- a/files/ko/web/api/xmlhttprequest/timeout/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: timeout -slug: Web/API/XMLHttpRequest/timeout -translation_of: Web/API/XMLHttpRequest/timeout_event ---- -
-

timeout 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.

-
- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Target objects{{domxref("XMLHttpRequest")}}
Interface{{domxref("ProgressEvent")}}
- -

Examples

- -
var client = new XMLHttpRequest();
-client.open("GET", "http://www.example.org/example.txt");
-client.ontimeout = function(e) {
-  console.error("Timeout!!");
-}
-client.send();
- -

Inheritance

- -

timeout 이벤트는 {{domxref("Event")}}에서 상속받은 {{domxref("ProgressEvent")}} 인터페이스를 구현합니다. 이 인터페이스에 선언된 속성(property)과 메서드를 사용할 수 있습니다.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}} 
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- - diff --git a/files/ko/web/api/xmlhttprequest/timeout_event/index.html b/files/ko/web/api/xmlhttprequest/timeout_event/index.html new file mode 100644 index 0000000000..4ecc599f9d --- /dev/null +++ b/files/ko/web/api/xmlhttprequest/timeout_event/index.html @@ -0,0 +1,123 @@ +--- +title: timeout +slug: Web/API/XMLHttpRequest/timeout +translation_of: Web/API/XMLHttpRequest/timeout_event +--- +
+

timeout 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.

+
+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Target objects{{domxref("XMLHttpRequest")}}
Interface{{domxref("ProgressEvent")}}
+ +

Examples

+ +
var client = new XMLHttpRequest();
+client.open("GET", "http://www.example.org/example.txt");
+client.ontimeout = function(e) {
+  console.error("Timeout!!");
+}
+client.send();
+ +

Inheritance

+ +

timeout 이벤트는 {{domxref("Event")}}에서 상속받은 {{domxref("ProgressEvent")}} 인터페이스를 구현합니다. 이 인터페이스에 선언된 속성(property)과 메서드를 사용할 수 있습니다.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/ko/web/api/xsltprocessor/basic_example/index.html b/files/ko/web/api/xsltprocessor/basic_example/index.html new file mode 100644 index 0000000000..cb96c52c55 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/basic_example/index.html @@ -0,0 +1,49 @@ +--- +title: Basic Example +slug: XSLT_in_Gecko/Basic_Example +translation_of: Web/API/XSLTProcessor/Basic_Example +--- +

기본 예

+

이 첫 예는 브라우저에서 XSLT 변환 설정의 기본을 보여준다. 이 예는 Article에 대한 정보(Title, Author 목록과 Body 글)를 포함한 XML 문서를 얻어 그것을 사람이 읽을 수 있는 형식으로 나타낸다. +

그림1은 기본 XSLT예의 소스를 보여준다. XML문서(example.xml)은 글의 정보를 포함한다. ?xml-stylesheet? 처리명령을 써서, 그것의 href 속성을 통해 XSLT 스타일쉬트(example.xsl)에 연결한다. +

XSLT 스타일쉬트는 xsl:stylesheet 요소로 시작하는데, 이것은 최종 출력을 생성하는데 쓰이는 모든 템플리트를 포함한다. 그림1의 예는 템플리트 2개를 가진다 - 하나는 root 노드에 하나는 Author 노드에 대응한다. root 노드에 대응하는 템플리트는 글의 제목을 출력하고 Authors 노드의 자식노드인 Author 노드에 대응하는 모든 템플리트를 처리하기 위해 말한다. +

그림1 : 간단한 XSLT예 +

XML 문서 (example.xml) : +

+
  <?xml version="1.0"?>
+  <?xml-stylesheet type="text/xsl" href="example.xsl"?>
+  <Article>
+    <Title>My Article</Title>
+    <Authors>
+      <Author>Mr. Foo</Author>
+      <Author>Mr. Bar</Author>
+    </Authors>
+    <Body>This is my article text.</Body>
+  </Article>
+
+

XSL 스타일쉬트 (example.xsl) : +

+
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+
+    <xsl:output method="text"/>
+
+    <xsl:template match="/">
+      Article - <xsl:value-of select="/Article/Title"/>
+      Authors: <xsl:apply-templates select="/Article/Authors/Author"/>
+    </xsl:template>
+
+    <xsl:template match="Author">
+      - <xsl:value-of select="." />
+    </xsl:template>
+
+  </xsl:stylesheet>
+
+

브라우저 출력: +

+
  Article - My Article
+  Authors:
+  - Mr. Foo
+  - Mr. Bar
+
+{{ languages( { "en": "en/XSLT_in_Gecko/Basic_Example" } ) }} diff --git a/files/ko/web/api/xsltprocessor/browser_differences/index.html b/files/ko/web/api/xsltprocessor/browser_differences/index.html new file mode 100644 index 0000000000..0d22a5b825 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/browser_differences/index.html @@ -0,0 +1,8 @@ +--- +title: Browser Differences +slug: XSLT_in_Gecko/Browser_Differences +translation_of: Web/API/XSLTProcessor/Browser_Differences +--- +

브라우저 차이

+

Netscape 7.x (모든 플랫폼)과 Internet Explorer 6(윈도즈)는 W3C XSLT 1.0 표준( http://www.w3.org/TR/xslt )을 지원합니다. IE 5.0과 5.5 (둘 다 윈도즈)는 XSLT의 초안만 지원하므로 XSLT 1.0 스타일쉬트와는 호환하지 않습니다. Netscape 6.x는 XSLT 1.0을 부분적으로만 지원합니다. +

{{ languages( { "en": "en/XSLT_in_Gecko/Browser_Differences" } ) }} diff --git a/files/ko/web/api/xsltprocessor/generating_html/index.html b/files/ko/web/api/xsltprocessor/generating_html/index.html new file mode 100644 index 0000000000..5bb284bdb8 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/generating_html/index.html @@ -0,0 +1,174 @@ +--- +title: Generating HTML +slug: XSLT_in_Gecko/Generating_HTML +translation_of: Web/API/XSLTProcessor/Generating_HTML +--- +

HTML 생성하기

+

브라우저에서 XSLT의 공통 응용은 XML을 클라이언트의 안에 변환해 넣는 것이다. 두번째 예는 입력문서(example2.xml)를 변환하는데, 이것은 또 글의 정보를 포함하고 HTML문서 안에 들어간다. +

Article의 <body> 요소는 지금 HTML의 요소 (<b> 와 <u> 태그, 그림 2)를 포함한다. XML 문서는 HTML요소와 XML 요소 모두 포함하지만, 단 하나의 namespace 즉 XML 요소만 필요하다. HTML namespace가 없으므로, 그리고 XHTML namespace를 사용하여 XSL에서 an XML document를 생성하고 그것은 HTML문서와 같은 양상은 아닐 것이고, XSL Stylesheet 의xsl:output는 결과문서는 HTML처럼 다루어질 것을 보장한다 . XML 요소에 대해, 우리 자신의 namespace http://devedge.netscape.com/2002/de 는 필요하고, 그것은 접두어 myNS (xmlns:myNS="http://devedge.netscape.com/2002/de)에 주어진다. +

그림 2 XML 파일 (example2.xml) +XML Document (example2.xml): +

+
<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="example2.xsl"?>
+<myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
+<myNS:Title>My Article</myNS:Title>
+<myNS:Authors>
+<myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
+<myNS:Author>Mr. Bar</myNS:Author>
+</myNS:Authors>
+<myNS:Body>
+The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
+</myNS:Body>
+</myNS:Article>
+
+

The XSL Stylesheet used will need to have two namespaces - one for the XSLT elements and one for our own XML elements used in the XML document. The output of the XSL Stylesheet is set to HTML by using the xsl:output element. By setting the output to be HTML and not having a namespace on the resulting elements (colored in blue), those elements will be treated as HTML elements. +

그림 3 : 두 namespaces를 가진 XSL Stylesheet (example2.xsl) +XSL Stylesheet (example2.xsl): +

+
<?xml version="1.0"?>
+<xsl:stylesheet version="1.0"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+<xsl:output method="html"/>
+...
+</xsl:stylesheet version="1.0">
+
+

A template matching the root node of the XML document is created and used to create the basic structure of the HTML page. +

Figure 4 : Creating the basic HTML document +XSL Stylesheet (example2.xsl): +

+
...
+<xsl:template match="/">
+<html>
+
+<head>
+
+<title>
+<xsl:value-of select="/myNS:Article/myNS:Title"/>
+</title>
+
+<style type="text/css">
+.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+</style>
+
+</head>
+
+<body>
+<p class="myBox">
+<span class="title">
+<xsl:value-of select="/myNS:Article/myNS:Title"/>
+</span> </br>
+
+Authors: <br />
+<xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+</p>
+
+<p class="myBox">
+<xsl:apply-templates select="//myNS:Body"/>
+</p>
+
+</body>
+
+</html>
+</xsl:template>
+...
+
+

Three more xsl:template's are needed to complete the example. The first xsl:template is used for the author nodes, while the second one processes the body node. The third template has a general matching rule which will match any node and any attribute. It is needed in order to preserve the html elements in the XML document, since it matches all of them and copies them out into the HTML document the transformation creates. +

그림 5 : 최종 3개 템플리트 +XSL Stylesheet(example2.xsl): +

+
...
+<xsl:template match="myNS:Author">
+-- <xsl:value-of select="." />
+
+<xsl:if test="@company">
+:: <b> <xsl:value-of select="@company" /> </b>
+</xsl:if>
+
+<br />
+</xsl:template>
+
+<xsl:template match="myNS:Body">
+<xsl:copy>
+<xsl:apply-templates select="@*|node()"/>
+</xsl:copy>
+</xsl:template>
+
+<xsl:template match="@*|node()">
+<xsl:copy>
+<xsl:apply-templates select="@*|node()"/>
+</xsl:copy>
+</xsl:template>
+...
+
+

The final XSLT stylesheet looks as follows: +

그림 6 : 최종 XSLT Stylesheetview example | view source +XSL Stylesheet: +

+
<?xml version="1.0"?>
+<xsl:stylesheet version="1.0"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+<xsl:output method="html" />
+
+<xsl:template match="/">
+<html>
+
+<head>
+
+<title>
+<xsl:value-of select="/myNS:Article/myNS:Title"/>
+</title>
+
+<style type="text/css">
+.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+</style>
+
+</head>
+
+<body>
+<p class="myBox">
+<span class="title">
+<xsl:value-of select="/myNS:Article/myNS:Title"/>
+</span> <br />
+
+Authors: <br />
+<xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+</p>
+
+<p class="myBox">
+<xsl:apply-templates select="//myNS:Body"/>
+</p>
+
+</body>
+
+</html>
+</xsl:template>
+
+<xsl:template match="myNS:Author">
+-- <xsl:value-of select="." />
+
+<xsl:if test="@company">
+:: <b> <xsl:value-of select="@company" /> </b>
+</xsl:if>
+
+<br />
+</xsl:template>
+
+<xsl:template match="myNS:Body">
+<xsl:copy>
+<xsl:apply-templates select="@*|node()"/>
+</xsl:copy>
+</xsl:template>
+
+<xsl:template match="@*|node()">
+<xsl:copy>
+<xsl:apply-templates select="@*|node()"/>
+</xsl:copy>
+</xsl:template>
+</xsl:stylesheet>
+
+{{ languages( { "en": "en/XSLT_in_Gecko/Generating_HTML" } ) }} diff --git a/files/ko/web/api/xsltprocessor/index.html b/files/ko/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..84d5198c58 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/index.html @@ -0,0 +1,15 @@ +--- +title: XSLT in Gecko +slug: XSLT_in_Gecko +tags: + - XSLT +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLT_in_Gecko +--- +
  1. 개요 +
  2. 기본 예제 +
  3. HTML 생성 +
  4. 브라우저 차이 +
  5. 자원 +
+{{ languages( { "en": "en/XSLT_in_Gecko" } ) }} diff --git a/files/ko/web/api/xsltprocessor/introduction/index.html b/files/ko/web/api/xsltprocessor/introduction/index.html new file mode 100644 index 0000000000..bfb103b98f --- /dev/null +++ b/files/ko/web/api/xsltprocessor/introduction/index.html @@ -0,0 +1,13 @@ +--- +title: Introduction +slug: XSLT_in_Gecko/Introduction +translation_of: Web/API/XSLTProcessor/Introduction +--- +

개요

+

W3표준 안에서 주목할만한 하나의 흐름은 스타일로부터 내용을 분리하려는 노력이다. +

이것은 같은 스타일이 여러 내용에서 재사용되는 것을 허용할 뿐 아니라 유지보수를 쉽게 하고 (하나의 파일만 바꾸어서) 내용의 외관을 빠르게 바꾸는 방법을 허용한다. +

CSS (Cascade Style Sheets)는 W3C에서 제안된 첫번째 방법이다. CSS는 스타일규칙을 웹문서에 적용하는 간단한 방법이다. 이 스타일규칙은 어떻게 문서(내용)가 놓일지 정의한다. 그러나, 여러 제한이 있다. 프로그램 구조와 복잡한 레이아웃 모델을 만드는 가능성의 부족. CSS는 요소의 위치 변화제공에 제한된다. +

XSL (Extensible Stylesheet Language)변환은 두 부분으로 구성된다. XML트리를 다른 마크업 트리로 변환하는 XSL요소, 트리를 위한 선택언어 XPath. +XSLT는 XML문서를 얻어서 XSL스타일쉬트안의 규칙에 기반한 새 문서를 생성한다. 이것은 XSLT가 원 XML문서로부터 요소를 추가, 제거, 재구성하는 것을 허용하고 따라서 결과문서구조의 좀더 세분된 제어를 허용한다. +

XSLT의 변환은 template로 구성된 규칙에 기반한다. 각 template은 입력 XML문서의 조각에 대응하고 대응하는 부분을 새 결과문서에 적용한다. +

{{ languages( { "en": "en/XSLT_in_Gecko/Introduction" } ) }} diff --git a/files/ko/web/api/xsltprocessor/resources/index.html b/files/ko/web/api/xsltprocessor/resources/index.html new file mode 100644 index 0000000000..bcdb54116f --- /dev/null +++ b/files/ko/web/api/xsltprocessor/resources/index.html @@ -0,0 +1,14 @@ +--- +title: Resources +slug: XSLT_in_Gecko/Resources +translation_of: Web/API/XSLTProcessor/Resources +--- +

자원

+ -- cgit v1.2.3-54-g00ecf From f2db11d0be377464daa06807f993a562c7dc10ac Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:25 +0100 Subject: unslug ko: modify --- files/ko/_redirects.txt | 923 +- files/ko/_wikihistory.json | 10642 +++++++++---------- .../conflicting/learn/common_questions/index.html | 3 +- .../index.html | 3 +- .../cascade_and_inheritance/index.html | 3 +- .../learn/css/building_blocks/index.html | 3 +- .../css/building_blocks/styling_tables/index.html | 3 +- .../ko/conflicting/learn/css/css_layout/index.html | 3 +- .../learn/css/css_layout/introduction/index.html | 3 +- .../learn/css/styling_text/fundamentals/index.html | 3 +- .../css/styling_text/styling_lists/index.html | 3 +- .../javascript_basics/index.html | 3 +- .../advanced_text_formatting/index.html | 3 +- files/ko/conflicting/learn/index.html | 3 +- .../learn/javascript/objects/index.html | 3 +- files/ko/conflicting/mdn/tools/index.html | 3 +- files/ko/conflicting/mozilla/add-ons/index.html | 3 +- .../web/api/document_object_model/index.html | 3 +- files/ko/conflicting/web/api/index.html | 3 +- .../tutorial/using_textures_in_webgl/index.html | 3 +- files/ko/conflicting/web/css/@viewport/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../using_multiple_backgrounds/index.html | 3 +- files/ko/conflicting/web/guide/index.html | 3 +- .../guide/expressions_and_operators/index.html | 5 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../javascript/guide/grammar_and_types/index.html | 3 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../ko/conflicting/web/javascript/guide/index.html | 5 +- .../javascript_technologies_overview/index.html | 3 +- .../reference/global_objects/boolean/index.html | 3 +- .../reference/global_objects/date/index.html | 3 +- .../global_objects/internalerror/index.html | 3 +- .../global_objects/intl/datetimeformat/index.html | 3 +- .../global_objects/intl/numberformat/index.html | 3 +- .../reference/global_objects/map/index.html | 3 +- .../reference/global_objects/number/index.html | 3 +- .../reference/global_objects/object/index.html | 3 +- .../reference/global_objects/promise/index.html | 3 +- .../reference/global_objects/set/index.html | 3 +- .../global_objects/sharedarraybuffer/index.html | 3 +- .../reference/global_objects/string/index.html | 3 +- .../global_objects/syntaxerror/index.html | 3 +- .../reference/global_objects/typedarray/index.html | 3 +- .../reference/global_objects/weakmap/index.html | 3 +- .../reference/global_objects/weakset/index.html | 3 +- .../global_objects/webassembly/global/index.html | 3 +- .../web/javascript/reference/operators/index.html | 3 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../reference/statements/switch/index.html | 3 +- .../index.html | 3 +- .../2d_breakout_game_phaser/the_score/index.html | 3 +- .../bounce_off_the_walls/index.html | 3 +- .../build_the_brick_field/index.html | 3 +- .../collision_detection/index.html | 3 +- .../create_the_canvas_and_draw_on_it/index.html | 4 +- .../finishing_up/index.html | 3 +- .../game_over/index.html | 3 +- .../2d_breakout_game_pure_javascript/index.html | 3 +- .../mouse_controls/index.html | 3 +- .../move_the_ball/index.html | 3 +- .../paddle_and_keyboard_controls/index.html | 3 +- .../track_the_score_and_win/index.html | 3 +- files/ko/glossary/array/index.html | 3 +- files/ko/glossary/boolean/index.html | 3 +- files/ko/glossary/browsing_context/index.html | 3 +- files/ko/glossary/cache/index.html | 3 +- files/ko/glossary/dhtml/index.html | 3 +- .../dynamic_programming_language/index.html | 3 +- files/ko/glossary/http_header/index.html | 3 +- files/ko/glossary/identifier/index.html | 3 +- files/ko/glossary/localization/index.html | 3 +- files/ko/glossary/scope/index.html | 3 +- .../transmission_control_protocol_(tcp)/index.html | 3 +- files/ko/glossary/xhtml/index.html | 3 +- files/ko/learn/accessibility/html/index.html | 3 +- files/ko/learn/accessibility/index.html | 3 +- files/ko/learn/accessibility/mobile/index.html | 3 +- .../accessibility/what_is_accessibility/index.html | 3 +- .../index.html | 3 +- .../thinking_before_coding/index.html | 3 +- .../fundamental_css_comprehension/index.html | 3 +- .../learn/css/building_blocks/selectors/index.html | 3 +- .../css/building_blocks/the_box_model/index.html | 3 +- .../learn/css/css_layout/media_queries/index.html | 3 +- .../ko/learn/css/css_layout/normal_flow/index.html | 3 +- .../ko/learn/css/css_layout/positioning/index.html | 3 +- .../css/css_layout/responsive_design/index.html | 3 +- .../supporting_older_browsers/index.html | 3 +- files/ko/learn/css/howto/css_faq/index.html | 3 +- .../forms/how_to_structure_a_web_form/index.html | 3 +- files/ko/learn/forms/index.html | 3 +- .../sending_and_retrieving_form_data/index.html | 3 +- files/ko/learn/forms/your_first_form/index.html | 3 +- .../css_basics/index.html | 5 +- .../dealing_with_files/index.html | 5 +- .../how_the_web_works/index.html | 3 +- .../html_basics/index.html | 5 +- .../installing_basic_software/index.html | 5 +- .../publishing_your_website/index.html | 3 +- .../author_fast-loading_html_pages/index.html | 3 +- .../html/howto/use_data_attributes/index.html | 3 +- .../video_and_audio_content/index.html | 3 +- .../building_blocks/conditionals/index.html | 3 +- .../manipulating_documents/index.html | 5 +- .../test_your_skills_colon__json/index.html | 5 +- .../development_environment/index.html | 3 +- .../express_nodejs/skeleton_website/index.html | 3 +- .../node_server_without_framework/index.html | 3 +- files/ko/mdn/at_ten/index.html | 3 +- .../convert_code_samples_to_be_live/index.html | 3 +- .../howto/create_and_edit_pages/index.html | 3 +- .../write_an_api_reference/sidebars/index.html | 3 +- .../guidelines/code_guidelines/general/index.html | 3 +- .../guidelines/conventions_definitions/index.html | 3 +- .../guidelines/does_this_belong_on_mdn/index.html | 3 +- .../mdn/guidelines/writing_style_guide/index.html | 3 +- files/ko/mdn/yari/index.html | 3 +- .../webextensions/api/menus/contexttype/index.html | 3 +- .../webextensions/api/menus/create/index.html | 3 +- .../api/menus/gettargetelement/index.html | 3 +- .../add-ons/webextensions/api/menus/index.html | 3 +- .../webextensions/api/menus/onshown/index.html | 3 +- .../developer_guide/source_code/cvs/index.html | 3 +- .../index.html | 3 +- files/ko/mozilla/firefox/releases/1.5/index.html | 3 +- files/ko/mozilla/firefox/releases/2/index.html | 3 +- .../releases/2/updating_extensions/index.html | 3 +- files/ko/mozilla/firefox/releases/3.5/index.html | 3 +- files/ko/mozilla/firefox/releases/3.6/index.html | 3 +- .../firefox/releases/3/dom_improvements/index.html | 3 +- .../firefox/releases/3/full_page_zoom/index.html | 3 +- .../releases/3/notable_bugs_fixed/index.html | 3 +- .../firefox/releases/3/svg_improvements/index.html | 3 +- .../releases/3/updating_extensions/index.html | 3 +- .../3/updating_web_applications/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../ko/orphaned/learn/how_to_contribute/index.html | 5 +- .../ko/orphaned/mdn/about/mdn_services/index.html | 3 +- .../mdn/community/conversations/index.html | 3 +- files/ko/orphaned/mdn/community/index.html | 3 +- .../mdn/community/working_in_community/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../howto/do_a_technical_review/index.html | 3 +- .../howto/do_an_editorial_review/index.html | 3 +- .../property_template/index.html | 3 +- .../howto/set_the_summary_for_a_page/index.html | 3 +- .../howto/tag_javascript_pages/index.html | 3 +- .../index.html | 3 +- files/ko/orphaned/mdn/editor/index.html | 3 +- files/ko/orphaned/mdn/editor/links/index.html | 3 +- .../mdn/structures/api_references/index.html | 3 +- .../mdn/tools/page_regeneration/index.html | 3 +- .../orphaned/places/custom_containers/index.html | 3 +- .../orphaned/places/instantiating_views/index.html | 3 +- files/ko/orphaned/places/query_system/index.html | 3 +- files/ko/orphaned/places/views/index.html | 3 +- files/ko/orphaned/theme_packaging/index.html | 3 +- .../tools/add-ons/dom_inspector/index.html | 13 +- files/ko/orphaned/tools/add-ons/index.html | 5 +- .../index.html | 3 +- files/ko/orphaned/web/css/index/index.html | 3 +- .../orphaned/web/html/element/command/index.html | 3 +- .../orphaned/web/html/element/element/index.html | 3 +- .../web/html/global_attributes/dropzone/index.html | 3 +- .../index.html | 3 +- .../core_javascript_1.5_guide/about/index.html | 3 +- .../index.html | 2 + .../creating_a_regular_expression/index.html | 2 + .../defining_getters_and_setters/index.html | 2 + .../defining_methods/index.html | 2 + .../index.html | 2 + .../deleting_properties/index.html | 2 + .../creating_new_objects/index.html | 2 + .../indexing_object_properties/index.html | 2 + .../using_a_constructor_function/index.html | 2 + .../using_this_for_object_references/index.html | 2 + .../expressions/index.html | 4 +- .../javascript_overview/index.html | 2 + .../objects_and_properties/index.html | 2 + .../operators/assignment_operators/index.html | 2 + .../core_javascript_1.5_guide/operators/index.html | 4 +- .../array_object/index.html | 2 + .../global_objects/bigint/prototype/index.html | 3 +- .../information_security_basics/index.html | 3 +- .../windows_and_menus_in_xulrunner/index.html | 3 +- .../index.html" | 3 +- .../index.html" | 3 +- .../ko/plugins/guide/scripting_plugins/index.html | 3 +- files/ko/tools/debugger/how_to/index.html | 3 +- .../debugger/how_to/open_the_debugger/index.html | 3 +- files/ko/tools/debugger/how_to/search/index.html | 3 +- .../debugger/how_to/set_a_breakpoint/index.html | 3 +- .../tools/debugger/keyboard_shortcuts/index.html | 3 +- files/ko/web/api/ambient_light_events/index.html | 3 +- files/ko/web/api/battery_status_api/index.html | 3 +- .../api/broadcastchannel/message_event/index.html | 3 +- .../api/canvas_api/a_basic_ray-caster/index.html | 3 +- files/ko/web/api/canvas_api/index.html | 3 +- .../manipulating_video_using_canvas/index.html | 3 +- .../tutorial/advanced_animations/index.html | 3 +- .../tutorial/applying_styles_and_colors/index.html | 3 +- .../tutorial/basic_animations/index.html | 3 +- .../api/canvas_api/tutorial/basic_usage/index.html | 3 +- .../tutorial/compositing/example/index.html | 3 +- .../api/canvas_api/tutorial/compositing/index.html | 3 +- .../canvas_api/tutorial/drawing_shapes/index.html | 3 +- .../canvas_api/tutorial/drawing_text/index.html | 5 +- .../web/api/canvas_api/tutorial/finale/index.html | 3 +- .../hit_regions_and_accessibility/index.html | 3 +- files/ko/web/api/canvas_api/tutorial/index.html | 3 +- .../tutorial/optimizing_canvas/index.html | 3 +- .../canvas_api/tutorial/transformations/index.html | 3 +- .../canvas_api/tutorial/using_images/index.html | 3 +- .../index.html | 3 +- .../managing_screen_orientation/index.html | 3 +- .../api/detecting_device_orientation/index.html | 3 +- files/ko/web/api/document/createevent/index.html | 3 +- .../document_object_model/introduction/index.html | 3 +- .../documentorshadowroot/getselection/index.html | 3 +- files/ko/web/api/element/blur_event/index.html | 3 +- .../web/api/elementcssinlinestyle/style/index.html | 3 +- files/ko/web/api/fetch_api/using_fetch/index.html | 3 +- files/ko/web/api/fullscreen_api/index.html | 3 +- .../using_the_geolocation_api/index.html | 3 +- .../drag_operations/index.html | 3 +- files/ko/web/api/html_drag_and_drop_api/index.html | 3 +- files/ko/web/api/htmlelement/accesskey/index.html | 3 +- files/ko/web/api/htmlelement/innertext/index.html | 3 +- .../api/htmlmediaelement/abort_event/index.html | 3 +- .../api/htmlorforeignelement/dataset/index.html | 3 +- .../api/htmlorforeignelement/tabindex/index.html | 3 +- files/ko/web/api/navigation_timing_api/index.html | 3 +- files/ko/web/api/navigator/connection/index.html | 3 +- .../ko/web/api/network_information_api/index.html | 3 +- .../using_the_notifications_api/index.html | 3 +- files/ko/web/api/proximity_events/index.html | 3 +- .../web/api/screen/onorientationchange/index.html | 3 +- files/ko/web/api/streams_api/concepts/index.html | 3 +- files/ko/web/api/vibration_api/index.html | 3 +- .../web_workers_api/using_web_workers/index.html | 3 +- files/ko/web/api/websockets_api/index.html | 3 +- .../index.html | 3 +- .../writing_websocket_servers/index.html | 3 +- .../api/window/domcontentloaded_event/index.html | 3 +- files/ko/web/api/window/load_event/index.html | 3 +- .../settimeout/index.html | 3 +- .../api/xmlhttprequest/timeout_event/index.html | 3 +- .../web/api/xsltprocessor/basic_example/index.html | 3 +- .../xsltprocessor/browser_differences/index.html | 3 +- .../api/xsltprocessor/generating_html/index.html | 3 +- files/ko/web/api/xsltprocessor/index.html | 3 +- .../web/api/xsltprocessor/introduction/index.html | 3 +- .../ko/web/api/xsltprocessor/resources/index.html | 3 +- .../web/css/adjacent_sibling_combinator/index.html | 3 +- files/ko/web/css/containing_block/index.html | 3 +- .../resizing_background_images/index.html | 3 +- .../index.html | 3 +- .../using_multi-column_layouts/index.html | 3 +- .../basic_concepts_of_flexbox/index.html | 3 +- .../typical_use_cases_of_flexbox/index.html | 3 +- .../index.html | 3 +- .../flow_layout_and_overflow/index.html | 3 +- .../flow_layout_and_writing_modes/index.html | 3 +- .../in_flow_and_out_of_flow/index.html | 3 +- .../consistent_list_indentation/index.html | 3 +- files/ko/web/css/css_masking/index.html | 3 +- files/ko/web/css/css_values_and_units/index.html | 3 +- .../media_queries/using_media_queries/index.html | 3 +- files/ko/web/css/url()/index.html | 3 +- .../ko/web/css/visual_formatting_model/index.html | 3 +- files/ko/web/guide/graphics/index.html | 3 +- .../ko/web/guide/html/editable_content/index.html | 3 +- files/ko/web/guide/html/html5/index.html | 3 +- .../html/html5/introduction_to_html5/index.html | 3 +- .../using_html_sections_and_outlines/index.html | 3 +- .../guide/parsing_and_serializing_xml/index.html | 3 +- .../ko/web/html/global_attributes/class/index.html | 3 +- .../index.html | 3 +- .../a_re-introduction_to_javascript/index.html | 3 +- .../ko/web/javascript/about_javascript/index.html | 3 +- files/ko/web/javascript/closures/index.html | 3 +- .../guide/details_of_the_object_model/index.html | 3 +- files/ko/web/javascript/guide/functions/index.html | 3 +- .../javascript/guide/grammar_and_types/index.html | 5 +- .../web/javascript/guide/introduction/index.html | 3 +- .../javascript/guide/meta_programming/index.html | 3 +- .../regular_expressions/assertions/index.html | 3 +- .../groups_and_ranges/index.html | 3 +- .../guide/regular_expressions/index.html | 3 +- .../inheritance_and_the_prototype_chain/index.html | 3 +- .../web/javascript/language_resources/index.html | 3 +- .../classes/public_class_fields/index.html | 3 +- .../reference/functions/arrow_functions/index.html | 3 +- .../global_objects/proxy/proxy/apply/index.html | 3 +- .../global_objects/proxy/proxy/index.html | 3 +- .../operators/operator_precedence/index.html | 3 +- files/ko/web/javascript/shells/index.html | 3 +- .../web/media/formats/codecs_parameter/index.html | 3 +- files/ko/web/media/formats/containers/index.html | 3 +- files/ko/web/media/formats/video_codecs/index.html | 3 +- .../performance/critical_rendering_path/index.html | 3 +- .../web/performance/how_browsers_work/index.html | 3 +- .../progressive_web_apps/introduction/index.html | 3 +- .../responsive/media_types/index.html | 3 +- files/ko/web/reference/api/index.html | 3 +- files/ko/web/reference/index.html | 3 +- files/ko/web/svg/element/rect/index.html | 3 +- .../web/svg/svg_1.1_support_in_firefox/index.html | 3 +- files/ko/web/svg/tutorial/basic_shapes/index.html | 3 +- .../ko/web/svg/tutorial/getting_started/index.html | 5 +- files/ko/web/svg/tutorial/positions/index.html | 3 +- files/ko/web/svg/tutorial/svg_and_css/index.html | 5 +- .../index.html | 3 +- files/ko/web/xslt/element/apply-imports/index.html | 3 +- .../ko/web/xslt/element/apply-templates/index.html | 3 +- files/ko/web/xslt/element/attribute-set/index.html | 3 +- files/ko/web/xslt/element/attribute/index.html | 3 +- files/ko/web/xslt/element/call-template/index.html | 3 +- files/ko/web/xslt/element/choose/index.html | 3 +- files/ko/web/xslt/element/comment/index.html | 3 +- files/ko/web/xslt/element/copy-of/index.html | 3 +- files/ko/web/xslt/element/copy/index.html | 3 +- .../ko/web/xslt/element/decimal-format/index.html | 3 +- files/ko/web/xslt/element/fallback/index.html | 3 +- files/ko/web/xslt/element/for-each/index.html | 3 +- files/ko/web/xslt/element/if/index.html | 3 +- files/ko/web/xslt/element/import/index.html | 3 +- files/ko/web/xslt/element/include/index.html | 3 +- files/ko/web/xslt/element/key/index.html | 3 +- files/ko/web/xslt/element/message/index.html | 3 +- .../ko/web/xslt/element/namespace-alias/index.html | 3 +- files/ko/web/xslt/element/number/index.html | 3 +- files/ko/web/xslt/element/otherwise/index.html | 3 +- files/ko/web/xslt/element/output/index.html | 3 +- files/ko/web/xslt/element/param/index.html | 3 +- .../ko/web/xslt/element/preserve-space/index.html | 3 +- .../xslt/element/processing-instruction/index.html | 3 +- files/ko/web/xslt/element/sort/index.html | 3 +- files/ko/web/xslt/element/strip-space/index.html | 3 +- files/ko/web/xslt/element/stylesheet/index.html | 3 +- files/ko/web/xslt/element/template/index.html | 3 +- files/ko/web/xslt/element/text/index.html | 3 +- files/ko/web/xslt/element/transform/index.html | 3 +- files/ko/web/xslt/element/value-of/index.html | 3 +- files/ko/web/xslt/element/variable/index.html | 3 +- files/ko/web/xslt/element/when/index.html | 3 +- files/ko/web/xslt/element/with-param/index.html | 3 +- .../web/xslt/xslt_js_interface_in_gecko/index.html | 3 +- .../introduction/index.html | 3 +- .../setting_parameters/index.html | 3 +- 362 files changed, 6714 insertions(+), 5970 deletions(-) (limited to 'files/ko/web/api') diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 7f30c9d013..332b346200 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -2,11 +2,14 @@ /ko/docs/AJAX /ko/docs/Web/Guide/AJAX /ko/docs/AJAX/Getting_Started /ko/docs/Web/Guide/AJAX/Getting_Started /ko/docs/AJAX:Getting_Started /ko/docs/Web/Guide/AJAX/Getting_Started -/ko/docs/About_JavaScript /ko/docs/Web/JavaScript/About +/ko/docs/A_Basic_RayCaster /ko/docs/Web/API/Canvas_API/A_basic_ray-caster +/ko/docs/A_re-introduction_to_JavaScript /ko/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/ko/docs/About_JavaScript /ko/docs/Web/JavaScript/About_JavaScript /ko/docs/About_the_Document_Object_Model /ko/docs/Web/API/Document_Object_Model /ko/docs/Accessibility /ko/docs/Web/Accessibility /ko/docs/Accessibility/ARIA /ko/docs/Web/Accessibility/ARIA /ko/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets /ko/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +/ko/docs/Adapting_XUL_Applications_for_Firefox_1.5 /ko/docs/Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 /ko/docs/Alternative_style_sheets /ko/docs/Web/CSS/Alternative_style_sheets /ko/docs/Apps/Progressive /ko/docs/Web/Progressive_web_apps /ko/docs/Apps/Progressive/Add_to_home_screen /ko/docs/Web/Progressive_web_apps/Add_to_home_screen @@ -14,29 +17,30 @@ /ko/docs/Apps/Progressive/Installable_PWAs /ko/docs/Web/Progressive_web_apps/Installable_PWAs /ko/docs/Apps/Progressive/Offline_Service_workers /ko/docs/Web/Progressive_web_apps/Offline_Service_workers /ko/docs/Apps/Progressive/Re-engageable_Notifications_Push /ko/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push -/ko/docs/Apps/Progressive/소개 /ko/docs/Web/Progressive_web_apps/소개 +/ko/docs/Apps/Progressive/소개 /ko/docs/Web/Progressive_web_apps/Introduction +/ko/docs/Building_an_Extension /ko/docs/conflicting/Mozilla/Add-ons /ko/docs/CSS /ko/docs/Web/CSS /ko/docs/CSS/@font-face /ko/docs/Web/CSS/@font-face /ko/docs/CSS/Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/CSS/Getting_Started/Boxes /ko/docs/Web/CSS/시작하기/상자 -/ko/docs/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/Web/CSS/시작하기/종속과_상속 +/ko/docs/CSS/Getting_Started/Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks +/ko/docs/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/CSS/Getting_Started/Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/CSS/Getting_Started/JavaScript /ko/docs/Web/CSS/Getting_Started/JavaScript -/ko/docs/CSS/Getting_Started/Layout /ko/docs/Web/CSS/시작하기/배치 -/ko/docs/CSS/Getting_Started/Lists /ko/docs/Web/CSS/시작하기/리스트 -/ko/docs/CSS/Getting_Started/Media /ko/docs/Web/CSS/시작하기/미디어 -/ko/docs/CSS/Getting_Started/SVG_graphics /ko/docs/Web/CSS/Getting_Started/SVG_graphics +/ko/docs/CSS/Getting_Started/JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/ko/docs/CSS/Getting_Started/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/CSS/Getting_Started/Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/CSS/Getting_Started/Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS/Getting_Started/SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/CSS/Getting_Started/Tables /ko/docs/Web/CSS/시작하기/테이블 -/ko/docs/CSS/Getting_Started/Text_styles /ko/docs/Web/CSS/시작하기/텍스트_스타일 +/ko/docs/CSS/Getting_Started/Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/CSS/Getting_Started/Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/Getting_Started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/Getting_Started/XBL_bindings /ko/docs/Web/CSS/Getting_Started/XBL_bindings /ko/docs/CSS/Getting_Started/XML_data /ko/docs/Web/CSS/Getting_Started/XML_data /ko/docs/CSS/Getting_Started/XUL_user_interfaces /ko/docs/Web/CSS/Getting_Started/XUL_user_interfaces -/ko/docs/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +/ko/docs/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/CSS/Understanding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index /ko/docs/CSS/Understanding_z-index-redirect-1 /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index /ko/docs/CSS/Understanding_z-index/Adding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index @@ -50,7 +54,7 @@ /ko/docs/CSS/Understanding_z-index/Stacking_without_z-index-redirect-1 /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /ko/docs/CSS/Understanding_z-index/The_stacking_context /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /ko/docs/CSS/Using_CSS_animations /ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/ko/docs/CSS/Using_CSS_multiple_backgrounds /ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +/ko/docs/CSS/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ko/docs/CSS/Using_CSS_transforms /ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /ko/docs/CSS/animation /ko/docs/Web/CSS/animation /ko/docs/CSS/background /ko/docs/Web/CSS/background @@ -59,7 +63,7 @@ /ko/docs/CSS/border-radius /ko/docs/Web/CSS/border-radius /ko/docs/CSS/box-shadow /ko/docs/Web/CSS/box-shadow /ko/docs/CSS/cursor /ko/docs/Web/CSS/cursor -/ko/docs/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property +/ko/docs/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ko/docs/CSS/initial_value /ko/docs/Web/CSS/initial_value /ko/docs/CSS/linear-gradient /ko/docs/Web/CSS/linear-gradient() /ko/docs/CSS/text-shadow /ko/docs/Web/CSS/text-shadow @@ -69,30 +73,31 @@ /ko/docs/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/시작하기/내용물 /ko/docs/Learn/CSS/Howto/Generated_content -/ko/docs/CSS/시작하기/리스트 /ko/docs/Web/CSS/시작하기/리스트 -/ko/docs/CSS/시작하기/미디어 /ko/docs/Web/CSS/시작하기/미디어 -/ko/docs/CSS/시작하기/배치 /ko/docs/Web/CSS/시작하기/배치 -/ko/docs/CSS/시작하기/상자 /ko/docs/Web/CSS/시작하기/상자 +/ko/docs/CSS/시작하기/리스트 /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/CSS/시작하기/미디어 /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS/시작하기/배치 /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/CSS/시작하기/상자 /ko/docs/conflicting/Learn/CSS/Building_blocks /ko/docs/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/CSS/시작하기/종속과_상속 /ko/docs/Web/CSS/시작하기/종속과_상속 -/ko/docs/CSS/시작하기/테이블 /ko/docs/Web/CSS/시작하기/테이블 -/ko/docs/CSS/시작하기/텍스트_스타일 /ko/docs/Web/CSS/시작하기/텍스트_스타일 +/ko/docs/CSS/시작하기/종속과_상속 /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ko/docs/CSS/시작하기/테이블 /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/CSS/시작하기/텍스트_스타일 /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals +/ko/docs/CSS3_Columns /ko/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /ko/docs/CSS:Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/CSS:Getting_Started:Boxes /ko/docs/Web/CSS/시작하기/상자 -/ko/docs/CSS:Getting_Started:Cascading_and_inheritance /ko/docs/Web/CSS/시작하기/종속과_상속 +/ko/docs/CSS:Getting_Started:Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks +/ko/docs/CSS:Getting_Started:Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/CSS:Getting_Started:Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS:Getting_Started:Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/CSS:Getting_Started:How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/CSS:Getting_Started:JavaScript /ko/docs/Web/CSS/Getting_Started/JavaScript -/ko/docs/CSS:Getting_Started:Layout /ko/docs/Web/CSS/시작하기/배치 -/ko/docs/CSS:Getting_Started:Lists /ko/docs/Web/CSS/시작하기/리스트 -/ko/docs/CSS:Getting_Started:Media /ko/docs/Web/CSS/시작하기/미디어 -/ko/docs/CSS:Getting_Started:SVG_graphics /ko/docs/Web/CSS/Getting_Started/SVG_graphics +/ko/docs/CSS:Getting_Started:JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/ko/docs/CSS:Getting_Started:Layout /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/CSS:Getting_Started:Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/CSS:Getting_Started:Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS:Getting_Started:SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/CSS:Getting_Started:Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/CSS:Getting_Started:Tables /ko/docs/Web/CSS/시작하기/테이블 -/ko/docs/CSS:Getting_Started:Text_styles /ko/docs/Web/CSS/시작하기/텍스트_스타일 +/ko/docs/CSS:Getting_Started:Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/CSS:Getting_Started:Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/CSS:Getting_Started:What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS:Getting_Started:Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS:Getting_Started:XBL_bindings /ko/docs/Web/CSS/Getting_Started/XBL_bindings @@ -101,63 +106,64 @@ /ko/docs/CSS:background /ko/docs/Web/CSS/background /ko/docs/CSS:initial_value /ko/docs/Web/CSS/initial_value /ko/docs/CSS_Reference /ko/docs/Web/CSS/Reference -/ko/docs/CSS_Reference/Property_Template /ko/docs/Web/CSS/Reference/Property_Template -/ko/docs/CSS_Reference:Property_Template /ko/docs/Web/CSS/Reference/Property_Template +/ko/docs/CSS_Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template +/ko/docs/CSS_Reference:Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template +/ko/docs/Consistent_List_Indentation /ko/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation /ko/docs/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/Core_JavaScript_1.5_Guide/About /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -/ko/docs/Core_JavaScript_1.5_Guide/Constants /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/Core_JavaScript_1.5_Guide/Expressions /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/Core_JavaScript_1.5_Guide/Literals /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals -/ko/docs/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects -/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/Core_JavaScript_1.5_Guide/Unicode /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode -/ko/docs/Core_JavaScript_1.5_Guide/Values /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values -/ko/docs/Core_JavaScript_1.5_Guide/Variables /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables -/ko/docs/Core_JavaScript_1.5_Guide:About /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/Core_JavaScript_1.5_Guide:Constants /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/Core_JavaScript_1.5_Guide:Expressions /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/Core_JavaScript_1.5_Guide:JavaScript_Overview /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/Core_JavaScript_1.5_Guide:Literals /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals -/ko/docs/Core_JavaScript_1.5_Guide:Objects_and_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Assignment_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Logical_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:String_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects -/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/Core_JavaScript_1.5_Guide:Unicode /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode -/ko/docs/Core_JavaScript_1.5_Guide:Values /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values -/ko/docs/Core_JavaScript_1.5_Guide:Variables /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables +/ko/docs/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +/ko/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages +/ko/docs/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/ko/docs/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +/ko/docs/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +/ko/docs/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +/ko/docs/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece +/ko/docs/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +/ko/docs/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 +/ko/docs/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 +/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide +/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +/ko/docs/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f +/ko/docs/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 +/ko/docs/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f +/ko/docs/Core_JavaScript_1.5_Guide:About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +/ko/docs/Core_JavaScript_1.5_Guide:Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/ko/docs/Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +/ko/docs/Core_JavaScript_1.5_Guide:Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +/ko/docs/Core_JavaScript_1.5_Guide:JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +/ko/docs/Core_JavaScript_1.5_Guide:Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece +/ko/docs/Core_JavaScript_1.5_Guide:Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +/ko/docs/Core_JavaScript_1.5_Guide:Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 +/ko/docs/Core_JavaScript_1.5_Guide:Operators:String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 +/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide +/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +/ko/docs/Core_JavaScript_1.5_Guide:Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f +/ko/docs/Core_JavaScript_1.5_Guide:Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 +/ko/docs/Core_JavaScript_1.5_Guide:Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f /ko/docs/Core_JavaScript_1.5_Reference /ko/docs/Web/JavaScript/Reference /ko/docs/Core_JavaScript_1.5_Reference/About /ko/docs/Web/JavaScript/Reference/About /ko/docs/Core_JavaScript_1.5_Reference/About/Formatting_Conventions /ko/docs/Web/JavaScript/Reference/About @@ -173,14 +179,14 @@ /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Object /ko/docs/Web/JavaScript/Reference/Global_Objects/Object /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String /ko/docs/Web/JavaScript/Reference/Global_Objects/String -/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype +/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /ko/docs/Core_JavaScript_1.5_Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Core_JavaScript_1.5_Reference/Global_Properties/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/Core_JavaScript_1.5_Reference/LiveConnect /ko/docs/Web/JavaScript/Reference/LiveConnect /ko/docs/Core_JavaScript_1.5_Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Core_JavaScript_1.5_Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function /ko/docs/Core_JavaScript_1.5_Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators -/ko/docs/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators /ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators +/ko/docs/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /ko/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator /ko/docs/Web/JavaScript/Reference/Operators/this /ko/docs/Core_JavaScript_1.5_Reference/Operators/this /ko/docs/Web/JavaScript/Reference/Operators/this @@ -203,6 +209,7 @@ /ko/docs/Core_JavaScript_1.5_Reference:Reserved_Words /ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드 /ko/docs/Creating_XPCOM_Components:An_Overview_of_XPCOM /ko/docs/Creating_XPCOM_Components/An_Overview_of_XPCOM /ko/docs/Creating_XPCOM_Components:Preface /ko/docs/Creating_XPCOM_Components/Preface +/ko/docs/DHTML /ko/docs/Glossary/DHTML /ko/docs/DOM /ko/docs/Web/API/Document_Object_Model /ko/docs/DOM/Notification.permission /ko/docs/Web/API/Notification/permission /ko/docs/DOM/document /ko/docs/Web/API/Document @@ -222,8 +229,8 @@ /ko/docs/DOM/element.lastChild /ko/docs/Web/API/Node/lastChild /ko/docs/DOM/element.length /ko/docs/Web/API/NodeList/length /ko/docs/DOM/element.scrollIntoView /ko/docs/Web/API/Element/scrollIntoView -/ko/docs/DOM/element.style /ko/docs/Web/API/HTMLElement/style -/ko/docs/DOM/element.tabIndex /ko/docs/Web/API/HTMLElement/tabIndex +/ko/docs/DOM/element.style /ko/docs/Web/API/ElementCSSInlineStyle/style +/ko/docs/DOM/element.tabIndex /ko/docs/Web/API/HTMLOrForeignElement/tabIndex /ko/docs/DOM/event /ko/docs/Web/API/Event /ko/docs/DOM/event.cancelable /ko/docs/Web/API/Event/cancelable /ko/docs/DOM/event.preventDefault /ko/docs/Web/API/Event/preventDefault @@ -252,8 +259,8 @@ /ko/docs/DOM:element.firstChild /ko/docs/Web/API/Node/firstChild /ko/docs/DOM:element.lastChild /ko/docs/Web/API/Node/lastChild /ko/docs/DOM:element.length /ko/docs/Web/API/NodeList/length -/ko/docs/DOM:element.style /ko/docs/Web/API/HTMLElement/style -/ko/docs/DOM:element.tabIndex /ko/docs/Web/API/HTMLElement/tabIndex +/ko/docs/DOM:element.style /ko/docs/Web/API/ElementCSSInlineStyle/style +/ko/docs/DOM:element.tabIndex /ko/docs/Web/API/HTMLOrForeignElement/tabIndex /ko/docs/DOM:event /ko/docs/Web/API/Event /ko/docs/DOM:form /ko/docs/Web/API/HTMLFormElement /ko/docs/DOM:range /ko/docs/Web/API/Range @@ -262,83 +269,113 @@ /ko/docs/DOM:table.width /ko/docs/Web/API/HTMLTableElement/width /ko/docs/DOM:window /ko/docs/Web/API/Window /ko/docs/DOM:window.navigator.registerProtocolHandler /ko/docs/Web/API/Navigator/registerProtocolHandler -/ko/docs/DOM_Inspector /ko/docs/Tools/Add-ons/DOM_Inspector +/ko/docs/DOM_Inspector /ko/docs/orphaned/Tools/Add-ons/DOM_Inspector +/ko/docs/DOM_improvements_in_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/DOM_improvements +/ko/docs/Determining_the_dimensions_of_elements /ko/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements /ko/docs/Developer_Guide /ko/docs/Mozilla/Developer_guide /ko/docs/Developer_Guide/Source_Code /ko/docs/Mozilla/Developer_guide/Source_Code /ko/docs/Developer_guide/Eclipse /ko/docs/Mozilla/Developer_guide/Eclipse /ko/docs/Developer_guide/Eclipse/Eclipse_CDT /ko/docs/Mozilla/Developer_guide/Eclipse/Eclipse_CDT /ko/docs/Developing_Mozilla /ko/docs/Mozilla/Developer_guide -/ko/docs/Drawing_Graphics_with_Canvas /ko/docs/Web/HTML/Canvas/Tutorial +/ko/docs/Drawing_Graphics_with_Canvas /ko/docs/Web/API/Canvas_API/Tutorial +/ko/docs/Drawing_text_using_a_canvas /ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text /ko/docs/ECMAScript /ko/docs/Web/JavaScript /ko/docs/EXSLT /ko/docs/Web/EXSLT /ko/docs/Eclipse /ko/docs/Mozilla/Developer_guide/Eclipse -/ko/docs/Firefox_1.5 /ko/docs/Firefox_1.5_for_developers -/ko/docs/Firefox_2 /ko/docs/Firefox_2_for_developers -/ko/docs/Firefox_3.1_for_developers /ko/docs/Firefox_3.5_for_developers +/ko/docs/Firefox_1.5 /ko/docs/Mozilla/Firefox/Releases/1.5 +/ko/docs/Firefox_1.5_for_developers /ko/docs/Mozilla/Firefox/Releases/1.5 +/ko/docs/Firefox_2 /ko/docs/Mozilla/Firefox/Releases/2 +/ko/docs/Firefox_2_for_developers /ko/docs/Mozilla/Firefox/Releases/2 +/ko/docs/Firefox_3.1_for_developers /ko/docs/Mozilla/Firefox/Releases/3.5 +/ko/docs/Firefox_3.5_for_developers /ko/docs/Mozilla/Firefox/Releases/3.5 /ko/docs/Firefox_3_for_developers /ko/docs/Mozilla/Firefox/Releases/3 /ko/docs/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus +/ko/docs/Full_page_zoom /ko/docs/Mozilla/Firefox/Releases/3/Full_page_zoom +/ko/docs/Games/Tutorials/2D_breakout_game_Phaser/득점 /ko/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임 /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기 /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기 /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +/ko/docs/Glossary/Header /ko/docs/Glossary/HTTP_header +/ko/docs/Glossary/동적_프로그래밍_언어 /ko/docs/Glossary/Dynamic_programming_language +/ko/docs/Glossary/배열 /ko/docs/Glossary/array +/ko/docs/Glossary/불린 /ko/docs/Glossary/Boolean +/ko/docs/Glossary/브라우저-컨텍스트 /ko/docs/Glossary/Browsing_context +/ko/docs/Glossary/스코프 /ko/docs/Glossary/Scope +/ko/docs/Glossary/식별자 /ko/docs/Glossary/Identifier +/ko/docs/Glossary/전송_제어_프로토콜_(TCP) /ko/docs/Glossary/Transmission_Control_Protocol_(TCP) +/ko/docs/Glossary/캐시 /ko/docs/Glossary/Cache /ko/docs/HTML /ko/docs/Web/HTML /ko/docs/HTML/Block-level_elements /ko/docs/Web/HTML/Block-level_elements -/ko/docs/HTML/Canvas /ko/docs/Web/HTML/Canvas +/ko/docs/HTML/Canvas /ko/docs/Web/API/Canvas_API /ko/docs/HTML/Element /ko/docs/Web/HTML/Element /ko/docs/HTML/Element/Video /ko/docs/Web/HTML/Element/Video /ko/docs/HTML/Element/a /ko/docs/Web/HTML/Element/a /ko/docs/HTML/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus -/ko/docs/HTML/HTML5 /ko/docs/Web/HTML/HTML5 +/ko/docs/HTML/HTML5 /ko/docs/Web/Guide/HTML/HTML5 /ko/docs/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element -/ko/docs/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/HTML/HTML5/Introduction_to_HTML5 -/ko/docs/HTML/HTML에서_폼 /ko/docs/Learn/HTML/Forms +/ko/docs/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ko/docs/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/HTML/Inline_elements /ko/docs/Web/HTML/Inline_elements /ko/docs/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML /ko/docs/HTML/Using_the_application_cache /ko/docs/Web/HTML/Using_the_application_cache -/ko/docs/HTML:Canvas /ko/docs/Web/HTML/Canvas +/ko/docs/HTML:Canvas /ko/docs/Web/API/Canvas_API /ko/docs/HTML:Element /ko/docs/Web/HTML/Element /ko/docs/HTML:Element:a /ko/docs/Web/HTML/Element/a /ko/docs/HTML:Inline_elements /ko/docs/Web/HTML/Inline_elements +/ko/docs/How_to_Build_an_XPCOM_Component_in_Javascript /ko/docs/orphaned/How_to_Build_an_XPCOM_Component_in_Javascript /ko/docs/IndexedDB /ko/docs/Web/API/IndexedDB_API /ko/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB /ko/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ko/docs/IndexedDB/Using_IndexedDB /ko/docs/Web/API/IndexedDB_API/Using_IndexedDB +/ko/docs/Introduction_to_using_XPath_in_JavaScript /ko/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /ko/docs/JSAPI_Reference/Alphabetical_List /ko/docs/JSAPI_Reference /ko/docs/JSAPI_Reference:Alphabetical_List /ko/docs/JSAPI_Reference /ko/docs/JSCLASS_NEW_ENUMERATE /ko/docs/JSAPI_Reference/JSClass.flags /ko/docs/JavaScript /ko/docs/Web/JavaScript /ko/docs/JavaScript/Data_structures /ko/docs/Web/JavaScript/Data_structures /ko/docs/JavaScript/Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/소개 -/ko/docs/JavaScript/Guide/Closures /ko/docs/Web/JavaScript/Guide/Closures -/ko/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain +/ko/docs/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/Introduction +/ko/docs/JavaScript/Guide/Closures /ko/docs/Web/JavaScript/Closures +/ko/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /ko/docs/JavaScript/Guide/Obsolete_Pages /ko/docs/Web/JavaScript/Guide /ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables -/ko/docs/JavaScript/Guide/Values,_variables,_and_literals /ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals -/ko/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f +/ko/docs/JavaScript/Guide/Values,_variables,_and_literals /ko/docs/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /ko/docs/conflicting/Learn/JavaScript/Objects /ko/docs/JavaScript/Memory_Management /ko/docs/Web/JavaScript/Memory_Management /ko/docs/JavaScript/New_in_JavaScript /ko/docs/Web/JavaScript/New_in_JavaScript /ko/docs/JavaScript/New_in_JavaScript/New_in_JavaScript_1.8 /ko/docs/Web/JavaScript/New_in_JavaScript/1.8 @@ -357,25 +394,34 @@ /ko/docs/JavaScript/Reference/Global_Objects/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/JavaScript/Reference/Global_Objects/Object /ko/docs/Web/JavaScript/Reference/Global_Objects/Object /ko/docs/JavaScript/Reference/Global_Objects/String /ko/docs/Web/JavaScript/Reference/Global_Objects/String -/ko/docs/JavaScript/Reference/Global_Objects/String/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype +/ko/docs/JavaScript/Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /ko/docs/JavaScript/Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/JavaScript/Reference/LiveConnect /ko/docs/Web/JavaScript/Reference/LiveConnect /ko/docs/JavaScript/Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/JavaScript/Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function /ko/docs/JavaScript/Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators -/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators /ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators +/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /ko/docs/JavaScript/Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/JavaScript/Reference/Operators/this /ko/docs/Web/JavaScript/Reference/Operators/this /ko/docs/JavaScript/Reference/Operators/void /ko/docs/Web/JavaScript/Reference/Operators/void /ko/docs/JavaScript/Reference/Reserved_Words /ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드 /ko/docs/JavaScript/Reference/Statements /ko/docs/Web/JavaScript/Reference/Statements /ko/docs/JavaScript/Reference/Statements/for...in /ko/docs/Web/JavaScript/Reference/Statements/for...in -/ko/docs/JavaScript/시작하기 /ko/docs/Web/JavaScript/시작하기 -/ko/docs/JavaScript/언어_리소스 /ko/docs/Web/JavaScript/언어_리소스 +/ko/docs/JavaScript/시작하기 /ko/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics +/ko/docs/JavaScript/언어_리소스 /ko/docs/Web/JavaScript/Language_Resources +/ko/docs/JavaScript_C_Engine_Embedder's_Guide /ko/docs/orphaned/JavaScript_C_Engine_Embedder's_Guide /ko/docs/JavaScript_modules /ko/docs/Web/JavaScript/Guide/Modules /ko/docs/JavaScript_technologies_overview /ko/docs/Web/JavaScript/JavaScript_technologies_overview /ko/docs/JavaScript_technologies_overview-redirect-1 /ko/docs/Web/JavaScript/JavaScript_technologies_overview /ko/docs/Learn/CSS/Basics /en-US/docs/Learn/CSS/First_steps +/ko/docs/Learn/CSS/Basics/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout/Introduction +/ko/docs/Learn/CSS/Building_blocks/상자_모델 /ko/docs/Learn/CSS/Building_blocks/The_box_model +/ko/docs/Learn/CSS/Building_blocks/선택자 /ko/docs/Learn/CSS/Building_blocks/Selectors +/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 /ko/docs/Learn/CSS/CSS_layout/Media_queries +/ko/docs/Learn/CSS/CSS_layout/반응형_디자인 /ko/docs/Learn/CSS/CSS_layout/Responsive_Design +/ko/docs/Learn/CSS/CSS_layout/위치잡기 /ko/docs/Learn/CSS/CSS_layout/Positioning +/ko/docs/Learn/CSS/CSS_layout/이전_브라우저_지원 /ko/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers +/ko/docs/Learn/CSS/CSS_layout/일반_흐름 /ko/docs/Learn/CSS/CSS_layout/Normal_Flow /ko/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /ko/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors /ko/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance @@ -385,11 +431,34 @@ /ko/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors /ko/docs/Learn/CSS/Introduction_to_CSS/Syntax /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units +/ko/docs/Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 /ko/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension /ko/docs/Learn/CSS/Introduction_to_CSS/선택자 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks /ko/docs/Learn/CSS/Styling_boxes/Backgrounds /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders +/ko/docs/Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 /ko/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly +/ko/docs/Learn/Common_questions/코딩하기_전에_생각하기 /ko/docs/Learn/Common_questions/Thinking_before_coding +/ko/docs/Learn/Getting_started_with_the_web/CSS_기본 /ko/docs/Learn/Getting_started_with_the_web/CSS_basics +/ko/docs/Learn/Getting_started_with_the_web/HTML_기본 /ko/docs/Learn/Getting_started_with_the_web/HTML_basics +/ko/docs/Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기 /ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software +/ko/docs/Learn/Getting_started_with_the_web/웹사이트_출판하기 /ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website +/ko/docs/Learn/Getting_started_with_the_web/웹의_동작_방식 /ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works +/ko/docs/Learn/Getting_started_with_the_web/파일들_다루기 /ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files /ko/docs/Learn/GitHub /ko/docs/Learn/Tools_and_testing/GitHub -/ko/docs/Learn/HTML/Forms/My_first_HTML_form /ko/docs/Learn/HTML/Forms/Your_first_HTML_form +/ko/docs/Learn/HTML/Forms /ko/docs/Learn/Forms +/ko/docs/Learn/HTML/Forms/HTML_폼_구성_방법 /ko/docs/Learn/Forms/How_to_structure_a_web_form +/ko/docs/Learn/HTML/Forms/My_first_HTML_form /ko/docs/Learn/Forms/Your_first_form +/ko/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data /ko/docs/Learn/Forms/Sending_and_retrieving_form_data +/ko/docs/Learn/HTML/Forms/Your_first_HTML_form /ko/docs/Learn/Forms/Your_first_form +/ko/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable /ko/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +/ko/docs/Learn/HTML/Howto/데이터_속성_사용하기 /ko/docs/Learn/HTML/Howto/Use_data_attributes +/ko/docs/Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content /ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/ko/docs/Learn/How_to_contribute /ko/docs/orphaned/Learn/How_to_contribute +/ko/docs/Learn/Infrastructure /ko/docs/conflicting/Learn/Common_questions +/ko/docs/Learn/JavaScript/Building_blocks/조건문 /ko/docs/Learn/JavaScript/Building_blocks/conditionals +/ko/docs/Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON /ko/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON +/ko/docs/Learn/Server-side/Express_Nodejs/개발_환경 /ko/docs/Learn/Server-side/Express_Nodejs/development_environment +/ko/docs/Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 /ko/docs/Learn/Server-side/Express_Nodejs/skeleton_website +/ko/docs/Learn/Skills /ko/docs/conflicting/Learn /ko/docs/Learn/WebGL/By_example /ko/docs/Web/API/WebGL_API/By_example /ko/docs/Learn/WebGL/By_example/Clearing_by_clicking /ko/docs/Web/API/WebGL_API/By_example/Clearing_by_clicking /ko/docs/Learn/WebGL/By_example/Detect_WebGL /ko/docs/Web/API/WebGL_API/By_example/Detect_WebGL @@ -398,29 +467,64 @@ /ko/docs/Learn/WebGL/By_example/Scissor_animation /ko/docs/Web/API/WebGL_API/By_example/Scissor_animation /ko/docs/Learn/WebGL/By_example/Simple_color_animation /ko/docs/Web/API/WebGL_API/By_example/Simple_color_animation /ko/docs/Learn/WebGL/By_example/Textures_from_code /ko/docs/Web/API/WebGL_API/By_example/Textures_from_code +/ko/docs/Learn/Web_기술 /ko/docs/conflicting/Learn/Common_questions_139278709439023a85d849385412271e +/ko/docs/Learn/접근성 /ko/docs/Learn/Accessibility +/ko/docs/Learn/접근성/HTML /ko/docs/Learn/Accessibility/HTML +/ko/docs/Learn/접근성/What_is_accessibility /ko/docs/Learn/Accessibility/What_is_accessibility +/ko/docs/Learn/접근성/모바일 /ko/docs/Learn/Accessibility/Mobile +/ko/docs/Localization /ko/docs/Glossary/Localization +/ko/docs/MDN/About/MDN_services /ko/docs/orphaned/MDN/About/MDN_services +/ko/docs/MDN/Community /ko/docs/orphaned/MDN/Community +/ko/docs/MDN/Community/Conversations /ko/docs/orphaned/MDN/Community/Conversations +/ko/docs/MDN/Community/Working_in_community /ko/docs/orphaned/MDN/Community/Working_in_community /ko/docs/MDN/Contribute/Content /ko/docs/MDN/Guidelines -/ko/docs/MDN/Contribute/Content/Best_practices /ko/docs/MDN/Guidelines/Best_practices -/ko/docs/MDN/Contribute/Content/Style_guide /ko/docs/MDN/Guidelines/Style_guide -/ko/docs/MDN/Contribute/Editor /ko/docs/MDN/Editor -/ko/docs/MDN/Contribute/Editor/Links /ko/docs/MDN/Editor/Links +/ko/docs/MDN/Contribute/Content/Best_practices /ko/docs/MDN/Guidelines/Conventions_definitions +/ko/docs/MDN/Contribute/Content/Style_guide /ko/docs/MDN/Guidelines/Writing_style_guide +/ko/docs/MDN/Contribute/Creating_and_editing_pages /ko/docs/MDN/Contribute/Howto/Create_and_edit_pages +/ko/docs/MDN/Contribute/Does_this_belong /ko/docs/MDN/Guidelines/Does_this_belong_on_MDN +/ko/docs/MDN/Contribute/Editor /ko/docs/orphaned/MDN/Editor +/ko/docs/MDN/Contribute/Editor/Links /ko/docs/orphaned/MDN/Editor/Links /ko/docs/MDN/Contribute/Guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines /ko/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS /ko/docs/MDN/Guidelines/Code_guidelines/CSS -/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines/Code_guidelines +/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines/General +/ko/docs/MDN/Contribute/Howto/Do_a_technical_review /ko/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review +/ko/docs/MDN/Contribute/Howto/Do_an_editorial_review /ko/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review +/ko/docs/MDN/Contribute/Howto/MDN_계정_생성하기 /ko/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account +/ko/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /ko/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page +/ko/docs/MDN/Contribute/Howto/Tag_JavaScript_pages /ko/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages +/ko/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /ko/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +/ko/docs/MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 /ko/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live /ko/docs/MDN/Contribute/Structures /ko/docs/MDN/Structures -/ko/docs/MDN/Contribute/Structures/API_references /ko/docs/MDN/Structures/API_references -/ko/docs/MDN/Contribute/Structures/API_references/API_reference_sidebars /ko/docs/MDN/Structures/API_references/API_reference_sidebars +/ko/docs/MDN/Contribute/Structures/API_references /ko/docs/orphaned/MDN/Structures/API_references +/ko/docs/MDN/Contribute/Structures/API_references/API_reference_sidebars /ko/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars /ko/docs/MDN/Contribute/Structures/Compatibility_tables /ko/docs/MDN/Structures/Compatibility_tables /ko/docs/MDN/Contribute/Structures/Macros /ko/docs/MDN/Structures/Macros /ko/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros /ko/docs/MDN/Structures/Macros/Commonly-used_macros /ko/docs/MDN/Contribute/Tools /ko/docs/MDN/Tools /ko/docs/MDN/Contribute/Tools/KumaScript /ko/docs/MDN/Tools/KumaScript /ko/docs/MDN/Contribute/Tools/KumaScript/Troubleshooting /ko/docs/MDN/Tools/KumaScript/Troubleshooting -/ko/docs/MDN/Contribute/Tools/페이지_재생성 /ko/docs/MDN/Tools/페이지_재생성 +/ko/docs/MDN/Contribute/Tools/페이지_재생성 /ko/docs/orphaned/MDN/Tools/Page_regeneration +/ko/docs/MDN/Editor /ko/docs/orphaned/MDN/Editor +/ko/docs/MDN/Editor/Links /ko/docs/orphaned/MDN/Editor/Links /ko/docs/MDN/Getting_started /ko/docs/MDN/Contribute/Getting_started -/ko/docs/MDN/커뮤니티 /ko/docs/MDN/Community -/ko/docs/MDN/커뮤니티/Conversations /ko/docs/MDN/Community/Conversations +/ko/docs/MDN/Guidelines/Best_practices /ko/docs/MDN/Guidelines/Conventions_definitions +/ko/docs/MDN/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines/General +/ko/docs/MDN/Guidelines/Style_guide /ko/docs/MDN/Guidelines/Writing_style_guide +/ko/docs/MDN/Kuma /ko/docs/MDN/Yari +/ko/docs/MDN/Structures/API_references /ko/docs/orphaned/MDN/Structures/API_references +/ko/docs/MDN/Structures/API_references/API_reference_sidebars /ko/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars +/ko/docs/MDN/Tools/페이지_재생성 /ko/docs/orphaned/MDN/Tools/Page_regeneration +/ko/docs/MDN/User_guide /ko/docs/conflicting/MDN/Tools +/ko/docs/MDN/커뮤니티 /ko/docs/orphaned/MDN/Community +/ko/docs/MDN/커뮤니티/Conversations /ko/docs/orphaned/MDN/Community/Conversations /ko/docs/MDN/피드백 /ko/docs/MDN/Contribute/Feedback +/ko/docs/MDN_at_ten /ko/docs/MDN/At_ten /ko/docs/MathML /ko/docs/Web/MathML +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/ContextType +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/create /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/create +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/onShown /ko/docs/Mozilla/애드온들 /ko/docs/Mozilla/Add-ons /ko/docs/Mozilla/애드온들/AMO/Policy/Featured https://extensionworkshop.com/documentation/publish/recommended-extensions/ /ko/docs/Mozilla/애드온들/Listing https://extensionworkshop.com/documentation/develop/create-an-appealing-listing/ @@ -428,11 +532,11 @@ /ko/docs/Mozilla/애드온들/WebExtensions/API /ko/docs/Mozilla/Add-ons/WebExtensions/API /ko/docs/Mozilla/애드온들/WebExtensions/API/browsingData /ko/docs/Mozilla/Add-ons/WebExtensions/API/browsingData /ko/docs/Mozilla/애드온들/WebExtensions/API/contentScripts /ko/docs/Mozilla/Add-ons/WebExtensions/API/contentScripts -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/ContextType /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/create /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/create -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/getTargetElement /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/onShown /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/ContextType /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/ContextType +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/create /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/create +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/getTargetElement /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/onShown /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/onShown /ko/docs/Mozilla/애드온들/WebExtensions/API/pageAction /ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction /ko/docs/Mozilla/애드온들/WebExtensions/API/pageAction/show /ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/show /ko/docs/Mozilla/애드온들/WebExtensions/API/storage /ko/docs/Mozilla/Add-ons/WebExtensions/API/storage @@ -464,109 +568,167 @@ /ko/docs/Mozilla/애드온들/WebExtensions/user_interface/Page_actions /ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions /ko/docs/Mozilla_Build_FAQ /ko/docs/Mozilla/Developer_guide/Mozilla_Build_FAQ /ko/docs/Mozilla_Quirks_Mode_Behavior /ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode +/ko/docs/Mozilla_Source_Code_Via_CVS /ko/docs/Mozilla/Developer_guide/Source_Code/CVS +/ko/docs/Navigation_timing /ko/docs/Web/API/Navigation_timing_API /ko/docs/New_in_JavaScript_1.6 /ko/docs/Web/JavaScript/New_in_JavaScript/1.6 /ko/docs/New_in_JavaScript_1.8 /ko/docs/Web/JavaScript/New_in_JavaScript/1.8 +/ko/docs/Node_server_without_framework /ko/docs/Learn/Server-side/Node_server_without_framework +/ko/docs/Notable_bugs_fixed_in_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed /ko/docs/Online_and_offline_events /ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events +/ko/docs/Places/Custom_Containers /ko/docs/orphaned/Places/Custom_Containers +/ko/docs/Places/Instantiating_Views /ko/docs/orphaned/Places/Instantiating_Views +/ko/docs/Places/Query_System /ko/docs/orphaned/Places/Query_System +/ko/docs/Places/Views /ko/docs/orphaned/Places/Views /ko/docs/Places:Accessing_Bookmarks /ko/docs/Places/Accessing_Bookmarks -/ko/docs/Places:Custom_Containers /ko/docs/Places/Custom_Containers -/ko/docs/Places:Instantiating_Views /ko/docs/Places/Instantiating_Views -/ko/docs/Places:Query_System /ko/docs/Places/Query_System -/ko/docs/Places:Views /ko/docs/Places/Views +/ko/docs/Places:Custom_Containers /ko/docs/orphaned/Places/Custom_Containers +/ko/docs/Places:Instantiating_Views /ko/docs/orphaned/Places/Instantiating_Views +/ko/docs/Places:Query_System /ko/docs/orphaned/Places/Query_System +/ko/docs/Places:Views /ko/docs/orphaned/Places/Views /ko/docs/SVG /ko/docs/Web/SVG /ko/docs/SVG/Tutorial /ko/docs/Web/SVG/Tutorial /ko/docs/SVG:Tutorial /ko/docs/Web/SVG/Tutorial /ko/docs/SVG_In_HTML_Introduction /ko/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction +/ko/docs/SVG_improvements_in_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/SVG_improvements +/ko/docs/SVG_in_Firefox /ko/docs/Web/SVG/SVG_1.1_Support_in_Firefox +/ko/docs/Scripting_Plugins /ko/docs/Plugins/Guide/Scripting_plugins /ko/docs/Setting_HTTP_request_headers /ko/docs/XPCOM/Setting_HTTP_request_headers +/ko/docs/The_DOM_and_JavaScript /ko/docs/conflicting/Web/JavaScript/JavaScript_technologies_overview /ko/docs/The_Importance_of_Correct_HTML_Commenting /ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments /ko/docs/The_Thread_Manager /ko/docs/XPCOM/The_Thread_Manager -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Introduction /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Introduction /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Setting_Parameters /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters -/ko/docs/Tools/Debugger/How_to /ko/docs/Tools/How_to -/ko/docs/Tools/Debugger/How_to/Open_the_debugger /ko/docs/Tools/How_to/Open_the_debugger -/ko/docs/Tools/Debugger/How_to/Search /ko/docs/Tools/How_to/Search -/ko/docs/Tools/Debugger/How_to/Set_a_breakpoint /ko/docs/Tools/How_to/Set_a_breakpoint +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Introduction /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Introduction /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Setting_Parameters /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +/ko/docs/Theme_Packaging /ko/docs/orphaned/Theme_Packaging +/ko/docs/Tips_for_Authoring_Fast-loading_HTML_Pages /ko/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages +/ko/docs/Tools/Add-ons /ko/docs/orphaned/Tools/Add-ons +/ko/docs/Tools/Add-ons/DOM_Inspector /ko/docs/orphaned/Tools/Add-ons/DOM_Inspector +/ko/docs/Tools/Debugger/단축키 /ko/docs/Tools/Debugger/Keyboard_shortcuts +/ko/docs/Tools/How_to /ko/docs/Tools/Debugger/How_to +/ko/docs/Tools/How_to/Open_the_debugger /ko/docs/Tools/Debugger/How_to/Open_the_debugger +/ko/docs/Tools/How_to/Search /ko/docs/Tools/Debugger/How_to/Search +/ko/docs/Tools/How_to/Set_a_breakpoint /ko/docs/Tools/Debugger/How_to/Set_a_breakpoint /ko/docs/Transforming_XML_with_XSLT /ko/docs/Web/XSLT/Transforming_XML_with_XSLT /ko/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference /ko/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference /ko/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference /ko/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference +/ko/docs/Updating_extensions_for_Firefox_2 /ko/docs/Mozilla/Firefox/Releases/2/Updating_extensions +/ko/docs/Updating_extensions_for_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/Updating_extensions +/ko/docs/Updating_web_applications_for_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/Updating_web_applications /ko/docs/Using_JSON_in_Firefox /ko/docs/Web/JavaScript/Reference/Global_Objects/JSON -/ko/docs/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property -/ko/docs/Using_URL_values_for_the_cursor_property-redirect-1 /ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property +/ko/docs/Using_Mozilla_in_Testing_and_Debugging_Web_Sites /ko/docs/orphaned/Using_Mozilla_in_Testing_and_Debugging_Web_Sites +/ko/docs/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +/ko/docs/Using_URL_values_for_the_cursor_property-redirect-1 /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +/ko/docs/Using_XPath /ko/docs/conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript /ko/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations /ko/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations /ko/docs/Web/API/Boolean /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/ko/docs/Web/API/Canvas_API/캔버스_튜토리얼 /ko/docs/Web/HTML/Canvas/Tutorial +/ko/docs/Web/API/Canvas_API/캔버스_튜토리얼 /ko/docs/Web/API/Canvas_API/Tutorial /ko/docs/Web/API/Document/activeElement /ko/docs/Web/API/DocumentOrShadowRoot/activeElement /ko/docs/Web/API/Document/defaultView/popstate_event /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/API/Document/defaultView/resize_event /ko/docs/Web/API/Window/resize_event /ko/docs/Web/API/Document/drag_이벤트 /ko/docs/Web/API/Document/drag_event -/ko/docs/Web/API/Document_Object_Model/Introduction /ko/docs/Web/API/Document_Object_Model/소개 +/ko/docs/Web/API/Document/getSelection /ko/docs/Web/API/DocumentOrShadowRoot/getSelection /ko/docs/Web/API/Document_Object_Model/Preface /ko/docs/Web/API/Document_Object_Model +/ko/docs/Web/API/Document_Object_Model/소개 /ko/docs/Web/API/Document_Object_Model/Introduction /ko/docs/Web/API/Document_Object_Model/예제 /ko/docs/Web/API/Document_Object_Model/Examples /ko/docs/Web/API/Element.clientHeight /ko/docs/Web/API/Element/clientHeight /ko/docs/Web/API/Element.getAttribute /ko/docs/Web/API/Element/getAttribute +/ko/docs/Web/API/Element/accessKey /ko/docs/Web/API/HTMLElement/accessKey /ko/docs/Web/API/Element/childNodes /ko/docs/Web/API/Node/childNodes /ko/docs/Web/API/Element/firstChild /ko/docs/Web/API/Node/firstChild +/ko/docs/Web/API/Event/createEvent /ko/docs/Web/API/Document/createEvent +/ko/docs/Web/API/Fetch_API/Fetch의_사용법 /ko/docs/Web/API/Fetch_API/Using_Fetch /ko/docs/Web/API/FileReader.result /ko/docs/Web/API/FileReader/result +/ko/docs/Web/API/HTMLElement/dataset /ko/docs/Web/API/HTMLOrForeignElement/dataset +/ko/docs/Web/API/HTMLElement/style /ko/docs/Web/API/ElementCSSInlineStyle/style +/ko/docs/Web/API/HTMLElement/tabIndex /ko/docs/Web/API/HTMLOrForeignElement/tabIndex +/ko/docs/Web/API/HTML_드래그_앤_드롭_API /ko/docs/Web/API/HTML_Drag_and_Drop_API +/ko/docs/Web/API/HTML_드래그_앤_드롭_API/Drag_operations /ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations /ko/docs/Web/API/Navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.battery/window.navigator.battery /ko/docs/Web/API/Navigator/battery -/ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/NetworkInformation/connection -/ko/docs/Web/API/NetworkInformation.connection /ko/docs/Web/API/NetworkInformation/connection -/ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection /ko/docs/Web/API/NetworkInformation/connection +/ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/NetworkInformation.connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/NetworkInformation/connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/Node/innerText /ko/docs/Web/API/HTMLElement/innerText /ko/docs/Web/API/Notification.permission /ko/docs/Web/API/Notification/permission /ko/docs/Web/API/Position /ko/docs/Web/API/GeolocationPosition /ko/docs/Web/API/RandomSource /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/RandomSource/getRandomValues /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/Screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation /ko/docs/Web/API/Screen.lockOrientation/window.screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation -/ko/docs/Web/API/Screen.onorientationchange/window.screen.onorientationchange /ko/docs/Web/API/Screen.onorientationchange +/ko/docs/Web/API/Screen.onorientationchange /ko/docs/Web/API/Screen/onorientationchange +/ko/docs/Web/API/Screen.onorientationchange/window.screen.onorientationchange /ko/docs/Web/API/Screen/onorientationchange /ko/docs/Web/API/Screen.orientation /ko/docs/Web/API/Screen/orientation /ko/docs/Web/API/Screen.orientation/window.screen.orientation /ko/docs/Web/API/Screen/orientation +/ko/docs/Web/API/Streams_API/컨셉 /ko/docs/Web/API/Streams_API/Concepts /ko/docs/Web/API/WebGL_API/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Creating_3D_objects_using_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +/ko/docs/Web/API/WebGL_API/Cross-Domain_Textures /ko/docs/conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Using_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +/ko/docs/Web/API/Web_Workers_API/basic_usage /ko/docs/Web/API/Web_Workers_API/Using_web_workers +/ko/docs/Web/API/WindowTimers/setTimeout /ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/ko/docs/Web/API/XMLHttpRequest/timeout /ko/docs/Web/API/XMLHttpRequest/timeout_event /ko/docs/Web/API/document.importNode /ko/docs/Web/API/Document/importNode /ko/docs/Web/API/element-temp /ko/docs/Web/API/Element /ko/docs/Web/API/window.navigator.battery /ko/docs/Web/API/Navigator/battery -/ko/docs/Web/API/window.navigator.connection /ko/docs/Web/API/NetworkInformation/connection +/ko/docs/Web/API/window.navigator.connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/window.navigator.mozMobileMessage /ko/docs/Web/API/Navigator/mozMobileMessage /ko/docs/Web/API/window.navigator.mozNotification /ko/docs/Web/API/Navigator/mozNotification /ko/docs/Web/API/window.navigator.mozSms /ko/docs/Web/API/Navigator/mozSms /ko/docs/Web/API/window.screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation -/ko/docs/Web/API/window.screen.onorientationchange /ko/docs/Web/API/Screen.onorientationchange +/ko/docs/Web/API/window.screen.onorientationchange /ko/docs/Web/API/Screen/onorientationchange /ko/docs/Web/API/window.screen.orientation /ko/docs/Web/API/Screen/orientation /ko/docs/Web/API/window.screen.unlockOrientation /ko/docs/Web/API/Screen/unlockOrientation +/ko/docs/Web/CSS/@viewport/height /ko/docs/conflicting/Web/CSS/@viewport +/ko/docs/Web/CSS/@viewport/viewport-fit /ko/docs/conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f +/ko/docs/Web/CSS/@viewport/zoom /ko/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 +/ko/docs/Web/CSS/All_About_The_Containing_Block /ko/docs/Web/CSS/Containing_block /ko/docs/Web/CSS/CSS_Background_and_Borders /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders +/ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/Web/CSS/CSS_Colors /ko/docs/Web/CSS/CSS_Color +/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +/ko/docs/Web/CSS/CSS_Flow_Layout/대열과_탈대열 /ko/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +/ko/docs/Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 /ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +/ko/docs/Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 /ko/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +/ko/docs/Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 /ko/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow /ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치 /ko/docs/Web/CSS/CSS_Grid_Layout/Line-based_placement_with_CSS_grid /ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계 /ko/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_grid_layout /ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념 /ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout /ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역 /ko/docs/Web/CSS/CSS_Grid_Layout/Grid_template_areas /ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃 /ko/docs/Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines +/ko/docs/Web/CSS/CSS_Masks /ko/docs/Web/CSS/CSS_Masking /ko/docs/Web/CSS/CSS_Reference /ko/docs/Web/CSS/Reference -/ko/docs/Web/CSS/CSS_Reference/Property_Template /ko/docs/Web/CSS/Reference/Property_Template +/ko/docs/Web/CSS/CSS_Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template /ko/docs/Web/CSS/CSS_User_Interface /ko/docs/Web/CSS/CSS_Basic_User_Interface +/ko/docs/Web/CSS/CSS_단위와_값 /ko/docs/Web/CSS/CSS_Values_and_Units +/ko/docs/Web/CSS/Common_CSS_Questions /ko/docs/Learn/CSS/Howto/CSS_FAQ /ko/docs/Web/CSS/Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/Web/CSS/Getting_Started/Boxes /ko/docs/Web/CSS/시작하기/상자 -/ko/docs/Web/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/Web/CSS/시작하기/종속과_상속 +/ko/docs/Web/CSS/Getting_Started/Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks +/ko/docs/Web/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/Web/CSS/Getting_Started/Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/Web/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/Web/CSS/Getting_Started/Layout /ko/docs/Web/CSS/시작하기/배치 -/ko/docs/Web/CSS/Getting_Started/Lists /ko/docs/Web/CSS/시작하기/리스트 -/ko/docs/Web/CSS/Getting_Started/Media /ko/docs/Web/CSS/시작하기/미디어 +/ko/docs/Web/CSS/Getting_Started/JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/ko/docs/Web/CSS/Getting_Started/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/Web/CSS/Getting_Started/Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/Web/CSS/Getting_Started/Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/Web/CSS/Getting_Started/SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/Web/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/Web/CSS/Getting_Started/Tables /ko/docs/Web/CSS/시작하기/테이블 -/ko/docs/Web/CSS/Getting_Started/Text_styles /ko/docs/Web/CSS/시작하기/텍스트_스타일 +/ko/docs/Web/CSS/Getting_Started/Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/Web/CSS/Getting_Started/Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/Web/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/Getting_Started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/Web/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +/ko/docs/Web/CSS/Index /ko/docs/orphaned/Web/CSS/Index +/ko/docs/Web/CSS/Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template +/ko/docs/Web/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/Web/CSS/Understanding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index /ko/docs/Web/CSS/Understanding_z-index/Adding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /ko/docs/Web/CSS/Understanding_z-index/Stacking_and_float /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float @@ -576,47 +738,87 @@ /ko/docs/Web/CSS/Understanding_z-index/Stacking_without_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /ko/docs/Web/CSS/Understanding_z-index/The_stacking_context /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /ko/docs/Web/CSS/Using_CSS_animations /ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/ko/docs/Web/CSS/Using_CSS_multiple_backgrounds /ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +/ko/docs/Web/CSS/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ko/docs/Web/CSS/Using_CSS_transforms /ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /ko/docs/Web/CSS/Using_CSS_variables /ko/docs/Web/CSS/Using_CSS_custom_properties /ko/docs/Web/CSS/calc /ko/docs/Web/CSS/calc() /ko/docs/Web/CSS/currentcolor /ko/docs/Web/CSS/color_value#currentColor_키워드 +/ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/filter-function/blur /ko/docs/Web/CSS/filter-function/blur() /ko/docs/Web/CSS/filter-function/brightness /ko/docs/Web/CSS/filter-function/brightness() /ko/docs/Web/CSS/filter-function/contrast /ko/docs/Web/CSS/filter-function/contrast() /ko/docs/Web/CSS/linear-gradient /ko/docs/Web/CSS/linear-gradient() /ko/docs/Web/CSS/transform-function/matrix /ko/docs/Web/CSS/transform-function/matrix() /ko/docs/Web/CSS/transform-function/scaleX /ko/docs/Web/CSS/transform-function/scaleX() +/ko/docs/Web/CSS/url /ko/docs/Web/CSS/url() /ko/docs/Web/CSS/var /ko/docs/Web/CSS/var() /ko/docs/Web/CSS/시작하기 /en-US/docs/Learn/CSS/First_steps /ko/docs/Web/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/내용물 /ko/docs/Learn/CSS/Howto/Generated_content +/ko/docs/Web/CSS/시작하기/리스트 /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/Web/CSS/시작하기/미디어 /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/Web/CSS/시작하기/배치 /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/Web/CSS/시작하기/상자 /ko/docs/conflicting/Learn/CSS/Building_blocks /ko/docs/Web/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Web/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ko/docs/Web/CSS/시작하기/종속과_상속 /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ko/docs/Web/CSS/시작하기/테이블 /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/Web/CSS/시작하기/텍스트_스타일 /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals +/ko/docs/Web/CSS/인접_형제_선택자 /ko/docs/Web/CSS/Adjacent_sibling_combinator +/ko/docs/Web/Events/DOMContentLoaded /ko/docs/Web/API/Window/DOMContentLoaded_event +/ko/docs/Web/Events/abort /ko/docs/Web/API/HTMLMediaElement/abort_event +/ko/docs/Web/Events/blur /ko/docs/Web/API/Element/blur_event /ko/docs/Web/Events/canplay /ko/docs/Web/API/HTMLMediaElement/canplay_event /ko/docs/Web/Events/canplaythrough /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event /ko/docs/Web/Events/click /ko/docs/Web/API/Element/click_event /ko/docs/Web/Events/dragstart /ko/docs/Web/API/Document/dragstart_event /ko/docs/Web/Events/keydown /ko/docs/Web/API/Document/keydown_event +/ko/docs/Web/Events/load /ko/docs/Web/API/Window/load_event +/ko/docs/Web/Events/message /ko/docs/Web/API/BroadcastChannel/message_event /ko/docs/Web/Events/orientationchange /ko/docs/Web/API/Window/orientationchange_event /ko/docs/Web/Events/popstate /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/Events/resize /ko/docs/Web/API/Window/resize_event /ko/docs/Web/Events/scroll /ko/docs/Web/API/Document/scroll_event -/ko/docs/Web/Events/timeout /ko/docs/Web/API/XMLHttpRequest/timeout +/ko/docs/Web/Events/timeout /ko/docs/Web/API/XMLHttpRequest/timeout_event /ko/docs/Web/Events/touchcancel /ko/docs/Web/API/Element/touchcancel_event /ko/docs/Web/Events/visibilitychange /ko/docs/Web/API/Document/visibilitychange_event +/ko/docs/Web/Guide/API/Vibration/Vibration /ko/docs/Web/API/Vibration_API /ko/docs/Web/Guide/CSS /ko/docs/Learn/CSS +/ko/docs/Web/Guide/CSS/Media_queries /ko/docs/Web/CSS/Media_Queries/Using_media_queries /ko/docs/Web/Guide/CSS/Using_CSS_transitions /ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions +/ko/docs/Web/Guide/CSS/Visual_formatting_model /ko/docs/Web/CSS/Visual_formatting_model +/ko/docs/Web/Guide/DOM /ko/docs/conflicting/Web/API/Document_Object_Model +/ko/docs/Web/Guide/DOM/Using_full_screen_mode /ko/docs/Web/API/Fullscreen_API /ko/docs/Web/Guide/HTML /ko/docs/Learn/HTML +/ko/docs/Web/Guide/HTML/Content_Editable /ko/docs/Web/Guide/HTML/Editable_content /ko/docs/Web/Guide/HTML/컨텐트_카테고리 /ko/docs/Web/Guide/HTML/Content_categories -/ko/docs/Web/Guide/HTML/폼 /ko/docs/Learn/HTML/Forms -/ko/docs/Web/Guide/HTML/폼/HTML_폼_구성_방법 /ko/docs/Learn/HTML/Forms/HTML_폼_구성_방법 -/ko/docs/Web/Guide/HTML/폼/My_first_HTML_form /ko/docs/Learn/HTML/Forms/Your_first_HTML_form -/ko/docs/Web/Guide/HTML/폼/Sending_and_retrieving_form_data /ko/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data +/ko/docs/Web/Guide/HTML/폼 /ko/docs/Learn/Forms +/ko/docs/Web/Guide/HTML/폼/HTML_폼_구성_방법 /ko/docs/Learn/Forms/How_to_structure_a_web_form +/ko/docs/Web/Guide/HTML/폼/My_first_HTML_form /ko/docs/Learn/Forms/Your_first_form +/ko/docs/Web/Guide/HTML/폼/Sending_and_retrieving_form_data /ko/docs/Learn/Forms/Sending_and_retrieving_form_data +/ko/docs/Web/Guide/XML_파싱_및_직렬화 /ko/docs/Web/Guide/Parsing_and_serializing_XML +/ko/docs/Web/Guide/그래픽 /ko/docs/Web/Guide/Graphics +/ko/docs/Web/HTML/Canvas /ko/docs/Web/API/Canvas_API +/ko/docs/Web/HTML/Canvas/Manipulating_video_using_canvas /ko/docs/Web/API/Canvas_API/Manipulating_video_using_canvas +/ko/docs/Web/HTML/Canvas/Tutorial /ko/docs/Web/API/Canvas_API/Tutorial +/ko/docs/Web/HTML/Canvas/Tutorial/Advanced_animations /ko/docs/Web/API/Canvas_API/Tutorial/Advanced_animations +/ko/docs/Web/HTML/Canvas/Tutorial/Applying_styles_and_colors /ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +/ko/docs/Web/HTML/Canvas/Tutorial/Basic_animations /ko/docs/Web/API/Canvas_API/Tutorial/Basic_animations +/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage /ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage +/ko/docs/Web/HTML/Canvas/Tutorial/Compositing /ko/docs/Web/API/Canvas_API/Tutorial/Compositing +/ko/docs/Web/HTML/Canvas/Tutorial/Compositing/Example /ko/docs/Web/API/Canvas_API/Tutorial/Compositing/Example +/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes /ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes +/ko/docs/Web/HTML/Canvas/Tutorial/Finale /ko/docs/Web/API/Canvas_API/Tutorial/Finale +/ko/docs/Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility /ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +/ko/docs/Web/HTML/Canvas/Tutorial/Optimizing_canvas /ko/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas +/ko/docs/Web/HTML/Canvas/Tutorial/Using_images /ko/docs/Web/API/Canvas_API/Tutorial/Using_images +/ko/docs/Web/HTML/Canvas/Tutorial/변형 /ko/docs/Web/API/Canvas_API/Tutorial/Transformations /ko/docs/Web/HTML/Element/Video/canplay_event /ko/docs/Web/API/HTMLMediaElement/canplay_event /ko/docs/Web/HTML/Element/Video/canplaythrough_event /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event +/ko/docs/Web/HTML/Element/command /ko/docs/orphaned/Web/HTML/Element/command +/ko/docs/Web/HTML/Element/element /ko/docs/orphaned/Web/HTML/Element/element /ko/docs/Web/HTML/Element/h1 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/h2 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/h3 /ko/docs/Web/HTML/Element/Heading_Elements @@ -625,65 +827,155 @@ /ko/docs/Web/HTML/Element/h6 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/캔버스 /ko/docs/Web/HTML/Element/canvas /ko/docs/Web/HTML/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus +/ko/docs/Web/HTML/Global_attributes/dropzone /ko/docs/orphaned/Web/HTML/Global_attributes/dropzone +/ko/docs/Web/HTML/Global_attributes/클래스 /ko/docs/Web/HTML/Global_attributes/class +/ko/docs/Web/HTML/HTML5 /ko/docs/Web/Guide/HTML/HTML5 /ko/docs/Web/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element -/ko/docs/Web/HTML/HTML에서_폼 /ko/docs/Learn/HTML/Forms +/ko/docs/Web/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽 /ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/ko/docs/Web/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/Web/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML /ko/docs/Web/HTTP/Access_control_CORS /ko/docs/Web/HTTP/CORS /ko/docs/Web/HTTP/Access_control_CORS/Errors /ko/docs/Web/HTTP/CORS/Errors /ko/docs/Web/HTTP/Access_control_CORS/Errors/CORSDidNotSucceed /ko/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed /ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types /ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +/ko/docs/Web/HTTP/User_agent를_이용한_브라우저_감지 /ko/docs/Web/HTTP/Browser_detection_using_the_user_agent /ko/docs/Web/HTTP/상태_코드 /ko/docs/Web/HTTP/Status -/ko/docs/Web/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/소개 +/ko/docs/Web/JavaScript/About /ko/docs/Web/JavaScript/About_JavaScript +/ko/docs/Web/JavaScript/Differential_inheritance_in_JavaScript /ko/docs/orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript +/ko/docs/Web/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/Introduction +/ko/docs/Web/JavaScript/Guide/Closures /ko/docs/Web/JavaScript/Closures +/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Guide/Obsolete_Pages /ko/docs/Web/JavaScript/Guide /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f /ko/docs/Web/JavaScript/Guide/Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide +/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals /ko/docs/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/Web/JavaScript/Guide/객체_모델의_세부사항 /ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/ko/docs/Web/JavaScript/Guide/메타_프로그래밍 /ko/docs/Web/JavaScript/Guide/Meta_programming +/ko/docs/Web/JavaScript/Guide/소개 /ko/docs/Web/JavaScript/Guide/Introduction +/ko/docs/Web/JavaScript/Guide/정규식 /ko/docs/Web/JavaScript/Guide/Regular_Expressions +/ko/docs/Web/JavaScript/Guide/정규식/Assertions /ko/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions +/ko/docs/Web/JavaScript/Guide/정규식/Groups_and_Ranges /ko/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges +/ko/docs/Web/JavaScript/Guide/함수 /ko/docs/Web/JavaScript/Guide/Functions +/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript /ko/docs/conflicting/Learn/JavaScript/Objects /ko/docs/Web/JavaScript/New_in_JavaScript/New_in_JavaScript_1.8 /ko/docs/Web/JavaScript/New_in_JavaScript/1.8 /ko/docs/Web/JavaScript/Reference/About/Formatting_Conventions /ko/docs/Web/JavaScript/Reference/About +/ko/docs/Web/JavaScript/Reference/Classes/Class_fields /ko/docs/Web/JavaScript/Reference/Classes/Public_class_fields +/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션 /ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions /ko/docs/Web/JavaScript/Reference/Global_Functions /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Global_Objects/Array/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Array /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer +/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt/prototype /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /ko/docs/Web/JavaScript/Reference/Global_Objects/Date/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Date +/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Date /ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Function +/ko/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/InternalError +/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Locale /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale /ko/docs/Web/JavaScript/Reference/Global_Objects/Locale/language /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/language +/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map +/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object +/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise +/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Set +/ko/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +/ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError /ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError +/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray +/ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap +/ko/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet +/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global /ko/docs/Web/JavaScript/Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Methods_Index /ko/docs/Web/JavaScript/Reference /ko/docs/Web/JavaScript/Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function +/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators +/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e +/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 +/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 /ko/docs/Web/JavaScript/Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators/Spread_operator /ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax +/ko/docs/Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) /ko/docs/conflicting/Web/JavaScript/Reference/Operators_13aeb53e31f9cec454ca631cb162449f +/ko/docs/Web/JavaScript/Reference/Operators/연산자_우선순위 /ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence /ko/docs/Web/JavaScript/Reference/Properties_Index /ko/docs/Web/JavaScript/Reference /ko/docs/Web/JavaScript/Reference/Reserved_Words /ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드 +/ko/docs/Web/JavaScript/Reference/Statements/default /ko/docs/conflicting/Web/JavaScript/Reference/Statements/switch /ko/docs/Web/JavaScript/Tutorials /ko/docs/Web/JavaScript +/ko/docs/Web/JavaScript/쉘 /ko/docs/Web/JavaScript/Shells +/ko/docs/Web/JavaScript/시작하기 /ko/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics +/ko/docs/Web/JavaScript/언어_리소스 /ko/docs/Web/JavaScript/Language_Resources +/ko/docs/Web/Media/Formats/비디오코덱 /ko/docs/Web/Media/Formats/Video_codecs +/ko/docs/Web/Media/Formats/컨테이너 /ko/docs/Web/Media/Formats/Containers +/ko/docs/Web/Media/Formats/코덱파라미터 /ko/docs/Web/Media/Formats/codecs_parameter +/ko/docs/Web/Performance/브라우저는_어떻게_동작하는가 /ko/docs/Web/Performance/How_browsers_work +/ko/docs/Web/Performance/중요_렌더링_경로 /ko/docs/Web/Performance/Critical_rendering_path +/ko/docs/Web/Progressive_web_apps/소개 /ko/docs/Web/Progressive_web_apps/Introduction /ko/docs/Web/Reference/Events /ko/docs/Web/Events -/ko/docs/Web/Reference/Events/DOMContentLoaded /ko/docs/Web/Events/DOMContentLoaded +/ko/docs/Web/Reference/Events/DOMContentLoaded /ko/docs/Web/API/Window/DOMContentLoaded_event /ko/docs/Web/Reference/Events/DOMSubtreeModified /ko/docs/Web/Events/DOMSubtreeModified -/ko/docs/Web/Reference/Events/blur /ko/docs/Web/Events/blur +/ko/docs/Web/Reference/Events/blur /ko/docs/Web/API/Element/blur_event /ko/docs/Web/Reference/Events/canplay /ko/docs/Web/API/HTMLMediaElement/canplay_event /ko/docs/Web/Reference/Events/canplaythrough /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event /ko/docs/Web/Reference/Events/chargingchange /ko/docs/Web/Events/chargingchange /ko/docs/Web/Reference/Events/click /ko/docs/Web/API/Element/click_event /ko/docs/Web/Reference/Events/keydown /ko/docs/Web/API/Document/keydown_event -/ko/docs/Web/Reference/Events/load /ko/docs/Web/Events/load -/ko/docs/Web/Reference/Events/message /ko/docs/Web/Events/message +/ko/docs/Web/Reference/Events/load /ko/docs/Web/API/Window/load_event +/ko/docs/Web/Reference/Events/message /ko/docs/Web/API/BroadcastChannel/message_event /ko/docs/Web/Reference/Events/orientationchange /ko/docs/Web/API/Window/orientationchange_event /ko/docs/Web/Reference/Events/popstate /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/Reference/Events/resize /ko/docs/Web/API/Window/resize_event -/ko/docs/Web/Reference/Events/timeout /ko/docs/Web/API/XMLHttpRequest/timeout +/ko/docs/Web/Reference/Events/timeout /ko/docs/Web/API/XMLHttpRequest/timeout_event /ko/docs/Web/Reference/Events/touchcancel /ko/docs/Web/API/Element/touchcancel_event /ko/docs/Web/Reference/Events/visibilitychange /ko/docs/Web/API/Document/visibilitychange_event +/ko/docs/Web/SVG/Element/사각형 /ko/docs/Web/SVG/Element/rect +/ko/docs/Web/SVG/Tutorial/기본_도형 /ko/docs/Web/SVG/Tutorial/Basic_Shapes +/ko/docs/Web/SVG/Tutorial/시작하기 /ko/docs/Web/SVG/Tutorial/Getting_Started +/ko/docs/Web/SVG/Tutorial/위치 /ko/docs/Web/SVG/Tutorial/Positions +/ko/docs/Web/Security/정보_보안_기본 /ko/docs/orphaned/Web/Security/Information_Security_Basics /ko/docs/Web/WebGL /ko/docs/Web/API/WebGL_API /ko/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/WebGL/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /ko/docs/Web/WebGL/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL /ko/docs/Web/WebGL/Creating_3D_objects_using_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -/ko/docs/Web/WebGL/Cross-Domain_Textures /ko/docs/Web/API/WebGL_API/Cross-Domain_Textures +/ko/docs/Web/WebGL/Cross-Domain_Textures /ko/docs/conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /ko/docs/Web/WebGL/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /ko/docs/Web/WebGL/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL /ko/docs/Web/WebGL/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL @@ -692,8 +984,62 @@ /ko/docs/Web/Web_Components/Shadow_DOM /ko/docs/Web/Web_Components/Using_shadow_DOM /ko/docs/Web/XSLT/Elements /ko/docs/Web/XSLT/Element /ko/docs/Web/XSLT/Elements/element /ko/docs/Web/XSLT/Element/element -/ko/docs/WebAPI/Vibration /ko/docs/Web/Guide/API/Vibration/Vibration +/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko +/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction +/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +/ko/docs/Web/XSLT/apply-imports /ko/docs/Web/XSLT/Element/apply-imports +/ko/docs/Web/XSLT/apply-templates /ko/docs/Web/XSLT/Element/apply-templates +/ko/docs/Web/XSLT/attribute /ko/docs/Web/XSLT/Element/attribute +/ko/docs/Web/XSLT/attribute-set /ko/docs/Web/XSLT/Element/attribute-set +/ko/docs/Web/XSLT/call-template /ko/docs/Web/XSLT/Element/call-template +/ko/docs/Web/XSLT/choose /ko/docs/Web/XSLT/Element/choose +/ko/docs/Web/XSLT/comment /ko/docs/Web/XSLT/Element/comment +/ko/docs/Web/XSLT/copy /ko/docs/Web/XSLT/Element/copy +/ko/docs/Web/XSLT/copy-of /ko/docs/Web/XSLT/Element/copy-of +/ko/docs/Web/XSLT/decimal-format /ko/docs/Web/XSLT/Element/decimal-format +/ko/docs/Web/XSLT/fallback /ko/docs/Web/XSLT/Element/fallback +/ko/docs/Web/XSLT/for-each /ko/docs/Web/XSLT/Element/for-each +/ko/docs/Web/XSLT/if /ko/docs/Web/XSLT/Element/if +/ko/docs/Web/XSLT/import /ko/docs/Web/XSLT/Element/import +/ko/docs/Web/XSLT/include /ko/docs/Web/XSLT/Element/include +/ko/docs/Web/XSLT/key /ko/docs/Web/XSLT/Element/key +/ko/docs/Web/XSLT/message /ko/docs/Web/XSLT/Element/message +/ko/docs/Web/XSLT/namespace-alias /ko/docs/Web/XSLT/Element/namespace-alias +/ko/docs/Web/XSLT/number /ko/docs/Web/XSLT/Element/number +/ko/docs/Web/XSLT/otherwise /ko/docs/Web/XSLT/Element/otherwise +/ko/docs/Web/XSLT/output /ko/docs/Web/XSLT/Element/output +/ko/docs/Web/XSLT/param /ko/docs/Web/XSLT/Element/param +/ko/docs/Web/XSLT/preserve-space /ko/docs/Web/XSLT/Element/preserve-space +/ko/docs/Web/XSLT/processing-instruction /ko/docs/Web/XSLT/Element/processing-instruction +/ko/docs/Web/XSLT/sort /ko/docs/Web/XSLT/Element/sort +/ko/docs/Web/XSLT/strip-space /ko/docs/Web/XSLT/Element/strip-space +/ko/docs/Web/XSLT/stylesheet /ko/docs/Web/XSLT/Element/stylesheet +/ko/docs/Web/XSLT/template /ko/docs/Web/XSLT/Element/template +/ko/docs/Web/XSLT/text /ko/docs/Web/XSLT/Element/text +/ko/docs/Web/XSLT/transform /ko/docs/Web/XSLT/Element/transform +/ko/docs/Web/XSLT/value-of /ko/docs/Web/XSLT/Element/value-of +/ko/docs/Web/XSLT/variable /ko/docs/Web/XSLT/Element/variable +/ko/docs/Web/XSLT/when /ko/docs/Web/XSLT/Element/when +/ko/docs/Web/XSLT/with-param /ko/docs/Web/XSLT/Element/with-param +/ko/docs/Web/참조 /ko/docs/Web/Reference +/ko/docs/Web/참조/API /ko/docs/Web/Reference/API +/ko/docs/WebAPI /ko/docs/conflicting/Web/API +/ko/docs/WebAPI/Battery_Status /ko/docs/Web/API/Battery_Status_API +/ko/docs/WebAPI/Detecting_device_orientation /ko/docs/Web/API/Detecting_device_orientation +/ko/docs/WebAPI/Managing_screen_orientation /ko/docs/Web/API/CSS_Object_Model/Managing_screen_orientation +/ko/docs/WebAPI/Network_Information /ko/docs/Web/API/Network_Information_API +/ko/docs/WebAPI/Proximity /ko/docs/Web/API/Proximity_Events +/ko/docs/WebAPI/Using_Light_Events /ko/docs/Web/API/Ambient_Light_Events +/ko/docs/WebAPI/Using_Web_Notifications /ko/docs/Web/API/Notifications_API/Using_the_Notifications_API +/ko/docs/WebAPI/Using_geolocation /ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API +/ko/docs/WebAPI/Vibration /ko/docs/Web/API/Vibration_API /ko/docs/WebAPI/WebSMS/Introduction_to_WebSMS /ko/docs/WebAPI/WebSMS/Introduction_to_Mobile_Message_API/Introduction_to_WebSMS +/ko/docs/WebSockets /ko/docs/Web/API/WebSockets_API +/ko/docs/WebSockets/Writing_WebSocket_client_applications /ko/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications +/ko/docs/WebSockets/Writing_WebSocket_servers /ko/docs/Web/API/WebSockets_API/Writing_WebSocket_servers +/ko/docs/Web_Development /ko/docs/conflicting/Web/Guide +/ko/docs/Windows_and_menus_in_XULRunner /ko/docs/orphaned/Windows_and_menus_in_XULRunner +/ko/docs/XHTML /ko/docs/Glossary/XHTML /ko/docs/XMLHttpRequest /ko/docs/Web/API/XMLHttpRequest /ko/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests /ko/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests /ko/docs/XMLHttpRequest/setRequestHeader /ko/docs/Web/API/XMLHttpRequest/setRequestHeader @@ -806,95 +1152,102 @@ /ko/docs/XPath:Functions:unparsed-entity-url /ko/docs/Web/XPath/Functions/unparsed-entity-url /ko/docs/XSLT /ko/docs/Web/XSLT /ko/docs/XSLT/Elements /ko/docs/Web/XSLT/Element -/ko/docs/XSLT/apply-imports /ko/docs/Web/XSLT/apply-imports -/ko/docs/XSLT/apply-templates /ko/docs/Web/XSLT/apply-templates -/ko/docs/XSLT/attribute /ko/docs/Web/XSLT/attribute -/ko/docs/XSLT/attribute-set /ko/docs/Web/XSLT/attribute-set -/ko/docs/XSLT/call-template /ko/docs/Web/XSLT/call-template -/ko/docs/XSLT/choose /ko/docs/Web/XSLT/choose -/ko/docs/XSLT/comment /ko/docs/Web/XSLT/comment -/ko/docs/XSLT/copy /ko/docs/Web/XSLT/copy -/ko/docs/XSLT/copy-of /ko/docs/Web/XSLT/copy-of -/ko/docs/XSLT/decimal-format /ko/docs/Web/XSLT/decimal-format +/ko/docs/XSLT/apply-imports /ko/docs/Web/XSLT/Element/apply-imports +/ko/docs/XSLT/apply-templates /ko/docs/Web/XSLT/Element/apply-templates +/ko/docs/XSLT/attribute /ko/docs/Web/XSLT/Element/attribute +/ko/docs/XSLT/attribute-set /ko/docs/Web/XSLT/Element/attribute-set +/ko/docs/XSLT/call-template /ko/docs/Web/XSLT/Element/call-template +/ko/docs/XSLT/choose /ko/docs/Web/XSLT/Element/choose +/ko/docs/XSLT/comment /ko/docs/Web/XSLT/Element/comment +/ko/docs/XSLT/copy /ko/docs/Web/XSLT/Element/copy +/ko/docs/XSLT/copy-of /ko/docs/Web/XSLT/Element/copy-of +/ko/docs/XSLT/decimal-format /ko/docs/Web/XSLT/Element/decimal-format /ko/docs/XSLT/element /ko/docs/Web/XSLT/Element/element -/ko/docs/XSLT/fallback /ko/docs/Web/XSLT/fallback -/ko/docs/XSLT/for-each /ko/docs/Web/XSLT/for-each -/ko/docs/XSLT/if /ko/docs/Web/XSLT/if -/ko/docs/XSLT/import /ko/docs/Web/XSLT/import -/ko/docs/XSLT/include /ko/docs/Web/XSLT/include -/ko/docs/XSLT/key /ko/docs/Web/XSLT/key -/ko/docs/XSLT/message /ko/docs/Web/XSLT/message -/ko/docs/XSLT/namespace-alias /ko/docs/Web/XSLT/namespace-alias -/ko/docs/XSLT/number /ko/docs/Web/XSLT/number -/ko/docs/XSLT/otherwise /ko/docs/Web/XSLT/otherwise -/ko/docs/XSLT/output /ko/docs/Web/XSLT/output -/ko/docs/XSLT/param /ko/docs/Web/XSLT/param -/ko/docs/XSLT/preserve-space /ko/docs/Web/XSLT/preserve-space -/ko/docs/XSLT/processing-instruction /ko/docs/Web/XSLT/processing-instruction -/ko/docs/XSLT/sort /ko/docs/Web/XSLT/sort -/ko/docs/XSLT/strip-space /ko/docs/Web/XSLT/strip-space -/ko/docs/XSLT/stylesheet /ko/docs/Web/XSLT/stylesheet -/ko/docs/XSLT/template /ko/docs/Web/XSLT/template -/ko/docs/XSLT/text /ko/docs/Web/XSLT/text -/ko/docs/XSLT/transform /ko/docs/Web/XSLT/transform -/ko/docs/XSLT/value-of /ko/docs/Web/XSLT/value-of -/ko/docs/XSLT/variable /ko/docs/Web/XSLT/variable -/ko/docs/XSLT/when /ko/docs/Web/XSLT/when -/ko/docs/XSLT/with-param /ko/docs/Web/XSLT/with-param +/ko/docs/XSLT/fallback /ko/docs/Web/XSLT/Element/fallback +/ko/docs/XSLT/for-each /ko/docs/Web/XSLT/Element/for-each +/ko/docs/XSLT/if /ko/docs/Web/XSLT/Element/if +/ko/docs/XSLT/import /ko/docs/Web/XSLT/Element/import +/ko/docs/XSLT/include /ko/docs/Web/XSLT/Element/include +/ko/docs/XSLT/key /ko/docs/Web/XSLT/Element/key +/ko/docs/XSLT/message /ko/docs/Web/XSLT/Element/message +/ko/docs/XSLT/namespace-alias /ko/docs/Web/XSLT/Element/namespace-alias +/ko/docs/XSLT/number /ko/docs/Web/XSLT/Element/number +/ko/docs/XSLT/otherwise /ko/docs/Web/XSLT/Element/otherwise +/ko/docs/XSLT/output /ko/docs/Web/XSLT/Element/output +/ko/docs/XSLT/param /ko/docs/Web/XSLT/Element/param +/ko/docs/XSLT/preserve-space /ko/docs/Web/XSLT/Element/preserve-space +/ko/docs/XSLT/processing-instruction /ko/docs/Web/XSLT/Element/processing-instruction +/ko/docs/XSLT/sort /ko/docs/Web/XSLT/Element/sort +/ko/docs/XSLT/strip-space /ko/docs/Web/XSLT/Element/strip-space +/ko/docs/XSLT/stylesheet /ko/docs/Web/XSLT/Element/stylesheet +/ko/docs/XSLT/template /ko/docs/Web/XSLT/Element/template +/ko/docs/XSLT/text /ko/docs/Web/XSLT/Element/text +/ko/docs/XSLT/transform /ko/docs/Web/XSLT/Element/transform +/ko/docs/XSLT/value-of /ko/docs/Web/XSLT/Element/value-of +/ko/docs/XSLT/variable /ko/docs/Web/XSLT/Element/variable +/ko/docs/XSLT/when /ko/docs/Web/XSLT/Element/when +/ko/docs/XSLT/with-param /ko/docs/Web/XSLT/Element/with-param /ko/docs/XSLT:Elements /ko/docs/Web/XSLT/Element -/ko/docs/XSLT:apply-imports /ko/docs/Web/XSLT/apply-imports -/ko/docs/XSLT:apply-templates /ko/docs/Web/XSLT/apply-templates -/ko/docs/XSLT:attribute /ko/docs/Web/XSLT/attribute -/ko/docs/XSLT:attribute-set /ko/docs/Web/XSLT/attribute-set -/ko/docs/XSLT:call-template /ko/docs/Web/XSLT/call-template -/ko/docs/XSLT:choose /ko/docs/Web/XSLT/choose -/ko/docs/XSLT:comment /ko/docs/Web/XSLT/comment -/ko/docs/XSLT:copy /ko/docs/Web/XSLT/copy -/ko/docs/XSLT:copy-of /ko/docs/Web/XSLT/copy-of -/ko/docs/XSLT:decimal-format /ko/docs/Web/XSLT/decimal-format +/ko/docs/XSLT:apply-imports /ko/docs/Web/XSLT/Element/apply-imports +/ko/docs/XSLT:apply-templates /ko/docs/Web/XSLT/Element/apply-templates +/ko/docs/XSLT:attribute /ko/docs/Web/XSLT/Element/attribute +/ko/docs/XSLT:attribute-set /ko/docs/Web/XSLT/Element/attribute-set +/ko/docs/XSLT:call-template /ko/docs/Web/XSLT/Element/call-template +/ko/docs/XSLT:choose /ko/docs/Web/XSLT/Element/choose +/ko/docs/XSLT:comment /ko/docs/Web/XSLT/Element/comment +/ko/docs/XSLT:copy /ko/docs/Web/XSLT/Element/copy +/ko/docs/XSLT:copy-of /ko/docs/Web/XSLT/Element/copy-of +/ko/docs/XSLT:decimal-format /ko/docs/Web/XSLT/Element/decimal-format /ko/docs/XSLT:element /ko/docs/Web/XSLT/Element/element -/ko/docs/XSLT:fallback /ko/docs/Web/XSLT/fallback -/ko/docs/XSLT:for-each /ko/docs/Web/XSLT/for-each -/ko/docs/XSLT:if /ko/docs/Web/XSLT/if -/ko/docs/XSLT:import /ko/docs/Web/XSLT/import -/ko/docs/XSLT:include /ko/docs/Web/XSLT/include -/ko/docs/XSLT:key /ko/docs/Web/XSLT/key -/ko/docs/XSLT:message /ko/docs/Web/XSLT/message -/ko/docs/XSLT:namespace-alias /ko/docs/Web/XSLT/namespace-alias -/ko/docs/XSLT:number /ko/docs/Web/XSLT/number -/ko/docs/XSLT:otherwise /ko/docs/Web/XSLT/otherwise -/ko/docs/XSLT:output /ko/docs/Web/XSLT/output -/ko/docs/XSLT:param /ko/docs/Web/XSLT/param -/ko/docs/XSLT:preserve-space /ko/docs/Web/XSLT/preserve-space -/ko/docs/XSLT:processing-instruction /ko/docs/Web/XSLT/processing-instruction -/ko/docs/XSLT:sort /ko/docs/Web/XSLT/sort -/ko/docs/XSLT:strip-space /ko/docs/Web/XSLT/strip-space -/ko/docs/XSLT:stylesheet /ko/docs/Web/XSLT/stylesheet -/ko/docs/XSLT:template /ko/docs/Web/XSLT/template -/ko/docs/XSLT:text /ko/docs/Web/XSLT/text -/ko/docs/XSLT:transform /ko/docs/Web/XSLT/transform -/ko/docs/XSLT:value-of /ko/docs/Web/XSLT/value-of -/ko/docs/XSLT:variable /ko/docs/Web/XSLT/variable -/ko/docs/XSLT:when /ko/docs/Web/XSLT/when -/ko/docs/XSLT:with-param /ko/docs/Web/XSLT/with-param -/ko/docs/XSLT_in_Gecko:Basic_Example /ko/docs/XSLT_in_Gecko/Basic_Example -/ko/docs/XSLT_in_Gecko:Browser_Differences /ko/docs/XSLT_in_Gecko/Browser_Differences -/ko/docs/XSLT_in_Gecko:Generating_HTML /ko/docs/XSLT_in_Gecko/Generating_HTML -/ko/docs/XSLT_in_Gecko:Introduction /ko/docs/XSLT_in_Gecko/Introduction -/ko/docs/XSLT_in_Gecko:Resources /ko/docs/XSLT_in_Gecko/Resources +/ko/docs/XSLT:fallback /ko/docs/Web/XSLT/Element/fallback +/ko/docs/XSLT:for-each /ko/docs/Web/XSLT/Element/for-each +/ko/docs/XSLT:if /ko/docs/Web/XSLT/Element/if +/ko/docs/XSLT:import /ko/docs/Web/XSLT/Element/import +/ko/docs/XSLT:include /ko/docs/Web/XSLT/Element/include +/ko/docs/XSLT:key /ko/docs/Web/XSLT/Element/key +/ko/docs/XSLT:message /ko/docs/Web/XSLT/Element/message +/ko/docs/XSLT:namespace-alias /ko/docs/Web/XSLT/Element/namespace-alias +/ko/docs/XSLT:number /ko/docs/Web/XSLT/Element/number +/ko/docs/XSLT:otherwise /ko/docs/Web/XSLT/Element/otherwise +/ko/docs/XSLT:output /ko/docs/Web/XSLT/Element/output +/ko/docs/XSLT:param /ko/docs/Web/XSLT/Element/param +/ko/docs/XSLT:preserve-space /ko/docs/Web/XSLT/Element/preserve-space +/ko/docs/XSLT:processing-instruction /ko/docs/Web/XSLT/Element/processing-instruction +/ko/docs/XSLT:sort /ko/docs/Web/XSLT/Element/sort +/ko/docs/XSLT:strip-space /ko/docs/Web/XSLT/Element/strip-space +/ko/docs/XSLT:stylesheet /ko/docs/Web/XSLT/Element/stylesheet +/ko/docs/XSLT:template /ko/docs/Web/XSLT/Element/template +/ko/docs/XSLT:text /ko/docs/Web/XSLT/Element/text +/ko/docs/XSLT:transform /ko/docs/Web/XSLT/Element/transform +/ko/docs/XSLT:value-of /ko/docs/Web/XSLT/Element/value-of +/ko/docs/XSLT:variable /ko/docs/Web/XSLT/Element/variable +/ko/docs/XSLT:when /ko/docs/Web/XSLT/Element/when +/ko/docs/XSLT:with-param /ko/docs/Web/XSLT/Element/with-param +/ko/docs/XSLT_in_Gecko /ko/docs/Web/API/XSLTProcessor +/ko/docs/XSLT_in_Gecko/Basic_Example /ko/docs/Web/API/XSLTProcessor/Basic_Example +/ko/docs/XSLT_in_Gecko/Browser_Differences /ko/docs/Web/API/XSLTProcessor/Browser_Differences +/ko/docs/XSLT_in_Gecko/Generating_HTML /ko/docs/Web/API/XSLTProcessor/Generating_HTML +/ko/docs/XSLT_in_Gecko/Introduction /ko/docs/Web/API/XSLTProcessor/Introduction +/ko/docs/XSLT_in_Gecko/Resources /ko/docs/Web/API/XSLTProcessor/Resources +/ko/docs/XSLT_in_Gecko:Basic_Example /ko/docs/Web/API/XSLTProcessor/Basic_Example +/ko/docs/XSLT_in_Gecko:Browser_Differences /ko/docs/Web/API/XSLTProcessor/Browser_Differences +/ko/docs/XSLT_in_Gecko:Generating_HTML /ko/docs/Web/API/XSLTProcessor/Generating_HTML +/ko/docs/XSLT_in_Gecko:Introduction /ko/docs/Web/API/XSLTProcessor/Introduction +/ko/docs/XSLT_in_Gecko:Resources /ko/docs/Web/API/XSLTProcessor/Resources /ko/docs/XTech_2005_Presentations:Directions_of_the_Mozilla_RDF_engine /ko/docs/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine /ko/docs/en /en-US/ +/ko/docs/개발자를_위한_Firefox_3.6 /ko/docs/Mozilla/Firefox/Releases/3.6 /ko/docs/대문 /ko/docs/Web /ko/docs/도구들 /ko/docs/Tools -/ko/docs/도구들/Add-ons /ko/docs/Tools/Add-ons -/ko/docs/도구들/Add-ons/DOM_Inspector /ko/docs/Tools/Add-ons/DOM_Inspector +/ko/docs/도구들/Add-ons /ko/docs/orphaned/Tools/Add-ons +/ko/docs/도구들/Add-ons/DOM_Inspector /ko/docs/orphaned/Tools/Add-ons/DOM_Inspector /ko/docs/도구들/Debugger /ko/docs/Tools/Debugger /ko/docs/도구들/Debugger/UI_Tour /ko/docs/Tools/Debugger/UI_Tour -/ko/docs/도구들/Debugger/단축키 /ko/docs/Tools/Debugger/단축키 -/ko/docs/도구들/How_to /ko/docs/Tools/How_to -/ko/docs/도구들/How_to/Open_the_debugger /ko/docs/Tools/How_to/Open_the_debugger -/ko/docs/도구들/How_to/Search /ko/docs/Tools/How_to/Search -/ko/docs/도구들/How_to/Set_a_breakpoint /ko/docs/Tools/How_to/Set_a_breakpoint +/ko/docs/도구들/Debugger/단축키 /ko/docs/Tools/Debugger/Keyboard_shortcuts +/ko/docs/도구들/How_to /ko/docs/Tools/Debugger/How_to +/ko/docs/도구들/How_to/Open_the_debugger /ko/docs/Tools/Debugger/How_to/Open_the_debugger +/ko/docs/도구들/How_to/Search /ko/docs/Tools/Debugger/How_to/Search +/ko/docs/도구들/How_to/Set_a_breakpoint /ko/docs/Tools/Debugger/How_to/Set_a_breakpoint /ko/docs/도구들/Network_Monitor /ko/docs/Tools/Network_Monitor /ko/docs/도구들/Page_Inspector /ko/docs/Tools/Page_Inspector /ko/docs/도구들/Page_Inspector/UI_Tour /ko/docs/Tools/Page_Inspector/UI_Tour @@ -907,4 +1260,6 @@ /ko/docs/도구들/WebIDE/문제해결 /ko/docs/Tools/WebIDE/문제해결 /ko/docs/도구들/Web_Console /ko/docs/Tools/Web_Console /ko/docs/모질라_프로젝트_참여하기_(Participating_in_the_Mozilla_project) /ko/docs/Mozilla/Developer_guide +/ko/docs/지역의_코드를_씁니다. /ko/docs/orphaned/지역의_코드를_씁니다. /ko/docs/호환_모드와_표준_모드 /ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode +/ko/docs/확장기능_개발_환경_구축 /ko/docs/orphaned/확장기능_개발_환경_구축 diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index eaafa423c3..e852b2db0a 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -1,148 +1,4 @@ { - "A_Basic_RayCaster": { - "modified": "2019-05-26T05:55:24.371Z", - "contributors": [ - "alattalatta", - "taggon" - ] - }, - "A_re-introduction_to_JavaScript": { - "modified": "2020-11-30T14:43:16.912Z", - "contributors": [ - "woochul2", - "honggaruy", - "jaeminche", - "eunjungleecub", - "Teperi", - "Violet-Bora-Lee", - "jjuun", - "JaeyiHong", - "juddammu", - "limkukhyun", - "hyunggoo", - "ChalkPE", - "loslch", - "Kimchoky", - "pineoc", - "fureweb", - "zeallat", - "gnujoow", - "softage", - "oox", - "Jsfumato", - "stephenjang", - "cafrii", - "teoli", - "zziuni", - "JaehaAhn", - "Joonwon", - "Dyhan81" - ] - }, - "Adapting_XUL_Applications_for_Firefox_1.5": { - "modified": "2019-03-23T23:42:04.353Z", - "contributors": [ - "teoli", - "Netaras" - ] - }, - "Building_an_Extension": { - "modified": "2019-03-24T00:04:35.955Z", - "contributors": [ - "teoli", - "ethertank", - "Gilchris", - "fscholz", - "Matthew,Lee", - "Amujung", - "Idodream", - "Jeongsw", - "Netaras" - ] - }, - "CSS3_Columns": { - "modified": "2019-10-11T18:26:42.559Z", - "contributors": [ - "escattone", - "Netaras", - "Sebuls", - "Ioseph" - ] - }, - "Consistent_List_Indentation": { - "modified": "2019-03-18T21:13:02.657Z", - "contributors": [ - "alattalatta", - "teoli", - "Ioseph" - ] - }, - "DHTML": { - "modified": "2019-03-23T23:41:48.331Z", - "contributors": [ - "Sebuls" - ] - }, - "DOM_improvements_in_Firefox_3": { - "modified": "2019-03-23T23:52:57.206Z", - "contributors": [ - "teoli", - "Suguni" - ] - }, - "Determining_the_dimensions_of_elements": { - "modified": "2019-03-18T20:58:47.001Z", - "contributors": [ - "SphinxKnight", - "teoli", - "taggon" - ] - }, - "Drawing_text_using_a_canvas": { - "modified": "2019-03-23T23:51:09.281Z", - "contributors": [ - "kbsbroad", - "peacekimjapan", - "tnRaro", - "teoli", - "Wladimir_Palant", - "Suguni" - ] - }, - "Firefox_1.5_for_developers": { - "modified": "2019-03-23T23:42:08.585Z", - "contributors": [ - "teoli", - "Sebuls", - "Netaras" - ] - }, - "Firefox_2_for_developers": { - "modified": "2019-01-16T16:12:14.974Z", - "contributors": [ - "CN", - "Netaras", - "Yh", - "C0d3h4ck", - "Ranio710", - "Channy" - ] - }, - "Firefox_3.5_for_developers": { - "modified": "2019-03-24T00:00:11.117Z", - "contributors": [ - "teoli", - "Gilchris" - ] - }, - "Full_page_zoom": { - "modified": "2019-03-23T23:51:11.591Z", - "contributors": [ - "teoli", - "Wladimir_Palant", - "Jeongkyu" - ] - }, "Games": { "modified": "2019-09-09T15:33:04.549Z", "contributors": [ @@ -190,107 +46,12 @@ "chrisdavidmills" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/득점": { - "modified": "2019-01-16T22:56:11.870Z", - "contributors": [ - "wbamberg", - "Dragonholux" - ] - }, "Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation": { "modified": "2019-11-30T13:08:40.751Z", "contributors": [ "junghyeonsu" ] }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임": { - "modified": "2019-03-23T22:24:25.862Z", - "contributors": [ - "wbamberg", - "daesD", - "hoony", - "Byeolbit" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls": { - "modified": "2019-03-23T22:20:49.480Z", - "contributors": [ - "wbamberg", - "sshplendid", - "daesD", - "hoony" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field": { - "modified": "2019-01-17T03:04:25.798Z", - "contributors": [ - "wbamberg", - "sshplendid" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection": { - "modified": "2019-04-17T04:54:08.983Z", - "contributors": [ - "E.Chong_Ju_Noel", - "wbamberg", - "sshplendid" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up": { - "modified": "2019-04-17T06:26:16.714Z", - "contributors": [ - "E.Chong_Ju_Noel" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over": { - "modified": "2019-01-17T03:02:48.219Z", - "contributors": [ - "wbamberg", - "sshplendid" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls": { - "modified": "2019-04-17T05:33:54.686Z", - "contributors": [ - "E.Chong_Ju_Noel" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls": { - "modified": "2019-01-17T02:41:51.426Z", - "contributors": [ - "wbamberg", - "sshplendid", - "egg-00" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win": { - "modified": "2019-04-17T05:34:33.735Z", - "contributors": [ - "E.Chong_Ju_Noel", - "wbamberg", - "awer000" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기": { - "modified": "2019-03-23T22:23:23.704Z", - "contributors": [ - "wbamberg", - "sshplendid", - "hoony", - "Byeolbit" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기": { - "modified": "2019-01-17T00:09:33.787Z", - "contributors": [ - "wbamberg", - "sshplendid", - "daesD", - "hoony", - "HarrisLim", - "Byeolbit" - ] - }, "Glossary": { "modified": "2020-10-07T11:12:02.701Z", "contributors": [ @@ -637,12 +398,6 @@ "enfroze" ] }, - "Glossary/Header": { - "modified": "2019-04-30T11:26:53.285Z", - "contributors": [ - "cs09g" - ] - }, "Glossary/Hoisting": { "modified": "2019-07-11T11:32:59.609Z", "contributors": [ @@ -1194,122 +949,42 @@ "alattalatta" ] }, - "Glossary/동적_프로그래밍_언어": { - "modified": "2019-03-18T21:23:35.310Z", + "Learn": { + "modified": "2020-07-16T22:43:44.593Z", "contributors": [ - "flat81" + "SphinxKnight", + "hl5nyw", + "yeoncheol-kr", + "honggaruy", + "alattalatta", + "Silvermist", + "2kindsofcs", + "ehgus", + "svarlamov", + "daktwigim", + "MiscellaneousDictionary", + "dolmoon", + "moodcoding", + "Olivia_J", + "minwook-shin", + "daesD", + "kidkkr", + "haneri", + "kygn1998", + "Netaras", + "hoony", + "sunkibaek", + "cs09g", + "Donghyun_Lee", + "kscarfone" ] }, - "Glossary/배열": { - "modified": "2019-03-18T21:24:02.576Z", + "Learn/CSS": { + "modified": "2020-07-16T22:25:35.300Z", "contributors": [ - "Parcovia" - ] - }, - "Glossary/불린": { - "modified": "2019-03-23T22:13:53.303Z", - "contributors": [ - "Violet-Bora-Lee", - "BA-jhlee" - ] - }, - "Glossary/브라우저-컨텍스트": { - "modified": "2020-01-05T11:52:27.990Z", - "contributors": [ - "alattalatta", - "HyunSeob" - ] - }, - "Glossary/스코프": { - "modified": "2020-08-28T03:24:50.648Z", - "contributors": [ - "heejinlee07" - ] - }, - "Glossary/식별자": { - "modified": "2019-05-24T13:17:06.184Z", - "contributors": [ - "alattalatta", - "HyunSeob" - ] - }, - "Glossary/전송_제어_프로토콜_(TCP)": { - "modified": "2020-01-12T14:32:05.700Z", - "contributors": [ - "doong-jo" - ] - }, - "Glossary/캐시": { - "modified": "2019-10-28T01:10:08.788Z", - "contributors": [ - "JisooLee" - ] - }, - "How_to_Build_an_XPCOM_Component_in_Javascript": { - "modified": "2019-03-23T23:49:04.482Z", - "contributors": [ - "Channy", - "Yookh80" - ] - }, - "Introduction_to_using_XPath_in_JavaScript": { - "modified": "2020-08-06T04:38:40.599Z", - "contributors": [ - "alattalatta", - "Netaras", - "Sebuls" - ] - }, - "JavaScript_C_Engine_Embedder's_Guide": { - "modified": "2019-03-23T23:51:52.110Z", - "contributors": [ - "teoli", - "Comayjlee", - "Joone" - ] - }, - "Learn": { - "modified": "2020-07-16T22:43:44.593Z", - "contributors": [ - "SphinxKnight", - "hl5nyw", - "yeoncheol-kr", - "honggaruy", - "alattalatta", - "Silvermist", - "2kindsofcs", - "ehgus", - "svarlamov", - "daktwigim", - "MiscellaneousDictionary", - "dolmoon", - "moodcoding", - "Olivia_J", - "minwook-shin", - "daesD", - "kidkkr", - "haneri", - "kygn1998", - "Netaras", - "hoony", - "sunkibaek", - "cs09g", - "Donghyun_Lee", - "kscarfone" - ] - }, - "Learn/CSS": { - "modified": "2020-07-16T22:25:35.300Z", - "contributors": [ - "alattalatta", - "Narrativi", - "cs09g" - ] - }, - "Learn/CSS/Basics/Layout": { - "modified": "2020-07-16T22:25:40.836Z", - "contributors": [ - "yooonmi" + "alattalatta", + "Narrativi", + "cs09g" ] }, "Learn/CSS/Building_blocks": { @@ -1379,20 +1054,6 @@ "java2020007" ] }, - "Learn/CSS/Building_blocks/상자_모델": { - "modified": "2020-12-08T00:16:52.296Z", - "contributors": [ - "ihooi", - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/Building_blocks/선택자": { - "modified": "2020-12-07T23:12:49.927Z", - "contributors": [ - "ihooi", - "java2020007" - ] - }, "Learn/CSS/CSS_layout": { "modified": "2020-07-16T22:26:31.606Z", "contributors": [ @@ -1452,38 +1113,6 @@ "Hwan-Woong-Lee" ] }, - "Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서": { - "modified": "2020-07-16T22:27:32.744Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/CSS_layout/반응형_디자인": { - "modified": "2020-07-16T22:27:29.107Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/CSS_layout/위치잡기": { - "modified": "2020-07-16T22:26:44.211Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/CSS_layout/이전_브라우저_지원": { - "modified": "2020-07-16T22:27:19.114Z", - "contributors": [ - "EricByHPHK", - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/CSS_layout/일반_흐름": { - "modified": "2020-07-16T22:27:22.113Z", - "contributors": [ - "EricByHPHK", - "Hwan-Woong-Lee" - ] - }, "Learn/CSS/First_steps": { "modified": "2020-07-16T22:27:39.876Z", "contributors": [ @@ -1534,12 +1163,6 @@ "SpikeYou" ] }, - "Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해": { - "modified": "2020-07-16T22:28:12.763Z", - "contributors": [ - "ERTuringLee" - ] - }, "Learn/CSS/Styling_text": { "modified": "2020-07-16T22:25:59.083Z", "contributors": [ @@ -1646,20 +1269,6 @@ "dolmoon" ] }, - "Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인": { - "modified": "2020-07-16T22:35:50.357Z", - "contributors": [ - "best8248" - ] - }, - "Learn/Common_questions/코딩하기_전에_생각하기": { - "modified": "2020-07-16T22:35:34.712Z", - "contributors": [ - "Silvermist", - "ssilb4", - "daebum-lee" - ] - }, "Learn/Front-end_web_developer": { "modified": "2020-09-26T16:42:10.726Z", "contributors": [ @@ -1680,37 +1289,6 @@ "chrisdavidmills" ] }, - "Learn/Getting_started_with_the_web/CSS_기본": { - "modified": "2020-07-16T22:35:01.206Z", - "contributors": [ - "java2020007", - "Silvermist", - "manmyung", - "jinah1000", - "dolmoon", - "limkukhyun", - "galcyurio", - "gobyoungil", - "stitchworkingonthecode", - "cs09g" - ] - }, - "Learn/Getting_started_with_the_web/HTML_기본": { - "modified": "2020-07-16T22:34:48.769Z", - "contributors": [ - "scl2589", - "hahehohoo", - "moseoridev", - "alattalatta", - "dolmoon", - "limkukhyun", - "galcyurio", - "gobyoungil", - "LovelyGom1218", - "stitchworkingonthecode", - "cs09g" - ] - }, "Learn/Getting_started_with_the_web/JavaScript_basics": { "modified": "2020-07-16T22:35:12.767Z", "contributors": [ @@ -1737,154 +1315,53 @@ "cs09g" ] }, - "Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기": { - "modified": "2020-07-16T22:34:08.936Z", - "contributors": [ - "thornbirda", - "alattalatta", - "dolmoon", - "limkukhyun", - "takeU", - "galcyurio", - "stitchworkingonthecode", - "cs09g" - ] - }, - "Learn/Getting_started_with_the_web/웹사이트_출판하기": { - "modified": "2020-07-16T22:34:27.246Z", + "Learn/HTML": { + "modified": "2020-07-16T22:22:20.486Z", "contributors": [ - "Taehoon", - "limkukhyun", - "galcyurio", - "novelview9", + "naduhy2", "cs09g" ] }, - "Learn/Getting_started_with_the_web/웹의_동작_방식": { - "modified": "2020-07-16T22:34:01.419Z", + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:29.667Z", "contributors": [ - "doong-jo", - "moseoridev", - "HoLlOlLoLlU", - "limkukhyun", - "LeeJunyeol", - "galcyurio", - "cs09g" + "Jeremie" ] }, - "Learn/Getting_started_with_the_web/파일들_다루기": { - "modified": "2020-10-09T05:21:10.101Z", + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:50.673Z", "contributors": [ - "anoncaco", - "moseoridev", "alattalatta", - "cs09g", - "dolmoon", - "limkukhyun", - "YJLeeGinter", - "galcyurio", - "BK-Yoo" + "naduhy2", + "knight2995" ] }, - "Learn/HTML": { - "modified": "2020-07-16T22:22:20.486Z", + "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { + "modified": "2020-11-18T02:41:42.097Z", "contributors": [ - "naduhy2", - "cs09g" + "sh0seo", + "Atercatus", + "dave1502", + "iloveek" ] }, - "Learn/HTML/Forms": { - "modified": "2020-07-16T22:20:59.522Z", + "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { + "modified": "2020-07-16T22:23:45.260Z", "contributors": [ - "ssj24", - "chrisdavidmills", - "moolow", - "JeongSeongDae" + "Xvezda", + "sangheon-kim", + "Tay_Kim", + "alattalatta", + "zDJKIMs", + "Han_jongbae" ] }, - "Learn/HTML/Forms/HTML_폼_구성_방법": { - "modified": "2020-09-29T02:01:00.293Z", + "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { + "modified": "2020-11-18T21:39:06.803Z", "contributors": [ - "fscholz", - "sephiron99", - "chrisdavidmills", - "JeongSeongDae" - ] - }, - "Learn/HTML/Forms/Sending_and_retrieving_form_data": { - "modified": "2020-07-16T22:21:27.567Z", - "contributors": [ - "tldn0718", - "dev-dongwon", - "daesD", - "chrisdavidmills", - "Geun-Hyung_Kim", - "JeongSeongDae" - ] - }, - "Learn/HTML/Forms/Your_first_HTML_form": { - "modified": "2020-07-16T22:21:05.991Z", - "contributors": [ - "fscholz", - "sephiron99", - "chrisdavidmills", - "JeongSeongDae" - ] - }, - "Learn/HTML/Howto": { - "modified": "2020-07-16T22:22:29.667Z", - "contributors": [ - "Jeremie" - ] - }, - "Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable": { - "modified": "2020-07-16T22:22:37.951Z", - "contributors": [ - "Kaben" - ] - }, - "Learn/HTML/Howto/데이터_속성_사용하기": { - "modified": "2020-07-16T22:22:36.382Z", - "contributors": [ - "DDark", - "jyhwng", - "soulmatt" - ] - }, - "Learn/HTML/Introduction_to_HTML": { - "modified": "2020-07-16T22:22:50.673Z", - "contributors": [ - "alattalatta", - "naduhy2", - "knight2995" - ] - }, - "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { - "modified": "2020-11-18T02:41:42.097Z", - "contributors": [ - "sh0seo", - "Atercatus", - "dave1502", - "iloveek" - ] - }, - "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { - "modified": "2020-07-16T22:23:45.260Z", - "contributors": [ - "Xvezda", - "sangheon-kim", - "Tay_Kim", - "alattalatta", - "zDJKIMs", - "Han_jongbae" - ] - }, - "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { - "modified": "2020-11-18T21:39:06.803Z", - "contributors": [ - "sh0seo", - "dave1502", - "limkukhyun" + "sh0seo", + "dave1502", + "limkukhyun" ] }, "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { @@ -1975,38 +1452,18 @@ "mytory" ] }, - "Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content": { - "modified": "2020-07-16T22:24:54.813Z", - "contributors": [ - "jinseobhong" - ] - }, "Learn/HTML/Tables": { "modified": "2020-07-16T22:25:13.523Z", "contributors": [ "byoung_hyun" ] }, - "Learn/How_to_contribute": { - "modified": "2020-07-16T22:33:45.510Z", - "contributors": [ - "SphinxKnight", - "2oosoo", - "JinSeungHo" - ] - }, "Learn/Index": { "modified": "2020-07-16T22:33:40.026Z", "contributors": [ "alattalatta" ] }, - "Learn/Infrastructure": { - "modified": "2020-07-16T22:22:13.682Z", - "contributors": [ - "KwanHong_Lee66" - ] - }, "Learn/JavaScript": { "modified": "2020-12-01T10:05:39.249Z", "contributors": [ @@ -2095,17 +1552,6 @@ "SphinxKnight" ] }, - "Learn/JavaScript/Building_blocks/조건문": { - "modified": "2020-08-19T22:28:52.853Z", - "contributors": [ - "ramgabi", - "ojongchul", - "JaeWorld", - "notypicalus", - "Jonnie-Lion", - "gsphyo91" - ] - }, "Learn/JavaScript/Client-side_web_APIs": { "modified": "2020-07-16T22:32:40.572Z", "contributors": [ @@ -2308,12 +1754,6 @@ "ahnzaz" ] }, - "Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON": { - "modified": "2020-12-11T06:49:49.006Z", - "contributors": [ - "constkey" - ] - }, "Learn/Server-side": { "modified": "2020-07-16T22:35:59.813Z", "contributors": [ @@ -2507,19 +1947,6 @@ "ByeongGi" ] }, - "Learn/Server-side/Express_Nodejs/개발_환경": { - "modified": "2020-12-14T05:06:35.489Z", - "contributors": [ - "junnapark", - "DDark" - ] - }, - "Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트": { - "modified": "2020-07-16T22:38:05.117Z", - "contributors": [ - "SYCHOI" - ] - }, "Learn/Server-side/First_steps": { "modified": "2020-07-16T22:36:09.855Z", "contributors": [ @@ -2560,13 +1987,6 @@ "wafersroom" ] }, - "Learn/Skills": { - "modified": "2020-07-16T22:22:13.258Z", - "contributors": [ - "Netaras", - "KwanHong_Lee66" - ] - }, "Learn/Tools_and_testing": { "modified": "2020-07-16T22:38:56.112Z", "contributors": [ @@ -2599,49 +2019,6 @@ "04SeoHyun" ] }, - "Learn/Web_기술": { - "modified": "2020-07-16T22:22:13.488Z", - "contributors": [ - "zziuni", - "Netaras", - "teoli", - "cs09g" - ] - }, - "Learn/접근성": { - "modified": "2020-07-16T22:39:58.455Z", - "contributors": [ - "cs09g", - "seunghun" - ] - }, - "Learn/접근성/HTML": { - "modified": "2020-07-16T22:40:12.947Z", - "contributors": [ - "dev-dongwon" - ] - }, - "Learn/접근성/What_is_accessibility": { - "modified": "2020-07-16T22:40:05.805Z", - "contributors": [ - "seunghun" - ] - }, - "Learn/접근성/모바일": { - "modified": "2020-07-16T22:40:31.872Z", - "contributors": [ - "seunghun" - ] - }, - "Localization": { - "modified": "2019-03-23T23:49:35.627Z", - "contributors": [ - "teoli", - "Netaras", - "Unixcruiser", - "Gilchris" - ] - }, "MDN": { "modified": "2019-09-10T15:43:01.288Z", "contributors": [ @@ -2668,41 +2045,6 @@ "leosangwon" ] }, - "MDN/About/MDN_services": { - "modified": "2020-12-05T03:06:45.428Z", - "contributors": [ - "movegun1027" - ] - }, - "MDN/Community": { - "modified": "2020-03-03T01:53:44.470Z", - "contributors": [ - "SphinxKnight", - "alattalatta", - "wbamberg", - "gaucho1218", - "zziuni", - "unixforever", - "woojin.jo", - "cs09g" - ] - }, - "MDN/Community/Conversations": { - "modified": "2020-02-05T05:27:57.215Z", - "contributors": [ - "SphinxKnight", - "alattalatta", - "wbamberg", - "jswisher", - "woojin.jo" - ] - }, - "MDN/Community/Working_in_community": { - "modified": "2020-09-01T05:37:50.669Z", - "contributors": [ - "junnapark" - ] - }, "MDN/Contribute": { "modified": "2019-01-16T19:13:18.509Z", "contributors": [ @@ -2713,27 +2055,6 @@ "Sheppy" ] }, - "MDN/Contribute/Creating_and_editing_pages": { - "modified": "2019-03-23T23:13:39.002Z", - "contributors": [ - "wbamberg", - "kkokey", - "zziuni", - "naduhy2", - "nodejs", - "AlwaysOnce", - "KwanHong_Lee66" - ] - }, - "MDN/Contribute/Does_this_belong": { - "modified": "2019-01-16T19:22:53.277Z", - "contributors": [ - "wbamberg", - "zziuni", - "yssuh", - "leosangwon" - ] - }, "MDN/Contribute/Feedback": { "modified": "2020-09-30T17:51:50.022Z", "contributors": [ @@ -2777,35 +2098,6 @@ "Sheppy" ] }, - "MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2019-01-16T19:23:36.745Z", - "contributors": [ - "wbamberg", - "KwanHong_Lee66" - ] - }, - "MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2019-03-23T22:50:43.806Z", - "contributors": [ - "wbamberg", - "Saru", - "peacekimjapan", - "sominlee", - "novelview9", - "woojin.jo", - "Epikem", - "misol" - ] - }, - "MDN/Contribute/Howto/MDN_계정_생성하기": { - "modified": "2019-01-16T19:16:28.756Z", - "contributors": [ - "wbamberg", - "chiyodad", - "Junbong", - "KwanHong_Lee66" - ] - }, "MDN/Contribute/Howto/Report_a_problem": { "modified": "2020-01-07T12:20:00.841Z", "contributors": [ @@ -2814,14 +2106,6 @@ "LimeClover" ] }, - "MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2019-03-23T23:14:13.204Z", - "contributors": [ - "zziuni", - "wbamberg", - "KwanHong_Lee66" - ] - }, "MDN/Contribute/Howto/Tag": { "modified": "2019-03-18T20:41:26.193Z", "contributors": [ @@ -2831,72 +2115,21 @@ "plzfday" ] }, - "MDN/Contribute/Howto/Tag_JavaScript_pages": { - "modified": "2019-01-17T00:11:42.268Z", + "MDN/Contribute/Processes": { + "modified": "2019-01-17T02:54:48.050Z", "contributors": [ "wbamberg", - "woojin.jo" + "zziuni" ] }, - "MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { - "modified": "2020-02-28T22:23:49.633Z", + "MDN/Guidelines": { + "modified": "2020-09-30T15:30:34.264Z", "contributors": [ + "chrisdavidmills", "wbamberg", - "Saru", - "2oosoo" - ] - }, - "MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기": { - "modified": "2019-01-16T19:48:52.048Z", - "contributors": [ - "wbamberg", - "Junbong" - ] - }, - "MDN/Contribute/Processes": { - "modified": "2019-01-17T02:54:48.050Z", - "contributors": [ - "wbamberg", - "zziuni" - ] - }, - "MDN/Editor": { - "modified": "2020-09-30T15:42:29.661Z", - "contributors": [ - "chrisdavidmills", - "ehgus", - "wbamberg", - "zziuni", - "821065887131", - "sominlee", - "Netaras", - "Kaben", - "misol" - ] - }, - "MDN/Editor/Links": { - "modified": "2020-09-30T15:42:30.015Z", - "contributors": [ - "chrisdavidmills", - "honggaruy" - ] - }, - "MDN/Guidelines": { - "modified": "2020-09-30T15:30:34.264Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "zziuni", - "Netaras", - "Sheppy" - ] - }, - "MDN/Guidelines/Best_practices": { - "modified": "2020-09-30T15:30:34.436Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Netaras" + "zziuni", + "Netaras", + "Sheppy" ] }, "MDN/Guidelines/Code_guidelines": { @@ -2912,35 +2145,6 @@ "java2020007" ] }, - "MDN/Guidelines/Code_guidelines/Code_guidelines": { - "modified": "2020-09-30T15:30:35.323Z", - "contributors": [ - "chrisdavidmills", - "honggaruy" - ] - }, - "MDN/Guidelines/Style_guide": { - "modified": "2020-09-30T15:30:35.279Z", - "contributors": [ - "chrisdavidmills", - "honggaruy", - "jswisher", - "alattalatta", - "wbamberg", - "sominlee", - "naduhy2", - "dale0713", - "epicsaga" - ] - }, - "MDN/Kuma": { - "modified": "2019-09-06T03:29:26.311Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "zziuni" - ] - }, "MDN/Structures": { "modified": "2020-09-30T12:56:35.534Z", "contributors": [ @@ -2951,20 +2155,6 @@ "hoony" ] }, - "MDN/Structures/API_references": { - "modified": "2020-09-30T12:56:35.705Z", - "contributors": [ - "chrisdavidmills", - "zziuni" - ] - }, - "MDN/Structures/API_references/API_reference_sidebars": { - "modified": "2020-09-30T12:56:35.846Z", - "contributors": [ - "chrisdavidmills", - "zziuni" - ] - }, "MDN/Structures/Compatibility_tables": { "modified": "2020-10-15T22:03:04.448Z", "contributors": [ @@ -3018,28 +2208,6 @@ "Silvermist" ] }, - "MDN/Tools/페이지_재생성": { - "modified": "2020-09-30T16:51:25.059Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Netaras" - ] - }, - "MDN/User_guide": { - "modified": "2019-01-16T20:50:22.654Z", - "contributors": [ - "wbamberg", - "andrewJYjang" - ] - }, - "MDN_at_ten": { - "modified": "2019-03-23T22:41:30.825Z", - "contributors": [ - "LimeClover", - "jefflee0127" - ] - }, "Mozilla": { "modified": "2019-03-23T23:35:24.435Z", "contributors": [ @@ -3095,43 +2263,6 @@ "grizlupo" ] }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus": { - "modified": "2020-10-15T21:53:39.975Z", - "contributors": [ - "SphinxKnight", - "grizlupo", - "wbamberg", - "hoony" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType": { - "modified": "2020-10-15T22:14:46.556Z", - "contributors": [ - "SphinxKnight", - "grizlupo" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus/create": { - "modified": "2020-10-15T22:14:49.550Z", - "contributors": [ - "SphinxKnight", - "grizlupo" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement": { - "modified": "2020-10-15T22:14:45.950Z", - "contributors": [ - "SphinxKnight", - "grizlupo" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown": { - "modified": "2020-10-15T22:14:49.769Z", - "contributors": [ - "SphinxKnight", - "grizlupo" - ] - }, "Mozilla/Add-ons/WebExtensions/API/pageAction": { "modified": "2020-10-15T22:14:47.058Z", "contributors": [ @@ -3404,319 +2535,123 @@ "niceman114" ] }, - "Mozilla_Source_Code_Via_CVS": { - "modified": "2019-03-23T23:42:11.059Z", + "Tools": { + "modified": "2020-07-16T22:44:16.209Z", "contributors": [ - "teoli", - "NoBrain" + "SphinxKnight", + "desty", + "hoony", + "devleoper", + "Junbong", + "Feb30th", + "JeongSeongDae", + "loslch", + "JHKinkorea" ] }, - "Navigation_timing": { - "modified": "2019-03-23T23:19:34.117Z", + "Tools/Debugger": { + "modified": "2020-07-16T22:35:05.164Z", "contributors": [ - "sbnet21" + "SphinxKnight", + "wbamberg", + "toyuq", + "nacyot", + "gblue1223" ] }, - "Node_server_without_framework": { - "modified": "2020-07-16T22:36:05.665Z", + "Tools/Debugger/UI_Tour": { + "modified": "2020-07-16T22:35:16.703Z", "contributors": [ - "kidkkr" + "SphinxKnight", + "wbamberg", + "toyuq" ] }, - "Notable_bugs_fixed_in_Firefox_3": { - "modified": "2019-03-23T23:51:11.073Z", + "Tools/Network_Monitor": { + "modified": "2020-07-16T22:35:30.711Z", "contributors": [ - "teoli", - "Jeongkyu" + "SphinxKnight", + "yeonjukim", + "wicksome" ] }, - "Places/Custom_Containers": { - "modified": "2020-01-12T05:08:34.067Z", + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:28.500Z", "contributors": [ - "alattalatta", + "SphinxKnight", "wbamberg", - "Jeongkyu" + "stitchworkingonthecode" ] }, - "Places/Instantiating_Views": { - "modified": "2020-01-12T05:08:39.519Z", + "Tools/Page_Inspector/UI_Tour": { + "modified": "2020-07-16T22:34:49.329Z", "contributors": [ - "alattalatta", + "SphinxKnight", "wbamberg", - "Jeongkyu" + "stitchworkingonthecode" ] }, - "Places/Query_System": { - "modified": "2019-04-20T03:50:18.185Z", + "Tools/Performance": { + "modified": "2020-07-16T22:36:13.082Z", "contributors": [ + "SphinxKnight", "wbamberg", - "teoli", - "Jeongkyu" + "nacyot", + "gblue1223", + "roupkk", + "H-yun" ] }, - "Places/Views": { - "modified": "2020-01-12T05:08:46.290Z", + "Tools/Performance/UI_Tour": { + "modified": "2020-07-16T22:36:15.183Z", "contributors": [ - "alattalatta", + "SphinxKnight", "wbamberg", - "Jeongkyu" - ] - }, - "SVG_improvements_in_Firefox_3": { - "modified": "2019-03-23T23:51:12.606Z", - "contributors": [ - "teoli", - "Suguni" + "OhSeungHyeon" ] }, - "SVG_in_Firefox": { - "modified": "2019-03-23T23:41:45.344Z", + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.664Z", "contributors": [ - "teoli", - "Cliffet", - "taggon" + "SphinxKnight", + "wbamberg", + "nacyot", + "Zzpeehyun", + "Pinkminj", + "crankup78" ] }, - "Scripting_Plugins": { - "modified": "2019-01-16T15:11:14.478Z", + "Tools/Remote_Debugging/Firefox_for_Android": { + "modified": "2020-07-16T22:35:39.309Z", "contributors": [ - "teoli", - "Anonymous" + "SphinxKnight", + "wbamberg", + "thqkrdl502" ] }, - "The_DOM_and_JavaScript": { - "modified": "2019-12-13T21:09:57.295Z", + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:06.575Z", "contributors": [ + "SphinxKnight", "wbamberg", - "Netaras", - "Sebuls" + "Blackcoffee" ] }, - "Theme_Packaging": { - "modified": "2019-03-23T23:42:36.273Z", + "Web": { + "modified": "2020-02-16T02:49:58.384Z", "contributors": [ - "teoli", - "애들아빠" - ] - }, - "Tips_for_Authoring_Fast-loading_HTML_Pages": { - "modified": "2020-07-16T22:22:33.009Z", - "contributors": [ - "ybin", - "teoli", - "Jeongsw", - "Sebuls" - ] - }, - "Tools": { - "modified": "2020-07-16T22:44:16.209Z", - "contributors": [ - "SphinxKnight", - "desty", - "hoony", - "devleoper", - "Junbong", - "Feb30th", - "JeongSeongDae", - "loslch", - "JHKinkorea" - ] - }, - "Tools/Add-ons": { - "modified": "2020-07-16T22:36:23.557Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "mfluehr" - ] - }, - "Tools/Add-ons/DOM_Inspector": { - "modified": "2020-07-16T22:36:24.511Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "Sebuls" - ] - }, - "Tools/Debugger": { - "modified": "2020-07-16T22:35:05.164Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq", - "nacyot", - "gblue1223" - ] - }, - "Tools/Debugger/UI_Tour": { - "modified": "2020-07-16T22:35:16.703Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq" - ] - }, - "Tools/Debugger/단축키": { - "modified": "2020-07-16T22:35:18.793Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq" - ] - }, - "Tools/How_to": { - "modified": "2020-07-16T22:35:07.978Z", - "contributors": [ - "SphinxKnight", - "wbamberg" - ] - }, - "Tools/How_to/Open_the_debugger": { - "modified": "2020-07-16T22:35:09.268Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq", - "galcyurio" - ] - }, - "Tools/How_to/Search": { - "modified": "2020-07-16T22:35:15.581Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq" - ] - }, - "Tools/How_to/Set_a_breakpoint": { - "modified": "2020-07-16T22:35:10.232Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq" - ] - }, - "Tools/Network_Monitor": { - "modified": "2020-07-16T22:35:30.711Z", - "contributors": [ - "SphinxKnight", - "yeonjukim", - "wicksome" - ] - }, - "Tools/Page_Inspector": { - "modified": "2020-07-16T22:34:28.500Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "stitchworkingonthecode" - ] - }, - "Tools/Page_Inspector/UI_Tour": { - "modified": "2020-07-16T22:34:49.329Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "stitchworkingonthecode" - ] - }, - "Tools/Performance": { - "modified": "2020-07-16T22:36:13.082Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "nacyot", - "gblue1223", - "roupkk", - "H-yun" - ] - }, - "Tools/Performance/UI_Tour": { - "modified": "2020-07-16T22:36:15.183Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "OhSeungHyeon" - ] - }, - "Tools/Remote_Debugging": { - "modified": "2020-07-16T22:35:37.664Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "nacyot", - "Zzpeehyun", - "Pinkminj", - "crankup78" - ] - }, - "Tools/Remote_Debugging/Firefox_for_Android": { - "modified": "2020-07-16T22:35:39.309Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "thqkrdl502" - ] - }, - "Tools/Web_Console": { - "modified": "2020-07-16T22:34:06.575Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "Blackcoffee" - ] - }, - "Updating_extensions_for_Firefox_2": { - "modified": "2019-03-23T23:47:28.581Z", - "contributors": [ - "Channy" - ] - }, - "Updating_extensions_for_Firefox_3": { - "modified": "2019-12-13T20:35:48.646Z", - "contributors": [ - "wbamberg", - "Sheppy", - "Suguni" - ] - }, - "Updating_web_applications_for_Firefox_3": { - "modified": "2019-03-23T23:50:12.740Z", - "contributors": [ - "wbamberg", - "teoli", - "Sheppy", - "Channy" - ] - }, - "Using_Mozilla_in_Testing_and_Debugging_Web_Sites": { - "modified": "2019-03-23T23:13:10.960Z", - "contributors": [ - "cap3618" - ] - }, - "Using_XPath": { - "modified": "2019-01-16T14:19:09.939Z", - "contributors": [ - "kmaglione", - "Gilchris" - ] - }, - "Web": { - "modified": "2020-02-16T02:49:58.384Z", - "contributors": [ - "lundella", - "alattalatta", - "ehgus", - "limkukhyun", - "project42da", - "zziuni", - "tamnajio", - "young-gratia", - "pjc0247", - "stephenjang", - "Channy", - "ethertank" + "lundella", + "alattalatta", + "ehgus", + "limkukhyun", + "project42da", + "zziuni", + "tamnajio", + "young-gratia", + "pjc0247", + "stephenjang", + "Channy", + "ethertank" ] }, "Web/API": { @@ -4523,12 +3458,6 @@ "cs09g" ] }, - "Web/API/Document/getSelection": { - "modified": "2019-03-23T22:51:22.015Z", - "contributors": [ - "x86kernel" - ] - }, "Web/API/Document/hasFocus": { "modified": "2020-10-15T21:16:21.345Z", "contributors": [ @@ -4758,16 +3687,6 @@ "kimploo" ] }, - "Web/API/Document_Object_Model/소개": { - "modified": "2020-02-10T04:12:58.179Z", - "contributors": [ - "sungik-choi", - "jswisher", - "cs09g", - "2circumflex", - "dakeshi" - ] - }, "Web/API/DragEvent": { "modified": "2020-10-15T22:02:04.580Z", "contributors": [ @@ -4786,12 +3705,6 @@ "junghyun_han" ] }, - "Web/API/Element/accessKey": { - "modified": "2020-10-15T22:14:28.158Z", - "contributors": [ - "cs09g" - ] - }, "Web/API/Element/attributes": { "modified": "2019-03-23T23:42:26.377Z", "contributors": [ @@ -4984,12 +3897,6 @@ "99corps" ] }, - "Web/API/Event/createEvent": { - "modified": "2019-03-23T22:23:08.290Z", - "contributors": [ - "agakt" - ] - }, "Web/API/Event/eventPhase": { "modified": "2019-03-23T22:03:57.060Z", "contributors": [ @@ -5118,21 +4025,6 @@ "BANIP" ] }, - "Web/API/Fetch_API/Fetch의_사용법": { - "modified": "2020-10-15T22:00:18.673Z", - "contributors": [ - "JINSUNG1048", - "CressZZ", - "LiamYong", - "ajy720", - "limkukhyun", - "briz", - "mukeunzi", - "real0131", - "2dubbing", - "BANIP" - ] - }, "Web/API/File": { "modified": "2020-10-15T22:10:43.496Z", "contributors": [ @@ -5487,15 +4379,6 @@ "alattalatta" ] }, - "Web/API/HTMLElement/dataset": { - "modified": "2020-10-15T21:56:46.705Z", - "contributors": [ - "Kaben", - "alattalatta", - "jyhwng", - "KimSejune" - ] - }, "Web/API/HTMLElement/input_event": { "modified": "2020-10-15T22:27:30.949Z", "contributors": [ @@ -5515,27 +4398,8 @@ "EugeneKim" ] }, - "Web/API/HTMLElement/style": { - "modified": "2020-10-15T21:18:22.703Z", - "contributors": [ - "alattalatta", - "fscholz", - "AshfaqHossain", - "teoli", - "Netaras" - ] - }, - "Web/API/HTMLElement/tabIndex": { - "modified": "2019-03-23T23:42:52.929Z", - "contributors": [ - "fscholz", - "jsx", - "teoli", - "Netaras" - ] - }, - "Web/API/HTMLFormElement": { - "modified": "2020-10-15T21:18:27.982Z", + "Web/API/HTMLFormElement": { + "modified": "2020-10-15T21:18:27.982Z", "contributors": [ "alattalatta", "fscholz", @@ -5653,22 +4517,6 @@ "ahnzaz" ] }, - "Web/API/HTML_드래그_앤_드롭_API": { - "modified": "2020-09-06T00:51:11.619Z", - "contributors": [ - "zzoPark", - "jinyoung", - "constmoon", - "lundella", - "jinhyukkim" - ] - }, - "Web/API/HTML_드래그_앤_드롭_API/Drag_operations": { - "modified": "2019-03-18T21:31:26.321Z", - "contributors": [ - "dolmoon" - ] - }, "Web/API/History": { "modified": "2020-10-15T21:46:21.001Z", "contributors": [ @@ -6127,15 +4975,6 @@ "fscholz" ] }, - "Web/API/NetworkInformation/connection": { - "modified": "2019-03-23T23:26:48.403Z", - "contributors": [ - "fscholz", - "khalid32", - "teoli", - "hyeonseok" - ] - }, "Web/API/Node": { "modified": "2020-10-15T21:33:01.643Z", "contributors": [ @@ -6191,13 +5030,6 @@ "simonseo" ] }, - "Web/API/Node/innerText": { - "modified": "2020-10-15T22:08:26.441Z", - "contributors": [ - "alattalatta", - "DeadIntegral" - ] - }, "Web/API/Node/insertBefore": { "modified": "2020-10-15T22:11:13.634Z", "contributors": [ @@ -6791,14 +5623,6 @@ "fscholz" ] }, - "Web/API/Screen.onorientationchange": { - "modified": "2019-03-23T23:26:53.977Z", - "contributors": [ - "jsx", - "teoli", - "junho85" - ] - }, "Web/API/Screen/lockOrientation": { "modified": "2020-10-15T21:24:21.814Z", "contributors": [ @@ -6978,12 +5802,6 @@ "CressZZ" ] }, - "Web/API/Streams_API/컨셉": { - "modified": "2019-03-18T21:23:57.078Z", - "contributors": [ - "jjangga0214" - ] - }, "Web/API/StyleSheet": { "modified": "2020-10-15T22:34:31.946Z", "contributors": [ @@ -7264,13 +6082,6 @@ "woojin.jo" ] }, - "Web/API/WebGL_API/Cross-Domain_Textures": { - "modified": "2019-03-23T22:54:05.275Z", - "contributors": [ - "fscholz", - "hanmomhanda" - ] - }, "Web/API/WebGL_API/Tutorial": { "modified": "2020-06-18T10:46:16.746Z", "contributors": [ @@ -7463,16 +6274,6 @@ "Konan" ] }, - "Web/API/Web_Workers_API/basic_usage": { - "modified": "2020-04-03T02:58:31.932Z", - "contributors": [ - "dh", - "roupkk", - "andrewsohn", - "NFM", - "epicsaga" - ] - }, "Web/API/Window": { "modified": "2020-10-15T21:17:36.416Z", "contributors": [ @@ -7835,13 +6636,6 @@ "alattalatta" ] }, - "Web/API/WindowTimers/setTimeout": { - "modified": "2019-03-23T22:22:22.449Z", - "contributors": [ - "DevJang", - "TroyTae" - ] - }, "Web/API/Worker": { "modified": "2020-10-15T21:47:12.252Z", "contributors": [ @@ -7891,15 +6685,6 @@ "kidkkr" ] }, - "Web/API/XMLHttpRequest/timeout": { - "modified": "2019-05-28T20:54:41.611Z", - "contributors": [ - "jswisher", - "wbamberg", - "ExE-Boss", - "DeadIntegral" - ] - }, "Web/API/XMLHttpRequest/upload": { "modified": "2020-10-15T22:30:03.395Z", "contributors": [ @@ -8259,34 +7044,6 @@ "cvrebert" ] }, - "Web/CSS/@viewport/height": { - "modified": "2020-10-15T21:46:24.032Z", - "contributors": [ - "alattalatta", - "Netaras" - ] - }, - "Web/CSS/@viewport/viewport-fit": { - "modified": "2020-10-15T22:22:51.969Z", - "contributors": [ - "chayeoi", - "SphinxKnight" - ] - }, - "Web/CSS/@viewport/zoom": { - "modified": "2020-10-15T21:46:22.320Z", - "contributors": [ - "alattalatta", - "Netaras" - ] - }, - "Web/CSS/All_About_The_Containing_Block": { - "modified": "2020-01-07T10:38:47.261Z", - "contributors": [ - "alattalatta", - "nyxchung" - ] - }, "Web/CSS/Alternative_style_sheets": { "modified": "2019-03-23T23:52:49.065Z", "contributors": [ @@ -8345,14 +7102,6 @@ "alattalatta" ] }, - "Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds": { - "modified": "2019-03-23T23:37:37.611Z", - "contributors": [ - "teoli", - "Inyoung", - "jaemin_jo" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders": { "modified": "2020-08-10T06:40:27.369Z", "contributors": [ @@ -8360,13 +7109,6 @@ "Sheppy" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images": { - "modified": "2019-04-08T10:28:17.719Z", - "contributors": [ - "alattalatta", - "jyqry" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { "modified": "2019-05-02T02:39:15.426Z", "contributors": [ @@ -8469,24 +7211,6 @@ "beowolf9" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념": { - "modified": "2019-03-18T20:55:20.567Z", - "contributors": [ - "5JJ", - "joeunha", - "beowolf9", - "silmari", - "soonoo", - "wankyu", - "Latera" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례": { - "modified": "2019-10-04T18:40:14.389Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, "Web/CSS/CSS_Flow_Layout": { "modified": "2020-10-25T09:14:50.404Z", "contributors": [ @@ -8502,31 +7226,6 @@ "cybaj" ] }, - "Web/CSS/CSS_Flow_Layout/대열과_탈대열": { - "modified": "2019-09-24T15:45:35.513Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃": { - "modified": "2019-09-26T08:28:44.702Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드": { - "modified": "2019-09-17T21:10:09.773Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로": { - "modified": "2020-03-10T09:52:12.477Z", - "contributors": [ - "EricByHPHK", - "Hwan-Woong-Lee" - ] - }, "Web/CSS/CSS_Fonts": { "modified": "2019-04-25T10:51:28.269Z", "contributors": [ @@ -8631,13 +7330,6 @@ "Netaras" ] }, - "Web/CSS/CSS_Masks": { - "modified": "2019-04-26T08:55:40.990Z", - "contributors": [ - "alattalatta", - "Netaras" - ] - }, "Web/CSS/CSS_Miscellaneous": { "modified": "2019-03-23T22:32:29.213Z", "contributors": [ @@ -8840,12 +7532,6 @@ "Netaras" ] }, - "Web/CSS/CSS_단위와_값": { - "modified": "2020-11-29T04:33:10.671Z", - "contributors": [ - "alanhchoi" - ] - }, "Web/CSS/Cascade": { "modified": "2019-03-23T22:13:24.690Z", "contributors": [ @@ -8871,12 +7557,6 @@ "alattalatta" ] }, - "Web/CSS/Common_CSS_Questions": { - "modified": "2020-07-16T22:25:45.337Z", - "contributors": [ - "miyunim" - ] - }, "Web/CSS/Descendant_combinator": { "modified": "2020-10-15T22:25:55.745Z", "contributors": [ @@ -8895,32 +7575,12 @@ "alattalatta" ] }, - "Web/CSS/Getting_Started/JavaScript": { - "modified": "2019-03-23T23:41:58.615Z", - "contributors": [ - "teoli", - "Ioseph" - ] - }, - "Web/CSS/Getting_Started/SVG_graphics": { - "modified": "2019-03-23T23:41:56.694Z", - "contributors": [ - "teoli", - "Ioseph" - ] - }, "Web/CSS/ID_selectors": { "modified": "2020-10-15T22:16:17.946Z", "contributors": [ "alattalatta" ] }, - "Web/CSS/Index": { - "modified": "2019-05-26T05:51:14.395Z", - "contributors": [ - "alattalatta" - ] - }, "Web/CSS/Layout_mode": { "modified": "2020-08-05T01:05:50.434Z", "contributors": [ @@ -8975,16 +7635,6 @@ "Pastelgrim" ] }, - "Web/CSS/Reference/Property_Template": { - "modified": "2020-10-15T21:16:53.027Z", - "contributors": [ - "alattalatta", - "wbamberg", - "chrisdavidmills", - "teoli", - "Pastelgrim" - ] - }, "Web/CSS/Replaced_element": { "modified": "2020-08-05T01:03:55.719Z", "contributors": [ @@ -9479,15 +8129,6 @@ "claudepache" ] }, - "Web/CSS/cursor/Using_URL_values_for_the_cursor_property": { - "modified": "2019-03-23T23:41:42.325Z", - "contributors": [ - "hjunshin", - "teoli", - "jaemin_jo", - "Ioseph" - ] - }, "Web/CSS/display": { "modified": "2020-10-15T22:17:25.714Z", "contributors": [ @@ -10085,12 +8726,6 @@ "Netaras" ] }, - "Web/CSS/url": { - "modified": "2020-10-15T22:10:55.121Z", - "contributors": [ - "alattalatta" - ] - }, "Web/CSS/used_value": { "modified": "2020-01-07T12:50:25.214Z", "contributors": [ @@ -10164,140 +8799,40 @@ "jaemin_jo" ] }, - "Web/CSS/시작하기/리스트": { - "modified": "2019-03-23T23:33:11.239Z", - "contributors": [ - "teoli", - "SpikeYou" - ] - }, - "Web/CSS/시작하기/미디어": { - "modified": "2019-03-23T23:33:02.082Z", + "Web/EXSLT": { + "modified": "2019-03-23T23:51:10.063Z", "contributors": [ + "ExE-Boss", "teoli", - "SpikeYou" + "Suguni" ] }, - "Web/CSS/시작하기/배치": { - "modified": "2019-03-23T23:33:01.592Z", + "Web/Events": { + "modified": "2020-06-19T02:46:52.355Z", "contributors": [ - "yooonmi", + "bumday", + "wbamberg", + "cs09g", + "ExE-Boss", + "alattalatta", + "nacyot", "teoli", - "SpikeYou" + "Jeremie" ] }, - "Web/CSS/시작하기/상자": { - "modified": "2019-03-23T23:33:01.323Z", + "Web/Guide": { + "modified": "2019-03-23T23:28:18.945Z", "contributors": [ - "yooonmi", - "teoli", - "SpikeYou" + "digimon1740", + "stephenjang", + "moolow", + "haruair", + "Sheppy", + "jjangsuhyun" ] }, - "Web/CSS/시작하기/종속과_상속": { - "modified": "2019-03-23T23:33:16.790Z", - "contributors": [ - "ElleXD", - "teoli", - "SpikeYou" - ] - }, - "Web/CSS/시작하기/테이블": { - "modified": "2019-03-23T23:33:00.475Z", - "contributors": [ - "teoli", - "SpikeYou" - ] - }, - "Web/CSS/시작하기/텍스트_스타일": { - "modified": "2019-03-23T23:33:09.659Z", - "contributors": [ - "yooonmi", - "teoli", - "SpikeYou" - ] - }, - "Web/CSS/인접_형제_선택자": { - "modified": "2020-10-15T21:53:17.801Z", - "contributors": [ - "alattalatta", - "neatnet" - ] - }, - "Web/EXSLT": { - "modified": "2019-03-23T23:51:10.063Z", - "contributors": [ - "ExE-Boss", - "teoli", - "Suguni" - ] - }, - "Web/Events": { - "modified": "2020-06-19T02:46:52.355Z", - "contributors": [ - "bumday", - "wbamberg", - "cs09g", - "ExE-Boss", - "alattalatta", - "nacyot", - "teoli", - "Jeremie" - ] - }, - "Web/Events/DOMContentLoaded": { - "modified": "2020-12-03T14:42:33.988Z", - "contributors": [ - "dink95", - "alattalatta", - "wbamberg", - "ExE-Boss", - "project42da" - ] - }, - "Web/Events/abort": { - "modified": "2019-04-30T14:12:00.284Z", - "contributors": [ - "wbamberg", - "guyeol" - ] - }, - "Web/Events/blur": { - "modified": "2019-03-18T21:27:20.806Z", - "contributors": [ - "ExE-Boss", - "whdckszxxx" - ] - }, - "Web/Events/load": { - "modified": "2019-04-30T14:18:11.441Z", - "contributors": [ - "wbamberg", - "ExE-Boss", - "SuminNoh" - ] - }, - "Web/Events/message": { - "modified": "2019-04-30T14:16:28.259Z", - "contributors": [ - "wbamberg", - "ExE-Boss", - "JinSeungHo" - ] - }, - "Web/Guide": { - "modified": "2019-03-23T23:28:18.945Z", - "contributors": [ - "digimon1740", - "stephenjang", - "moolow", - "haruair", - "Sheppy", - "jjangsuhyun" - ] - }, - "Web/Guide/AJAX": { - "modified": "2020-11-05T10:30:10.859Z", + "Web/Guide/AJAX": { + "modified": "2020-11-05T10:30:10.859Z", "contributors": [ "alattalatta", "duduindo", @@ -10339,15 +8874,6 @@ "Sheppy" ] }, - "Web/Guide/API/Vibration/Vibration": { - "modified": "2020-10-15T21:24:18.629Z", - "contributors": [ - "alattalatta", - "pjc0247", - "Sheppy", - "yunji_koh" - ] - }, "Web/Guide/Audio_and_video_delivery": { "modified": "2019-04-17T05:03:01.108Z" }, @@ -10365,49 +8891,6 @@ "corps99" ] }, - "Web/Guide/CSS/Media_queries": { - "modified": "2020-11-10T11:07:52.526Z", - "contributors": [ - "hKa2020", - "alattalatta", - "hwanseung", - "BANIP", - "seoyunho", - "Ground-Silver0903", - "Sebastianz", - "roupkk", - "mrstork", - "malayaleecoder", - "jooddang", - "jhonghee" - ] - }, - "Web/Guide/CSS/Visual_formatting_model": { - "modified": "2019-09-26T13:57:16.375Z", - "contributors": [ - "Hwan-Woong-Lee", - "nyxchung", - "cmygray", - "cheeee", - "dotorify", - "hotsummmer", - "JeongSeongDae" - ] - }, - "Web/Guide/DOM": { - "modified": "2019-03-23T23:26:56.400Z", - "contributors": [ - "Sheppy" - ] - }, - "Web/Guide/DOM/Using_full_screen_mode": { - "modified": "2020-10-15T21:24:24.180Z", - "contributors": [ - "DeadIntegral", - "wbamberg", - "junho85" - ] - }, "Web/Guide/Events": { "modified": "2019-03-23T23:03:35.888Z", "contributors": [ @@ -10426,12 +8909,6 @@ "PineMt" ] }, - "Web/Guide/HTML/Content_Editable": { - "modified": "2019-03-23T22:40:12.545Z", - "contributors": [ - "gblue1223" - ] - }, "Web/Guide/HTML/Content_categories": { "modified": "2020-07-29T11:16:44.120Z", "contributors": [ @@ -10467,20 +8944,6 @@ "jinah1000" ] }, - "Web/Guide/XML_파싱_및_직렬화": { - "modified": "2019-03-23T22:16:47.020Z", - "contributors": [ - "young-gratia" - ] - }, - "Web/Guide/그래픽": { - "modified": "2020-02-15T07:39:57.101Z", - "contributors": [ - "Netaras", - "hyeonseok", - "narae_lee" - ] - }, "Web/HTML": { "modified": "2020-02-08T07:58:05.821Z", "contributors": [ @@ -10544,214 +9007,97 @@ "proost" ] }, - "Web/HTML/Canvas": { - "modified": "2020-02-05T06:54:04.340Z", + "Web/HTML/Element": { + "modified": "2020-03-20T02:38:46.890Z", "contributors": [ "alattalatta", - "chungheepark", - "bluewings", - "cs09g", - "Netaras", + "jongin", + "sangwoo", + "azunyan3", "teoli", - "ethertank", - "dextra", - "Suguni" + "arkido82@gmail.com", + "Gilchris" ] }, - "Web/HTML/Canvas/Manipulating_video_using_canvas": { - "modified": "2019-06-05T03:56:50.784Z", + "Web/HTML/Element/Heading_Elements": { + "modified": "2020-10-15T21:34:54.387Z", "contributors": [ - "Yeri-Kim" + "alattalatta", + "Kaben", + "azunyan3" ] }, - "Web/HTML/Canvas/Tutorial": { - "modified": "2019-09-23T23:04:58.681Z", + "Web/HTML/Element/Input": { + "modified": "2020-12-02T21:46:52.605Z", "contributors": [ - "dbwodlf3", + "hKa2020", + "xkitchenkay", "alattalatta", - "danhojin", - "MuhunKim", - "donghyun", - "AlwaysOnce" + "JacieKim0", + "azunyan3" ] }, - "Web/HTML/Canvas/Tutorial/Advanced_animations": { - "modified": "2020-12-05T09:44:35.831Z", + "Web/HTML/Element/Input/button": { + "modified": "2020-10-15T22:09:45.262Z", "contributors": [ - "minthing" + "alattalatta", + "JaeWorld" ] }, - "Web/HTML/Canvas/Tutorial/Applying_styles_and_colors": { - "modified": "2019-10-10T16:32:24.689Z", + "Web/HTML/Element/Input/date": { + "modified": "2020-10-15T22:27:19.955Z", "contributors": [ - "kbsbroad", - "sujilee91", - "donghyun", - "Sebastianz", - "AlwaysOnce" + "alattalatta" ] }, - "Web/HTML/Canvas/Tutorial/Basic_animations": { - "modified": "2019-03-25T03:54:23.486Z", + "Web/HTML/Element/Input/file": { + "modified": "2020-10-15T21:55:47.622Z", "contributors": [ - "AlwaysOnce" + "alattalatta", + "onlydel", + "Neibce", + "Han_jongbae" ] }, - "Web/HTML/Canvas/Tutorial/Basic_usage": { - "modified": "2019-12-12T22:32:43.483Z", + "Web/HTML/Element/Input/radio": { + "modified": "2020-10-15T22:28:50.867Z", "contributors": [ - "kbsbroad", - "OkHyeon", - "sujilee91", - "MuhunKim" + "alattalatta" ] }, - "Web/HTML/Canvas/Tutorial/Compositing": { - "modified": "2019-03-23T23:08:47.571Z", + "Web/HTML/Element/Video": { + "modified": "2020-10-15T21:14:28.732Z", "contributors": [ - "EatChangmyeong", - "AlwaysOnce" + "alattalatta", + "wbamberg", + "pineoc", + "kw8799", + "Kaben", + "hyeonseok", + "teoli", + "Suguni" ] }, - "Web/HTML/Canvas/Tutorial/Compositing/Example": { - "modified": "2019-03-18T21:40:09.058Z", + "Web/HTML/Element/a": { + "modified": "2020-10-15T21:16:16.368Z", "contributors": [ - "EatChangmyeong" + "alattalatta", + "darongE", + "lovefield", + "pelly_ryu", + "Kaben", + "teoli", + "Basix", + "azunyan3", + "Jeongkyu" ] }, - "Web/HTML/Canvas/Tutorial/Drawing_shapes": { - "modified": "2019-03-25T03:42:34.299Z", + "Web/HTML/Element/abbr": { + "modified": "2020-10-15T21:35:00.433Z", "contributors": [ - "kbsbroad", - "sujilee91" - ] - }, - "Web/HTML/Canvas/Tutorial/Finale": { - "modified": "2020-12-02T07:47:45.530Z", - "contributors": [ - "chzhclq17" - ] - }, - "Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility": { - "modified": "2019-03-18T21:18:34.778Z", - "contributors": [ - "kbsbroad" - ] - }, - "Web/HTML/Canvas/Tutorial/Optimizing_canvas": { - "modified": "2020-06-04T04:24:50.578Z", - "contributors": [ - "composite", - "kbsbroad" - ] - }, - "Web/HTML/Canvas/Tutorial/Using_images": { - "modified": "2020-06-18T07:33:39.788Z", - "contributors": [ - "dooyou21", - "cs09g", - "kbsbroad", - "klight1994", - "sujilee91" - ] - }, - "Web/HTML/Canvas/Tutorial/변형": { - "modified": "2019-03-18T21:20:50.794Z", - "contributors": [ - "jinah1000" - ] - }, - "Web/HTML/Element": { - "modified": "2020-03-20T02:38:46.890Z", - "contributors": [ - "alattalatta", - "jongin", - "sangwoo", - "azunyan3", - "teoli", - "arkido82@gmail.com", - "Gilchris" - ] - }, - "Web/HTML/Element/Heading_Elements": { - "modified": "2020-10-15T21:34:54.387Z", - "contributors": [ - "alattalatta", - "Kaben", - "azunyan3" - ] - }, - "Web/HTML/Element/Input": { - "modified": "2020-12-02T21:46:52.605Z", - "contributors": [ - "hKa2020", - "xkitchenkay", - "alattalatta", - "JacieKim0", - "azunyan3" - ] - }, - "Web/HTML/Element/Input/button": { - "modified": "2020-10-15T22:09:45.262Z", - "contributors": [ - "alattalatta", - "JaeWorld" - ] - }, - "Web/HTML/Element/Input/date": { - "modified": "2020-10-15T22:27:19.955Z", - "contributors": [ - "alattalatta" - ] - }, - "Web/HTML/Element/Input/file": { - "modified": "2020-10-15T21:55:47.622Z", - "contributors": [ - "alattalatta", - "onlydel", - "Neibce", - "Han_jongbae" - ] - }, - "Web/HTML/Element/Input/radio": { - "modified": "2020-10-15T22:28:50.867Z", - "contributors": [ - "alattalatta" - ] - }, - "Web/HTML/Element/Video": { - "modified": "2020-10-15T21:14:28.732Z", - "contributors": [ - "alattalatta", - "wbamberg", - "pineoc", - "kw8799", - "Kaben", - "hyeonseok", - "teoli", - "Suguni" - ] - }, - "Web/HTML/Element/a": { - "modified": "2020-10-15T21:16:16.368Z", - "contributors": [ - "alattalatta", - "darongE", - "lovefield", - "pelly_ryu", - "Kaben", - "teoli", - "Basix", - "azunyan3", - "Jeongkyu" - ] - }, - "Web/HTML/Element/abbr": { - "modified": "2020-10-15T21:35:00.433Z", - "contributors": [ - "alattalatta", - "Kaben", - "azunyan3" + "alattalatta", + "Kaben", + "azunyan3" ] }, "Web/HTML/Element/address": { @@ -10907,13 +9253,6 @@ "azunyan3" ] }, - "Web/HTML/Element/command": { - "modified": "2020-10-15T21:44:01.823Z", - "contributors": [ - "alattalatta", - "Rich_Village" - ] - }, "Web/HTML/Element/content": { "modified": "2020-10-15T21:35:22.751Z", "contributors": [ @@ -10999,13 +9338,6 @@ "azunyan3" ] }, - "Web/HTML/Element/element": { - "modified": "2020-10-15T21:35:22.163Z", - "contributors": [ - "alattalatta", - "azunyan3" - ] - }, "Web/HTML/Element/em": { "modified": "2020-10-15T21:36:03.360Z", "contributors": [ @@ -11646,13 +9978,6 @@ "dolmoon" ] }, - "Web/HTML/Global_attributes/dropzone": { - "modified": "2020-10-15T22:06:26.786Z", - "contributors": [ - "alattalatta", - "dolmoon" - ] - }, "Web/HTML/Global_attributes/hidden": { "modified": "2020-10-15T22:06:24.774Z", "contributors": [ @@ -11761,46 +10086,6 @@ "alattalatta" ] }, - "Web/HTML/Global_attributes/클래스": { - "modified": "2020-10-15T21:51:13.209Z", - "contributors": [ - "alattalatta", - "dolmoon", - "woojin.jo" - ] - }, - "Web/HTML/HTML5": { - "modified": "2019-03-24T00:11:07.419Z", - "contributors": [ - "teoli", - "Channy", - "Dwchiang", - "vigia122", - "jisung", - "Joone" - ] - }, - "Web/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-23T23:38:47.847Z", - "contributors": [ - "kybin", - "kuil09", - "juyoungbang", - "teoli", - "Channy" - ] - }, - "Web/HTML/HTML5_문서의_섹션과_윤곽": { - "modified": "2020-01-10T12:08:26.959Z", - "contributors": [ - "alattalatta", - "sudo0272", - "Kaben", - "bombinari", - "naduhy2", - "miname" - ] - }, "Web/HTML/Index": { "modified": "2020-01-19T02:45:39.384Z", "contributors": [ @@ -12771,17 +11056,6 @@ "junnapark" ] }, - "Web/HTTP/User_agent를_이용한_브라우저_감지": { - "modified": "2020-09-13T12:21:12.513Z", - "contributors": [ - "sephiron99", - "MyungsunLee", - "alattalatta", - "citrus.alice", - "seokju-na", - "wicksome" - ] - }, "Web/JavaScript": { "modified": "2020-03-23T04:53:28.173Z", "contributors": [ @@ -12817,22 +11091,6 @@ "JongChun" ] }, - "Web/JavaScript/About": { - "modified": "2020-03-12T19:36:55.143Z", - "contributors": [ - "JinKang", - "Parcovia", - "cs09g", - "imjang57", - "wayne-kim", - "desty", - "stephenjang", - "Luzi.kr", - "teoli", - "Zer0th", - "99corps" - ] - }, "Web/JavaScript/Data_structures": { "modified": "2020-07-30T02:41:19.847Z", "contributors": [ @@ -12846,12 +11104,6 @@ "jaemin_jo" ] }, - "Web/JavaScript/Differential_inheritance_in_JavaScript": { - "modified": "2020-09-14T22:22:46.677Z", - "contributors": [ - "limkukhyun" - ] - }, "Web/JavaScript/Enumerability_and_ownership_of_properties": { "modified": "2020-07-28T23:08:47.885Z", "contributors": [ @@ -12892,34 +11144,6 @@ "taggon" ] }, - "Web/JavaScript/Guide/Closures": { - "modified": "2020-03-12T19:37:58.819Z", - "contributors": [ - "chaewonkong", - "songdoing", - "RamiTae", - "Violet-Bora-Lee", - "alattalatta", - "henry_hwang", - "Seonghui", - "guyeol", - "limkukhyun", - "zziuni", - "Yoonjoo", - "KSH-code", - "afrontend", - "AlexMin", - "Jongmin", - "MyHyuny", - "joeunha", - "Kaben", - "noritersand", - "kdnmih", - "teoli", - "JaehwanLee", - "jaemin_jo" - ] - }, "Web/JavaScript/Guide/Control_flow_and_error_handling": { "modified": "2020-03-12T19:41:32.768Z", "contributors": [ @@ -12960,29 +11184,6 @@ "ryukato" ] }, - "Web/JavaScript/Guide/Inheritance_and_the_prototype_chain": { - "modified": "2020-04-04T00:50:18.045Z", - "contributors": [ - "peter1035k", - "jeongraeKim", - "dbwodlf3", - "project42da", - "quddnr153", - "ahnzaz", - "laranhee", - "daewooLeeNy", - "danhojin", - "shim.hw0810", - "faker007", - "juyonglee", - "epicsaga", - "sftblw", - "mixed80", - "teoli", - "JaehwanLee", - "jaemin_jo" - ] - }, "Web/JavaScript/Guide/Iterators_and_Generators": { "modified": "2020-07-15T01:15:38.167Z", "contributors": [ @@ -13039,5670 +11240,7469 @@ "SooYeonKim" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About": { - "modified": "2019-01-16T16:11:14.324Z", + "Web/JavaScript/Guide/Text_formatting": { + "modified": "2020-03-12T19:41:34.500Z", "contributors": [ - "teoli", - "Wafe", - "taggon" + "limkukhyun", + "jungpaeng", + "kr-leeteahoon", + "wertgw", + "SooYeonKim" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages": { - "modified": "2019-01-16T14:15:11.129Z", + "Web/JavaScript/Guide/Using_promises": { + "modified": "2020-09-07T02:53:40.286Z", "contributors": [ - "teoli", - "99corps" + "KimEJ", + "0131mj", + "mytory", + "eojina", + "limkukhyun", + "tw4204", + "Ken123777", + "coolcpu", + "SSJ-unclear", + "jadestern" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants": { - "modified": "2019-01-16T16:11:22.319Z", + "Web/JavaScript/Guide/Working_with_Objects": { + "modified": "2019-03-23T23:06:06.143Z", "contributors": [ - "teoli", - "Wafe" + "fscholz", + "khg0712", + "SphinxKnight", + "nacyot", + "KBGenie", + "jigs12", + "PineMt", + "ryukato", + "cafrii" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects": { - "modified": "2019-01-16T15:05:32.812Z", + "Web/JavaScript/JavaScript_technologies_overview": { + "modified": "2020-03-12T19:37:59.087Z", "contributors": [ + "alattalatta", "teoli", - "Anonymous" + "ethertank", + "jaemin_jo" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters": { - "modified": "2019-03-23T23:43:54.514Z", + "Web/JavaScript/Memory_Management": { + "modified": "2020-03-12T19:37:54.884Z", "contributors": [ - "jigs12", + "presentY1897", + "johngrib", + "KSH-code", "teoli", - "ethertank", - "Wafe" + "jaemin_jo" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods": { - "modified": "2019-03-23T23:43:58.661Z", + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:36:53.431Z", "contributors": [ + "limkukhyun", + "naduhy2", + "Netaras", + "epicsaga", "teoli", - "Wafe" + "Constantine Kim", + "MoGi", + "Dyhan81", + "Goldmund" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type": { - "modified": "2019-03-23T23:43:46.816Z", + "Web/JavaScript/Reference/About": { + "modified": "2020-03-12T19:37:02.761Z", "contributors": [ + "limkukhyun", "teoli", - "Wafe" + "Dyhan81", + "Netaras", + "taggon", + "Goldmund" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties": { - "modified": "2019-03-23T23:43:53.828Z", + "Web/JavaScript/Reference/Classes": { + "modified": "2020-12-02T08:06:01.229Z", "contributors": [ - "teoli", - "Wafe" + "woochul2", + "hjleesm", + "dsma73", + "HyunSangHan", + "seulgiyoon", + "kylajung", + "genzuby", + "fscholz", + "jyhwng", + "roupkk", + "hibiya", + "faker007", + "hwshim", + "preco21", + "maytree" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties": { - "modified": "2019-03-23T23:43:44.923Z", + "Web/JavaScript/Reference/Classes/Private_class_fields": { + "modified": "2020-11-08T09:14:41.975Z", "contributors": [ - "teoli", - "Wafe" + "seong7" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function": { - "modified": "2019-03-23T23:43:44.078Z", + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-10-15T21:42:34.132Z", "contributors": [ - "teoli", - "Wafe" + "alattalatta", + "hyoni0817", + "limkukhyun", + "jeonnoej" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References": { - "modified": "2019-03-23T23:43:58.264Z", + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-10-15T21:43:47.995Z", "contributors": [ - "teoli", - "Wafe" + "limkukhyun", + "Netaras", + "jeonnoej" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression": { - "modified": "2019-03-23T23:43:48.309Z", + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-10-15T21:43:46.615Z", "contributors": [ - "teoli", - "디토" + "kimkyeseung", + "limkukhyun", + "jeonnoej", + "taihwayoun" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions": { - "modified": "2019-01-16T16:16:32.143Z", + "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { + "modified": "2020-03-12T19:44:53.109Z", "contributors": [ - "teoli", - "taggon" + "alattalatta", + "imskojs" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview": { - "modified": "2019-01-16T14:15:11.648Z", + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:43:42.482Z", "contributors": [ - "teoli", - "S. Kang", - "jsnapz", - "Ape1126", - "Wafe", - "Huick", - "Gilchris" + "Netaras", + "fscholz" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals": { - "modified": "2019-03-23T23:43:37.505Z", + "Web/JavaScript/Reference/Errors/Bad_octal": { + "modified": "2020-03-12T19:44:24.834Z", "contributors": [ - "teoli", - "panda", - "Wafe" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties": { - "modified": "2019-01-16T15:50:20.671Z", + "Web/JavaScript/Reference/Errors/Bad_radix": { + "modified": "2020-03-12T19:44:34.573Z", "contributors": [ - "teoli", - "Gilchris" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators": { - "modified": "2019-03-23T23:41:51.754Z", + "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { + "modified": "2020-03-12T19:48:27.405Z", "contributors": [ - "teoli", - "taggon" + "vividhee" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators": { - "modified": "2019-01-16T16:11:11.253Z", + "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { + "modified": "2020-03-12T19:46:13.633Z", "contributors": [ - "teoli", - "Wafe" + "2oosoo", + "highdali" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators": { - "modified": "2019-03-23T23:41:53.669Z", + "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": { + "modified": "2020-03-12T19:47:46.720Z", "contributors": [ - "teoli", - "taggon" + "SSJ-unclear" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators": { - "modified": "2019-01-16T16:11:13.405Z", + "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": { + "modified": "2020-03-12T19:48:24.242Z", "contributors": [ - "teoli", - "Wafe" + "vividhee" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators": { - "modified": "2019-01-16T16:11:11.411Z", + "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": { + "modified": "2020-03-12T19:44:32.792Z", "contributors": [ - "teoli", - "Wafe" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators": { - "modified": "2019-01-16T16:11:17.876Z", + "Web/JavaScript/Reference/Errors/Deprecated_octal": { + "modified": "2020-03-12T19:48:30.330Z", "contributors": [ - "teoli", - "Wafe" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators": { - "modified": "2019-01-16T16:11:17.176Z", + "Web/JavaScript/Reference/Errors/Identifier_after_number": { + "modified": "2020-03-12T19:48:24.600Z", "contributors": [ - "teoli", - "Wafe" + "vividhee" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects": { - "modified": "2019-01-16T16:10:38.273Z", + "Web/JavaScript/Reference/Errors/Illegal_character": { + "modified": "2020-03-12T19:48:28.614Z", "contributors": [ - "teoli", - "Wafe" + "vividhee" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object": { - "modified": "2019-03-23T23:43:56.661Z", + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:43:37.920Z", "contributors": [ - "teoli", - "Wafe" + "epicsaga" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode": { - "modified": "2019-01-16T16:11:27.423Z", + "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { + "modified": "2020-03-12T19:44:36.449Z", "contributors": [ - "teoli", - "Wafe" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values": { - "modified": "2019-01-16T16:11:23.067Z", + "Web/JavaScript/Reference/Errors/Invalid_date": { + "modified": "2020-03-12T19:47:45.133Z", "contributors": [ - "teoli", - "Wafe" + "Olivia_J" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables": { - "modified": "2019-01-16T16:11:22.455Z", + "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { + "modified": "2020-03-12T19:48:28.444Z", "contributors": [ - "teoli", - "Wafe" + "vividhee" ] }, - "Web/JavaScript/Guide/Text_formatting": { - "modified": "2020-03-12T19:41:34.500Z", + "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": { + "modified": "2020-03-12T19:48:24.879Z", "contributors": [ - "limkukhyun", - "jungpaeng", - "kr-leeteahoon", - "wertgw", - "SooYeonKim" + "vividhee" ] }, - "Web/JavaScript/Guide/Using_promises": { - "modified": "2020-09-07T02:53:40.286Z", + "Web/JavaScript/Reference/Errors/JSON_bad_parse": { + "modified": "2020-03-12T19:46:13.524Z", + "contributors": [ + "highdali" + ] + }, + "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { + "modified": "2020-03-12T19:48:03.882Z", + "contributors": [ + "SSJ-unclear" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": { + "modified": "2020-03-12T19:48:26.441Z", + "contributors": [ + "vividhee" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": { + "modified": "2020-03-12T19:48:28.709Z", + "contributors": [ + "vividhee" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { + "modified": "2020-03-12T19:47:44.512Z", + "contributors": [ + "Olivia_J" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": { + "modified": "2020-03-12T19:48:10.711Z", + "contributors": [ + "rlaace423" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": { + "modified": "2020-03-12T19:48:36.679Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { + "modified": "2020-03-12T19:47:15.700Z", + "contributors": [ + "nicekkong" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": { + "modified": "2020-03-12T19:47:45.484Z", + "contributors": [ + "Olivia_J" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:46:46.133Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/More_arguments_needed": { + "modified": "2020-03-12T19:48:33.843Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Negative_repetition_count": { + "modified": "2020-03-12T19:44:34.819Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/No_variable_name": { + "modified": "2020-03-12T19:48:33.115Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_codepoint": { + "modified": "2020-03-12T19:44:27.869Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_constructor": { + "modified": "2020-03-12T19:46:59.075Z", + "contributors": [ + "Latera" + ] + }, + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-03-12T19:44:37.119Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Precision_range": { + "modified": "2020-03-12T19:44:32.328Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Property_access_denied": { + "modified": "2020-03-12T19:44:32.773Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Read-only": { + "modified": "2020-03-12T19:47:45.720Z", + "contributors": [ + "Olivia_J" + ] + }, + "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": { + "modified": "2020-03-12T19:49:30.091Z", + "contributors": [ + "WonWoongJang" + ] + }, + "Web/JavaScript/Reference/Errors/Reserved_identifier": { + "modified": "2020-03-12T19:48:28.133Z", + "contributors": [ + "vividhee" + ] + }, + "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { + "modified": "2020-03-12T19:44:36.352Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { + "modified": "2020-03-12T19:47:43.886Z", + "contributors": [ + "SSJ-unclear" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-12T19:44:33.119Z", + "contributors": [ + "Kaben", + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Undeclared_var": { + "modified": "2020-03-12T19:44:33.741Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Undefined_prop": { + "modified": "2020-03-12T19:44:33.728Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:44:11.696Z", + "contributors": [ + "ChangSungsil" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:45:33.484Z", + "contributors": [ + "yura-Choi" + ] + }, + "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { + "modified": "2020-03-12T19:48:26.448Z", + "contributors": [ + "vividhee" + ] + }, + "Web/JavaScript/Reference/Errors/is_not_iterable": { + "modified": "2020-03-12T19:48:24.798Z", + "contributors": [ + "cs09g" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T21:37:58.963Z", + "contributors": [ + "harryjjun", + "Dailyscat", + "limkukhyun", + "alattalatta", + "Netaras", + "sftblw" + ] + }, + "Web/JavaScript/Reference/Functions/Default_parameters": { + "modified": "2020-10-15T21:45:58.179Z", + "contributors": [ + "honggaruy", + "gbyman", + "kbsbroad", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Functions/Method_definitions": { + "modified": "2020-03-12T19:44:05.728Z", + "contributors": [ + "kdex", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Functions/arguments": { + "modified": "2020-10-15T21:38:47.452Z", + "contributors": [ + "alattalatta", + "Netaras", + "tmxkwkfgka" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/@@iterator": { + "modified": "2020-10-15T22:12:01.387Z", + "contributors": [ + "alattalatta", + "vividhee" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/callee": { + "modified": "2020-03-12T19:44:03.622Z", + "contributors": [ + "Netaras" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/length": { + "modified": "2020-10-15T21:48:18.638Z", + "contributors": [ + "alattalatta", + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Functions/get": { + "modified": "2020-10-15T21:48:28.043Z", "contributors": [ - "KimEJ", - "0131mj", - "mytory", - "eojina", - "limkukhyun", - "tw4204", - "Ken123777", - "coolcpu", "SSJ-unclear", - "jadestern" + "DGURI", + "NessunKim" + ] + }, + "Web/JavaScript/Reference/Functions/rest_parameters": { + "modified": "2020-10-15T21:46:03.879Z", + "contributors": [ + "Geun-Hyung_Kim", + "cs09g", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Functions/set": { + "modified": "2020-03-12T19:44:54.074Z", + "contributors": [ + "daehyoung" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-08-05T00:51:40.442Z", + "contributors": [ + "alattalatta", + "loslch", + "skyfly33", + "Netaras", + "cs09g", + "Rachel0211", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/AggregateError": { + "modified": "2020-11-15T04:22:22.892Z", + "contributors": [ + "Donghoon" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-10-15T21:18:12.731Z", + "contributors": [ + "kwangdosa", + "alattalatta", + "wbamberg", + "limkukhyun", + "sominlee", + "HanuLatte", + "joeunha", + "maytree", + "VBChunguk", + "JaegangLee", + "teoli", + "taggon", + "Aeuiop" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { + "modified": "2020-10-15T21:43:02.789Z", + "contributors": [ + "alattalatta", + "KisukPark", + "hwangtan", + "." + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@species": { + "modified": "2020-10-15T21:50:41.909Z", + "contributors": [ + "alattalatta", + "KisukPark", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { + "modified": "2020-10-15T21:50:41.776Z", + "contributors": [ + "alattalatta", + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Array": { + "modified": "2020-10-15T22:26:58.481Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { + "modified": "2020-10-15T21:41:30.424Z", + "contributors": [ + "alattalatta", + "dolmoon", + "KisukPark", + "ieay4a", + "Violetdusk", + "Netaras", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { + "modified": "2020-10-15T21:50:39.970Z", + "contributors": [ + "alattalatta", + "KisukPark", + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2020-10-15T21:38:49.144Z", + "contributors": [ + "RamiTae", + "bohyun611kim", + "alattalatta", + "KisukPark", + "VBChunguk", + "tmxkwkfgka" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { + "modified": "2020-10-15T21:50:40.123Z", + "contributors": [ + "alattalatta", + "KisukPark", + "withdude2", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/entries": { + "modified": "2020-10-15T21:41:29.970Z", + "contributors": [ + "honggaruy", + "alattalatta", + "KisukPark", + "SphinxKnight", + "keypointer", + "kdex", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/every": { + "modified": "2020-10-15T21:41:30.327Z", + "contributors": [ + "alattalatta", + "KisukPark", + "limkukhyun", + "Netaras", + "Kaben", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/fill": { + "modified": "2020-10-15T21:36:43.146Z", + "contributors": [ + "alattalatta", + "KisukPark", + "SphinxKnight", + "withdude2", + "ligeek" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2020-10-15T21:41:17.863Z", + "contributors": [ + "RamiTae", + "alattalatta", + "bohyun611kim", + "pineoc", + "jewon", + "limkukhyun", + "KisukPark", + "Saem", + "Netaras", + "rageboom", + "Yunhong-Min", + "keypointer" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/find": { + "modified": "2020-10-15T21:48:55.826Z", + "contributors": [ + "alattalatta", + "QooQooDass", + "KisukPark", + "sonjh02", + "meganson", + "yuntaek", + "Jaysok" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { + "modified": "2020-10-15T21:50:40.640Z", + "contributors": [ + "hyoni0817", + "Hyeok_Jo", + "alattalatta", + "KisukPark", + "sonjh02", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flat": { + "modified": "2020-10-15T22:08:27.831Z", + "contributors": [ + "alattalatta", + "moonformeli", + "cs09g" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { + "modified": "2020-10-15T22:08:28.496Z", + "contributors": [ + "DaegiKim", + "24seconds", + "moonformeli", + "alattalatta", + "cs09g" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/forEach": { + "modified": "2020-10-15T21:47:39.068Z", + "contributors": [ + "alattalatta", + "RootyJin", + "jeongchaeuk", + "Parcovia", + "limkukhyun", + "KisukPark", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/from": { + "modified": "2020-10-15T21:37:56.478Z", + "contributors": [ + "alattalatta", + "Violet-Bora-Lee", + "KisukPark", + "SphinxKnight", + "디토", + "ligeek" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/includes": { + "modified": "2020-10-15T21:50:39.977Z", + "contributors": [ + "IMHOJEONG", + "alattalatta", + "KisukPark", + "KlausLee", + "khsiea", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { + "modified": "2020-10-15T21:50:40.883Z", + "contributors": [ + "biniruu", + "naraeim", + "alattalatta", + "KisukPark", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2020-10-15T21:41:14.689Z", + "contributors": [ + "alattalatta", + "KisukPark", + "KaironMoon", + "keypointer", + "johngrib" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2020-10-15T21:41:15.362Z", + "contributors": [ + "shj9432", + "alattalatta", + "KisukPark", + "VBChunguk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/keys": { + "modified": "2020-10-15T21:41:30.210Z", + "contributors": [ + "alattalatta", + "KisukPark", + "SphinxKnight", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { + "modified": "2020-10-15T21:50:40.016Z", + "contributors": [ + "alattalatta", + "KisukPark", + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/length": { + "modified": "2020-10-15T21:41:28.876Z", + "contributors": [ + "alattalatta", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/map": { + "modified": "2020-10-15T21:36:42.699Z", + "contributors": [ + "seulgiyoon", + "alattalatta", + "KisukPark", + "sshplendid", + "selfiens", + "the1900", + "reoim", + "Yunhong-Min", + "sominlee", + "Rokt33r", + "epicsaga" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2020-10-15T21:36:39.776Z", + "contributors": [ + "alattalatta", + "KisukPark", + "limkukhyun", + "ligeek" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2020-10-15T21:47:37.008Z", + "contributors": [ + "alattalatta", + "KisukPark", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/push": { + "modified": "2020-10-15T21:39:22.145Z", + "contributors": [ + "alattalatta", + "KisukPark", + "dsma73", + "Hoto-Cocoa", + "nohsenc", + "dewey94esb" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2020-10-15T21:41:28.622Z", + "contributors": [ + "alattalatta", + "KisukPark", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/shift": { + "modified": "2020-10-15T21:38:19.399Z", + "contributors": [ + "alattalatta", + "KisukPark", + "DeusNonEst", + "FlowerCoing" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T21:48:35.659Z", + "contributors": [ + "alattalatta", + "Georgee-lee", + "KisukPark", + "cs09g", + "AlexMin", + "imskojs", + "dale0713" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/some": { + "modified": "2020-10-15T21:47:53.706Z", + "contributors": [ + "kimkyeseung", + "alattalatta", + "KisukPark", + "kyunooh", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/sort": { + "modified": "2020-10-15T21:50:40.023Z", + "contributors": [ + "IvannKim", + "yami03", + "alattalatta", + "KisukPark", + "dsma73", + "seokju-na", + "apple77y", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T21:37:48.347Z", + "contributors": [ + "alattalatta", + "selfiens", + "KisukPark", + "wonhoKim", + "laranhee", + "Jei", + "Rokt33r" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { + "modified": "2020-10-15T21:47:37.995Z", + "contributors": [ + "alattalatta", + "KisukPark", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toSource": { + "modified": "2020-10-15T22:00:47.617Z", + "contributors": [ + "alattalatta", + "teoli", + "KisukPark", + "sonjh02" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toString": { + "modified": "2020-10-15T21:47:38.270Z", + "contributors": [ + "alattalatta", + "KisukPark", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { + "modified": "2020-10-15T21:41:30.420Z", + "contributors": [ + "alattalatta", + "ChanwheKim", + "KisukPark", + "jisooyu", + "maytree" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/values": { + "modified": "2020-10-15T21:41:31.189Z", + "contributors": [ + "alattalatta", + "KisukPark", + "SphinxKnight", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T21:31:34.913Z", + "contributors": [ + "alattalatta", + "chaewonkong", + "niceilm", + "teoli", + "JiminP", + "yuby" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer": { + "modified": "2020-10-15T22:27:33.561Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { + "modified": "2020-10-15T22:27:34.550Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { + "modified": "2020-10-15T22:27:32.623Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { + "modified": "2020-10-15T22:27:35.359Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { + "modified": "2020-10-15T21:52:51.606Z", + "contributors": [ + "ibizcox", + "jooddang", + "limkukhyun", + "ChanghwaLee" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics": { + "modified": "2019-03-23T22:18:58.236Z", + "contributors": [ + "RyuJin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt": { + "modified": "2020-10-15T22:12:37.942Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt/BigInt": { + "modified": "2020-10-15T22:25:40.633Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-10-15T21:14:40.981Z", + "contributors": [ + "alattalatta", + "wbamberg", + "teoli", + "Gilchris" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/Boolean": { + "modified": "2020-10-15T22:27:46.206Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { + "modified": "2020-10-15T22:11:53.952Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { + "modified": "2020-10-15T22:11:54.035Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView": { + "modified": "2020-10-15T21:42:40.867Z", + "contributors": [ + "alattalatta", + "KKang", + "ksyeng" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/DataView": { + "modified": "2020-10-15T22:27:25.683Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T21:18:35.817Z", + "contributors": [ + "alattalatta", + "wbamberg", + "dsma73", + "Shin-JaeHeon", + "seungha-kim", + "seokju-na", + "teoli", + "taggon" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/UTC": { + "modified": "2020-10-15T21:50:44.435Z", + "contributors": [ + "alattalatta", + "inpyoj", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDate": { + "modified": "2020-10-15T21:50:41.680Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDay": { + "modified": "2020-10-15T21:50:41.587Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { + "modified": "2020-10-15T21:50:41.498Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getHours": { + "modified": "2020-10-15T21:50:41.097Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { + "modified": "2020-10-15T21:50:43.734Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { + "modified": "2020-10-15T21:50:41.182Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { + "modified": "2020-10-15T21:50:42.376Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { + "modified": "2020-10-15T21:50:44.137Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTime": { + "modified": "2019-03-23T22:23:15.546Z", + "contributors": [ + "hyeonseok", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { + "modified": "2019-03-23T22:23:13.145Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { + "modified": "2019-03-23T22:23:20.825Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { + "modified": "2019-03-23T22:23:16.136Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { + "modified": "2019-03-23T22:23:15.265Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { + "modified": "2019-03-23T22:23:09.557Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { + "modified": "2019-03-23T22:23:07.710Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { + "modified": "2019-03-23T22:23:18.026Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { + "modified": "2019-03-23T22:23:10.004Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { + "modified": "2019-03-23T22:23:16.588Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2020-12-13T11:19:39.873Z", + "contributors": [ + "hansolpp", + "g6ling", + "dale0713" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/parse": { + "modified": "2019-03-23T22:23:12.000Z", + "contributors": [ + "sung-ugje", + "galcyurio", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setDate": { + "modified": "2019-03-23T22:23:20.668Z", + "contributors": [ + "swtpumpkin", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { + "modified": "2019-03-23T22:23:19.509Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setHours": { + "modified": "2019-03-23T22:23:20.495Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { + "modified": "2019-03-23T22:23:19.297Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { + "modified": "2019-03-23T22:23:09.852Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { + "modified": "2019-03-23T22:23:18.765Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { + "modified": "2019-03-23T22:23:08.456Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setTime": { + "modified": "2019-03-23T22:23:22.849Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { + "modified": "2019-03-23T22:23:22.400Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { + "modified": "2019-03-23T22:23:12.168Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { + "modified": "2019-03-23T22:23:12.991Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { + "modified": "2019-03-23T22:23:21.549Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { + "modified": "2019-03-23T22:23:11.774Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { + "modified": "2019-03-23T22:23:12.673Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { + "modified": "2019-03-23T22:23:22.693Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { + "modified": "2020-10-15T21:50:42.628Z", + "contributors": [ + "alattalatta", + "inkyungkim", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { + "modified": "2020-10-15T22:09:03.975Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { + "modified": "2020-10-15T22:09:05.629Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toString": { + "modified": "2020-10-15T21:56:46.065Z", + "contributors": [ + "alattalatta", + "huseong" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { + "modified": "2020-10-15T22:22:09.213Z", + "contributors": [ + "Jihyun_LEE" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2020-10-15T21:23:09.336Z", + "contributors": [ + "alattalatta", + "sunhyung", + "teoli", + "john_jung" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/name": { + "modified": "2020-10-15T22:01:04.562Z", + "contributors": [ + "goeo1066" + ] + }, + "Web/JavaScript/Reference/Global_Objects/EvalError": { + "modified": "2020-10-15T21:50:41.406Z", + "contributors": [ + "alattalatta", + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-10-15T21:18:08.765Z", + "contributors": [ + "alattalatta", + "moolow", + "dolmoon", + "Netaras", + "teoli", + "HunminKim", + "Wafe" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/apply": { + "modified": "2020-10-15T21:36:42.231Z", + "contributors": [ + "limsungho02", + "cs09g", + "jeongchaeuk", + "alattalatta", + "jaewanC", + "bsidesoft" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/arguments": { + "modified": "2020-10-15T22:04:18.058Z", + "contributors": [ + "Seonghui", + "sunhyun" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/bind": { + "modified": "2020-10-15T21:38:38.554Z", + "contributors": [ + "dezcao", + "dae-hwa", + "alattalatta", + "limkukhyun", + "AlexMin", + "dale0713", + "joeunha", + "Netaras", + "sftblw", + "zuckay79", + "jjhangu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2020-10-15T21:19:34.146Z", + "contributors": [ + "dasbeerboot", + "paikwiki", + "Netaras", + "stitchworkingonthecode", + "ligeek", + "jjhangu", + "teoli", + "ByungChangYoo", + "Jeado.Ko" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/length": { + "modified": "2020-10-15T21:36:48.277Z", + "contributors": [ + "alattalatta", + "Netaras", + "bsidesoft" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/name": { + "modified": "2019-03-23T22:54:09.088Z", + "contributors": [ + "Netaras", + "bsidesoft" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/toSource": { + "modified": "2020-10-15T22:15:36.685Z", + "contributors": [ + "cs09g" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator": { + "modified": "2019-10-07T03:49:08.925Z", + "contributors": [ + "stegano", + "Latera", + "loslch", + "kdex", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator/next": { + "modified": "2019-03-23T22:29:43.014Z", + "contributors": [ + "echo304" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator/return": { + "modified": "2019-03-23T22:29:41.659Z", + "contributors": [ + "echo304" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator/throw": { + "modified": "2020-10-15T21:47:52.236Z", + "contributors": [ + "alattalatta", + "echo304" + ] + }, + "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { + "modified": "2020-10-15T21:43:23.835Z", + "contributors": [ + "alattalatta", + "HyunMook", + "AHNJAEHA" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Infinity": { + "modified": "2020-10-15T21:44:39.467Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/InternalError": { + "modified": "2019-03-18T21:46:44.351Z", + "contributors": [ + "teoli", + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl": { + "modified": "2020-10-15T21:56:50.642Z", + "contributors": [ + "alattalatta", + "hrg921" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { + "modified": "2020-10-15T22:07:32.322Z", + "contributors": [ + "fscholz", + "alattalatta", + "SSJ-unclear" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/Locale": { + "modified": "2020-10-15T22:25:03.900Z", + "contributors": [ + "fscholz", + "sffc" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/Locale/language": { + "modified": "2020-10-15T22:25:02.965Z", + "contributors": [ + "fscholz", + "limkukhyun" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { + "modified": "2020-10-15T22:08:58.601Z", + "contributors": [ + "fscholz", + "alattalatta", + "SDSkyKlouD", + "SSJ-unclear" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2020-10-15T21:43:51.602Z", + "contributors": [ + "alattalatta", + "Parcovia", + "goeo1066", + "Netaras", + "MexieAndCo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { + "modified": "2020-10-15T21:44:14.822Z", + "contributors": [ + "alattalatta", + "Parcovia", + "subasuba" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { + "modified": "2020-11-10T21:46:18.524Z", + "contributors": [ + "Ohora", + "alattalatta", + "churow", + "boyzgun", + "joshua1988", + "maytree", + "supermanWannaBe" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T21:50:09.238Z", + "contributors": [ + "Chloe-HyunJoo", + "alattalatta", + "younghoh", + "KaironMoon", + "echo304", + "dragmove" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { + "modified": "2020-10-15T22:04:19.848Z", + "contributors": [ + "Seok.Heo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/Map": { + "modified": "2020-10-15T22:26:33.491Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2020-10-15T22:09:01.449Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2020-10-15T22:09:03.155Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/entries": { + "modified": "2020-10-15T22:09:02.936Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/forEach": { + "modified": "2020-10-15T22:20:31.940Z", + "contributors": [ + "JaeWorld" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/get": { + "modified": "2020-10-15T22:15:40.628Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/has": { + "modified": "2020-10-15T22:15:44.379Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/set": { + "modified": "2020-10-15T22:15:44.384Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/size": { + "modified": "2020-10-15T22:04:26.274Z", + "contributors": [ + "Gren", + "Seok.Heo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2020-10-15T21:38:50.083Z", + "contributors": [ + "alattalatta", + "kimkyeseung", + "ejay0811", + "bombinari", + "imskojs", + "dale0713", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2020-10-15T21:56:48.942Z", + "contributors": [ + "alattalatta", + "mantra78" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN10": { + "modified": "2020-10-15T22:12:27.389Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN2": { + "modified": "2020-10-15T22:12:33.707Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { + "modified": "2020-10-15T21:45:43.847Z", + "contributors": [ + "alattalatta", + "SeungYeol", + "seung-yeol" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { + "modified": "2020-10-15T22:12:28.658Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/PI": { + "modified": "2020-10-15T21:57:11.130Z", + "contributors": [ + "alattalatta", + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { + "modified": "2020-10-15T22:28:40.942Z", + "contributors": [ + "129dot03" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { + "modified": "2020-10-15T21:57:11.465Z", + "contributors": [ + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/abs": { + "modified": "2020-10-15T21:57:04.759Z", + "contributors": [ + "alattalatta", + "mantra78" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/acos": { + "modified": "2020-10-15T21:52:08.736Z", + "contributors": [ + "alattalatta", + "keikeiem" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { + "modified": "2020-10-15T21:52:08.362Z", + "contributors": [ + "alattalatta", + "keikeiem" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2019-03-23T22:13:49.234Z", + "contributors": [ + "ironmanciti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/exp": { + "modified": "2020-10-15T22:07:23.655Z", + "contributors": [ + "qazxsw1240" ] }, - "Web/JavaScript/Guide/Values,_variables,_and_literals": { - "modified": "2020-06-03T11:11:26.830Z", + "Web/JavaScript/Reference/Global_Objects/Math/floor": { + "modified": "2020-10-15T21:38:48.166Z", + "contributors": [ + "alattalatta", + "EdwardBaek", + "laranhee", + "ChoeSul" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/fround": { + "modified": "2019-03-23T22:31:04.734Z", + "contributors": [ + "ingee.kim" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/imul": { + "modified": "2019-03-31T21:25:02.115Z", + "contributors": [ + "cameo-js", + "ingee.kim" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/log": { + "modified": "2020-10-15T21:55:33.977Z", + "contributors": [ + "Luna4D" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/log2": { + "modified": "2020-10-15T21:57:12.002Z", + "contributors": [ + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/max": { + "modified": "2020-10-15T21:56:06.992Z", + "contributors": [ + "lanipark", + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/min": { + "modified": "2020-10-15T21:56:53.960Z", + "contributors": [ + "mantra78" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/random": { + "modified": "2020-10-15T21:44:16.613Z", + "contributors": [ + "caianyuan", + "EatChangmyeong", + "kuroneko0441", + "lazygyu", + "gamzza", + "maytree" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/round": { + "modified": "2020-10-15T22:12:25.570Z", + "contributors": [ + "officialmansu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sign": { + "modified": "2020-10-15T21:59:54.584Z", + "contributors": [ + "yssgo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sin": { + "modified": "2020-10-15T22:14:16.419Z", + "contributors": [ + "guyeol" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sinh": { + "modified": "2020-10-15T22:23:26.235Z", + "contributors": [ + "Eumhongin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { + "modified": "2020-10-15T21:57:12.700Z", + "contributors": [ + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/tan": { + "modified": "2020-10-15T22:14:16.148Z", + "contributors": [ + "guyeol" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/tanh": { + "modified": "2020-10-15T22:27:51.653Z", + "contributors": [ + "FennecFoxSW" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/trunc": { + "modified": "2020-10-15T21:56:16.061Z", + "contributors": [ + "mantra78", + "hefaitos" + ] + }, + "Web/JavaScript/Reference/Global_Objects/NaN": { + "modified": "2020-10-15T21:15:15.113Z", "contributors": [ - "gksrlf2ek", - "sujinlee0616", "alattalatta", - "shj9432", - "dsma73", - "yhyim", - "hohoonlee", - "limkukhyun", - "yangtaeho", - "gudrl", - "jadestern", - "ddarkchu", "Netaras", - "HyunSeob", - "wikibook", - "VBChunguk", - "trazy", - "Donghyun_Lee", - "stephenjang", - "Rudy-Ahn", - "moolow", + "nacyot", "teoli", - "frog44" + "Gilchris" ] }, - "Web/JavaScript/Guide/Working_with_Objects": { - "modified": "2019-03-23T23:06:06.143Z", + "Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T21:38:20.966Z", "contributors": [ - "fscholz", - "khg0712", - "SphinxKnight", - "nacyot", - "KBGenie", - "jigs12", - "PineMt", - "ryukato", - "cafrii" + "soonsebii", + "alattalatta", + "DeadIntegral", + "taeunChoi", + "ChoeSul", + "fscholz" ] }, - "Web/JavaScript/Guide/객체_모델의_세부사항": { - "modified": "2020-03-12T19:42:17.394Z", + "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { + "modified": "2020-10-15T21:48:35.594Z", "contributors": [ - "doong-jo", - "nmsohn", - "DoublSB", - "limkukhyun", - "wbamberg", - "cmygray", - "khseok1060", - "ryukato" + "EntryDark", + "." ] }, - "Web/JavaScript/Guide/메타_프로그래밍": { - "modified": "2020-03-12T19:41:24.217Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { + "modified": "2020-10-15T22:02:58.023Z", "contributors": [ - "limkukhyun", - "nodejs", - "stephenjang" + "alattalatta", + "kirrie" ] }, - "Web/JavaScript/Guide/소개": { - "modified": "2020-11-13T15:07:54.630Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { + "modified": "2020-10-15T21:53:40.733Z", "contributors": [ - "FennecFoxSW", - "ldss3sang", - "limkukhyun", - "bluerainmaker", - "ahnzaz", - "BG.Choi", - "gudrl", - "gnujoow", - "stitchworkingonthecode", - "ShihwanKim", - "Netaras", - "cs09g", - "Jsfumato", - "hwani163", - "junoim", - "ByeongGi", - "stephenjang" + "alattalatta", + "kbsbroad" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { + "modified": "2020-10-15T22:14:25.785Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { + "modified": "2020-10-15T22:01:36.854Z", + "contributors": [ + "alattalatta", + "sshplendid" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { + "modified": "2020-10-15T22:15:09.850Z", + "contributors": [ + "alattalatta", + "yami03" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/NaN": { + "modified": "2020-10-15T21:44:42.844Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { + "modified": "2020-10-15T22:15:10.597Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { + "modified": "2020-10-15T21:44:34.313Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { + "modified": "2020-10-15T21:50:46.841Z", + "contributors": [ + "alattalatta", + "Lutece" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { + "modified": "2020-10-15T21:44:51.414Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { + "modified": "2020-10-15T21:53:40.478Z", + "contributors": [ + "alattalatta", + "preco21" ] }, - "Web/JavaScript/Guide/정규식": { - "modified": "2020-04-29T02:51:44.998Z", + "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { + "modified": "2020-10-15T22:14:24.810Z", "contributors": [ - "yami03", - "yeonjuan", - "Jung-Max", - "deltakor1234", - "idid0210", - "seungha-kim", - "limkukhyun", - "khg0712", - "nazuna1", - "kooljay82", - "fdevjm", - "coffeenjava", - "gaeun917", - "namhong2001", - "woochankim", - "JunBeom-Park", - "SooYeonKim" + "alattalatta" ] }, - "Web/JavaScript/Guide/정규식/Assertions": { - "modified": "2020-09-14T21:47:15.957Z", + "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { + "modified": "2020-10-15T21:38:16.285Z", "contributors": [ - "limkukhyun" + "alattalatta", + "SphinxKnight", + "chro0611" ] }, - "Web/JavaScript/Guide/정규식/Groups_and_Ranges": { - "modified": "2020-03-12T19:49:33.624Z", + "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { + "modified": "2020-10-15T22:16:46.694Z", "contributors": [ - "limkukhyun" + "lifeisnovel" ] }, - "Web/JavaScript/Guide/함수": { - "modified": "2020-03-12T19:41:24.935Z", + "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { + "modified": "2020-10-15T21:50:45.262Z", "contributors": [ - "limkukhyun", - "01045972746", - "jeoyoho", - "bigsaigon333", - "creatijin", - "jungpaeng", - "gudrl", - "wafersroom", - "gaeun917", - "SSaMKJ", - "JunLee", - "woochankim", - "JunBeom-Park", - "SooYeonKim" + "alattalatta", + "Lutece" ] }, - "Web/JavaScript/Introduction_to_Object-Oriented_JavaScript": { - "modified": "2019-03-23T23:29:46.029Z", + "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { + "modified": "2020-10-15T22:02:15.943Z", "contributors": [ - "Parcovia", - "JayK95", - "rinuel", - "teoli", - "JaehaAhn" + "take0415" ] }, - "Web/JavaScript/JavaScript_technologies_overview": { - "modified": "2020-03-12T19:37:59.087Z", + "Web/JavaScript/Reference/Global_Objects/Number/toString": { + "modified": "2020-10-15T21:48:38.962Z", "contributors": [ "alattalatta", - "teoli", - "ethertank", - "jaemin_jo" + "magnoliaa" ] }, - "Web/JavaScript/Memory_Management": { - "modified": "2020-03-12T19:37:54.884Z", + "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { + "modified": "2020-10-15T22:10:14.373Z", "contributors": [ - "presentY1897", - "johngrib", - "KSH-code", - "teoli", - "jaemin_jo" + "alattalatta", + "DeadIntegral" ] }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:36:53.431Z", + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:19:43.435Z", "contributors": [ - "limkukhyun", - "naduhy2", - "Netaras", - "epicsaga", + "alattalatta", + "Parcovia", + "palindrom615", + "callin2", + "StrongStoone", + "maytree", + "keikeiem", "teoli", - "Constantine Kim", - "MoGi", - "Dyhan81", - "Goldmund" + "Jeado.Ko" ] }, - "Web/JavaScript/Reference/About": { - "modified": "2020-03-12T19:37:02.761Z", + "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { + "modified": "2020-10-15T22:08:32.403Z", "contributors": [ - "limkukhyun", - "teoli", - "Dyhan81", - "Netaras", - "taggon", - "Goldmund" + "LeeDDHH" ] }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-12-02T08:06:01.229Z", + "Web/JavaScript/Reference/Global_Objects/Object/assign": { + "modified": "2020-10-15T21:49:34.841Z", "contributors": [ - "woochul2", - "hjleesm", - "dsma73", - "HyunSangHan", - "seulgiyoon", - "kylajung", - "genzuby", - "fscholz", - "jyhwng", - "roupkk", - "hibiya", + "cs09g", + "limkukhyun", + "TK-one", + "alattalatta", + "LOG91", + "kikas", "faker007", - "hwshim", - "preco21", - "maytree" - ] - }, - "Web/JavaScript/Reference/Classes/Class_fields": { - "modified": "2020-10-15T22:29:50.457Z", - "contributors": [ - "dooyou21" + "dale0713" ] }, - "Web/JavaScript/Reference/Classes/Private_class_fields": { - "modified": "2020-11-08T09:14:41.975Z", + "Web/JavaScript/Reference/Global_Objects/Object/constructor": { + "modified": "2020-10-15T21:47:07.109Z", "contributors": [ - "seong7" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Classes/constructor": { - "modified": "2020-10-15T21:42:34.132Z", + "Web/JavaScript/Reference/Global_Objects/Object/create": { + "modified": "2019-10-02T03:34:36.779Z", "contributors": [ - "alattalatta", - "hyoni0817", - "limkukhyun", - "jeonnoej" + "ibizcox", + "Netaras" ] }, - "Web/JavaScript/Reference/Classes/extends": { - "modified": "2020-10-15T21:43:47.995Z", + "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { + "modified": "2020-10-15T21:54:36.990Z", "contributors": [ - "limkukhyun", - "Netaras", - "jeonnoej" + "EatChangmyeong", + "KangHyeongMin", + "DevJang", + "BANIP" ] }, - "Web/JavaScript/Reference/Classes/static": { - "modified": "2020-10-15T21:43:46.615Z", + "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { + "modified": "2020-10-15T21:37:24.444Z", "contributors": [ + "alattalatta", "kimkyeseung", - "limkukhyun", - "jeonnoej", - "taihwayoun" + "mixed", + "bsidesoft" ] }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { - "modified": "2020-03-12T19:44:53.109Z", + "Web/JavaScript/Reference/Global_Objects/Object/entries": { + "modified": "2020-10-15T22:08:09.257Z", "contributors": [ - "alattalatta", - "imskojs" + "honggaruy", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:43:42.482Z", + "Web/JavaScript/Reference/Global_Objects/Object/freeze": { + "modified": "2020-10-15T21:37:04.618Z", "contributors": [ - "Netaras", - "fscholz" + "alattalatta", + "cs09g", + "gatherKnowledge", + "roupkk", + "hanmomhanda" ] }, - "Web/JavaScript/Reference/Errors/Bad_octal": { - "modified": "2020-03-12T19:44:24.834Z", + "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": { + "modified": "2020-10-15T22:10:27.914Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Bad_radix": { - "modified": "2020-03-12T19:44:34.573Z", + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": { + "modified": "2020-10-15T21:47:07.447Z", "contributors": [ - "magnoliaa" + "fscholz", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { - "modified": "2020-03-12T19:48:27.405Z", + "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { + "modified": "2019-03-23T22:31:23.968Z", "contributors": [ - "vividhee" + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { - "modified": "2020-03-12T19:46:13.633Z", + "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { + "modified": "2020-10-15T21:39:57.262Z", "contributors": [ - "2oosoo", - "highdali" + "Chloe-HyunJoo", + "alattalatta", + "epicsaga" ] }, - "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": { - "modified": "2020-03-12T19:47:46.720Z", + "Web/JavaScript/Reference/Global_Objects/Object/is": { + "modified": "2020-10-15T21:31:34.796Z", "contributors": [ - "SSJ-unclear" + "alattalatta", + "Netaras", + "nacyot", + "ligeek", + "lv0gun9" ] }, - "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": { - "modified": "2020-03-12T19:48:24.242Z", + "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { + "modified": "2020-10-15T21:47:08.415Z", "contributors": [ - "vividhee" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": { - "modified": "2020-03-12T19:44:32.792Z", + "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { + "modified": "2020-10-15T21:47:09.610Z", "contributors": [ - "magnoliaa" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_octal": { - "modified": "2020-03-12T19:48:30.330Z", + "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": { + "modified": "2020-10-15T21:37:04.091Z", "contributors": [ - "magnoliaa" + "alattalatta", + "BrandenYoon", + "bsidesoft" ] }, - "Web/JavaScript/Reference/Errors/Identifier_after_number": { - "modified": "2020-03-12T19:48:24.600Z", + "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { + "modified": "2020-10-15T21:47:09.579Z", "contributors": [ - "vividhee" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Illegal_character": { - "modified": "2020-03-12T19:48:28.614Z", + "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { + "modified": "2020-10-15T21:47:09.416Z", "contributors": [ - "vividhee" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Invalid_array_length": { - "modified": "2020-03-12T19:43:37.920Z", + "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": { + "modified": "2020-10-15T21:52:42.061Z", "contributors": [ - "epicsaga" + "deltakor1234", + "alattalatta", + "dotorify" ] }, - "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { - "modified": "2020-03-12T19:44:36.449Z", + "Web/JavaScript/Reference/Global_Objects/Object/seal": { + "modified": "2020-10-15T21:37:04.586Z", "contributors": [ - "magnoliaa" + "alattalatta", + "hanmomhanda" ] }, - "Web/JavaScript/Reference/Errors/Invalid_date": { - "modified": "2020-03-12T19:47:45.133Z", + "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": { + "modified": "2020-11-04T03:29:23.911Z", "contributors": [ - "Olivia_J" + "psk810", + "DevJang", + "kingsae1" ] }, - "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { - "modified": "2020-03-12T19:48:28.444Z", + "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": { + "modified": "2020-10-15T22:08:09.241Z", "contributors": [ - "vividhee" + "alattalatta", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": { - "modified": "2020-03-12T19:48:24.879Z", + "Web/JavaScript/Reference/Global_Objects/Object/toString": { + "modified": "2020-10-15T21:46:52.765Z", "contributors": [ - "vividhee" + "ESnark", + "alattalatta", + "limkukhyun", + "kennen", + "sandArtChip" ] }, - "Web/JavaScript/Reference/Errors/JSON_bad_parse": { - "modified": "2020-03-12T19:46:13.524Z", + "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { + "modified": "2020-10-15T21:49:29.419Z", "contributors": [ - "highdali" + "honggaruy", + "alattalatta", + "stitchworkingonthecode" ] }, - "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { - "modified": "2020-03-12T19:48:03.882Z", + "Web/JavaScript/Reference/Global_Objects/Object/values": { + "modified": "2020-10-15T22:01:47.626Z", "contributors": [ - "SSJ-unclear" + "OhSeungHyeon", + "KIMSEONGSEOB" ] }, - "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": { - "modified": "2020-03-12T19:48:26.441Z", + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:37:31.734Z", "contributors": [ - "vividhee" + "Vimming", + "alattalatta", + "khg0712", + "limkukhyun", + "samee", + "fscholz", + "NessunKim", + "ahnjungho", + "Netaras", + "redcamel", + "EunwooCho", + "akic4op4", + "0xABCDEF" ] }, - "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": { - "modified": "2020-03-12T19:48:28.709Z", + "Web/JavaScript/Reference/Global_Objects/Promise/Promise": { + "modified": "2020-10-15T22:27:11.901Z", "contributors": [ - "vividhee" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { - "modified": "2020-03-12T19:47:44.512Z", + "Web/JavaScript/Reference/Global_Objects/Promise/all": { + "modified": "2020-10-15T21:45:48.976Z", "contributors": [ - "Olivia_J" + "EatChangmyeong", + "alattalatta", + "DeadIntegral", + "limkukhyun", + "fscholz", + "hoony" ] }, - "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": { - "modified": "2020-03-12T19:48:10.711Z", + "Web/JavaScript/Reference/Global_Objects/Promise/allSettled": { + "modified": "2020-10-15T22:24:05.512Z", "contributors": [ - "rlaace423" + "composite" ] }, - "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": { - "modified": "2020-03-12T19:48:36.679Z", + "Web/JavaScript/Reference/Global_Objects/Promise/finally": { + "modified": "2020-10-15T22:04:25.149Z", "contributors": [ - "magnoliaa" + "ditto572", + "Seok.Heo" ] }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { - "modified": "2020-03-12T19:47:15.700Z", + "Web/JavaScript/Reference/Global_Objects/Promise/race": { + "modified": "2020-10-15T21:47:12.859Z", "contributors": [ - "nicekkong" + "EatChangmyeong", + "alattalatta", + "seungha-kim", + "fscholz", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": { - "modified": "2020-03-12T19:47:45.484Z", + "Web/JavaScript/Reference/Global_Objects/Promise/reject": { + "modified": "2020-10-15T21:47:12.472Z", "contributors": [ - "Olivia_J" + "fscholz", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:46:46.133Z", + "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { + "modified": "2020-10-15T21:47:20.702Z", "contributors": [ - "magnoliaa" + "cs09g", + "fscholz", + "QooQooDass", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/More_arguments_needed": { - "modified": "2020-03-12T19:48:33.843Z", + "Web/JavaScript/Reference/Global_Objects/Promise/then": { + "modified": "2020-10-15T21:47:12.138Z", "contributors": [ - "magnoliaa" + "EatChangmyeong", + "fscholz", + "KisukPark", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Negative_repetition_count": { - "modified": "2020-03-12T19:44:34.819Z", + "Web/JavaScript/Reference/Global_Objects/Proxy": { + "modified": "2020-10-15T21:50:18.794Z", "contributors": [ - "magnoliaa" + "alattalatta", + "callin2", + "heejunghwang" ] }, - "Web/JavaScript/Reference/Errors/No_variable_name": { - "modified": "2020-03-12T19:48:33.115Z", + "Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2019-03-23T22:28:44.569Z", "contributors": [ "magnoliaa" ] }, - "Web/JavaScript/Reference/Errors/Not_a_codepoint": { - "modified": "2020-03-12T19:44:27.869Z", + "Web/JavaScript/Reference/Global_Objects/ReferenceError": { + "modified": "2020-10-15T22:01:04.430Z", "contributors": [ - "magnoliaa" + "goeo1066" ] }, - "Web/JavaScript/Reference/Errors/Not_a_constructor": { - "modified": "2020-03-12T19:46:59.075Z", + "Web/JavaScript/Reference/Global_Objects/Reflect": { + "modified": "2020-10-15T21:53:08.377Z", "contributors": [ - "Latera" + "alattalatta", + "undefcat" ] }, - "Web/JavaScript/Reference/Errors/Not_defined": { - "modified": "2020-03-12T19:44:37.119Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { + "modified": "2020-10-15T21:53:07.400Z", "contributors": [ - "magnoliaa" + "alattalatta", + "undefcat" ] }, - "Web/JavaScript/Reference/Errors/Precision_range": { - "modified": "2020-03-12T19:44:32.328Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { + "modified": "2020-10-15T22:19:07.053Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Property_access_denied": { - "modified": "2020-03-12T19:44:32.773Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty": { + "modified": "2020-10-15T22:19:08.726Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Read-only": { - "modified": "2020-03-12T19:47:45.720Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty": { + "modified": "2020-10-15T22:19:07.741Z", "contributors": [ - "Olivia_J" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": { - "modified": "2020-03-12T19:49:30.091Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/get": { + "modified": "2020-10-15T22:19:16.367Z", "contributors": [ - "WonWoongJang" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Reserved_identifier": { - "modified": "2020-03-12T19:48:28.133Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor": { + "modified": "2020-10-15T22:19:17.438Z", "contributors": [ - "vividhee" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { - "modified": "2020-03-12T19:44:36.352Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf": { + "modified": "2020-10-15T22:19:16.737Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { - "modified": "2020-03-12T19:47:43.886Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/has": { + "modified": "2020-10-15T22:19:16.455Z", "contributors": [ - "SSJ-unclear" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Too_much_recursion": { - "modified": "2020-03-12T19:44:33.119Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible": { + "modified": "2020-10-15T22:19:18.378Z", "contributors": [ - "Kaben", - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Undeclared_var": { - "modified": "2020-03-12T19:44:33.741Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys": { + "modified": "2020-10-15T22:19:19.765Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Undefined_prop": { - "modified": "2020-03-12T19:44:33.728Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions": { + "modified": "2020-10-15T22:19:30.244Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Unexpected_token": { - "modified": "2020-03-12T19:44:11.696Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/set": { + "modified": "2020-10-15T22:19:35.877Z", "contributors": [ - "ChangSungsil" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Unexpected_type": { - "modified": "2020-03-12T19:45:33.484Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf": { + "modified": "2020-10-15T22:19:38.264Z", "contributors": [ - "yura-Choi" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { - "modified": "2020-03-12T19:48:26.448Z", + "Web/JavaScript/Reference/Global_Objects/RegExp": { + "modified": "2020-10-15T21:38:50.461Z", "contributors": [ - "vividhee" + "alattalatta", + "EatChangmyeong", + "zerodice0", + "momoci99", + "hanabiai", + "Latera", + "tmxkwkfgka" ] }, - "Web/JavaScript/Reference/Errors/is_not_iterable": { - "modified": "2020-03-12T19:48:24.798Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { + "modified": "2020-10-15T22:32:38.454Z", "contributors": [ - "cs09g" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-10-15T21:37:58.963Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/exec": { + "modified": "2020-10-15T21:47:37.584Z", "contributors": [ - "harryjjun", - "Dailyscat", - "limkukhyun", "alattalatta", - "Netaras", - "sftblw" + "yumi2011", + "dale0713" ] }, - "Web/JavaScript/Reference/Functions/Default_parameters": { - "modified": "2020-10-15T21:45:58.179Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/n": { + "modified": "2020-10-15T22:18:51.448Z", "contributors": [ - "honggaruy", - "gbyman", - "kbsbroad", - "Netaras" + "dragmove" ] }, - "Web/JavaScript/Reference/Functions/Method_definitions": { - "modified": "2020-03-12T19:44:05.728Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/test": { + "modified": "2020-10-15T22:32:39.804Z", "contributors": [ - "kdex", - "Netaras" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/arguments": { - "modified": "2020-10-15T21:38:47.452Z", + "Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2020-10-15T21:48:48.879Z", "contributors": [ "alattalatta", + "RingoKim", + "loslch", + "dale0713", + "NessunKim", "Netaras", - "tmxkwkfgka" + "vsemozhetbyt" ] }, - "Web/JavaScript/Reference/Functions/arguments/@@iterator": { - "modified": "2020-10-15T22:12:01.387Z", + "Web/JavaScript/Reference/Global_Objects/Set/add": { + "modified": "2020-10-15T22:11:36.093Z", "contributors": [ "alattalatta", - "vividhee" + "chan337337" ] }, - "Web/JavaScript/Reference/Functions/arguments/callee": { - "modified": "2020-03-12T19:44:03.622Z", + "Web/JavaScript/Reference/Global_Objects/Set/clear": { + "modified": "2020-10-15T22:15:10.272Z", "contributors": [ - "Netaras" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/arguments/length": { - "modified": "2020-10-15T21:48:18.638Z", + "Web/JavaScript/Reference/Global_Objects/Set/delete": { + "modified": "2020-10-15T22:15:14.997Z", "contributors": [ - "alattalatta", - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/get": { - "modified": "2020-10-15T21:48:28.043Z", + "Web/JavaScript/Reference/Global_Objects/Set/forEach": { + "modified": "2020-10-15T22:15:19.403Z", "contributors": [ - "SSJ-unclear", - "DGURI", - "NessunKim" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/rest_parameters": { - "modified": "2020-10-15T21:46:03.879Z", + "Web/JavaScript/Reference/Global_Objects/Set/has": { + "modified": "2020-10-15T22:15:10.010Z", "contributors": [ - "Geun-Hyung_Kim", - "cs09g", - "Netaras" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/set": { - "modified": "2020-03-12T19:44:54.074Z", + "Web/JavaScript/Reference/Global_Objects/Set/size": { + "modified": "2020-10-15T22:15:09.484Z", "contributors": [ - "daehyoung" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/애로우_펑션": { - "modified": "2020-10-15T21:39:57.499Z", + "Web/JavaScript/Reference/Global_Objects/Set/values": { + "modified": "2020-10-15T22:18:44.617Z", "contributors": [ - "honggaruy", - "Vimming", - "songdoing", - "gbyman", - "yonggoo.noh", - "jjangga0214", - "geunhyung", - "limkukhyun", - "kangsan_Chang", - "nyaawlsh", - "daehyoung", - "Geun-Hyung_Kim", - "Netaras", - "preco21", - "chiyodad", - "Jeeeyul" + "VictorTaekLim" ] }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-08-05T00:51:40.442Z", + "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { + "modified": "2020-10-15T21:58:45.362Z", "contributors": [ - "alattalatta", - "loslch", - "skyfly33", - "Netaras", "cs09g", - "Rachel0211", - "teoli" + "ENvironmentSet" ] }, - "Web/JavaScript/Reference/Global_Objects/AggregateError": { - "modified": "2020-11-15T04:22:22.892Z", + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T21:22:11.475Z", "contributors": [ - "Donghoon" + "alattalatta", + "seungha-kim", + "pusanbear", + "teoli", + "MoGi" ] }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:18:12.731Z", + "Web/JavaScript/Reference/Global_Objects/String/Trim": { + "modified": "2020-10-15T21:58:30.718Z", "contributors": [ - "kwangdosa", "alattalatta", - "wbamberg", - "limkukhyun", - "sominlee", - "HanuLatte", - "joeunha", - "maytree", - "VBChunguk", - "JaegangLee", - "teoli", - "taggon", - "Aeuiop" + "dasebee" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { - "modified": "2020-10-15T21:43:02.789Z", + "Web/JavaScript/Reference/Global_Objects/String/charAt": { + "modified": "2020-10-15T21:45:37.005Z", "contributors": [ + "bohyun611kim", "alattalatta", - "KisukPark", - "hwangtan", - "." + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@species": { - "modified": "2020-10-15T21:50:41.909Z", + "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": { + "modified": "2020-10-15T21:48:27.284Z", "contributors": [ "alattalatta", - "KisukPark", - "imskojs" + "dale0713" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { - "modified": "2020-10-15T21:50:41.776Z", + "Web/JavaScript/Reference/Global_Objects/String/concat": { + "modified": "2020-10-15T21:45:37.865Z", "contributors": [ + "yami03", + "seulgiyoon", "alattalatta", - "zziuni", - "imskojs" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/Array": { - "modified": "2020-10-15T22:26:58.481Z", + "Web/JavaScript/Reference/Global_Objects/String/endsWith": { + "modified": "2020-04-21T05:33:31.555Z", + "contributors": [ + "yami03", + "pusanbear" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { + "modified": "2020-10-15T22:13:58.437Z", "contributors": [ "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { - "modified": "2020-10-15T21:41:30.424Z", + "Web/JavaScript/Reference/Global_Objects/String/includes": { + "modified": "2020-10-15T21:45:37.765Z", "contributors": [ "alattalatta", - "dolmoon", - "KisukPark", - "ieay4a", - "Violetdusk", - "Netaras", - "preco21" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { - "modified": "2020-10-15T21:50:39.970Z", + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2020-10-15T21:45:49.888Z", "contributors": [ "alattalatta", - "KisukPark", - "zziuni", - "imskojs" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2020-10-15T21:38:49.144Z", + "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { + "modified": "2020-10-15T21:45:54.942Z", "contributors": [ - "RamiTae", - "bohyun611kim", "alattalatta", - "KisukPark", - "VBChunguk", - "tmxkwkfgka" + "jihunsuh", + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { - "modified": "2020-10-15T21:50:40.123Z", + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2020-10-15T21:45:30.378Z", "contributors": [ "alattalatta", - "KisukPark", - "withdude2", - "imskojs" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/entries": { - "modified": "2020-10-15T21:41:29.970Z", + "Web/JavaScript/Reference/Global_Objects/String/localeCompare": { + "modified": "2020-10-15T21:57:59.121Z", "contributors": [ - "honggaruy", - "alattalatta", - "KisukPark", - "SphinxKnight", - "keypointer", - "kdex", - "preco21" + "bboding", + "s2s2kim" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/every": { - "modified": "2020-10-15T21:41:30.327Z", + "Web/JavaScript/Reference/Global_Objects/String/match": { + "modified": "2020-10-15T22:06:19.802Z", "contributors": [ - "alattalatta", - "KisukPark", - "limkukhyun", - "Netaras", - "Kaben", - "preco21" + "Donghoon", + "chaewonkong", + "Yonnani" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/fill": { - "modified": "2020-10-15T21:36:43.146Z", + "Web/JavaScript/Reference/Global_Objects/String/normalize": { + "modified": "2020-10-15T22:16:57.680Z", "contributors": [ - "alattalatta", - "KisukPark", - "SphinxKnight", - "withdude2", - "ligeek" + "lifeisnovel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/filter": { - "modified": "2020-10-15T21:41:17.863Z", + "Web/JavaScript/Reference/Global_Objects/String/padEnd": { + "modified": "2020-10-15T22:08:41.887Z", "contributors": [ - "RamiTae", - "alattalatta", - "bohyun611kim", - "pineoc", - "jewon", - "limkukhyun", - "KisukPark", - "Saem", - "Netaras", - "rageboom", - "Yunhong-Min", - "keypointer" + "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T21:48:55.826Z", + "Web/JavaScript/Reference/Global_Objects/String/padStart": { + "modified": "2020-10-15T22:08:41.615Z", "contributors": [ - "alattalatta", - "QooQooDass", - "KisukPark", - "sonjh02", - "meganson", - "yuntaek", - "Jaysok" + "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { - "modified": "2020-10-15T21:50:40.640Z", + "Web/JavaScript/Reference/Global_Objects/String/repeat": { + "modified": "2020-10-15T21:56:14.890Z", "contributors": [ - "hyoni0817", - "Hyeok_Jo", "alattalatta", - "KisukPark", - "sonjh02", - "imskojs" + "wicksome" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/flat": { - "modified": "2020-10-15T22:08:27.831Z", + "Web/JavaScript/Reference/Global_Objects/String/replace": { + "modified": "2020-10-15T21:48:26.744Z", "contributors": [ + "limkukhyun", + "yonggoo.noh", "alattalatta", - "moonformeli", - "cs09g" + "ejay0811", + "rlaxognsk", + "dale0713" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { - "modified": "2020-10-15T22:08:28.496Z", + "Web/JavaScript/Reference/Global_Objects/String/search": { + "modified": "2020-10-15T22:10:00.509Z", "contributors": [ - "DaegiKim", - "24seconds", - "moonformeli", - "alattalatta", - "cs09g" + "Parcovia" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T21:47:39.068Z", + "Web/JavaScript/Reference/Global_Objects/String/slice": { + "modified": "2020-10-15T21:53:59.719Z", "contributors": [ - "alattalatta", - "RootyJin", - "jeongchaeuk", - "Parcovia", + "bigsaigon333", "limkukhyun", - "KisukPark", - "Netaras" + "KaylaKwon", + "enchantor", + "REDO", + "laranhee", + "AlexMin" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/from": { - "modified": "2020-10-15T21:37:56.478Z", + "Web/JavaScript/Reference/Global_Objects/String/split": { + "modified": "2020-10-15T22:14:46.442Z", "contributors": [ + "EatChangmyeong", "alattalatta", - "Violet-Bora-Lee", - "KisukPark", - "SphinxKnight", - "디토", - "ligeek" + "yuntaek" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T21:50:39.977Z", + "Web/JavaScript/Reference/Global_Objects/String/startsWith": { + "modified": "2020-10-15T21:47:53.784Z", "contributors": [ - "IMHOJEONG", "alattalatta", - "KisukPark", - "KlausLee", - "khsiea", - "imskojs" + "skylar.kim" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { - "modified": "2020-10-15T21:50:40.883Z", + "Web/JavaScript/Reference/Global_Objects/String/substr": { + "modified": "2020-10-15T21:47:08.634Z", "contributors": [ - "biniruu", - "naraeim", "alattalatta", - "KisukPark", - "imskojs" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/isArray": { - "modified": "2020-10-15T21:41:14.689Z", + "Web/JavaScript/Reference/Global_Objects/String/substring": { + "modified": "2020-10-15T22:18:53.078Z", "contributors": [ - "alattalatta", - "KisukPark", - "KaironMoon", - "keypointer", - "johngrib" + "Saem", + "bohyun611kim" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T21:41:15.362Z", + "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { + "modified": "2020-10-15T21:57:11.550Z", "contributors": [ - "shj9432", "alattalatta", - "KisukPark", - "VBChunguk" + "swtpumpkin" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/keys": { - "modified": "2020-10-15T21:41:30.210Z", + "Web/JavaScript/Reference/Global_Objects/String/toSource": { + "modified": "2020-10-15T22:02:06.022Z", "contributors": [ - "alattalatta", - "KisukPark", - "SphinxKnight", - "preco21" + "teoli", + "ejay0811" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { - "modified": "2020-10-15T21:50:40.016Z", + "Web/JavaScript/Reference/Global_Objects/String/toString": { + "modified": "2020-10-15T22:27:29.788Z", "contributors": [ - "alattalatta", - "KisukPark", - "zziuni", - "imskojs" + "rjsdnql123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/length": { - "modified": "2020-10-15T21:41:28.876Z", + "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { + "modified": "2020-10-15T21:55:16.088Z", "contributors": [ "alattalatta", - "preco21" + "swtpumpkin", + "seokju-na" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T21:36:42.699Z", + "Web/JavaScript/Reference/Global_Objects/String/valueOf": { + "modified": "2020-10-15T22:25:44.637Z", "contributors": [ - "seulgiyoon", - "alattalatta", - "KisukPark", - "sshplendid", - "selfiens", - "the1900", - "reoim", - "Yunhong-Min", - "sominlee", - "Rokt33r", - "epicsaga" + "hyoni0817" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/of": { - "modified": "2020-10-15T21:36:39.776Z", + "Web/JavaScript/Reference/Global_Objects/Symbol": { + "modified": "2020-10-15T21:40:09.882Z", "contributors": [ - "alattalatta", - "KisukPark", - "limkukhyun", - "ligeek" + "dolmoon", + "SphinxKnight", + "HyunSeob", + "maytree" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T21:47:37.008Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/for": { + "modified": "2019-03-23T22:16:10.868Z", "contributors": [ - "alattalatta", - "KisukPark", - "Netaras" + "Hou" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/push": { - "modified": "2020-10-15T21:39:22.145Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": { + "modified": "2020-10-15T22:00:39.078Z", "contributors": [ - "alattalatta", - "KisukPark", - "dsma73", - "Hoto-Cocoa", - "nohsenc", - "dewey94esb" + "limkukhyun", + "BANIP" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2020-10-15T21:41:28.622Z", + "Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2020-10-15T21:48:16.048Z", "contributors": [ "alattalatta", - "KisukPark", - "preco21" + "2oosoo", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/shift": { - "modified": "2020-10-15T21:38:19.399Z", + "Web/JavaScript/Reference/Global_Objects/TypeError": { + "modified": "2020-10-15T21:38:37.821Z", "contributors": [ "alattalatta", - "KisukPark", - "DeusNonEst", - "FlowerCoing" + "kirrie", + "JiminP" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/slice": { - "modified": "2020-10-15T21:48:35.659Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray": { + "modified": "2019-06-18T04:56:00.166Z", "contributors": [ - "alattalatta", - "Georgee-lee", - "KisukPark", - "cs09g", - "AlexMin", - "imskojs", - "dale0713" + "kooljay82", + "Netaras", + "Khai96_" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/some": { - "modified": "2020-10-15T21:47:53.706Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": { + "modified": "2019-03-23T22:30:48.269Z", "contributors": [ - "kimkyeseung", - "alattalatta", - "KisukPark", - "kyunooh", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/sort": { - "modified": "2020-10-15T21:50:40.023Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": { + "modified": "2020-10-15T21:47:35.788Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": { + "modified": "2019-03-23T22:30:15.273Z", "contributors": [ - "IvannKim", - "yami03", - "alattalatta", - "KisukPark", - "dsma73", - "seokju-na", - "apple77y", - "imskojs" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/splice": { - "modified": "2020-10-15T21:37:48.347Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength": { + "modified": "2020-10-15T21:47:38.660Z", "contributors": [ "alattalatta", - "selfiens", - "KisukPark", - "wonhoKim", - "laranhee", - "Jei", - "Rokt33r" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { - "modified": "2020-10-15T21:47:37.995Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset": { + "modified": "2020-10-15T21:47:35.902Z", "contributors": [ "alattalatta", - "KisukPark", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toSource": { - "modified": "2020-10-15T22:00:47.617Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/fill": { + "modified": "2020-10-15T21:39:40.326Z", "contributors": [ "alattalatta", - "teoli", - "KisukPark", - "sonjh02" + "Hmmim" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toString": { - "modified": "2020-10-15T21:47:38.270Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf": { + "modified": "2020-10-15T22:21:44.673Z", "contributors": [ - "alattalatta", - "KisukPark", - "Netaras" + "naraeim", + "SphinxKnight" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/unshift": { - "modified": "2020-10-15T21:41:30.420Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/length": { + "modified": "2020-10-15T21:47:35.796Z", "contributors": [ "alattalatta", - "ChanwheKim", - "KisukPark", - "jisooyu", - "maytree" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/values": { - "modified": "2020-10-15T21:41:31.189Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/name": { + "modified": "2020-10-15T21:47:34.390Z", "contributors": [ "alattalatta", - "KisukPark", - "SphinxKnight", - "preco21" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2020-10-15T21:31:34.913Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/of": { + "modified": "2020-10-15T22:03:56.631Z", "contributors": [ - "alattalatta", - "chaewonkong", - "niceilm", - "teoli", - "JiminP", - "yuby" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer": { - "modified": "2020-10-15T22:27:33.561Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/reverse": { + "modified": "2020-10-15T21:47:33.171Z", "contributors": [ - "alattalatta" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { - "modified": "2020-10-15T22:27:34.550Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/set": { + "modified": "2020-10-15T21:47:35.773Z", "contributors": [ - "alattalatta" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { - "modified": "2020-10-15T22:27:32.623Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/slice": { + "modified": "2019-03-23T22:30:24.203Z", "contributors": [ - "alattalatta" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { - "modified": "2020-10-15T22:27:35.359Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/some": { + "modified": "2020-10-15T21:47:37.645Z", "contributors": [ - "alattalatta" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { - "modified": "2020-10-15T21:52:51.606Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/sort": { + "modified": "2019-03-23T22:30:47.108Z", "contributors": [ - "ibizcox", - "jooddang", - "limkukhyun", - "ChanghwaLee" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics": { - "modified": "2019-03-23T22:18:58.236Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/values": { + "modified": "2019-03-23T22:30:45.463Z", "contributors": [ - "RyuJin" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt": { - "modified": "2020-10-15T22:12:37.942Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap": { + "modified": "2019-03-23T22:27:55.353Z", "contributors": [ - "alattalatta" + "Netaras", + "billybraga" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/BigInt": { - "modified": "2020-10-15T22:25:40.633Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap/delete": { + "modified": "2020-10-15T22:04:27.439Z", "contributors": [ - "alattalatta" + "alattalatta", + "limkukhyun", + "Seok.Heo" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/prototype": { - "modified": "2020-10-15T22:12:31.982Z", + "Web/JavaScript/Reference/Global_Objects/WeakSet": { + "modified": "2020-10-15T21:48:47.357Z", "contributors": [ - "alattalatta" + "alattalatta", + "Netaras", + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T21:14:40.981Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly": { + "modified": "2020-10-15T21:53:02.555Z", "contributors": [ - "alattalatta", - "wbamberg", - "teoli", - "Gilchris" + "limkukhyun", + "0xABCDEF" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/Boolean": { - "modified": "2020-10-15T22:27:46.206Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError": { + "modified": "2020-10-15T22:07:58.077Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/prototype": { - "modified": "2020-10-15T21:43:28.882Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": { + "modified": "2020-10-15T22:08:05.155Z", "contributors": [ - "alattalatta", - "noritersand" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { - "modified": "2020-10-15T22:11:53.952Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance": { + "modified": "2020-10-15T22:07:55.815Z", "contributors": [ + "limkukhyun", "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { - "modified": "2020-10-15T22:11:54.035Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError": { + "modified": "2020-10-15T22:08:04.793Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView": { - "modified": "2020-10-15T21:42:40.867Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory": { + "modified": "2020-10-15T22:08:00.915Z", "contributors": [ - "alattalatta", - "KKang", - "ksyeng" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/DataView": { - "modified": "2020-10-15T22:27:25.683Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Module": { + "modified": "2020-10-15T22:07:56.280Z", "contributors": [ + "limkukhyun", "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Date": { - "modified": "2020-10-15T21:18:35.817Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError": { + "modified": "2020-10-15T22:08:08.186Z", "contributors": [ - "alattalatta", - "wbamberg", - "dsma73", - "Shin-JaeHeon", - "seungha-kim", - "seokju-na", - "teoli", - "taggon" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/UTC": { - "modified": "2020-10-15T21:50:44.435Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Table": { + "modified": "2020-10-15T22:07:58.705Z", "contributors": [ - "alattalatta", - "inpyoj", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getDate": { - "modified": "2020-10-15T21:50:41.680Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { + "modified": "2020-10-15T22:07:56.654Z", "contributors": [ - "alattalatta", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getDay": { - "modified": "2020-10-15T21:50:41.587Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { + "modified": "2020-10-15T22:07:56.654Z", "contributors": [ - "alattalatta", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { - "modified": "2020-10-15T21:50:41.498Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate": { + "modified": "2020-10-15T22:07:57.168Z", "contributors": [ - "alattalatta", - "imskojs" + "fnwinter", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getHours": { - "modified": "2020-10-15T21:50:41.097Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming": { + "modified": "2020-10-15T22:08:08.189Z", "contributors": [ - "alattalatta", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { - "modified": "2020-10-15T21:50:43.734Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/validate": { + "modified": "2020-10-15T22:08:00.982Z", "contributors": [ - "alattalatta", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { - "modified": "2020-10-15T21:50:41.182Z", + "Web/JavaScript/Reference/Global_Objects/decodeURI": { + "modified": "2020-10-15T22:01:55.624Z", "contributors": [ - "alattalatta", - "imskojs" + "jeoyoho" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { - "modified": "2020-10-15T21:50:42.376Z", + "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { + "modified": "2020-10-15T21:48:49.294Z", "contributors": [ "alattalatta", - "imskojs" + "jeoyoho", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { - "modified": "2020-10-15T21:50:44.137Z", + "Web/JavaScript/Reference/Global_Objects/encodeURI": { + "modified": "2020-10-15T22:02:01.889Z", "contributors": [ "alattalatta", - "imskojs" + "jeoyoho" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getTime": { - "modified": "2019-03-23T22:23:15.546Z", + "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { + "modified": "2020-10-15T21:29:14.784Z", "contributors": [ - "hyeonseok", - "imskojs" + "alattalatta", + "SphinxKnight", + "under_09" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { - "modified": "2019-03-23T22:23:13.145Z", + "Web/JavaScript/Reference/Global_Objects/eval": { + "modified": "2020-11-14T12:46:31.739Z", "contributors": [ - "imskojs" + "cog25", + "EatChangmyeong", + "alattalatta", + "LOG91", + "goeo1066", + "desty", + "nicesh" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { - "modified": "2019-03-23T22:23:20.825Z", + "Web/JavaScript/Reference/Global_Objects/globalThis": { + "modified": "2020-10-15T22:14:31.677Z", "contributors": [ - "imskojs" + "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { - "modified": "2019-03-23T22:23:16.136Z", + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-10-15T21:44:39.927Z", "contributors": [ - "imskojs" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { - "modified": "2019-03-23T22:23:15.265Z", + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-10-15T21:46:27.577Z", "contributors": [ - "imskojs" + "alattalatta", + "Parcovia", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { - "modified": "2019-03-23T22:23:09.557Z", + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2020-10-15T21:40:32.117Z", "contributors": [ - "imskojs" + "alattalatta", + "nicesh" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { - "modified": "2019-03-23T22:23:07.710Z", + "Web/JavaScript/Reference/Global_Objects/parseFloat": { + "modified": "2020-10-15T21:58:14.258Z", "contributors": [ - "imskojs" + "alattalatta", + "inkyungkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { - "modified": "2019-03-23T22:23:18.026Z", + "Web/JavaScript/Reference/Global_Objects/parseInt": { + "modified": "2020-10-15T21:48:49.061Z", "contributors": [ - "imskojs" + "bigsaigon333", + "alattalatta", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { - "modified": "2019-03-23T22:23:10.004Z", + "Web/JavaScript/Reference/Global_Objects/undefined": { + "modified": "2020-10-15T21:40:31.421Z", "contributors": [ - "imskojs" + "alattalatta", + "nicesh" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { - "modified": "2019-03-23T22:23:16.588Z", + "Web/JavaScript/Reference/Global_Objects/uneval": { + "modified": "2020-10-15T21:52:46.647Z", "contributors": [ - "imskojs" + "alattalatta", + "teoli", + "Perlmint" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/now": { - "modified": "2020-12-13T11:19:39.873Z", + "Web/JavaScript/Reference/Iteration_protocols": { + "modified": "2020-03-12T19:44:08.276Z", "contributors": [ - "hansolpp", - "g6ling", - "dale0713" + "Snark", + "dragmove", + "echo304" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/parse": { - "modified": "2019-03-23T22:23:12.000Z", + "Web/JavaScript/Reference/Lexical_grammar": { + "modified": "2020-10-15T21:47:17.603Z", "contributors": [ - "sung-ugje", - "galcyurio", - "imskojs" + "honggaruy", + "alattalatta", + "softweaver", + "Roomination", + "paranbaram" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/prototype": { - "modified": "2020-10-15T21:34:44.080Z", + "Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:15:29.282Z", "contributors": [ + "limkukhyun", + "Violet-Bora-Lee", "alattalatta", - "Cho.Eun", - "ByungChangCha", - "teoli" + "haeguri", + "Netaras", + "teoli", + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setDate": { - "modified": "2019-03-23T22:23:20.668Z", + "Web/JavaScript/Reference/Operators/Addition": { + "modified": "2020-10-15T22:34:18.983Z", "contributors": [ - "swtpumpkin", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { - "modified": "2019-03-23T22:23:19.509Z", + "Web/JavaScript/Reference/Operators/Comma_Operator": { + "modified": "2020-10-15T21:48:31.441Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta", + "hoony" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setHours": { - "modified": "2019-03-23T22:23:20.495Z", + "Web/JavaScript/Reference/Operators/Conditional_Operator": { + "modified": "2020-10-15T21:39:25.018Z", "contributors": [ - "zziuni", - "imskojs" + "pyjun01", + "alattalatta", + "limkukhyun", + "taisuk", + "reoim", + "epicsaga" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { - "modified": "2019-03-23T22:23:19.297Z", + "Web/JavaScript/Reference/Operators/Destructuring_assignment": { + "modified": "2020-10-15T21:45:50.516Z", "contributors": [ - "imskojs" + "alattalatta", + "corund", + "dolmoon", + "NessunKim", + "kdex", + "faker007", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { - "modified": "2019-03-23T22:23:09.852Z", + "Web/JavaScript/Reference/Operators/Equality": { + "modified": "2020-10-15T22:35:05.143Z", "contributors": [ - "zziuni", - "imskojs" + "junnapark" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { - "modified": "2019-03-23T22:23:18.765Z", + "Web/JavaScript/Reference/Operators/Grouping": { + "modified": "2020-10-15T21:45:49.973Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta", + "SeungYeol", + "seung-yeol" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { - "modified": "2019-03-23T22:23:08.456Z", + "Web/JavaScript/Reference/Operators/Nullish_coalescing_operator": { + "modified": "2020-10-15T22:25:44.809Z", "contributors": [ - "zziuni", - "imskojs" + "ssohymind", + "Jung.Kyu-Hyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setTime": { - "modified": "2019-03-23T22:23:22.849Z", + "Web/JavaScript/Reference/Operators/Object_initializer": { + "modified": "2020-10-15T21:47:08.402Z", "contributors": [ - "imskojs" + "honggaruy", + "callin2", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { - "modified": "2019-03-23T22:23:22.400Z", + "Web/JavaScript/Reference/Operators/Optional_chaining": { + "modified": "2020-10-15T22:25:42.843Z", "contributors": [ - "imskojs" + "Jung.Kyu-Hyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { - "modified": "2019-03-23T22:23:12.168Z", + "Web/JavaScript/Reference/Operators/Pipeline_operator": { + "modified": "2020-10-15T22:15:31.566Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { - "modified": "2019-03-23T22:23:12.991Z", + "Web/JavaScript/Reference/Operators/Property_Accessors": { + "modified": "2020-10-15T21:46:18.602Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta", + "Violet-Bora-Lee", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { - "modified": "2019-03-23T22:23:21.549Z", + "Web/JavaScript/Reference/Operators/Remainder": { + "modified": "2020-10-15T22:35:04.854Z", "contributors": [ - "imskojs" + "junnapark" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { - "modified": "2019-03-23T22:23:11.774Z", + "Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-10-15T22:03:25.315Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta", + "cs09g", + "cnaa97", + "ageofsys" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { - "modified": "2019-03-23T22:23:12.673Z", + "Web/JavaScript/Reference/Operators/async_function": { + "modified": "2020-10-15T21:53:15.087Z", "contributors": [ - "zziuni", - "imskojs" + "ibizcox", + "alattalatta", + "undefcat" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { - "modified": "2019-03-23T22:23:22.693Z", + "Web/JavaScript/Reference/Operators/await": { + "modified": "2020-10-15T21:53:13.195Z", "contributors": [ - "zziuni", - "imskojs" + "rmfpdlxmtidl", + "limkukhyun", + "NessunKim", + "HomoEfficio", + "undefcat" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { - "modified": "2020-10-15T21:50:42.628Z", + "Web/JavaScript/Reference/Operators/class": { + "modified": "2020-10-15T21:46:02.874Z", "contributors": [ + "dsma73", "alattalatta", - "inkyungkim", - "imskojs" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { - "modified": "2020-10-15T22:09:03.975Z", + "Web/JavaScript/Reference/Operators/delete": { + "modified": "2020-10-15T21:56:50.911Z", "contributors": [ - "alattalatta" + "alattalatta", + "itsjiwonpark", + "Hou" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { - "modified": "2020-10-15T22:09:05.629Z", + "Web/JavaScript/Reference/Operators/function": { + "modified": "2020-10-15T21:45:42.250Z", "contributors": [ - "alattalatta" + "dolmoon", + "limkukhyun", + "laranhee", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toString": { - "modified": "2020-10-15T21:56:46.065Z", + "Web/JavaScript/Reference/Operators/function*": { + "modified": "2020-10-15T21:38:18.382Z", "contributors": [ - "alattalatta", - "huseong" + "limkukhyun", + "KSH-code", + "JaehaAhn" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { - "modified": "2020-10-15T22:22:09.213Z", + "Web/JavaScript/Reference/Operators/in": { + "modified": "2020-03-12T19:42:49.608Z", "contributors": [ - "Jihyun_LEE" + "." ] }, - "Web/JavaScript/Reference/Global_Objects/Error": { - "modified": "2020-10-15T21:23:09.336Z", + "Web/JavaScript/Reference/Operators/instanceof": { + "modified": "2020-10-15T21:48:46.760Z", "contributors": [ "alattalatta", - "sunhyung", - "teoli", - "john_jung" + "tg0825", + "dooyou21", + "moolow", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/name": { - "modified": "2020-10-15T22:01:04.562Z", + "Web/JavaScript/Reference/Operators/new": { + "modified": "2020-10-15T21:50:30.370Z", "contributors": [ - "goeo1066" + "alattalatta", + "luke.bae", + "KSH-code", + "daehyoung" ] }, - "Web/JavaScript/Reference/Global_Objects/EvalError": { - "modified": "2020-10-15T21:50:41.406Z", + "Web/JavaScript/Reference/Operators/new.target": { + "modified": "2020-10-15T21:48:09.333Z", "contributors": [ "alattalatta", - "zziuni", - "imskojs" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2020-10-15T21:18:08.765Z", + "Web/JavaScript/Reference/Operators/super": { + "modified": "2020-10-15T21:43:46.088Z", "contributors": [ "alattalatta", - "moolow", - "dolmoon", - "Netaras", - "teoli", - "HunminKim", - "Wafe" + "jeonnoej" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/apply": { - "modified": "2020-10-15T21:36:42.231Z", + "Web/JavaScript/Reference/Operators/this": { + "modified": "2020-10-15T21:16:21.207Z", "contributors": [ - "limsungho02", + "StolenMoments", "cs09g", - "jeongchaeuk", "alattalatta", - "jaewanC", - "bsidesoft" + "utatti", + "huusz", + "teoli", + "eros21c", + "Channy" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/arguments": { - "modified": "2020-10-15T22:04:18.058Z", + "Web/JavaScript/Reference/Operators/typeof": { + "modified": "2020-10-15T21:47:39.354Z", "contributors": [ "Seonghui", - "sunhyun" + "alattalatta", + "dale0713" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/bind": { - "modified": "2020-10-15T21:38:38.554Z", + "Web/JavaScript/Reference/Operators/void": { + "modified": "2020-10-15T21:24:25.804Z", "contributors": [ - "dezcao", - "dae-hwa", "alattalatta", - "limkukhyun", - "AlexMin", - "dale0713", - "joeunha", - "Netaras", - "sftblw", - "zuckay79", - "jjhangu" + "teoli", + "siriz" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/call": { - "modified": "2020-10-15T21:19:34.146Z", + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-03-12T19:43:03.959Z", "contributors": [ - "dasbeerboot", - "paikwiki", - "Netaras", - "stitchworkingonthecode", - "ligeek", - "jjhangu", - "teoli", - "ByungChangYoo", - "Jeado.Ko" + "coolengineer", + "ByeongGi", + "2oosoo", + "Yunhong-Min", + "preco21" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/length": { - "modified": "2020-10-15T21:36:48.277Z", + "Web/JavaScript/Reference/Operators/yield*": { + "modified": "2020-10-15T21:41:31.854Z", "contributors": [ "alattalatta", - "Netaras", - "bsidesoft" + "hanmomhanda", + "preco21" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/name": { - "modified": "2019-03-23T22:54:09.088Z", + "Web/JavaScript/Reference/Statements": { + "modified": "2020-10-15T21:26:12.348Z", "contributors": [ + "alattalatta", + "naduhy2", "Netaras", - "bsidesoft" + "teoli", + "Sheppy" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/toSource": { - "modified": "2020-10-15T22:15:36.685Z", + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-10-15T22:04:17.983Z", "contributors": [ - "cs09g" + "alattalatta", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator": { - "modified": "2019-10-07T03:49:08.925Z", + "Web/JavaScript/Reference/Statements/async_function": { + "modified": "2020-10-15T21:51:55.526Z", "contributors": [ - "stegano", - "Latera", - "loslch", - "kdex", - "preco21" + "MoonHyuk", + "jhoijune", + "DeadIntegral", + "limkukhyun", + "Konan" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/next": { - "modified": "2019-03-23T22:29:43.014Z", + "Web/JavaScript/Reference/Statements/block": { + "modified": "2020-10-15T21:50:27.290Z", "contributors": [ - "echo304" + "alattalatta", + "daehyoung" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/return": { - "modified": "2019-03-23T22:29:41.659Z", + "Web/JavaScript/Reference/Statements/break": { + "modified": "2020-10-15T21:44:31.572Z", "contributors": [ - "echo304" + "alattalatta", + "jeehyukwon", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/throw": { - "modified": "2020-10-15T21:47:52.236Z", + "Web/JavaScript/Reference/Statements/class": { + "modified": "2020-10-15T21:46:03.105Z", "contributors": [ "alattalatta", - "echo304" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { - "modified": "2020-10-15T21:43:23.835Z", + "Web/JavaScript/Reference/Statements/const": { + "modified": "2020-10-15T21:38:50.829Z", "contributors": [ "alattalatta", - "HyunMook", - "AHNJAEHA" + "warnee", + "maxtortime", + "kdex", + "Netaras", + "kuil09" ] }, - "Web/JavaScript/Reference/Global_Objects/Infinity": { - "modified": "2020-10-15T21:44:39.467Z", + "Web/JavaScript/Reference/Statements/continue": { + "modified": "2020-10-15T22:04:27.151Z", "contributors": [ "alattalatta", - "Netaras" + "SSJ-unclear", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/InternalError": { - "modified": "2019-03-18T21:46:44.351Z", + "Web/JavaScript/Reference/Statements/debugger": { + "modified": "2020-10-15T22:04:18.665Z", "contributors": [ - "teoli", - "magnoliaa" + "alattalatta", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/InternalError/prototype": { - "modified": "2019-03-23T22:28:33.047Z", + "Web/JavaScript/Reference/Statements/do...while": { + "modified": "2020-10-15T22:30:37.801Z", "contributors": [ - "teoli", - "magnoliaa" + "jyman7811" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl": { - "modified": "2020-10-15T21:56:50.642Z", + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-10-15T21:41:49.561Z", "contributors": [ + "copyx", "alattalatta", - "hrg921" + "yonggoo.noh", + "LeeJunyeol", + "umbria", + "haydnhkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { - "modified": "2020-10-15T22:07:32.322Z", + "Web/JavaScript/Reference/Statements/for": { + "modified": "2020-10-15T21:46:03.615Z", "contributors": [ - "fscholz", "alattalatta", - "SSJ-unclear" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype": { - "modified": "2020-10-15T22:22:06.369Z", - "contributors": [ - "fscholz", - "alattalatta" + "SeungYeol" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Locale": { - "modified": "2020-10-15T22:25:03.900Z", + "Web/JavaScript/Reference/Statements/for-await...of": { + "modified": "2020-10-15T22:27:58.512Z", "contributors": [ - "fscholz", - "sffc" + "composite" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Locale/language": { - "modified": "2020-10-15T22:25:02.965Z", + "Web/JavaScript/Reference/Statements/for...in": { + "modified": "2020-10-15T21:26:08.013Z", "contributors": [ - "fscholz", - "limkukhyun" + "Sunmin0520", + "limkukhyun", + "teoli", + "Androidbee" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { - "modified": "2020-10-15T22:08:58.601Z", + "Web/JavaScript/Reference/Statements/for...of": { + "modified": "2020-10-15T21:36:35.059Z", "contributors": [ - "fscholz", + "jacob17", "alattalatta", - "SDSkyKlouD", - "SSJ-unclear" + "Netaras", + "ligeek" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype": { - "modified": "2020-10-15T22:21:51.361Z", + "Web/JavaScript/Reference/Statements/function": { + "modified": "2020-10-15T21:45:43.150Z", "contributors": [ - "fscholz", - "alattalatta" + "alattalatta", + "dolmoon", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON": { - "modified": "2020-10-15T21:43:51.602Z", + "Web/JavaScript/Reference/Statements/function*": { + "modified": "2020-10-15T21:38:18.568Z", "contributors": [ "alattalatta", - "Parcovia", - "goeo1066", - "Netaras", - "MexieAndCo" + "SphinxKnight", + "silmari", + "kdex", + "resoliwan", + "KisukPark", + "AHNJAEHA", + "preco21", + "JaehaAhn" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON/parse": { - "modified": "2020-10-15T21:44:14.822Z", + "Web/JavaScript/Reference/Statements/if...else": { + "modified": "2020-10-15T21:46:05.432Z", "contributors": [ + "yami03", "alattalatta", "Parcovia", - "subasuba" + "Jungmin" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { - "modified": "2020-11-10T21:46:18.524Z", + "Web/JavaScript/Reference/Statements/import": { + "modified": "2020-10-15T21:39:54.342Z", "contributors": [ - "Ohora", "alattalatta", - "churow", - "boyzgun", - "joshua1988", - "maytree", - "supermanWannaBe" + "hwshim", + "haydnhkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T21:50:09.238Z", + "Web/JavaScript/Reference/Statements/label": { + "modified": "2020-03-12T19:45:32.505Z", "contributors": [ - "Chloe-HyunJoo", - "alattalatta", - "younghoh", - "KaironMoon", - "echo304", - "dragmove" + "wafersroom" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { - "modified": "2020-10-15T22:04:19.848Z", + "Web/JavaScript/Reference/Statements/let": { + "modified": "2020-10-15T21:40:35.318Z", "contributors": [ - "Seok.Heo" + "cjacking3", + "SeonHyungJo", + "Isitea", + "RingoKim" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/Map": { - "modified": "2020-10-15T22:26:33.491Z", + "Web/JavaScript/Reference/Statements/return": { + "modified": "2020-10-15T21:50:13.127Z", "contributors": [ - "alattalatta" + "alattalatta", + "2oosoo", + "Diana_" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/clear": { - "modified": "2020-10-15T22:09:01.449Z", + "Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-10-15T21:49:53.296Z", "contributors": [ - "alattalatta" + "chimimode", + "ByeongGi", + "nidev" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/delete": { - "modified": "2020-10-15T22:09:03.155Z", + "Web/JavaScript/Reference/Statements/throw": { + "modified": "2020-10-15T22:04:25.321Z", "contributors": [ - "alattalatta" + "SSJ-unclear", + "hongnakyung" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/entries": { - "modified": "2020-10-15T22:09:02.936Z", + "Web/JavaScript/Reference/Statements/try...catch": { + "modified": "2020-10-15T21:40:10.256Z", "contributors": [ - "alattalatta" + "limkukhyun", + "deltakor1234", + "SSJ-unclear", + "pianorange", + "epicsaga" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/forEach": { - "modified": "2020-10-15T22:20:31.940Z", + "Web/JavaScript/Reference/Statements/var": { + "modified": "2020-10-15T21:42:33.307Z", "contributors": [ - "JaeWorld" + "alattalatta", + "naduhy2", + "jaeminkim87", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/get": { - "modified": "2020-10-15T22:15:40.628Z", + "Web/JavaScript/Reference/Statements/while": { + "modified": "2020-03-12T19:45:49.250Z", "contributors": [ - "alattalatta" + "galcyurio", + "ChanghwaLee" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/has": { - "modified": "2020-10-15T22:15:44.379Z", + "Web/JavaScript/Reference/Statements/with": { + "modified": "2020-10-15T22:07:40.562Z", "contributors": [ - "alattalatta" + "SSJ-unclear" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/prototype": { - "modified": "2020-10-15T21:55:20.178Z", + "Web/JavaScript/Reference/Strict_mode": { + "modified": "2020-06-29T00:30:58.676Z", "contributors": [ + "ranhyegg", + "genzuby", + "Kim1Jun", + "cs09g", "alattalatta", - "echo304" + "geunhyung", + "limkukhyun", + "dsma73", + "cecilia.cho", + "Minsoo_Kim", + "laranhee", + "KSH-code", + "imskojs", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/set": { - "modified": "2020-10-15T22:15:44.384Z", + "Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode": { + "modified": "2020-03-12T19:48:28.686Z", "contributors": [ - "alattalatta" + "SeonHyungJo" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/size": { - "modified": "2020-10-15T22:04:26.274Z", + "Web/JavaScript/Reference/Template_literals": { + "modified": "2020-10-15T21:47:14.004Z", "contributors": [ - "Gren", - "Seok.Heo" + "hjleesm", + "rev1c0sm0s", + "limkukhyun", + "springday1023", + "kbsbroad", + "rlaxognsk", + "dragmove" ] }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2020-10-15T21:38:50.083Z", + "Web/JavaScript/Reference/Trailing_commas": { + "modified": "2020-11-24T03:08:45.215Z", "contributors": [ - "alattalatta", - "kimkyeseung", - "ejay0811", - "bombinari", - "imskojs", - "dale0713", - "fscholz" + "bckim9489", + "EatChangmyeong", + "samee" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/E": { - "modified": "2020-10-15T21:56:48.942Z", + "Web/JavaScript/Typed_arrays": { + "modified": "2020-03-12T19:44:00.798Z", "contributors": [ - "alattalatta", - "mantra78" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LN10": { - "modified": "2020-10-15T22:12:27.389Z", + "Web/Manifest": { + "modified": "2020-10-15T22:32:27.672Z", "contributors": [ "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LN2": { - "modified": "2020-10-15T22:12:33.707Z", + "Web/MathML": { + "modified": "2020-10-15T21:24:14.563Z", "contributors": [ - "alattalatta" + "alattalatta", + "fred.wang", + "hyeonseok", + "narae_lee" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { - "modified": "2020-10-15T21:45:43.847Z", + "Web/Media": { + "modified": "2019-07-04T01:00:37.497Z", "contributors": [ - "alattalatta", - "SeungYeol", - "seung-yeol" + "developer19899" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { - "modified": "2020-10-15T22:12:28.658Z", + "Web/Media/Autoplay_guide": { + "modified": "2019-09-17T06:49:59.371Z", "contributors": [ - "alattalatta" + "ahnzaz" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/PI": { - "modified": "2020-10-15T21:57:11.130Z", + "Web/Media/Formats": { + "modified": "2019-09-17T02:15:54.155Z", "contributors": [ - "alattalatta", - "swtpumpkin" + "Havi Hoffman" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { - "modified": "2020-10-15T22:28:40.942Z", + "Web/Performance": { + "modified": "2020-01-12T15:28:31.330Z", "contributors": [ - "129dot03" + "chrisdavidmills" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { - "modified": "2020-10-15T21:57:11.465Z", + "Web/Progressive_web_apps": { + "modified": "2019-03-23T22:00:19.382Z", "contributors": [ - "swtpumpkin" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/abs": { - "modified": "2020-10-15T21:57:04.759Z", + "Web/Progressive_web_apps/Add_to_home_screen": { + "modified": "2020-01-26T15:58:32.379Z", "contributors": [ "alattalatta", - "mantra78" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/acos": { - "modified": "2020-10-15T21:52:08.736Z", + "Web/Progressive_web_apps/App_structure": { + "modified": "2020-05-31T18:37:47.885Z", "contributors": [ - "alattalatta", - "keikeiem" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { - "modified": "2020-10-15T21:52:08.362Z", + "Web/Progressive_web_apps/Installable_PWAs": { + "modified": "2020-05-31T18:37:46.514Z", + "contributors": [ + "chrisdavidmills", + "cs09g" + ] + }, + "Web/Progressive_web_apps/Offline_Service_workers": { + "modified": "2020-05-31T18:37:49.321Z", "contributors": [ - "alattalatta", - "keikeiem" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/ceil": { - "modified": "2019-03-23T22:13:49.234Z", + "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { + "modified": "2019-03-18T20:52:11.625Z", "contributors": [ - "ironmanciti" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/exp": { - "modified": "2020-10-15T22:07:23.655Z", + "Web/SVG": { + "modified": "2019-11-05T05:19:15.768Z", "contributors": [ - "qazxsw1240" + "dbwodlf3", + "u4bi", + "kybin", + "nacyot", + "hoony", + "dewey94esb", + "Delapouite" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/floor": { - "modified": "2020-10-15T21:38:48.166Z", + "Web/SVG/Applying_SVG_effects_to_HTML_content": { + "modified": "2019-03-23T22:44:07.191Z", "contributors": [ - "alattalatta", - "EdwardBaek", - "laranhee", - "ChoeSul" + "Narrativi", + "hoony" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/fround": { - "modified": "2019-03-23T22:31:04.734Z", + "Web/SVG/Attribute": { + "modified": "2019-03-23T22:32:34.072Z", "contributors": [ - "ingee.kim" + "Ninjapolian" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/imul": { - "modified": "2019-03-31T21:25:02.115Z", + "Web/SVG/Attribute/calcMode": { + "modified": "2019-03-23T22:11:02.860Z", "contributors": [ - "cameo-js", - "ingee.kim" + "tadkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log": { - "modified": "2020-10-15T21:55:33.977Z", + "Web/SVG/Attribute/cx": { + "modified": "2019-03-23T22:32:29.630Z", "contributors": [ - "Luna4D" + "se0kjun" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log2": { - "modified": "2020-10-15T21:57:12.002Z", + "Web/SVG/Attribute/d": { + "modified": "2019-03-18T21:21:40.969Z", "contributors": [ - "swtpumpkin" + "officialmansu" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/max": { - "modified": "2020-10-15T21:56:06.992Z", + "Web/SVG/Attribute/keyTimes": { + "modified": "2019-03-23T22:11:05.080Z", "contributors": [ - "lanipark", - "swtpumpkin" + "tadkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/min": { - "modified": "2020-10-15T21:56:53.960Z", + "Web/SVG/Attribute/values": { + "modified": "2019-03-23T22:11:11.110Z", "contributors": [ - "mantra78" + "tadkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/random": { - "modified": "2020-10-15T21:44:16.613Z", + "Web/SVG/Attribute/version": { + "modified": "2019-03-18T21:41:36.785Z", "contributors": [ - "caianyuan", - "EatChangmyeong", - "kuroneko0441", - "lazygyu", - "gamzza", - "maytree" + "MyeonghwanCho" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/round": { - "modified": "2020-10-15T22:12:25.570Z", + "Web/SVG/Attribute/viewBox": { + "modified": "2019-03-23T22:28:50.142Z", "contributors": [ - "officialmansu" + "dragmove" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sign": { - "modified": "2020-10-15T21:59:54.584Z", + "Web/SVG/Element": { + "modified": "2019-03-23T23:17:31.660Z", "contributors": [ - "yssgo" + "dewey94esb", + "kscarfone" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sin": { - "modified": "2020-10-15T22:14:16.419Z", + "Web/SVG/Element/a": { + "modified": "2020-10-15T21:40:12.249Z", "contributors": [ - "guyeol" + "alattalatta", + "Sebastianz", + "dewey94esb" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sinh": { - "modified": "2020-10-15T22:23:26.235Z", + "Web/SVG/Element/altGlyph": { + "modified": "2020-10-15T21:40:13.413Z", "contributors": [ - "Eumhongin" + "alattalatta", + "Sebastianz", + "dewey94esb" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { - "modified": "2020-10-15T21:57:12.700Z", + "Web/SVG/Element/circle": { + "modified": "2020-10-15T21:40:18.375Z", "contributors": [ - "swtpumpkin" + "alattalatta", + "wbamberg", + "Sebastianz", + "dewey94esb" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/tan": { - "modified": "2020-10-15T22:14:16.148Z", + "Web/SVG/Element/ellipse": { + "modified": "2020-10-15T21:46:51.498Z", "contributors": [ - "guyeol" + "alattalatta", + "wbamberg", + "Sebastianz", + "se0kjun" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/tanh": { - "modified": "2020-10-15T22:27:51.653Z", + "Web/SVG/Tutorial": { + "modified": "2019-09-02T22:37:58.598Z", "contributors": [ - "FennecFoxSW" + "jwoo0122", + "EatChangmyeong", + "nacyot", + "epicsaga", + "teoli", + "이선영" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/trunc": { - "modified": "2020-10-15T21:56:16.061Z", + "Web/SVG/Tutorial/Introduction": { + "modified": "2019-03-23T22:40:12.666Z", "contributors": [ - "mantra78", - "hefaitos" + "EatChangmyeong", + "nacyot" ] }, - "Web/JavaScript/Reference/Global_Objects/NaN": { - "modified": "2020-10-15T21:15:15.113Z", + "Web/SVG/Tutorial/Paths": { + "modified": "2019-03-23T22:21:33.428Z", "contributors": [ - "alattalatta", - "Netaras", - "nacyot", - "teoli", - "Gilchris" + "EatChangmyeong", + "grizlupo", + "newmsz", + "cnaa97" ] }, - "Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2020-10-15T21:38:20.966Z", + "Web/SVG/Tutorial/Patterns": { + "modified": "2019-03-18T21:46:02.102Z", "contributors": [ - "soonsebii", - "alattalatta", - "DeadIntegral", - "taeunChoi", - "ChoeSul", - "fscholz" + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { - "modified": "2020-10-15T21:48:35.594Z", + "Web/SVG/Tutorial/SVG_Image_Tag": { + "modified": "2019-03-18T21:46:01.401Z", "contributors": [ - "EntryDark", - "." + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { - "modified": "2020-10-15T22:02:58.023Z", + "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { + "modified": "2019-03-23T23:41:45.629Z", "contributors": [ - "alattalatta", - "kirrie" + "chrisdavidmills", + "teoli", + "Cliffet" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { - "modified": "2020-10-15T21:53:40.733Z", + "Web/Security": { + "modified": "2020-02-18T07:36:24.047Z", "contributors": [ - "alattalatta", - "kbsbroad" + "DeadIntegral", + "wbamberg", + "SphinxKnight", + "2pylab", + "Sheppy" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { - "modified": "2020-10-15T22:14:25.785Z", + "Web/Security/Insecure_passwords": { + "modified": "2019-07-20T05:09:42.530Z", "contributors": [ - "alattalatta" + "shefollowme" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { - "modified": "2020-10-15T22:01:36.854Z", + "Web/Security/Same-origin_policy": { + "modified": "2020-08-22T13:54:54.667Z", "contributors": [ "alattalatta", - "sshplendid" + "jongidal", + "TroyTae", + "midistour", + "seungha-kim", + "ryuan.choi", + "manascue", + "Vermond", + "behumble" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { - "modified": "2020-10-15T22:15:09.850Z", + "Web/Security/Transport_Layer_Security": { + "modified": "2020-09-21T00:10:58.229Z", "contributors": [ - "alattalatta", - "yami03" + "junnapark", + "haeguri" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NaN": { - "modified": "2020-10-15T21:44:42.844Z", + "Web/Tutorials": { + "modified": "2019-03-23T23:28:14.827Z", "contributors": [ - "alattalatta", - "Netaras" + "featherlikeg", + "nacyot", + "pjc0247", + "tamnajio", + "KyunH" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { - "modified": "2020-10-15T22:15:10.597Z", + "Web/Web_Components": { + "modified": "2019-03-18T21:01:19.898Z", "contributors": [ - "alattalatta" + "adrenalinee", + "cs09g", + "ByeongGi", + "namkwon", + "maybe" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { - "modified": "2020-10-15T21:44:34.313Z", + "Web/Web_Components/Using_custom_elements": { + "modified": "2020-10-15T22:25:18.797Z", "contributors": [ + "cutelee", + "chdaud1995", "alattalatta", - "Netaras" + "atomDevelop", + "nerdrun", + "ByeongGi" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { - "modified": "2020-10-15T21:50:46.841Z", + "Web/Web_Components/Using_shadow_DOM": { + "modified": "2020-07-07T00:49:27.609Z", "contributors": [ - "alattalatta", - "Lutece" + "ne2030", + "ByeongGi" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { - "modified": "2020-10-15T21:44:51.414Z", + "Web/XML": { + "modified": "2019-08-24T00:48:34.627Z", "contributors": [ - "alattalatta", - "Netaras" + "oinochoe", + "ExE-Boss" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { - "modified": "2020-10-15T21:53:40.478Z", + "Web/XML/XML_Introduction": { + "modified": "2019-05-01T21:53:36.067Z", "contributors": [ - "alattalatta", - "preco21" + "ExE-Boss", + "teoli", + "Sebuls" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { - "modified": "2020-10-15T22:14:24.810Z", + "Web/XPath": { + "modified": "2019-01-16T14:32:58.218Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "fscholz", + "Gilchris", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { - "modified": "2020-10-15T21:38:16.285Z", + "Web/XPath/Axes": { + "modified": "2019-03-23T23:41:54.185Z", "contributors": [ - "alattalatta", - "SphinxKnight", - "chro0611" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/prototype": { - "modified": "2020-10-15T22:10:14.861Z", + "Web/XPath/Axes/ancestor": { + "modified": "2019-03-23T23:41:51.868Z", "contributors": [ - "alattalatta", - "DeadIntegral" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { - "modified": "2020-10-15T22:16:46.694Z", + "Web/XPath/Axes/ancestor-or-self": { + "modified": "2019-03-23T23:41:53.193Z", "contributors": [ - "lifeisnovel" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { - "modified": "2020-10-15T21:50:45.262Z", + "Web/XPath/Axes/attribute": { + "modified": "2019-01-16T16:16:10.374Z", "contributors": [ - "alattalatta", - "Lutece" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { - "modified": "2020-10-15T22:02:15.943Z", + "Web/XPath/Axes/child": { + "modified": "2019-01-16T16:16:18.107Z", "contributors": [ - "take0415" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toString": { - "modified": "2020-10-15T21:48:38.962Z", + "Web/XPath/Axes/descendant": { + "modified": "2019-01-16T16:16:11.286Z", "contributors": [ - "alattalatta", - "magnoliaa" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { - "modified": "2020-10-15T22:10:14.373Z", + "Web/XPath/Axes/descendant-or-self": { + "modified": "2019-01-16T16:16:11.121Z", "contributors": [ - "alattalatta", - "DeadIntegral" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2020-10-15T21:19:43.435Z", + "Web/XPath/Axes/following": { + "modified": "2019-01-16T16:16:17.035Z", "contributors": [ - "alattalatta", - "Parcovia", - "palindrom615", - "callin2", - "StrongStoone", - "maytree", - "keikeiem", + "ExE-Boss", "teoli", - "Jeado.Ko" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { - "modified": "2020-10-15T22:08:32.403Z", + "Web/XPath/Axes/following-sibling": { + "modified": "2019-01-16T16:16:13.970Z", "contributors": [ - "LeeDDHH" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/assign": { - "modified": "2020-10-15T21:49:34.841Z", + "Web/XPath/Axes/namespace": { + "modified": "2019-03-23T23:41:52.884Z", "contributors": [ - "cs09g", - "limkukhyun", - "TK-one", - "alattalatta", - "LOG91", - "kikas", - "faker007", - "dale0713" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/constructor": { - "modified": "2020-10-15T21:47:07.109Z", + "Web/XPath/Axes/parent": { + "modified": "2019-01-16T16:16:10.076Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/create": { - "modified": "2019-10-02T03:34:36.779Z", + "Web/XPath/Axes/preceding": { + "modified": "2019-01-16T16:16:13.085Z", "contributors": [ - "ibizcox", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { - "modified": "2020-10-15T21:54:36.990Z", + "Web/XPath/Axes/preceding-sibling": { + "modified": "2019-01-16T16:16:15.097Z", "contributors": [ - "EatChangmyeong", - "KangHyeongMin", - "DevJang", - "BANIP" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { - "modified": "2020-10-15T21:37:24.444Z", + "Web/XPath/Axes/self": { + "modified": "2019-01-16T16:16:15.156Z", "contributors": [ - "alattalatta", - "kimkyeseung", - "mixed", - "bsidesoft" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/entries": { - "modified": "2020-10-15T22:08:09.257Z", + "Web/XPath/Functions": { + "modified": "2019-03-23T23:41:49.260Z", "contributors": [ - "honggaruy", - "limkukhyun" + "ExE-Boss", + "teoli", + "mete0r", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/freeze": { - "modified": "2020-10-15T21:37:04.618Z", + "Web/XPath/Functions/boolean": { + "modified": "2019-03-23T23:41:56.082Z", "contributors": [ - "alattalatta", - "cs09g", - "gatherKnowledge", - "roupkk", - "hanmomhanda" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": { - "modified": "2020-10-15T22:10:27.914Z", + "Web/XPath/Functions/ceiling": { + "modified": "2019-03-23T23:42:00.420Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": { - "modified": "2020-10-15T21:47:07.447Z", + "Web/XPath/Functions/concat": { + "modified": "2019-03-23T23:41:58.810Z", "contributors": [ - "fscholz", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { - "modified": "2019-03-23T22:31:23.968Z", + "Web/XPath/Functions/contains": { + "modified": "2019-03-23T23:41:59.602Z", "contributors": [ + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { - "modified": "2020-10-15T21:39:57.262Z", + "Web/XPath/Functions/count": { + "modified": "2019-03-23T23:41:58.125Z", "contributors": [ - "Chloe-HyunJoo", - "alattalatta", - "epicsaga" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/is": { - "modified": "2020-10-15T21:31:34.796Z", + "Web/XPath/Functions/current": { + "modified": "2019-03-23T23:41:57.241Z", "contributors": [ - "alattalatta", - "Netaras", - "nacyot", - "ligeek", - "lv0gun9" + "ExE-Boss", + "limkukhyun", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { - "modified": "2020-10-15T21:47:08.415Z", + "Web/XPath/Functions/document": { + "modified": "2019-03-23T23:42:02.300Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", + "토끼군", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { - "modified": "2020-10-15T21:47:09.610Z", + "Web/XPath/Functions/element-available": { + "modified": "2019-03-23T23:42:19.012Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": { - "modified": "2020-10-15T21:37:04.091Z", + "Web/XPath/Functions/false": { + "modified": "2019-03-23T23:42:21.547Z", "contributors": [ - "alattalatta", - "BrandenYoon", - "bsidesoft" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { - "modified": "2020-10-15T21:47:09.579Z", + "Web/XPath/Functions/floor": { + "modified": "2019-03-23T23:42:21.115Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { - "modified": "2020-10-15T21:47:09.416Z", + "Web/XPath/Functions/format-number": { + "modified": "2019-03-23T23:42:15.373Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": { - "modified": "2020-10-15T21:52:42.061Z", + "Web/XPath/Functions/function-available": { + "modified": "2019-03-23T23:42:21.463Z", "contributors": [ - "deltakor1234", - "alattalatta", - "dotorify" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/prototype": { - "modified": "2020-10-15T21:34:43.084Z", + "Web/XPath/Functions/generate-id": { + "modified": "2019-03-23T23:42:13.517Z", "contributors": [ - "zero0yes", - "noritersand", - "alattalatta", - "Parcovia", - "Netaras", - "DavidSunny", - "teoli" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/seal": { - "modified": "2020-10-15T21:37:04.586Z", + "Web/XPath/Functions/id": { + "modified": "2019-03-23T23:42:21.368Z", "contributors": [ - "alattalatta", - "hanmomhanda" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": { - "modified": "2020-11-04T03:29:23.911Z", + "Web/XPath/Functions/key": { + "modified": "2019-03-23T23:42:10.516Z", "contributors": [ - "psk810", - "DevJang", - "kingsae1" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": { - "modified": "2020-10-15T22:08:09.241Z", + "Web/XPath/Functions/lang": { + "modified": "2019-03-23T23:42:22.431Z", "contributors": [ - "alattalatta", - "limkukhyun" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/toString": { - "modified": "2020-10-15T21:46:52.765Z", + "Web/XPath/Functions/last": { + "modified": "2019-03-23T23:42:23.803Z", "contributors": [ - "ESnark", - "alattalatta", - "limkukhyun", - "kennen", - "sandArtChip" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { - "modified": "2020-10-15T21:49:29.419Z", + "Web/XPath/Functions/local-name": { + "modified": "2019-03-23T23:42:19.324Z", "contributors": [ - "honggaruy", - "alattalatta", - "stitchworkingonthecode" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/values": { - "modified": "2020-10-15T22:01:47.626Z", + "Web/XPath/Functions/name": { + "modified": "2019-03-23T23:42:53.708Z", "contributors": [ - "OhSeungHyeon", - "KIMSEONGSEOB" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-10-15T21:37:31.734Z", + "Web/XPath/Functions/namespace-uri": { + "modified": "2019-03-23T23:42:22.064Z", "contributors": [ - "Vimming", - "alattalatta", - "khg0712", - "limkukhyun", - "samee", - "fscholz", - "NessunKim", - "ahnjungho", - "Netaras", - "redcamel", - "EunwooCho", - "akic4op4", - "0xABCDEF" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/Promise": { - "modified": "2020-10-15T22:27:11.901Z", + "Web/XPath/Functions/normalize-space": { + "modified": "2019-03-23T23:42:24.081Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/all": { - "modified": "2020-10-15T21:45:48.976Z", + "Web/XPath/Functions/not": { + "modified": "2019-03-23T23:42:13.806Z", "contributors": [ - "EatChangmyeong", - "alattalatta", - "DeadIntegral", - "limkukhyun", - "fscholz", - "hoony" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/allSettled": { - "modified": "2020-10-15T22:24:05.512Z", + "Web/XPath/Functions/number": { + "modified": "2019-03-23T23:42:20.456Z", "contributors": [ - "composite" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/finally": { - "modified": "2020-10-15T22:04:25.149Z", + "Web/XPath/Functions/position": { + "modified": "2019-03-23T23:42:19.791Z", "contributors": [ - "ditto572", - "Seok.Heo" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/prototype": { - "modified": "2020-10-15T21:47:20.685Z", + "Web/XPath/Functions/round": { + "modified": "2019-03-23T23:42:16.877Z", "contributors": [ - "alattalatta", - "fscholz", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/race": { - "modified": "2020-10-15T21:47:12.859Z", + "Web/XPath/Functions/starts-with": { + "modified": "2019-03-23T23:42:20.127Z", "contributors": [ - "EatChangmyeong", - "alattalatta", - "seungha-kim", - "fscholz", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/reject": { - "modified": "2020-10-15T21:47:12.472Z", + "Web/XPath/Functions/string": { + "modified": "2019-03-23T23:42:22.208Z", "contributors": [ - "fscholz", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { - "modified": "2020-10-15T21:47:20.702Z", + "Web/XPath/Functions/string-length": { + "modified": "2019-03-23T23:42:16.696Z", "contributors": [ - "cs09g", - "fscholz", - "QooQooDass", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/then": { - "modified": "2020-10-15T21:47:12.138Z", + "Web/XPath/Functions/substring": { + "modified": "2019-03-23T23:42:17.746Z", "contributors": [ - "EatChangmyeong", - "fscholz", - "KisukPark", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy": { - "modified": "2020-10-15T21:50:18.794Z", + "Web/XPath/Functions/substring-after": { + "modified": "2019-03-23T23:42:23.050Z", "contributors": [ - "alattalatta", - "callin2", - "heejunghwang" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler": { - "modified": "2020-10-15T21:55:35.789Z", + "Web/XPath/Functions/substring-before": { + "modified": "2019-03-23T23:42:22.325Z", "contributors": [ - "alattalatta", - "SphinxKnight" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply": { - "modified": "2019-03-23T22:09:25.839Z", + "Web/XPath/Functions/sum": { + "modified": "2019-03-23T23:42:16.787Z", "contributors": [ - "bsidesoft" + "ExE-Boss", + "arrrggghhh", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2019-03-23T22:28:44.569Z", + "Web/XPath/Functions/system-property": { + "modified": "2019-03-23T23:42:12.729Z", "contributors": [ - "magnoliaa" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ReferenceError": { - "modified": "2020-10-15T22:01:04.430Z", + "Web/XPath/Functions/translate": { + "modified": "2019-03-23T23:42:23.927Z", "contributors": [ - "goeo1066" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect": { - "modified": "2020-10-15T21:53:08.377Z", + "Web/XPath/Functions/true": { + "modified": "2019-03-23T23:42:14.932Z", "contributors": [ - "alattalatta", - "undefcat" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { - "modified": "2020-10-15T21:53:07.400Z", + "Web/XPath/Functions/unparsed-entity-url": { + "modified": "2019-03-23T23:42:10.421Z", "contributors": [ - "alattalatta", - "undefcat" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { - "modified": "2020-10-15T22:19:07.053Z", + "Web/XSLT": { + "modified": "2019-03-23T23:44:24.859Z", "contributors": [ - "alattalatta" + "chrisdavidmills", + "Verruckt", + "Sebuls", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty": { - "modified": "2020-10-15T22:19:08.726Z", + "Web/XSLT/Element": { + "modified": "2019-03-23T23:41:46.436Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "chrisdavidmills", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty": { - "modified": "2020-10-15T22:19:07.741Z", + "Web/XSLT/Element/element": { + "modified": "2019-03-23T23:42:14.305Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "chrisdavidmills", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/get": { - "modified": "2020-10-15T22:19:16.367Z", + "Web/XSLT/Transforming_XML_with_XSLT": { + "modified": "2019-01-16T16:15:56.433Z", "contributors": [ - "alattalatta" + "chrisdavidmills", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor": { - "modified": "2020-10-15T22:19:17.438Z", + "Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference": { + "modified": "2019-03-23T23:41:43.827Z", "contributors": [ - "alattalatta" + "chrisdavidmills", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf": { - "modified": "2020-10-15T22:19:16.737Z", + "Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations": { + "modified": "2019-11-21T00:57:37.403Z", "contributors": [ - "alattalatta" + "wbamberg", + "chrisdavidmills", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/has": { - "modified": "2020-10-15T22:19:16.455Z", + "WebAssembly": { + "modified": "2020-10-15T21:52:54.017Z", "contributors": [ - "alattalatta" + "limkukhyun", + "lastmirage", + "kesuskim", + "0xABCDEF", + "lukewagner" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible": { - "modified": "2020-10-15T22:19:18.378Z", + "WebAssembly/C_to_wasm": { + "modified": "2020-10-29T08:46:10.367Z", "contributors": [ - "alattalatta" + "limkukhyun", + "jung-han", + "04SeoHyun", + "nakyong" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys": { - "modified": "2020-10-15T22:19:19.765Z", + "WebAssembly/Caching_modules": { + "modified": "2019-03-18T21:26:57.835Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions": { - "modified": "2020-10-15T22:19:30.244Z", + "WebAssembly/Concepts": { + "modified": "2020-12-08T12:12:26.855Z", "contributors": [ - "alattalatta" + "dsma73", + "jung-han", + "kyhsa93", + "limkukhyun", + "Jungbin-Kim", + "mingrammer", + "kesuskim", + "0xABCDEF" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/set": { - "modified": "2020-10-15T22:19:35.877Z", + "WebAssembly/Exported_functions": { + "modified": "2019-03-18T21:27:58.372Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf": { - "modified": "2020-10-15T22:19:38.264Z", + "WebAssembly/Loading_and_running": { + "modified": "2019-03-23T22:11:38.016Z", "contributors": [ - "alattalatta" + "limkukhyun", + "kesuskim" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp": { - "modified": "2020-10-15T21:38:50.461Z", + "WebAssembly/Rust_to_wasm": { + "modified": "2020-06-15T19:31:56.028Z", "contributors": [ - "alattalatta", - "EatChangmyeong", - "zerodice0", - "momoci99", - "hanabiai", - "Latera", - "tmxkwkfgka" + "fantajeon", + "04SeoHyun", + "piutranq", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { - "modified": "2020-10-15T22:32:38.454Z", + "WebAssembly/Text_format_to_wasm": { + "modified": "2019-03-18T21:28:27.225Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/exec": { - "modified": "2020-10-15T21:47:37.584Z", + "WebAssembly/Understanding_the_text_format": { + "modified": "2019-03-23T22:04:19.997Z", "contributors": [ - "alattalatta", - "yumi2011", - "dale0713" + "limkukhyun", + "a1p4ca", + "composite" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/n": { - "modified": "2020-10-15T22:18:51.448Z", + "WebAssembly/Using_the_JavaScript_API": { + "modified": "2019-12-26T10:33:44.717Z", "contributors": [ - "dragmove" + "04SeoHyun", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/test": { - "modified": "2020-10-15T22:32:39.804Z", + "WebAssembly/existing_C_to_wasm": { + "modified": "2019-03-18T21:28:25.734Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Set": { - "modified": "2020-10-15T21:48:48.879Z", + "Web/API/Canvas_API/A_basic_ray-caster": { + "modified": "2019-05-26T05:55:24.371Z", "contributors": [ "alattalatta", - "RingoKim", - "loslch", - "dale0713", - "NessunKim", - "Netaras", - "vsemozhetbyt" + "taggon" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/add": { - "modified": "2020-10-15T22:11:36.093Z", + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-11-30T14:43:16.912Z", "contributors": [ - "alattalatta", - "chan337337" + "woochul2", + "honggaruy", + "jaeminche", + "eunjungleecub", + "Teperi", + "Violet-Bora-Lee", + "jjuun", + "JaeyiHong", + "juddammu", + "limkukhyun", + "hyunggoo", + "ChalkPE", + "loslch", + "Kimchoky", + "pineoc", + "fureweb", + "zeallat", + "gnujoow", + "softage", + "oox", + "Jsfumato", + "stephenjang", + "cafrii", + "teoli", + "zziuni", + "JaehaAhn", + "Joonwon", + "Dyhan81" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/clear": { - "modified": "2020-10-15T22:15:10.272Z", + "Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5": { + "modified": "2019-03-23T23:42:04.353Z", "contributors": [ - "alattalatta" + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/delete": { - "modified": "2020-10-15T22:15:14.997Z", + "Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation": { + "modified": "2019-03-18T21:13:02.657Z", "contributors": [ - "alattalatta" + "alattalatta", + "teoli", + "Ioseph" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/forEach": { - "modified": "2020-10-15T22:15:19.403Z", + "Web/CSS/CSS_Columns/Using_multi-column_layouts": { + "modified": "2019-10-11T18:26:42.559Z", "contributors": [ - "alattalatta" + "escattone", + "Netaras", + "Sebuls", + "Ioseph" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/has": { - "modified": "2020-10-15T22:15:10.010Z", + "Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements": { + "modified": "2019-03-18T20:58:47.001Z", "contributors": [ - "alattalatta" + "SphinxKnight", + "teoli", + "taggon" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/prototype": { - "modified": "2020-10-15T21:48:56.464Z", + "Glossary/DHTML": { + "modified": "2019-03-23T23:41:48.331Z", "contributors": [ - "alattalatta", - "Netaras" + "Sebuls" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/size": { - "modified": "2020-10-15T22:15:09.484Z", + "Mozilla/Firefox/Releases/3/DOM_improvements": { + "modified": "2019-03-23T23:52:57.206Z", "contributors": [ - "alattalatta" + "teoli", + "Suguni" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/values": { - "modified": "2020-10-15T22:18:44.617Z", + "Web/API/Canvas_API/Tutorial/Drawing_text": { + "modified": "2019-03-23T23:51:09.281Z", "contributors": [ - "VictorTaekLim" + "kbsbroad", + "peacekimjapan", + "tnRaro", + "teoli", + "Wladimir_Palant", + "Suguni" ] }, - "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { - "modified": "2020-10-15T21:58:45.362Z", + "Mozilla/Firefox/Releases/1.5": { + "modified": "2019-03-23T23:42:08.585Z", "contributors": [ - "cs09g", - "ENvironmentSet" + "teoli", + "Sebuls", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype": { - "modified": "2020-10-15T22:15:02.439Z", + "Mozilla/Firefox/Releases/2": { + "modified": "2019-01-16T16:12:14.974Z", "contributors": [ - "cs09g" + "CN", + "Netaras", + "Yh", + "C0d3h4ck", + "Ranio710", + "Channy" ] }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:22:11.475Z", + "Mozilla/Firefox/Releases/3.5": { + "modified": "2019-03-24T00:00:11.117Z", "contributors": [ - "alattalatta", - "seungha-kim", - "pusanbear", "teoli", - "MoGi" + "Gilchris" ] }, - "Web/JavaScript/Reference/Global_Objects/String/Trim": { - "modified": "2020-10-15T21:58:30.718Z", + "Mozilla/Firefox/Releases/3/Full_page_zoom": { + "modified": "2019-03-23T23:51:11.591Z", "contributors": [ - "alattalatta", - "dasebee" + "teoli", + "Wladimir_Palant", + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/charAt": { - "modified": "2020-10-15T21:45:37.005Z", + "Games/Tutorials/2D_breakout_game_Phaser/The_score": { + "modified": "2019-01-16T22:56:11.870Z", "contributors": [ - "bohyun611kim", - "alattalatta", - "pusanbear" + "wbamberg", + "Dragonholux" ] }, - "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": { - "modified": "2020-10-15T21:48:27.284Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls": { + "modified": "2019-03-23T22:20:49.480Z", "contributors": [ - "alattalatta", - "dale0713" + "wbamberg", + "sshplendid", + "daesD", + "hoony" ] }, - "Web/JavaScript/Reference/Global_Objects/String/concat": { - "modified": "2020-10-15T21:45:37.865Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field": { + "modified": "2019-01-17T03:04:25.798Z", "contributors": [ - "yami03", - "seulgiyoon", - "alattalatta", - "pusanbear" + "wbamberg", + "sshplendid" ] }, - "Web/JavaScript/Reference/Global_Objects/String/endsWith": { - "modified": "2020-04-21T05:33:31.555Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection": { + "modified": "2019-04-17T04:54:08.983Z", "contributors": [ - "yami03", - "pusanbear" + "E.Chong_Ju_Noel", + "wbamberg", + "sshplendid" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { - "modified": "2020-10-15T22:13:58.437Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up": { + "modified": "2019-04-17T06:26:16.714Z", "contributors": [ - "alattalatta" + "E.Chong_Ju_Noel" ] }, - "Web/JavaScript/Reference/Global_Objects/String/includes": { - "modified": "2020-10-15T21:45:37.765Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over": { + "modified": "2019-01-17T03:02:48.219Z", "contributors": [ - "alattalatta", - "pusanbear" + "wbamberg", + "sshplendid" ] }, - "Web/JavaScript/Reference/Global_Objects/String/indexOf": { - "modified": "2020-10-15T21:45:49.888Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript": { + "modified": "2019-03-23T22:24:25.862Z", "contributors": [ - "alattalatta", - "pusanbear" + "wbamberg", + "daesD", + "hoony", + "Byeolbit" ] }, - "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { - "modified": "2020-10-15T21:45:54.942Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls": { + "modified": "2019-04-17T05:33:54.686Z", "contributors": [ - "alattalatta", - "jihunsuh", - "pusanbear" + "E.Chong_Ju_Noel" ] }, - "Web/JavaScript/Reference/Global_Objects/String/length": { - "modified": "2020-10-15T21:45:30.378Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls": { + "modified": "2019-01-17T02:41:51.426Z", "contributors": [ - "alattalatta", - "pusanbear" + "wbamberg", + "sshplendid", + "egg-00" ] }, - "Web/JavaScript/Reference/Global_Objects/String/localeCompare": { - "modified": "2020-10-15T21:57:59.121Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win": { + "modified": "2019-04-17T05:34:33.735Z", "contributors": [ - "bboding", - "s2s2kim" + "E.Chong_Ju_Noel", + "wbamberg", + "awer000" ] }, - "Web/JavaScript/Reference/Global_Objects/String/match": { - "modified": "2020-10-15T22:06:19.802Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball": { + "modified": "2019-03-23T22:23:23.704Z", "contributors": [ - "Donghoon", - "chaewonkong", - "Yonnani" + "wbamberg", + "sshplendid", + "hoony", + "Byeolbit" ] }, - "Web/JavaScript/Reference/Global_Objects/String/normalize": { - "modified": "2020-10-15T22:16:57.680Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it": { + "modified": "2019-01-17T00:09:33.787Z", "contributors": [ - "lifeisnovel" + "wbamberg", + "sshplendid", + "daesD", + "hoony", + "HarrisLim", + "Byeolbit" ] }, - "Web/JavaScript/Reference/Global_Objects/String/padEnd": { - "modified": "2020-10-15T22:08:41.887Z", + "Glossary/HTTP_header": { + "modified": "2019-04-30T11:26:53.285Z", "contributors": [ - "alattalatta" + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/String/padStart": { - "modified": "2020-10-15T22:08:41.615Z", + "Glossary/Dynamic_programming_language": { + "modified": "2019-03-18T21:23:35.310Z", "contributors": [ - "alattalatta" + "flat81" ] }, - "Web/JavaScript/Reference/Global_Objects/String/prototype": { - "modified": "2019-09-19T03:24:36.691Z", + "Glossary/array": { + "modified": "2019-03-18T21:24:02.576Z", "contributors": [ - "dbs6339", - "pusanbear", - "teoli", - "MoGi" + "Parcovia" ] }, - "Web/JavaScript/Reference/Global_Objects/String/repeat": { - "modified": "2020-10-15T21:56:14.890Z", + "Glossary/Boolean": { + "modified": "2019-03-23T22:13:53.303Z", "contributors": [ - "alattalatta", - "wicksome" + "Violet-Bora-Lee", + "BA-jhlee" ] }, - "Web/JavaScript/Reference/Global_Objects/String/replace": { - "modified": "2020-10-15T21:48:26.744Z", + "Glossary/Browsing_context": { + "modified": "2020-01-05T11:52:27.990Z", "contributors": [ - "limkukhyun", - "yonggoo.noh", "alattalatta", - "ejay0811", - "rlaxognsk", - "dale0713" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/search": { - "modified": "2020-10-15T22:10:00.509Z", - "contributors": [ - "Parcovia" + "HyunSeob" ] }, - "Web/JavaScript/Reference/Global_Objects/String/slice": { - "modified": "2020-10-15T21:53:59.719Z", + "Glossary/Scope": { + "modified": "2020-08-28T03:24:50.648Z", "contributors": [ - "bigsaigon333", - "limkukhyun", - "KaylaKwon", - "enchantor", - "REDO", - "laranhee", - "AlexMin" + "heejinlee07" ] }, - "Web/JavaScript/Reference/Global_Objects/String/split": { - "modified": "2020-10-15T22:14:46.442Z", + "Glossary/Identifier": { + "modified": "2019-05-24T13:17:06.184Z", "contributors": [ - "EatChangmyeong", "alattalatta", - "yuntaek" + "HyunSeob" ] }, - "Web/JavaScript/Reference/Global_Objects/String/startsWith": { - "modified": "2020-10-15T21:47:53.784Z", + "Glossary/Transmission_Control_Protocol_(TCP)": { + "modified": "2020-01-12T14:32:05.700Z", "contributors": [ - "alattalatta", - "skylar.kim" + "doong-jo" ] }, - "Web/JavaScript/Reference/Global_Objects/String/substr": { - "modified": "2020-10-15T21:47:08.634Z", + "Glossary/Cache": { + "modified": "2019-10-28T01:10:08.788Z", "contributors": [ - "alattalatta", - "pusanbear" + "JisooLee" ] }, - "Web/JavaScript/Reference/Global_Objects/String/substring": { - "modified": "2020-10-15T22:18:53.078Z", + "orphaned/How_to_Build_an_XPCOM_Component_in_Javascript": { + "modified": "2019-03-23T23:49:04.482Z", "contributors": [ - "Saem", - "bohyun611kim" + "Channy", + "Yookh80" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { - "modified": "2020-10-15T21:57:11.550Z", + "Web/XPath/Introduction_to_using_XPath_in_JavaScript": { + "modified": "2020-08-06T04:38:40.599Z", "contributors": [ "alattalatta", - "swtpumpkin" + "Netaras", + "Sebuls" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toSource": { - "modified": "2020-10-15T22:02:06.022Z", + "orphaned/JavaScript_C_Engine_Embedder's_Guide": { + "modified": "2019-03-23T23:51:52.110Z", "contributors": [ "teoli", - "ejay0811" + "Comayjlee", + "Joone" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toString": { - "modified": "2020-10-15T22:27:29.788Z", + "Learn/Common_questions/Checking_that_your_web_site_is_working_properly": { + "modified": "2020-07-16T22:35:50.357Z", "contributors": [ - "rjsdnql123" + "best8248" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { - "modified": "2020-10-15T21:55:16.088Z", + "Learn/Common_questions/Thinking_before_coding": { + "modified": "2020-07-16T22:35:34.712Z", "contributors": [ - "alattalatta", - "swtpumpkin", - "seokju-na" + "Silvermist", + "ssilb4", + "daebum-lee" ] }, - "Web/JavaScript/Reference/Global_Objects/String/valueOf": { - "modified": "2020-10-15T22:25:44.637Z", + "Learn/CSS/Building_blocks/The_box_model": { + "modified": "2020-12-08T00:16:52.296Z", "contributors": [ - "hyoni0817" + "ihooi", + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol": { - "modified": "2020-10-15T21:40:09.882Z", + "Learn/CSS/Building_blocks/Selectors": { + "modified": "2020-12-07T23:12:49.927Z", "contributors": [ - "dolmoon", - "SphinxKnight", - "HyunSeob", - "maytree" + "ihooi", + "java2020007" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/for": { - "modified": "2019-03-23T22:16:10.868Z", + "Learn/CSS/CSS_layout/Media_queries": { + "modified": "2020-07-16T22:27:32.744Z", "contributors": [ - "Hou" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": { - "modified": "2020-10-15T22:00:39.078Z", + "Learn/CSS/CSS_layout/Responsive_Design": { + "modified": "2020-07-16T22:27:29.107Z", "contributors": [ - "limkukhyun", - "BANIP" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError": { - "modified": "2020-10-15T21:48:16.048Z", + "Learn/CSS/CSS_layout/Positioning": { + "modified": "2020-07-16T22:26:44.211Z", "contributors": [ - "alattalatta", - "2oosoo", - "magnoliaa" + "Hwan-Woong-Lee" + ] + }, + "Learn/CSS/CSS_layout/Supporting_Older_Browsers": { + "modified": "2020-07-16T22:27:19.114Z", + "contributors": [ + "EricByHPHK", + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype": { - "modified": "2019-03-23T22:28:47.337Z", + "Learn/CSS/CSS_layout/Normal_Flow": { + "modified": "2020-07-16T22:27:22.113Z", "contributors": [ - "magnoliaa" + "EricByHPHK", + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/TypeError": { - "modified": "2020-10-15T21:38:37.821Z", + "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension": { + "modified": "2020-07-16T22:28:12.763Z", "contributors": [ - "alattalatta", - "kirrie", - "JiminP" + "ERTuringLee" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray": { - "modified": "2019-06-18T04:56:00.166Z", + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-07-16T22:35:01.206Z", "contributors": [ - "kooljay82", - "Netaras", - "Khai96_" + "java2020007", + "Silvermist", + "manmyung", + "jinah1000", + "dolmoon", + "limkukhyun", + "galcyurio", + "gobyoungil", + "stitchworkingonthecode", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": { - "modified": "2019-03-23T22:30:48.269Z", + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-07-16T22:34:48.769Z", "contributors": [ - "Netaras" + "scl2589", + "hahehohoo", + "moseoridev", + "alattalatta", + "dolmoon", + "limkukhyun", + "galcyurio", + "gobyoungil", + "LovelyGom1218", + "stitchworkingonthecode", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": { - "modified": "2020-10-15T21:47:35.788Z", + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-07-16T22:34:08.936Z", "contributors": [ + "thornbirda", "alattalatta", - "Netaras" + "dolmoon", + "limkukhyun", + "takeU", + "galcyurio", + "stitchworkingonthecode", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": { - "modified": "2019-03-23T22:30:15.273Z", + "Learn/Getting_started_with_the_web/Publishing_your_website": { + "modified": "2020-07-16T22:34:27.246Z", "contributors": [ - "Netaras" + "Taehoon", + "limkukhyun", + "galcyurio", + "novelview9", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength": { - "modified": "2020-10-15T21:47:38.660Z", + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-07-16T22:34:01.419Z", "contributors": [ - "alattalatta", - "Netaras" + "doong-jo", + "moseoridev", + "HoLlOlLoLlU", + "limkukhyun", + "LeeJunyeol", + "galcyurio", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset": { - "modified": "2020-10-15T21:47:35.902Z", + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-10-09T05:21:10.101Z", "contributors": [ + "anoncaco", + "moseoridev", "alattalatta", - "Netaras" + "cs09g", + "dolmoon", + "limkukhyun", + "YJLeeGinter", + "galcyurio", + "BK-Yoo" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/fill": { - "modified": "2020-10-15T21:39:40.326Z", + "orphaned/Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:45.510Z", "contributors": [ - "alattalatta", - "Hmmim" + "SphinxKnight", + "2oosoo", + "JinSeungHo" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf": { - "modified": "2020-10-15T22:21:44.673Z", + "Learn/Forms/How_to_structure_a_web_form": { + "modified": "2020-09-29T02:01:00.293Z", "contributors": [ - "naraeim", - "SphinxKnight" + "fscholz", + "sephiron99", + "chrisdavidmills", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/length": { - "modified": "2020-10-15T21:47:35.796Z", + "Learn/Forms": { + "modified": "2020-07-16T22:20:59.522Z", "contributors": [ - "alattalatta", - "Netaras" + "ssj24", + "chrisdavidmills", + "moolow", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/name": { - "modified": "2020-10-15T21:47:34.390Z", + "Learn/Forms/Sending_and_retrieving_form_data": { + "modified": "2020-07-16T22:21:27.567Z", "contributors": [ - "alattalatta", - "Netaras" + "tldn0718", + "dev-dongwon", + "daesD", + "chrisdavidmills", + "Geun-Hyung_Kim", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/of": { - "modified": "2020-10-15T22:03:56.631Z", + "Learn/Forms/Your_first_form": { + "modified": "2020-07-16T22:21:05.991Z", "contributors": [ - "limkukhyun" + "fscholz", + "sephiron99", + "chrisdavidmills", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/prototype": { - "modified": "2019-03-23T22:30:03.771Z", + "Learn/HTML/Howto/Use_data_attributes": { + "modified": "2020-07-16T22:22:36.382Z", "contributors": [ - "Netaras" + "DDark", + "jyhwng", + "soulmatt" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/reverse": { - "modified": "2020-10-15T21:47:33.171Z", + "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { + "modified": "2020-07-16T22:24:54.813Z", "contributors": [ - "alattalatta", - "Netaras" + "jinseobhong" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/set": { - "modified": "2020-10-15T21:47:35.773Z", + "Learn/JavaScript/Building_blocks/conditionals": { + "modified": "2020-08-19T22:28:52.853Z", "contributors": [ - "alattalatta", - "Netaras" + "ramgabi", + "ojongchul", + "JaeWorld", + "notypicalus", + "Jonnie-Lion", + "gsphyo91" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/slice": { - "modified": "2019-03-23T22:30:24.203Z", + "Learn/JavaScript/Objects/Test_your_skills:_JSON": { + "modified": "2020-12-11T06:49:49.006Z", "contributors": [ - "Netaras" + "constkey" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/some": { - "modified": "2020-10-15T21:47:37.645Z", + "Learn/Server-side/Express_Nodejs/development_environment": { + "modified": "2020-12-14T05:06:35.489Z", "contributors": [ - "alattalatta", - "Netaras" + "junnapark", + "DDark" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/sort": { - "modified": "2019-03-23T22:30:47.108Z", + "Learn/Server-side/Express_Nodejs/skeleton_website": { + "modified": "2020-07-16T22:38:05.117Z", "contributors": [ - "Netaras" + "SYCHOI" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/values": { - "modified": "2019-03-23T22:30:45.463Z", + "Learn/Accessibility/HTML": { + "modified": "2020-07-16T22:40:12.947Z", "contributors": [ - "Netaras" + "dev-dongwon" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap": { - "modified": "2019-03-23T22:27:55.353Z", + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:58.455Z", "contributors": [ - "Netaras", - "billybraga" + "cs09g", + "seunghun" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/delete": { - "modified": "2020-10-15T22:04:27.439Z", + "Learn/Accessibility/What_is_accessibility": { + "modified": "2020-07-16T22:40:05.805Z", "contributors": [ - "alattalatta", - "limkukhyun", - "Seok.Heo" + "seunghun" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/prototype": { - "modified": "2019-03-23T22:27:54.259Z", + "Learn/Accessibility/Mobile": { + "modified": "2020-07-16T22:40:31.872Z", "contributors": [ - "Netaras" + "seunghun" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet": { - "modified": "2020-10-15T21:48:47.357Z", + "Glossary/Localization": { + "modified": "2019-03-23T23:49:35.627Z", "contributors": [ - "alattalatta", + "teoli", "Netaras", - "fscholz" + "Unixcruiser", + "Gilchris" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet/prototype": { - "modified": "2019-03-23T22:28:07.290Z", + "MDN/At_ten": { + "modified": "2019-03-23T22:41:30.825Z", "contributors": [ - "Netaras" + "LimeClover", + "jefflee0127" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly": { - "modified": "2020-10-15T21:53:02.555Z", + "orphaned/MDN/About/MDN_services": { + "modified": "2020-12-05T03:06:45.428Z", "contributors": [ - "limkukhyun", - "0xABCDEF" + "movegun1027" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError": { - "modified": "2020-10-15T22:07:58.077Z", + "orphaned/MDN/Community/Conversations": { + "modified": "2020-02-05T05:27:57.215Z", "contributors": [ - "limkukhyun" + "SphinxKnight", + "alattalatta", + "wbamberg", + "jswisher", + "woojin.jo" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": { - "modified": "2020-10-15T22:08:05.155Z", + "orphaned/MDN/Community": { + "modified": "2020-03-03T01:53:44.470Z", "contributors": [ - "limkukhyun" + "SphinxKnight", + "alattalatta", + "wbamberg", + "gaucho1218", + "zziuni", + "unixforever", + "woojin.jo", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype": { - "modified": "2020-10-15T22:08:10.181Z", + "orphaned/MDN/Community/Working_in_community": { + "modified": "2020-09-01T05:37:50.669Z", "contributors": [ - "limkukhyun" + "junnapark" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance": { - "modified": "2020-10-15T22:07:55.815Z", + "MDN/Contribute/Howto/Create_and_edit_pages": { + "modified": "2019-03-23T23:13:39.002Z", "contributors": [ - "limkukhyun", - "alattalatta" + "wbamberg", + "kkokey", + "zziuni", + "naduhy2", + "nodejs", + "AlwaysOnce", + "KwanHong_Lee66" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError": { - "modified": "2020-10-15T22:08:04.793Z", + "MDN/Guidelines/Does_this_belong_on_MDN": { + "modified": "2019-01-16T19:22:53.277Z", "contributors": [ - "limkukhyun" + "wbamberg", + "zziuni", + "yssuh", + "leosangwon" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory": { - "modified": "2020-10-15T22:08:00.915Z", + "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-01-16T19:23:36.745Z", "contributors": [ - "limkukhyun" + "wbamberg", + "KwanHong_Lee66" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Module": { - "modified": "2020-10-15T22:07:56.280Z", + "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T22:50:43.806Z", "contributors": [ - "limkukhyun", - "alattalatta" + "wbamberg", + "Saru", + "peacekimjapan", + "sominlee", + "novelview9", + "woojin.jo", + "Epikem", + "misol" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError": { - "modified": "2020-10-15T22:08:08.186Z", + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-01-16T19:16:28.756Z", "contributors": [ - "limkukhyun" + "wbamberg", + "chiyodad", + "Junbong", + "KwanHong_Lee66" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Table": { - "modified": "2020-10-15T22:07:58.705Z", + "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-03-23T23:14:13.204Z", "contributors": [ - "limkukhyun" + "zziuni", + "wbamberg", + "KwanHong_Lee66" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { - "modified": "2020-10-15T22:07:56.654Z", + "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": { + "modified": "2019-01-17T00:11:42.268Z", "contributors": [ - "limkukhyun" + "wbamberg", + "woojin.jo" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { - "modified": "2020-10-15T22:07:56.654Z", + "orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { + "modified": "2020-02-28T22:23:49.633Z", "contributors": [ - "limkukhyun" + "wbamberg", + "Saru", + "2oosoo" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate": { - "modified": "2020-10-15T22:07:57.168Z", + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2019-01-16T19:48:52.048Z", "contributors": [ - "fnwinter", - "limkukhyun" + "wbamberg", + "Junbong" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming": { - "modified": "2020-10-15T22:08:08.189Z", + "orphaned/MDN/Editor": { + "modified": "2020-09-30T15:42:29.661Z", "contributors": [ - "limkukhyun" + "chrisdavidmills", + "ehgus", + "wbamberg", + "zziuni", + "821065887131", + "sominlee", + "Netaras", + "Kaben", + "misol" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/validate": { - "modified": "2020-10-15T22:08:00.982Z", + "orphaned/MDN/Editor/Links": { + "modified": "2020-09-30T15:42:30.015Z", "contributors": [ - "limkukhyun" + "chrisdavidmills", + "honggaruy" ] }, - "Web/JavaScript/Reference/Global_Objects/decodeURI": { - "modified": "2020-10-15T22:01:55.624Z", + "MDN/Guidelines/Conventions_definitions": { + "modified": "2020-09-30T15:30:34.436Z", "contributors": [ - "jeoyoho" + "chrisdavidmills", + "wbamberg", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { - "modified": "2020-10-15T21:48:49.294Z", + "MDN/Guidelines/Code_guidelines/General": { + "modified": "2020-09-30T15:30:35.323Z", "contributors": [ - "alattalatta", - "jeoyoho", - "magnoliaa" + "chrisdavidmills", + "honggaruy" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURI": { - "modified": "2020-10-15T22:02:01.889Z", + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-09-30T15:30:35.279Z", "contributors": [ + "chrisdavidmills", + "honggaruy", + "jswisher", "alattalatta", - "jeoyoho" + "wbamberg", + "sominlee", + "naduhy2", + "dale0713", + "epicsaga" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { - "modified": "2020-10-15T21:29:14.784Z", + "MDN/Yari": { + "modified": "2019-09-06T03:29:26.311Z", "contributors": [ - "alattalatta", "SphinxKnight", - "under_09" + "wbamberg", + "zziuni" ] }, - "Web/JavaScript/Reference/Global_Objects/eval": { - "modified": "2020-11-14T12:46:31.739Z", + "MDN/Contribute/Howto/Write_an_API_reference/Sidebars": { + "modified": "2020-09-30T12:56:35.846Z", "contributors": [ - "cog25", - "EatChangmyeong", - "alattalatta", - "LOG91", - "goeo1066", - "desty", - "nicesh" + "chrisdavidmills", + "zziuni" ] }, - "Web/JavaScript/Reference/Global_Objects/globalThis": { - "modified": "2020-10-15T22:14:31.677Z", + "orphaned/MDN/Structures/API_references": { + "modified": "2020-09-30T12:56:35.705Z", "contributors": [ - "alattalatta" + "chrisdavidmills", + "zziuni" ] }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-10-15T21:44:39.927Z", + "orphaned/MDN/Tools/Page_regeneration": { + "modified": "2020-09-30T16:51:25.059Z", "contributors": [ - "alattalatta", + "chrisdavidmills", + "wbamberg", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/isNaN": { - "modified": "2020-10-15T21:46:27.577Z", + "Mozilla/Developer_guide/Source_Code/CVS": { + "modified": "2019-03-23T23:42:11.059Z", "contributors": [ - "alattalatta", - "Parcovia", - "Netaras" + "teoli", + "NoBrain" ] }, - "Web/JavaScript/Reference/Global_Objects/null": { - "modified": "2020-10-15T21:40:32.117Z", + "Mozilla/Add-ons/WebExtensions/API/menus/ContextType": { + "modified": "2020-10-15T22:14:46.556Z", "contributors": [ - "alattalatta", - "nicesh" + "SphinxKnight", + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/parseFloat": { - "modified": "2020-10-15T21:58:14.258Z", + "Mozilla/Add-ons/WebExtensions/API/menus/create": { + "modified": "2020-10-15T22:14:49.550Z", "contributors": [ - "alattalatta", - "inkyungkim" + "SphinxKnight", + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/parseInt": { - "modified": "2020-10-15T21:48:49.061Z", + "Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement": { + "modified": "2020-10-15T22:14:45.950Z", "contributors": [ - "bigsaigon333", - "alattalatta", - "magnoliaa" + "SphinxKnight", + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/undefined": { - "modified": "2020-10-15T21:40:31.421Z", + "Mozilla/Add-ons/WebExtensions/API/menus": { + "modified": "2020-10-15T21:53:39.975Z", "contributors": [ - "alattalatta", - "nicesh" + "SphinxKnight", + "grizlupo", + "wbamberg", + "hoony" ] }, - "Web/JavaScript/Reference/Global_Objects/uneval": { - "modified": "2020-10-15T21:52:46.647Z", + "Mozilla/Add-ons/WebExtensions/API/menus/onShown": { + "modified": "2020-10-15T22:14:49.769Z", "contributors": [ - "alattalatta", - "teoli", - "Perlmint" + "SphinxKnight", + "grizlupo" ] }, - "Web/JavaScript/Reference/Iteration_protocols": { - "modified": "2020-03-12T19:44:08.276Z", + "Web/API/Navigation_timing_API": { + "modified": "2019-03-23T23:19:34.117Z", "contributors": [ - "Snark", - "dragmove", - "echo304" + "sbnet21" ] }, - "Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2020-10-15T21:47:17.603Z", + "Learn/Server-side/Node_server_without_framework": { + "modified": "2020-07-16T22:36:05.665Z", "contributors": [ - "honggaruy", - "alattalatta", - "softweaver", - "Roomination", - "paranbaram" + "kidkkr" ] }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T21:15:29.282Z", + "Mozilla/Firefox/Releases/3/Notable_bugs_fixed": { + "modified": "2019-03-23T23:51:11.073Z", "contributors": [ - "limkukhyun", - "Violet-Bora-Lee", - "alattalatta", - "haeguri", - "Netaras", "teoli", - "Anonymous" + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Addition": { - "modified": "2020-10-15T22:34:18.983Z", + "orphaned/Places/Custom_Containers": { + "modified": "2020-01-12T05:08:34.067Z", "contributors": [ - "limkukhyun" + "alattalatta", + "wbamberg", + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Arithmetic_Operators": { - "modified": "2020-10-15T21:50:08.581Z", + "orphaned/Places/Instantiating_Views": { + "modified": "2020-01-12T05:08:39.519Z", "contributors": [ "alattalatta", - "chimimode", - "fscholz", "wbamberg", - "KSH-code", - "siwoolee", - "ChanghwaLee", - "imskojs" + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Assignment_Operators": { - "modified": "2020-10-15T21:50:31.036Z", + "orphaned/Places/Query_System": { + "modified": "2019-04-20T03:50:18.185Z", "contributors": [ - "alattalatta", "wbamberg", - "NessunKim", - "daehyoung" + "teoli", + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_Operators": { - "modified": "2020-10-15T21:25:50.021Z", + "orphaned/Places/Views": { + "modified": "2020-01-12T05:08:46.290Z", "contributors": [ "alattalatta", - "jghg2724", - "epicsaga", - "daewon", - "teoli", - "Cho.Eun" + "wbamberg", + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Comma_Operator": { - "modified": "2020-10-15T21:48:31.441Z", + "Mozilla/Firefox/Releases/3/SVG_improvements": { + "modified": "2019-03-23T23:51:12.606Z", "contributors": [ - "alattalatta", - "hoony" + "teoli", + "Suguni" ] }, - "Web/JavaScript/Reference/Operators/Comparison_Operators": { - "modified": "2020-10-15T21:46:03.880Z", + "Web/SVG/SVG_1.1_Support_in_Firefox": { + "modified": "2019-03-23T23:41:45.344Z", "contributors": [ - "alattalatta", - "Parcovia", - "ohsory1324", - "LEGOLLAS" + "teoli", + "Cliffet", + "taggon" ] }, - "Web/JavaScript/Reference/Operators/Conditional_Operator": { - "modified": "2020-10-15T21:39:25.018Z", + "conflicting/Web/JavaScript/JavaScript_technologies_overview": { + "modified": "2019-12-13T21:09:57.295Z", "contributors": [ - "pyjun01", - "alattalatta", - "limkukhyun", - "taisuk", - "reoim", - "epicsaga" + "wbamberg", + "Netaras", + "Sebuls" ] }, - "Web/JavaScript/Reference/Operators/Destructuring_assignment": { - "modified": "2020-10-15T21:45:50.516Z", + "orphaned/Theme_Packaging": { + "modified": "2019-03-23T23:42:36.273Z", "contributors": [ - "alattalatta", - "corund", - "dolmoon", - "NessunKim", - "kdex", - "faker007", - "Netaras" + "teoli", + "애들아빠" ] }, - "Web/JavaScript/Reference/Operators/Equality": { - "modified": "2020-10-15T22:35:05.143Z", + "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { + "modified": "2020-07-16T22:22:33.009Z", "contributors": [ - "junnapark" + "ybin", + "teoli", + "Jeongsw", + "Sebuls" ] }, - "Web/JavaScript/Reference/Operators/Grouping": { - "modified": "2020-10-15T21:45:49.973Z", + "orphaned/Tools/Add-ons/DOM_Inspector": { + "modified": "2020-07-16T22:36:24.511Z", "contributors": [ - "alattalatta", - "SeungYeol", - "seung-yeol" + "SphinxKnight", + "wbamberg", + "Sebuls" ] }, - "Web/JavaScript/Reference/Operators/Nullish_coalescing_operator": { - "modified": "2020-10-15T22:25:44.809Z", + "orphaned/Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.557Z", "contributors": [ - "ssohymind", - "Jung.Kyu-Hyun" + "SphinxKnight", + "wbamberg", + "mfluehr" ] }, - "Web/JavaScript/Reference/Operators/Object_initializer": { - "modified": "2020-10-15T21:47:08.402Z", + "Tools/Debugger/Keyboard_shortcuts": { + "modified": "2020-07-16T22:35:18.793Z", "contributors": [ - "honggaruy", - "callin2", - "Netaras" + "SphinxKnight", + "wbamberg", + "toyuq" ] }, - "Web/JavaScript/Reference/Operators/Optional_chaining": { - "modified": "2020-10-15T22:25:42.843Z", + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:07.978Z", "contributors": [ - "Jung.Kyu-Hyun" + "SphinxKnight", + "wbamberg" ] }, - "Web/JavaScript/Reference/Operators/Pipeline_operator": { - "modified": "2020-10-15T22:15:31.566Z", + "Tools/Debugger/How_to/Open_the_debugger": { + "modified": "2020-07-16T22:35:09.268Z", "contributors": [ - "alattalatta" + "SphinxKnight", + "wbamberg", + "toyuq", + "galcyurio" ] }, - "Web/JavaScript/Reference/Operators/Property_Accessors": { - "modified": "2020-10-15T21:46:18.602Z", + "Tools/Debugger/How_to/Search": { + "modified": "2020-07-16T22:35:15.581Z", "contributors": [ - "alattalatta", - "Violet-Bora-Lee", - "Netaras" + "SphinxKnight", + "wbamberg", + "toyuq" ] }, - "Web/JavaScript/Reference/Operators/Remainder": { - "modified": "2020-10-15T22:35:04.854Z", + "Tools/Debugger/How_to/Set_a_breakpoint": { + "modified": "2020-07-16T22:35:10.232Z", "contributors": [ - "junnapark" + "SphinxKnight", + "wbamberg", + "toyuq" ] }, - "Web/JavaScript/Reference/Operators/Spread_syntax": { - "modified": "2020-10-15T22:03:25.315Z", + "Mozilla/Firefox/Releases/2/Updating_extensions": { + "modified": "2019-03-23T23:47:28.581Z", "contributors": [ - "alattalatta", - "cs09g", - "cnaa97", - "ageofsys" + "Channy" ] }, - "Web/JavaScript/Reference/Operators/async_function": { - "modified": "2020-10-15T21:53:15.087Z", + "Mozilla/Firefox/Releases/3/Updating_extensions": { + "modified": "2019-12-13T20:35:48.646Z", "contributors": [ - "ibizcox", - "alattalatta", - "undefcat" + "wbamberg", + "Sheppy", + "Suguni" ] }, - "Web/JavaScript/Reference/Operators/await": { - "modified": "2020-10-15T21:53:13.195Z", + "Mozilla/Firefox/Releases/3/Updating_web_applications": { + "modified": "2019-03-23T23:50:12.740Z", "contributors": [ - "rmfpdlxmtidl", - "limkukhyun", - "NessunKim", - "HomoEfficio", - "undefcat" + "wbamberg", + "teoli", + "Sheppy", + "Channy" ] }, - "Web/JavaScript/Reference/Operators/class": { - "modified": "2020-10-15T21:46:02.874Z", + "orphaned/Using_Mozilla_in_Testing_and_Debugging_Web_Sites": { + "modified": "2019-03-23T23:13:10.960Z", "contributors": [ - "dsma73", - "alattalatta", - "Netaras" + "cap3618" ] }, - "Web/JavaScript/Reference/Operators/delete": { - "modified": "2020-10-15T21:56:50.911Z", + "Web/API/Document_Object_Model/Introduction": { + "modified": "2020-02-10T04:12:58.179Z", "contributors": [ - "alattalatta", - "itsjiwonpark", - "Hou" + "sungik-choi", + "jswisher", + "cs09g", + "2circumflex", + "dakeshi" ] }, - "Web/JavaScript/Reference/Operators/function": { - "modified": "2020-10-15T21:45:42.250Z", + "Web/API/Fetch_API/Using_Fetch": { + "modified": "2020-10-15T22:00:18.673Z", "contributors": [ - "dolmoon", + "JINSUNG1048", + "CressZZ", + "LiamYong", + "ajy720", "limkukhyun", - "laranhee", - "Netaras" + "briz", + "mukeunzi", + "real0131", + "2dubbing", + "BANIP" ] }, - "Web/JavaScript/Reference/Operators/function*": { - "modified": "2020-10-15T21:38:18.382Z", + "Web/API/HTML_Drag_and_Drop_API/Drag_operations": { + "modified": "2019-03-18T21:31:26.321Z", "contributors": [ - "limkukhyun", - "KSH-code", - "JaehaAhn" + "dolmoon" ] }, - "Web/JavaScript/Reference/Operators/in": { - "modified": "2020-03-12T19:42:49.608Z", + "Web/API/HTML_Drag_and_Drop_API": { + "modified": "2020-09-06T00:51:11.619Z", "contributors": [ - "." + "zzoPark", + "jinyoung", + "constmoon", + "lundella", + "jinhyukkim" ] }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-10-15T21:48:46.760Z", + "Web/API/HTMLOrForeignElement/dataset": { + "modified": "2020-10-15T21:56:46.705Z", "contributors": [ + "Kaben", "alattalatta", - "tg0825", - "dooyou21", - "moolow", - "magnoliaa" + "jyhwng", + "KimSejune" ] }, - "Web/JavaScript/Reference/Operators/new": { - "modified": "2020-10-15T21:50:30.370Z", + "Web/API/ElementCSSInlineStyle/style": { + "modified": "2020-10-15T21:18:22.703Z", "contributors": [ "alattalatta", - "luke.bae", - "KSH-code", - "daehyoung" + "fscholz", + "AshfaqHossain", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Operators/new.target": { - "modified": "2020-10-15T21:48:09.333Z", + "Web/API/HTMLOrForeignElement/tabIndex": { + "modified": "2019-03-23T23:42:52.929Z", "contributors": [ - "alattalatta", + "fscholz", + "jsx", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Operators/super": { - "modified": "2020-10-15T21:43:46.088Z", + "Web/API/Navigator/connection": { + "modified": "2019-03-23T23:26:48.403Z", "contributors": [ - "alattalatta", - "jeonnoej" + "fscholz", + "khalid32", + "teoli", + "hyeonseok" ] }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-10-15T21:16:21.207Z", + "Web/API/HTMLElement/innerText": { + "modified": "2020-10-15T22:08:26.441Z", "contributors": [ - "StolenMoments", - "cs09g", "alattalatta", - "utatti", - "huusz", + "DeadIntegral" + ] + }, + "Web/API/Screen/onorientationchange": { + "modified": "2019-03-23T23:26:53.977Z", + "contributors": [ + "jsx", "teoli", - "eros21c", - "Channy" + "junho85" ] }, - "Web/JavaScript/Reference/Operators/typeof": { - "modified": "2020-10-15T21:47:39.354Z", + "Web/API/Streams_API/Concepts": { + "modified": "2019-03-18T21:23:57.078Z", "contributors": [ - "Seonghui", - "alattalatta", - "dale0713" + "jjangga0214" ] }, - "Web/JavaScript/Reference/Operators/void": { - "modified": "2020-10-15T21:24:25.804Z", + "Web/API/Web_Workers_API/Using_web_workers": { + "modified": "2020-04-03T02:58:31.932Z", "contributors": [ - "alattalatta", - "teoli", - "siriz" + "dh", + "roupkk", + "andrewsohn", + "NFM", + "epicsaga" ] }, - "Web/JavaScript/Reference/Operators/yield": { - "modified": "2020-03-12T19:43:03.959Z", + "Web/API/WindowOrWorkerGlobalScope/setTimeout": { + "modified": "2019-03-23T22:22:22.449Z", "contributors": [ - "coolengineer", - "ByeongGi", - "2oosoo", - "Yunhong-Min", - "preco21" + "DevJang", + "TroyTae" ] }, - "Web/JavaScript/Reference/Operators/yield*": { - "modified": "2020-10-15T21:41:31.854Z", + "Web/API/XMLHttpRequest/timeout_event": { + "modified": "2019-05-28T20:54:41.611Z", "contributors": [ - "alattalatta", - "hanmomhanda", - "preco21" + "jswisher", + "wbamberg", + "ExE-Boss", + "DeadIntegral" ] }, - "Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators)": { - "modified": "2020-10-15T21:47:31.347Z", + "Web/CSS/Containing_block": { + "modified": "2020-01-07T10:38:47.261Z", "contributors": [ "alattalatta", - "atomDevelop", - "r2fresh", - "Parcovia", - "gnujoow", - "helloheesu", - "imskojs" + "nyxchung" ] }, - "Web/JavaScript/Reference/Operators/연산자_우선순위": { - "modified": "2020-04-10T08:53:04.223Z", + "Learn/CSS/Howto/CSS_FAQ": { + "modified": "2020-07-16T22:25:45.337Z", "contributors": [ - "EatChangmyeong", - "alattalatta", - "." + "miyunim" ] }, - "Web/JavaScript/Reference/Statements": { - "modified": "2020-10-15T21:26:12.348Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { + "modified": "2019-04-08T10:28:17.719Z", "contributors": [ "alattalatta", - "naduhy2", - "Netaras", - "teoli", - "Sheppy" + "jyqry" ] }, - "Web/JavaScript/Reference/Statements/Empty": { - "modified": "2020-10-15T22:04:17.983Z", + "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2019-03-18T20:55:20.567Z", "contributors": [ - "alattalatta", - "limkukhyun" + "5JJ", + "joeunha", + "beowolf9", + "silmari", + "soonoo", + "wankyu", + "Latera" ] }, - "Web/JavaScript/Reference/Statements/async_function": { - "modified": "2020-10-15T21:51:55.526Z", + "Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox": { + "modified": "2019-10-04T18:40:14.389Z", "contributors": [ - "MoonHyuk", - "jhoijune", - "DeadIntegral", - "limkukhyun", - "Konan" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/block": { - "modified": "2020-10-15T21:50:27.290Z", + "Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow": { + "modified": "2019-09-24T15:45:35.513Z", "contributors": [ - "alattalatta", - "daehyoung" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/break": { - "modified": "2020-10-15T21:44:31.572Z", + "Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow": { + "modified": "2019-09-26T08:28:44.702Z", "contributors": [ - "alattalatta", - "jeehyukwon", - "Netaras" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/class": { - "modified": "2020-10-15T21:46:03.105Z", + "Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes": { + "modified": "2019-09-17T21:10:09.773Z", "contributors": [ - "alattalatta", - "Netaras" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/const": { - "modified": "2020-10-15T21:38:50.829Z", + "Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow": { + "modified": "2020-03-10T09:52:12.477Z", "contributors": [ - "alattalatta", - "warnee", - "maxtortime", - "kdex", - "Netaras", - "kuil09" + "EricByHPHK", + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/continue": { - "modified": "2020-10-15T22:04:27.151Z", + "Web/CSS/CSS_Masking": { + "modified": "2019-04-26T08:55:40.990Z", "contributors": [ "alattalatta", - "SSJ-unclear", - "limkukhyun" + "Netaras" ] }, - "Web/JavaScript/Reference/Statements/debugger": { - "modified": "2020-10-15T22:04:18.665Z", + "Web/CSS/CSS_Values_and_Units": { + "modified": "2020-11-29T04:33:10.671Z", "contributors": [ - "alattalatta", - "limkukhyun" + "alanhchoi" ] }, - "Web/JavaScript/Reference/Statements/default": { - "modified": "2020-10-15T22:07:33.273Z", + "Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property": { + "modified": "2019-03-23T23:41:42.325Z", "contributors": [ - "alattalatta", - "SSJ-unclear" + "hjunshin", + "teoli", + "jaemin_jo", + "Ioseph" ] }, - "Web/JavaScript/Reference/Statements/do...while": { - "modified": "2020-10-15T22:30:37.801Z", + "Web/SVG/Tutorial/SVG_and_CSS": { + "modified": "2019-03-23T23:41:56.694Z", "contributors": [ - "jyman7811" + "teoli", + "Ioseph" ] }, - "Web/JavaScript/Reference/Statements/export": { - "modified": "2020-10-15T21:41:49.561Z", + "orphaned/Web/CSS/Index": { + "modified": "2019-05-26T05:51:14.395Z", "contributors": [ - "copyx", - "alattalatta", - "yonggoo.noh", - "LeeJunyeol", - "umbria", - "haydnhkim" + "alattalatta" ] }, - "Web/JavaScript/Reference/Statements/for": { - "modified": "2020-10-15T21:46:03.615Z", + "orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template": { + "modified": "2020-10-15T21:16:53.027Z", "contributors": [ "alattalatta", - "SeungYeol" + "wbamberg", + "chrisdavidmills", + "teoli", + "Pastelgrim" ] }, - "Web/JavaScript/Reference/Statements/for-await...of": { - "modified": "2020-10-15T22:27:58.512Z", + "Web/Progressive_web_apps/Responsive/Media_types": { + "modified": "2019-03-23T23:33:02.082Z", "contributors": [ - "composite" + "teoli", + "SpikeYou" ] }, - "Web/JavaScript/Reference/Statements/for...in": { - "modified": "2020-10-15T21:26:08.013Z", + "Web/CSS/Adjacent_sibling_combinator": { + "modified": "2020-10-15T21:53:17.801Z", "contributors": [ - "Sunmin0520", - "limkukhyun", - "teoli", - "Androidbee" + "alattalatta", + "neatnet" ] }, - "Web/JavaScript/Reference/Statements/for...of": { - "modified": "2020-10-15T21:36:35.059Z", + "Web/API/Element/blur_event": { + "modified": "2019-03-18T21:27:20.806Z", "contributors": [ - "jacob17", - "alattalatta", - "Netaras", - "ligeek" + "ExE-Boss", + "whdckszxxx" ] }, - "Web/JavaScript/Reference/Statements/function": { - "modified": "2020-10-15T21:45:43.150Z", + "Web/API/Window/DOMContentLoaded_event": { + "modified": "2020-12-03T14:42:33.988Z", "contributors": [ + "dink95", "alattalatta", - "dolmoon", - "Netaras" + "wbamberg", + "ExE-Boss", + "project42da" ] }, - "Web/JavaScript/Reference/Statements/function*": { - "modified": "2020-10-15T21:38:18.568Z", + "Web/API/Window/load_event": { + "modified": "2019-04-30T14:18:11.441Z", "contributors": [ - "alattalatta", - "SphinxKnight", - "silmari", - "kdex", - "resoliwan", - "KisukPark", - "AHNJAEHA", - "preco21", - "JaehaAhn" + "wbamberg", + "ExE-Boss", + "SuminNoh" ] }, - "Web/JavaScript/Reference/Statements/if...else": { - "modified": "2020-10-15T21:46:05.432Z", + "Web/API/BroadcastChannel/message_event": { + "modified": "2019-04-30T14:16:28.259Z", "contributors": [ - "yami03", - "alattalatta", - "Parcovia", - "Jungmin" + "wbamberg", + "ExE-Boss", + "JinSeungHo" ] }, - "Web/JavaScript/Reference/Statements/import": { - "modified": "2020-10-15T21:39:54.342Z", + "Web/API/Vibration_API": { + "modified": "2020-10-15T21:24:18.629Z", "contributors": [ "alattalatta", - "hwshim", - "haydnhkim" + "pjc0247", + "Sheppy", + "yunji_koh" ] }, - "Web/JavaScript/Reference/Statements/label": { - "modified": "2020-03-12T19:45:32.505Z", + "Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2020-11-10T11:07:52.526Z", "contributors": [ - "wafersroom" + "hKa2020", + "alattalatta", + "hwanseung", + "BANIP", + "seoyunho", + "Ground-Silver0903", + "Sebastianz", + "roupkk", + "mrstork", + "malayaleecoder", + "jooddang", + "jhonghee" ] }, - "Web/JavaScript/Reference/Statements/let": { - "modified": "2020-10-15T21:40:35.318Z", + "Web/CSS/Visual_formatting_model": { + "modified": "2019-09-26T13:57:16.375Z", "contributors": [ - "cjacking3", - "SeonHyungJo", - "Isitea", - "RingoKim" + "Hwan-Woong-Lee", + "nyxchung", + "cmygray", + "cheeee", + "dotorify", + "hotsummmer", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Statements/return": { - "modified": "2020-10-15T21:50:13.127Z", + "Web/API/Fullscreen_API": { + "modified": "2020-10-15T21:24:24.180Z", "contributors": [ - "alattalatta", - "2oosoo", - "Diana_" + "DeadIntegral", + "wbamberg", + "junho85" ] }, - "Web/JavaScript/Reference/Statements/switch": { - "modified": "2020-10-15T21:49:53.296Z", + "Web/Guide/HTML/Editable_content": { + "modified": "2019-03-23T22:40:12.545Z", "contributors": [ - "chimimode", - "ByeongGi", - "nidev" + "gblue1223" ] }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-10-15T22:04:25.321Z", + "Web/Guide/Parsing_and_serializing_XML": { + "modified": "2019-03-23T22:16:47.020Z", "contributors": [ - "SSJ-unclear", - "hongnakyung" + "young-gratia" ] }, - "Web/JavaScript/Reference/Statements/try...catch": { - "modified": "2020-10-15T21:40:10.256Z", + "Web/Guide/Graphics": { + "modified": "2020-02-15T07:39:57.101Z", "contributors": [ - "limkukhyun", - "deltakor1234", - "SSJ-unclear", - "pianorange", - "epicsaga" + "Netaras", + "hyeonseok", + "narae_lee" ] }, - "Web/JavaScript/Reference/Statements/var": { - "modified": "2020-10-15T21:42:33.307Z", + "Web/API/Canvas_API": { + "modified": "2020-02-05T06:54:04.340Z", "contributors": [ "alattalatta", - "naduhy2", - "jaeminkim87", - "teoli" + "chungheepark", + "bluewings", + "cs09g", + "Netaras", + "teoli", + "ethertank", + "dextra", + "Suguni" ] }, - "Web/JavaScript/Reference/Statements/while": { - "modified": "2020-03-12T19:45:49.250Z", + "Web/API/Canvas_API/Manipulating_video_using_canvas": { + "modified": "2019-06-05T03:56:50.784Z", "contributors": [ - "galcyurio", - "ChanghwaLee" + "Yeri-Kim" ] }, - "Web/JavaScript/Reference/Statements/with": { - "modified": "2020-10-15T22:07:40.562Z", + "Web/API/Canvas_API/Tutorial/Advanced_animations": { + "modified": "2020-12-05T09:44:35.831Z", "contributors": [ - "SSJ-unclear" + "minthing" ] }, - "Web/JavaScript/Reference/Strict_mode": { - "modified": "2020-06-29T00:30:58.676Z", + "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors": { + "modified": "2019-10-10T16:32:24.689Z", "contributors": [ - "ranhyegg", - "genzuby", - "Kim1Jun", - "cs09g", - "alattalatta", - "geunhyung", - "limkukhyun", - "dsma73", - "cecilia.cho", - "Minsoo_Kim", - "laranhee", - "KSH-code", - "imskojs", - "magnoliaa" + "kbsbroad", + "sujilee91", + "donghyun", + "Sebastianz", + "AlwaysOnce" ] }, - "Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode": { - "modified": "2020-03-12T19:48:28.686Z", + "Web/API/Canvas_API/Tutorial/Basic_animations": { + "modified": "2019-03-25T03:54:23.486Z", "contributors": [ - "SeonHyungJo" + "AlwaysOnce" ] }, - "Web/JavaScript/Reference/Template_literals": { - "modified": "2020-10-15T21:47:14.004Z", + "Web/API/Canvas_API/Tutorial/Basic_usage": { + "modified": "2019-12-12T22:32:43.483Z", "contributors": [ - "hjleesm", - "rev1c0sm0s", - "limkukhyun", - "springday1023", "kbsbroad", - "rlaxognsk", - "dragmove" + "OkHyeon", + "sujilee91", + "MuhunKim" ] }, - "Web/JavaScript/Reference/Trailing_commas": { - "modified": "2020-11-24T03:08:45.215Z", + "Web/API/Canvas_API/Tutorial/Compositing/Example": { + "modified": "2019-03-18T21:40:09.058Z", "contributors": [ - "bckim9489", - "EatChangmyeong", - "samee" + "EatChangmyeong" ] }, - "Web/JavaScript/Typed_arrays": { - "modified": "2020-03-12T19:44:00.798Z", + "Web/API/Canvas_API/Tutorial/Compositing": { + "modified": "2019-03-23T23:08:47.571Z", "contributors": [ - "Netaras" + "EatChangmyeong", + "AlwaysOnce" ] }, - "Web/JavaScript/쉘": { - "modified": "2020-03-12T19:44:13.687Z", + "Web/API/Canvas_API/Tutorial/Drawing_shapes": { + "modified": "2019-03-25T03:42:34.299Z", "contributors": [ - "limkukhyun", - "hoony" + "kbsbroad", + "sujilee91" ] }, - "Web/JavaScript/시작하기": { - "modified": "2019-03-23T23:14:43.699Z", + "Web/API/Canvas_API/Tutorial/Finale": { + "modified": "2020-12-02T07:47:45.530Z", "contributors": [ - "eunsuklee", - "teoli" + "chzhclq17" ] }, - "Web/JavaScript/언어_리소스": { - "modified": "2020-03-12T19:39:22.531Z", + "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility": { + "modified": "2019-03-18T21:18:34.778Z", "contributors": [ - "ahnzaz", - "KSH-code", - "Netaras", - "teoli", - "NFM" + "kbsbroad" ] }, - "Web/Manifest": { - "modified": "2020-10-15T22:32:27.672Z", + "Web/API/Canvas_API/Tutorial": { + "modified": "2019-09-23T23:04:58.681Z", "contributors": [ - "alattalatta" + "dbwodlf3", + "alattalatta", + "danhojin", + "MuhunKim", + "donghyun", + "AlwaysOnce" ] }, - "Web/MathML": { - "modified": "2020-10-15T21:24:14.563Z", + "Web/API/Canvas_API/Tutorial/Optimizing_canvas": { + "modified": "2020-06-04T04:24:50.578Z", "contributors": [ - "alattalatta", - "fred.wang", - "hyeonseok", - "narae_lee" + "composite", + "kbsbroad" ] }, - "Web/Media": { - "modified": "2019-07-04T01:00:37.497Z", + "Web/API/Canvas_API/Tutorial/Using_images": { + "modified": "2020-06-18T07:33:39.788Z", "contributors": [ - "developer19899" + "dooyou21", + "cs09g", + "kbsbroad", + "klight1994", + "sujilee91" ] }, - "Web/Media/Autoplay_guide": { - "modified": "2019-09-17T06:49:59.371Z", + "Web/API/Canvas_API/Tutorial/Transformations": { + "modified": "2019-03-18T21:20:50.794Z", "contributors": [ - "ahnzaz" + "jinah1000" ] }, - "Web/Media/Formats": { - "modified": "2019-09-17T02:15:54.155Z", + "orphaned/Web/HTML/Element/command": { + "modified": "2020-10-15T21:44:01.823Z", "contributors": [ - "Havi Hoffman" + "alattalatta", + "Rich_Village" ] }, - "Web/Media/Formats/비디오코덱": { - "modified": "2019-10-21T23:30:00.090Z", + "orphaned/Web/HTML/Element/element": { + "modified": "2020-10-15T21:35:22.163Z", "contributors": [ - "ahnzaz" + "alattalatta", + "azunyan3" ] }, - "Web/Media/Formats/컨테이너": { - "modified": "2019-09-19T00:05:45.367Z", + "orphaned/Web/HTML/Global_attributes/dropzone": { + "modified": "2020-10-15T22:06:26.786Z", "contributors": [ - "ahnzaz" + "alattalatta", + "dolmoon" ] }, - "Web/Media/Formats/코덱파라미터": { - "modified": "2020-06-10T22:11:12.156Z", + "Web/HTML/Global_attributes/class": { + "modified": "2020-10-15T21:51:13.209Z", "contributors": [ - "ahnzaz" + "alattalatta", + "dolmoon", + "woojin.jo" ] }, - "Web/Performance": { - "modified": "2020-01-12T15:28:31.330Z", + "Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2020-01-10T12:08:26.959Z", "contributors": [ - "chrisdavidmills" + "alattalatta", + "sudo0272", + "Kaben", + "bombinari", + "naduhy2", + "miname" ] }, - "Web/Performance/브라우저는_어떻게_동작하는가": { - "modified": "2020-12-09T08:24:42.107Z", + "Web/Guide/HTML/HTML5": { + "modified": "2019-03-24T00:11:07.419Z", "contributors": [ - "doong-jo" + "teoli", + "Channy", + "Dwchiang", + "vigia122", + "jisung", + "Joone" ] }, - "Web/Performance/중요_렌더링_경로": { - "modified": "2020-09-28T15:59:43.713Z", + "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:38:47.847Z", "contributors": [ - "Joontae-Kim" + "kybin", + "kuil09", + "juyoungbang", + "teoli", + "Channy" ] }, - "Web/Progressive_web_apps": { - "modified": "2019-03-23T22:00:19.382Z", + "Web/HTTP/Browser_detection_using_the_user_agent": { + "modified": "2020-09-13T12:21:12.513Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "sephiron99", + "MyungsunLee", + "alattalatta", + "citrus.alice", + "seokju-na", + "wicksome" ] }, - "Web/Progressive_web_apps/Add_to_home_screen": { - "modified": "2020-01-26T15:58:32.379Z", + "Web/JavaScript/About_JavaScript": { + "modified": "2020-03-12T19:36:55.143Z", "contributors": [ - "alattalatta", - "chrisdavidmills", - "cs09g" + "JinKang", + "Parcovia", + "cs09g", + "imjang57", + "wayne-kim", + "desty", + "stephenjang", + "Luzi.kr", + "teoli", + "Zer0th", + "99corps" ] }, - "Web/Progressive_web_apps/App_structure": { - "modified": "2020-05-31T18:37:47.885Z", + "orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript": { + "modified": "2020-09-14T22:22:46.677Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "limkukhyun" ] }, - "Web/Progressive_web_apps/Installable_PWAs": { - "modified": "2020-05-31T18:37:46.514Z", + "Web/JavaScript/Closures": { + "modified": "2020-03-12T19:37:58.819Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "chaewonkong", + "songdoing", + "RamiTae", + "Violet-Bora-Lee", + "alattalatta", + "henry_hwang", + "Seonghui", + "guyeol", + "limkukhyun", + "zziuni", + "Yoonjoo", + "KSH-code", + "afrontend", + "AlexMin", + "Jongmin", + "MyHyuny", + "joeunha", + "Kaben", + "noritersand", + "kdnmih", + "teoli", + "JaehwanLee", + "jaemin_jo" ] }, - "Web/Progressive_web_apps/Offline_Service_workers": { - "modified": "2020-05-31T18:37:49.321Z", + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-04-04T00:50:18.045Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "peter1035k", + "jeongraeKim", + "dbwodlf3", + "project42da", + "quddnr153", + "ahnzaz", + "laranhee", + "daewooLeeNy", + "danhojin", + "shim.hw0810", + "faker007", + "juyonglee", + "epicsaga", + "sftblw", + "mixed80", + "teoli", + "JaehwanLee", + "jaemin_jo" ] }, - "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { - "modified": "2019-03-18T20:52:11.625Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About": { + "modified": "2019-01-16T16:11:14.324Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "teoli", + "Wafe", + "taggon" ] }, - "Web/Progressive_web_apps/소개": { - "modified": "2019-03-18T20:52:13.104Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages": { + "modified": "2019-01-16T14:15:11.129Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "teoli", + "99corps" ] }, - "Web/SVG": { - "modified": "2019-11-05T05:19:15.768Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression": { + "modified": "2019-03-23T23:43:48.309Z", "contributors": [ - "dbwodlf3", - "u4bi", - "kybin", - "nacyot", - "hoony", - "dewey94esb", - "Delapouite" + "teoli", + "디토" ] }, - "Web/SVG/Applying_SVG_effects_to_HTML_content": { - "modified": "2019-03-23T22:44:07.191Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters": { + "modified": "2019-03-23T23:43:54.514Z", "contributors": [ - "Narrativi", - "hoony" + "jigs12", + "teoli", + "ethertank", + "Wafe" ] }, - "Web/SVG/Attribute": { - "modified": "2019-03-23T22:32:34.072Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods": { + "modified": "2019-03-23T23:43:58.661Z", "contributors": [ - "Ninjapolian" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/calcMode": { - "modified": "2019-03-23T22:11:02.860Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type": { + "modified": "2019-03-23T23:43:46.816Z", "contributors": [ - "tadkim" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/cx": { - "modified": "2019-03-23T22:32:29.630Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties": { + "modified": "2019-03-23T23:43:53.828Z", "contributors": [ - "se0kjun" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/d": { - "modified": "2019-03-18T21:21:40.969Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects": { + "modified": "2019-01-16T15:05:32.812Z", "contributors": [ - "officialmansu" + "teoli", + "Anonymous" ] }, - "Web/SVG/Attribute/keyTimes": { - "modified": "2019-03-23T22:11:05.080Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties": { + "modified": "2019-03-23T23:43:44.923Z", "contributors": [ - "tadkim" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/values": { - "modified": "2019-03-23T22:11:11.110Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function": { + "modified": "2019-03-23T23:43:44.078Z", "contributors": [ - "tadkim" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/version": { - "modified": "2019-03-18T21:41:36.785Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References": { + "modified": "2019-03-23T23:43:58.264Z", "contributors": [ - "MyeonghwanCho" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/viewBox": { - "modified": "2019-03-23T22:28:50.142Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions": { + "modified": "2019-01-16T16:16:32.143Z", "contributors": [ - "dragmove" + "teoli", + "taggon" ] }, - "Web/SVG/Element": { - "modified": "2019-03-23T23:17:31.660Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview": { + "modified": "2019-01-16T14:15:11.648Z", "contributors": [ - "dewey94esb", - "kscarfone" + "teoli", + "S. Kang", + "jsnapz", + "Ape1126", + "Wafe", + "Huick", + "Gilchris" ] }, - "Web/SVG/Element/a": { - "modified": "2020-10-15T21:40:12.249Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties": { + "modified": "2019-01-16T15:50:20.671Z", "contributors": [ - "alattalatta", - "Sebastianz", - "dewey94esb" + "teoli", + "Gilchris" ] }, - "Web/SVG/Element/altGlyph": { - "modified": "2020-10-15T21:40:13.413Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators": { + "modified": "2019-03-23T23:41:53.669Z", "contributors": [ - "alattalatta", - "Sebastianz", - "dewey94esb" + "teoli", + "taggon" ] }, - "Web/SVG/Element/circle": { - "modified": "2020-10-15T21:40:18.375Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators": { + "modified": "2019-03-23T23:41:51.754Z", "contributors": [ - "alattalatta", - "wbamberg", - "Sebastianz", - "dewey94esb" + "teoli", + "taggon" ] }, - "Web/SVG/Element/ellipse": { - "modified": "2020-10-15T21:46:51.498Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object": { + "modified": "2019-03-23T23:43:56.661Z", "contributors": [ - "alattalatta", - "wbamberg", - "Sebastianz", - "se0kjun" + "teoli", + "Wafe" ] }, - "Web/SVG/Element/사각형": { - "modified": "2020-10-15T21:27:38.577Z", + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-06-03T11:11:26.830Z", "contributors": [ + "gksrlf2ek", + "sujinlee0616", "alattalatta", - "wbamberg", - "Sebastianz", - "JeongSeongDae" + "shj9432", + "dsma73", + "yhyim", + "hohoonlee", + "limkukhyun", + "yangtaeho", + "gudrl", + "jadestern", + "ddarkchu", + "Netaras", + "HyunSeob", + "wikibook", + "VBChunguk", + "trazy", + "Donghyun_Lee", + "stephenjang", + "Rudy-Ahn", + "moolow", + "teoli", + "frog44" ] }, - "Web/SVG/Tutorial": { - "modified": "2019-09-02T22:37:58.598Z", + "Web/JavaScript/Guide/Details_of_the_Object_Model": { + "modified": "2020-03-12T19:42:17.394Z", "contributors": [ - "jwoo0122", - "EatChangmyeong", - "nacyot", - "epicsaga", - "teoli", - "이선영" + "doong-jo", + "nmsohn", + "DoublSB", + "limkukhyun", + "wbamberg", + "cmygray", + "khseok1060", + "ryukato" ] }, - "Web/SVG/Tutorial/Introduction": { - "modified": "2019-03-23T22:40:12.666Z", + "Web/JavaScript/Guide/Meta_programming": { + "modified": "2020-03-12T19:41:24.217Z", "contributors": [ - "EatChangmyeong", - "nacyot" + "limkukhyun", + "nodejs", + "stephenjang" ] }, - "Web/SVG/Tutorial/Paths": { - "modified": "2019-03-23T22:21:33.428Z", + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-11-13T15:07:54.630Z", "contributors": [ - "EatChangmyeong", - "grizlupo", - "newmsz", - "cnaa97" + "FennecFoxSW", + "ldss3sang", + "limkukhyun", + "bluerainmaker", + "ahnzaz", + "BG.Choi", + "gudrl", + "gnujoow", + "stitchworkingonthecode", + "ShihwanKim", + "Netaras", + "cs09g", + "Jsfumato", + "hwani163", + "junoim", + "ByeongGi", + "stephenjang" ] }, - "Web/SVG/Tutorial/Patterns": { - "modified": "2019-03-18T21:46:02.102Z", + "Web/JavaScript/Guide/Regular_Expressions/Assertions": { + "modified": "2020-09-14T21:47:15.957Z", "contributors": [ - "grizlupo" + "limkukhyun" ] }, - "Web/SVG/Tutorial/SVG_Image_Tag": { - "modified": "2019-03-18T21:46:01.401Z", + "Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges": { + "modified": "2020-03-12T19:49:33.624Z", "contributors": [ - "grizlupo" + "limkukhyun" ] }, - "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { - "modified": "2019-03-23T23:41:45.629Z", + "Web/JavaScript/Guide/Regular_Expressions": { + "modified": "2020-04-29T02:51:44.998Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Cliffet" + "yami03", + "yeonjuan", + "Jung-Max", + "deltakor1234", + "idid0210", + "seungha-kim", + "limkukhyun", + "khg0712", + "nazuna1", + "kooljay82", + "fdevjm", + "coffeenjava", + "gaeun917", + "namhong2001", + "woochankim", + "JunBeom-Park", + "SooYeonKim" ] }, - "Web/SVG/Tutorial/기본_도형": { - "modified": "2019-03-23T22:13:37.061Z", + "Web/JavaScript/Guide/Functions": { + "modified": "2020-03-12T19:41:24.935Z", "contributors": [ - "irisHanb", - "officialmansu", - "JongChanLee" + "limkukhyun", + "01045972746", + "jeoyoho", + "bigsaigon333", + "creatijin", + "jungpaeng", + "gudrl", + "wafersroom", + "gaeun917", + "SSaMKJ", + "JunLee", + "woochankim", + "JunBeom-Park", + "SooYeonKim" ] }, - "Web/SVG/Tutorial/시작하기": { - "modified": "2019-03-23T22:20:15.918Z", + "Web/JavaScript/Reference/Classes/Public_class_fields": { + "modified": "2020-10-15T22:29:50.457Z", "contributors": [ - "Niklane" + "dooyou21" ] }, - "Web/SVG/Tutorial/위치": { - "modified": "2019-03-23T22:19:56.793Z", + "Web/JavaScript/Reference/Functions/Arrow_functions": { + "modified": "2020-10-15T21:39:57.499Z", "contributors": [ - "Niklane" + "honggaruy", + "Vimming", + "songdoing", + "gbyman", + "yonggoo.noh", + "jjangga0214", + "geunhyung", + "limkukhyun", + "kangsan_Chang", + "nyaawlsh", + "daehyoung", + "Geun-Hyung_Kim", + "Netaras", + "preco21", + "chiyodad", + "Jeeeyul" ] }, - "Web/Security": { - "modified": "2020-02-18T07:36:24.047Z", + "orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype": { + "modified": "2020-10-15T22:12:31.982Z", "contributors": [ - "DeadIntegral", - "wbamberg", - "SphinxKnight", - "2pylab", - "Sheppy" + "alattalatta" ] }, - "Web/Security/Insecure_passwords": { - "modified": "2019-07-20T05:09:42.530Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply": { + "modified": "2019-03-23T22:09:25.839Z", "contributors": [ - "shefollowme" + "bsidesoft" ] }, - "Web/Security/Same-origin_policy": { - "modified": "2020-08-22T13:54:54.667Z", + "Web/JavaScript/Reference/Operators/Operator_Precedence": { + "modified": "2020-04-10T08:53:04.223Z", "contributors": [ + "EatChangmyeong", "alattalatta", - "jongidal", - "TroyTae", - "midistour", - "seungha-kim", - "ryuan.choi", - "manascue", - "Vermond", - "behumble" - ] - }, - "Web/Security/Transport_Layer_Security": { - "modified": "2020-09-21T00:10:58.229Z", - "contributors": [ - "junnapark", - "haeguri" + "." ] }, - "Web/Security/정보_보안_기본": { - "modified": "2019-03-23T22:05:46.762Z", + "Web/JavaScript/Shells": { + "modified": "2020-03-12T19:44:13.687Z", "contributors": [ - "daebum-lee" + "limkukhyun", + "hoony" ] }, - "Web/Tutorials": { - "modified": "2019-03-23T23:28:14.827Z", + "Web/JavaScript/Language_Resources": { + "modified": "2020-03-12T19:39:22.531Z", "contributors": [ - "featherlikeg", - "nacyot", - "pjc0247", - "tamnajio", - "KyunH" + "ahnzaz", + "KSH-code", + "Netaras", + "teoli", + "NFM" ] }, - "Web/Web_Components": { - "modified": "2019-03-18T21:01:19.898Z", + "Web/Media/Formats/Video_codecs": { + "modified": "2019-10-21T23:30:00.090Z", "contributors": [ - "adrenalinee", - "cs09g", - "ByeongGi", - "namkwon", - "maybe" + "ahnzaz" ] }, - "Web/Web_Components/Using_custom_elements": { - "modified": "2020-10-15T22:25:18.797Z", + "Web/Media/Formats/Containers": { + "modified": "2019-09-19T00:05:45.367Z", "contributors": [ - "cutelee", - "chdaud1995", - "alattalatta", - "atomDevelop", - "nerdrun", - "ByeongGi" + "ahnzaz" ] }, - "Web/Web_Components/Using_shadow_DOM": { - "modified": "2020-07-07T00:49:27.609Z", + "Web/Media/Formats/codecs_parameter": { + "modified": "2020-06-10T22:11:12.156Z", "contributors": [ - "ne2030", - "ByeongGi" + "ahnzaz" ] }, - "Web/XML": { - "modified": "2019-08-24T00:48:34.627Z", + "Web/Performance/How_browsers_work": { + "modified": "2020-12-09T08:24:42.107Z", "contributors": [ - "oinochoe", - "ExE-Boss" + "doong-jo" ] }, - "Web/XML/XML_Introduction": { - "modified": "2019-05-01T21:53:36.067Z", + "Web/Performance/Critical_rendering_path": { + "modified": "2020-09-28T15:59:43.713Z", "contributors": [ - "ExE-Boss", - "teoli", - "Sebuls" + "Joontae-Kim" ] }, - "Web/XPath": { - "modified": "2019-01-16T14:32:58.218Z", + "Web/Progressive_web_apps/Introduction": { + "modified": "2019-03-18T20:52:13.104Z", "contributors": [ - "ExE-Boss", - "fscholz", - "Gilchris", - "Netaras" + "chrisdavidmills", + "cs09g" ] }, - "Web/XPath/Axes": { - "modified": "2019-03-23T23:41:54.185Z", + "orphaned/Web/Security/Information_Security_Basics": { + "modified": "2019-03-23T22:05:46.762Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "daebum-lee" ] }, - "Web/XPath/Axes/ancestor": { - "modified": "2019-03-23T23:41:51.868Z", + "Web/SVG/Element/rect": { + "modified": "2020-10-15T21:27:38.577Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "alattalatta", + "wbamberg", + "Sebastianz", + "JeongSeongDae" ] }, - "Web/XPath/Axes/ancestor-or-self": { - "modified": "2019-03-23T23:41:53.193Z", + "Web/SVG/Tutorial/Basic_Shapes": { + "modified": "2019-03-23T22:13:37.061Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "irisHanb", + "officialmansu", + "JongChanLee" ] }, - "Web/XPath/Axes/attribute": { - "modified": "2019-01-16T16:16:10.374Z", + "Web/SVG/Tutorial/Getting_Started": { + "modified": "2019-03-23T22:20:15.918Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "Niklane" ] }, - "Web/XPath/Axes/child": { - "modified": "2019-01-16T16:16:18.107Z", + "Web/SVG/Tutorial/Positions": { + "modified": "2019-03-23T22:19:56.793Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "Niklane" ] }, - "Web/XPath/Axes/descendant": { - "modified": "2019-01-16T16:16:11.286Z", + "Web/XSLT/Element/apply-imports": { + "modified": "2019-03-23T23:42:12.617Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/descendant-or-self": { - "modified": "2019-01-16T16:16:11.121Z", + "Web/XSLT/Element/apply-templates": { + "modified": "2019-03-23T23:42:10.628Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/following": { - "modified": "2019-01-16T16:16:17.035Z", + "Web/XSLT/Element/attribute-set": { + "modified": "2019-03-23T23:42:15.702Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/following-sibling": { - "modified": "2019-01-16T16:16:13.970Z", + "Web/XSLT/Element/attribute": { + "modified": "2019-03-23T23:42:16.289Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/namespace": { - "modified": "2019-03-23T23:41:52.884Z", + "Web/XSLT/Element/call-template": { + "modified": "2019-03-23T23:42:16.020Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/parent": { - "modified": "2019-01-16T16:16:10.076Z", + "Web/XSLT/Element/choose": { + "modified": "2019-03-23T23:42:15.795Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/preceding": { - "modified": "2019-01-16T16:16:13.085Z", + "Web/XSLT/Element/comment": { + "modified": "2019-03-23T23:42:16.482Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/preceding-sibling": { - "modified": "2019-01-16T16:16:15.097Z", + "Web/XSLT/Element/copy-of": { + "modified": "2019-03-23T23:42:16.376Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/self": { - "modified": "2019-01-16T16:16:15.156Z", + "Web/XSLT/Element/copy": { + "modified": "2019-03-23T23:42:16.108Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions": { - "modified": "2019-03-23T23:41:49.260Z", + "Web/XSLT/Element/decimal-format": { + "modified": "2019-03-23T23:42:15.926Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "mete0r", "Netaras" ] }, - "Web/XPath/Functions/boolean": { - "modified": "2019-03-23T23:41:56.082Z", + "Web/XSLT/Element/fallback": { + "modified": "2019-03-23T23:42:16.195Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/ceiling": { - "modified": "2019-03-23T23:42:00.420Z", + "Web/XSLT/Element/for-each": { + "modified": "2019-03-23T23:42:20.628Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/concat": { - "modified": "2019-03-23T23:41:58.810Z", + "Web/XSLT/Element/if": { + "modified": "2019-03-23T23:42:21.027Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/contains": { - "modified": "2019-03-23T23:41:59.602Z", + "Web/XSLT/Element/import": { + "modified": "2019-03-23T23:42:22.794Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/count": { - "modified": "2019-03-23T23:41:58.125Z", + "Web/XSLT/Element/include": { + "modified": "2019-03-23T23:42:18.173Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/current": { - "modified": "2019-03-23T23:41:57.241Z", + "Web/XSLT/Element/key": { + "modified": "2019-03-23T23:42:17.165Z", "contributors": [ - "ExE-Boss", - "limkukhyun", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/document": { - "modified": "2019-03-23T23:42:02.300Z", + "Web/XSLT/Element/message": { + "modified": "2019-03-23T23:42:22.700Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "토끼군", "Netaras" ] }, - "Web/XPath/Functions/element-available": { - "modified": "2019-03-23T23:42:19.012Z", + "Web/XSLT/Element/namespace-alias": { + "modified": "2019-03-23T23:42:17.355Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/false": { - "modified": "2019-03-23T23:42:21.547Z", + "Web/XSLT/Element/number": { + "modified": "2019-03-23T23:42:19.706Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/floor": { - "modified": "2019-03-23T23:42:21.115Z", + "Web/XSLT/Element/otherwise": { + "modified": "2019-03-23T23:42:20.020Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/format-number": { - "modified": "2019-03-23T23:42:15.373Z", + "Web/XSLT/Element/output": { + "modified": "2019-03-23T23:42:18.564Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/function-available": { - "modified": "2019-03-23T23:42:21.463Z", + "Web/XSLT/Element/param": { + "modified": "2019-03-23T23:42:19.539Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/generate-id": { - "modified": "2019-03-23T23:42:13.517Z", + "Web/XSLT/Element/preserve-space": { + "modified": "2019-03-23T23:42:19.442Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/id": { - "modified": "2019-03-23T23:42:21.368Z", + "Web/XSLT/Element/processing-instruction": { + "modified": "2019-03-23T23:42:19.930Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/key": { - "modified": "2019-03-23T23:42:10.516Z", + "Web/XSLT/Element/sort": { + "modified": "2019-03-23T23:42:22.944Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/lang": { - "modified": "2019-03-23T23:42:22.431Z", + "Web/XSLT/Element/strip-space": { + "modified": "2019-03-23T23:42:17.260Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/last": { - "modified": "2019-03-23T23:42:23.803Z", + "Web/XSLT/Element/stylesheet": { + "modified": "2019-03-23T23:42:20.266Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/local-name": { - "modified": "2019-03-23T23:42:19.324Z", + "Web/XSLT/Element/template": { + "modified": "2019-03-23T23:42:17.631Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/name": { - "modified": "2019-03-23T23:42:53.708Z", + "Web/XSLT/Element/text": { + "modified": "2019-03-23T23:42:18.405Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/namespace-uri": { - "modified": "2019-03-23T23:42:22.064Z", + "Web/XSLT/XSLT_JS_interface_in_Gecko": { + "modified": "2019-03-23T23:42:13.222Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XPath/Functions/normalize-space": { - "modified": "2019-03-23T23:42:24.081Z", + "Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction": { + "modified": "2019-03-23T23:42:13.310Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XPath/Functions/not": { - "modified": "2019-03-23T23:42:13.806Z", + "Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters": { + "modified": "2019-03-23T23:42:32.566Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XPath/Functions/number": { - "modified": "2019-03-23T23:42:20.456Z", + "Web/XSLT/Element/transform": { + "modified": "2019-03-23T23:41:43.222Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/position": { - "modified": "2019-03-23T23:42:19.791Z", + "Web/XSLT/Element/value-of": { + "modified": "2019-03-23T23:42:23.711Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/round": { - "modified": "2019-03-23T23:42:16.877Z", + "Web/XSLT/Element/variable": { + "modified": "2019-03-23T23:42:20.796Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/starts-with": { - "modified": "2019-03-23T23:42:20.127Z", + "Web/XSLT/Element/when": { + "modified": "2019-03-23T23:42:22.611Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/string": { - "modified": "2019-03-23T23:42:22.208Z", + "Web/XSLT/Element/with-param": { + "modified": "2019-03-23T23:42:24.179Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/string-length": { - "modified": "2019-03-23T23:42:16.696Z", + "Web/Reference/API": { + "modified": "2019-03-23T23:23:26.342Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "Netaras", + "tamnajio", + "Channy" ] }, - "Web/XPath/Functions/substring": { - "modified": "2019-03-23T23:42:17.746Z", + "Web/Reference": { + "modified": "2019-03-23T23:28:22.951Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "DeadIntegral", + "jarangseo", + "eyekorea", + "LimeClover", + "Channy", + "hyeonseok", + "narae_lee" ] }, - "Web/XPath/Functions/substring-after": { - "modified": "2019-03-23T23:42:23.050Z", + "Web/API/Battery_Status_API": { + "modified": "2020-11-26T10:20:08.081Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "dink95", + "alattalatta", + "oohii" ] }, - "Web/XPath/Functions/substring-before": { - "modified": "2019-03-23T23:42:22.325Z", + "Web/API/Detecting_device_orientation": { + "modified": "2019-03-23T23:27:06.270Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "ingpdw", + "PillarLee", + "junho85" ] }, - "Web/XPath/Functions/sum": { - "modified": "2019-03-23T23:42:16.787Z", + "Web/API/CSS_Object_Model/Managing_screen_orientation": { + "modified": "2019-03-23T23:27:05.980Z", "contributors": [ - "ExE-Boss", - "arrrggghhh", "teoli", - "Netaras" + "junho85" ] }, - "Web/XPath/Functions/system-property": { - "modified": "2019-03-23T23:42:12.729Z", + "Web/API/Network_Information_API": { + "modified": "2019-03-23T23:26:43.220Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "hyeonseok" ] }, - "Web/XPath/Functions/translate": { - "modified": "2019-03-23T23:42:23.927Z", + "Web/API/Proximity_Events": { + "modified": "2019-03-23T23:26:46.443Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "yunji_koh" ] }, - "Web/XPath/Functions/true": { - "modified": "2019-03-23T23:42:14.932Z", + "Web/API/Geolocation_API/Using_the_Geolocation_API": { + "modified": "2020-04-03T04:36:16.235Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "alattalatta", + "cs09g", + "chooco13", + "hallower", + "mmnmm", + "xcoda" ] }, - "Web/XPath/Functions/unparsed-entity-url": { - "modified": "2019-03-23T23:42:10.421Z", + "Web/API/Ambient_Light_Events": { + "modified": "2020-10-15T21:24:18.175Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "alattalatta", + "hyeonseok" ] }, - "Web/XSLT": { - "modified": "2019-03-23T23:44:24.859Z", + "Web/API/Notifications_API/Using_the_Notifications_API": { + "modified": "2020-03-08T01:03:17.759Z", "contributors": [ - "chrisdavidmills", - "Verruckt", - "Sebuls", - "Netaras" + "feeva", + "oohii", + "junho85" ] }, - "Web/XSLT/Element": { - "modified": "2019-03-23T23:41:46.436Z", + "Web/API/WebSockets_API": { + "modified": "2019-03-23T23:30:25.980Z", "contributors": [ - "ExE-Boss", - "chrisdavidmills", - "teoli", - "Netaras" + "d-wook", + "Geun-Hyung_Kim", + "pjc0247", + "ELem" ] }, - "Web/XSLT/Element/element": { - "modified": "2019-03-23T23:42:14.305Z", + "Web/API/WebSockets_API/Writing_WebSocket_client_applications": { + "modified": "2020-11-11T22:09:43.354Z", "contributors": [ - "ExE-Boss", - "chrisdavidmills", - "teoli", - "Netaras" + "CJ_Lee", + "VBChunguk", + "michellehuh", + "pjc0247", + "rutesun" ] }, - "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko": { - "modified": "2019-03-23T23:42:13.222Z", + "Web/API/WebSockets_API/Writing_WebSocket_servers": { + "modified": "2020-11-26T05:53:45.381Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Sebuls" + "gdev219", + "soon0698", + "lpsgm63", + "zerunus", + "SQLGate", + "green-autumn", + "pjc0247" ] }, - "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction": { - "modified": "2019-03-23T23:42:13.310Z", + "orphaned/Windows_and_menus_in_XULRunner": { + "modified": "2019-01-16T15:50:48.799Z", "contributors": [ - "chrisdavidmills", + "Channy" + ] + }, + "Glossary/XHTML": { + "modified": "2019-12-26T10:45:10.722Z", + "contributors": [ + "04SeoHyun", + "jeonnoej", "teoli", "Sebuls" ] }, - "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters": { - "modified": "2019-03-23T23:42:32.566Z", + "Web/API/XSLTProcessor/Basic_Example": { + "modified": "2019-01-16T16:14:48.906Z", "contributors": [ - "chrisdavidmills", - "teoli", "Sebuls" ] }, - "Web/XSLT/Transforming_XML_with_XSLT": { - "modified": "2019-01-16T16:15:56.433Z", + "Web/API/XSLTProcessor/Browser_Differences": { + "modified": "2019-01-16T16:15:11.615Z", "contributors": [ - "chrisdavidmills", - "Netaras" + "Sebuls" ] }, - "Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference": { - "modified": "2019-03-23T23:41:43.827Z", + "Web/API/XSLTProcessor/Generating_HTML": { + "modified": "2019-01-16T16:14:51.789Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations": { - "modified": "2019-11-21T00:57:37.403Z", + "Web/API/XSLTProcessor/Introduction": { + "modified": "2019-01-16T16:14:50.568Z", "contributors": [ - "wbamberg", - "chrisdavidmills", - "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XSLT/apply-imports": { - "modified": "2019-03-23T23:42:12.617Z", + "Web/API/XSLTProcessor/Resources": { + "modified": "2019-03-23T23:42:20.360Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XSLT/apply-templates": { - "modified": "2019-03-23T23:42:10.628Z", + "Mozilla/Firefox/Releases/3.6": { + "modified": "2019-12-13T20:33:13.788Z", "contributors": [ - "chrisdavidmills", + "wbamberg", + "SphinxKnight", "teoli", - "Netaras" + "kladess" ] }, - "Web/XSLT/attribute": { - "modified": "2019-03-23T23:42:16.289Z", + "orphaned/지역의_코드를_씁니다.": { + "modified": "2019-01-16T14:36:32.523Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "wkdqudso" ] }, - "Web/XSLT/attribute-set": { - "modified": "2019-03-23T23:42:15.702Z", + "orphaned/확장기능_개발_환경_구축": { + "modified": "2019-03-24T00:02:16.151Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "kladess" ] }, - "Web/XSLT/call-template": { - "modified": "2019-03-23T23:42:16.020Z", + "conflicting/Mozilla/Add-ons": { + "modified": "2019-03-24T00:04:35.955Z", "contributors": [ - "chrisdavidmills", "teoli", + "ethertank", + "Gilchris", + "fscholz", + "Matthew,Lee", + "Amujung", + "Idodream", + "Jeongsw", "Netaras" ] }, - "Web/XSLT/choose": { - "modified": "2019-03-23T23:42:15.795Z", + "conflicting/Learn/CSS/CSS_layout/Introduction": { + "modified": "2020-07-16T22:25:40.836Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "yooonmi" ] }, - "Web/XSLT/comment": { - "modified": "2019-03-23T23:42:16.482Z", + "conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { + "modified": "2020-07-16T22:22:37.951Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "Kaben" ] }, - "Web/XSLT/copy": { - "modified": "2019-03-23T23:42:16.108Z", + "conflicting/Learn/Common_questions": { + "modified": "2020-07-16T22:22:13.682Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "KwanHong_Lee66" ] }, - "Web/XSLT/copy-of": { - "modified": "2019-03-23T23:42:16.376Z", + "conflicting/Learn": { + "modified": "2020-07-16T22:22:13.258Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "Netaras", + "KwanHong_Lee66" ] }, - "Web/XSLT/decimal-format": { - "modified": "2019-03-23T23:42:15.926Z", + "conflicting/Learn/Common_questions_139278709439023a85d849385412271e": { + "modified": "2020-07-16T22:22:13.488Z", "contributors": [ - "chrisdavidmills", + "zziuni", + "Netaras", "teoli", - "Netaras" + "cs09g" ] }, - "Web/XSLT/fallback": { - "modified": "2019-03-23T23:42:16.195Z", + "conflicting/MDN/Tools": { + "modified": "2019-01-16T20:50:22.654Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "wbamberg", + "andrewJYjang" ] }, - "Web/XSLT/for-each": { - "modified": "2019-03-23T23:42:20.628Z", + "Plugins/Guide/Scripting_plugins": { + "modified": "2019-01-16T15:11:14.478Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Anonymous" ] }, - "Web/XSLT/if": { - "modified": "2019-03-23T23:42:21.027Z", + "conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript": { + "modified": "2019-01-16T14:19:09.939Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "kmaglione", + "Gilchris" ] }, - "Web/XSLT/import": { - "modified": "2019-03-23T23:42:22.794Z", + "conflicting/Web/Guide": { + "modified": "2019-03-23T23:41:47.329Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Jiyoon", + "Unixcruiser", + "Netaras", + "Sebuls" ] }, - "Web/XSLT/include": { - "modified": "2019-03-23T23:42:18.173Z", + "Web/API/DocumentOrShadowRoot/getSelection": { + "modified": "2019-03-23T22:51:22.015Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "x86kernel" ] }, - "Web/XSLT/key": { - "modified": "2019-03-23T23:42:17.165Z", + "Web/API/HTMLElement/accessKey": { + "modified": "2020-10-15T22:14:28.158Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "cs09g" ] }, - "Web/XSLT/message": { - "modified": "2019-03-23T23:42:22.700Z", + "Web/API/Document/createEvent": { + "modified": "2019-03-23T22:23:08.290Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "agakt" ] }, - "Web/XSLT/namespace-alias": { - "modified": "2019-03-23T23:42:17.355Z", + "conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL": { + "modified": "2019-03-23T22:54:05.275Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "fscholz", + "hanmomhanda" ] }, - "Web/XSLT/number": { - "modified": "2019-03-23T23:42:19.706Z", + "conflicting/Web/CSS/@viewport": { + "modified": "2020-10-15T21:46:24.032Z", "contributors": [ - "chrisdavidmills", - "teoli", + "alattalatta", "Netaras" ] }, - "Web/XSLT/otherwise": { - "modified": "2019-03-23T23:42:20.020Z", + "conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f": { + "modified": "2020-10-15T22:22:51.969Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "chayeoi", + "SphinxKnight" ] }, - "Web/XSLT/output": { - "modified": "2019-03-23T23:42:18.564Z", + "conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518": { + "modified": "2020-10-15T21:46:22.320Z", "contributors": [ - "chrisdavidmills", - "teoli", + "alattalatta", "Netaras" ] }, - "Web/XSLT/param": { - "modified": "2019-03-23T23:42:19.539Z", + "conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { + "modified": "2019-03-23T23:37:37.611Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Inyoung", + "jaemin_jo" ] }, - "Web/XSLT/preserve-space": { - "modified": "2019-03-23T23:42:19.442Z", + "Learn/JavaScript/Client-side_web_APIs/Manipulating_documents": { + "modified": "2019-03-23T23:41:58.615Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Ioseph" ] }, - "Web/XSLT/processing-instruction": { - "modified": "2019-03-23T23:42:19.930Z", + "Web/CSS/url()": { + "modified": "2020-10-15T22:10:55.121Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "alattalatta" ] }, - "Web/XSLT/sort": { - "modified": "2019-03-23T23:42:22.944Z", + "conflicting/Learn/CSS/Styling_text/Styling_lists": { + "modified": "2019-03-23T23:33:11.239Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/strip-space": { - "modified": "2019-03-23T23:42:17.260Z", + "conflicting/Learn/CSS/CSS_layout": { + "modified": "2019-03-23T23:33:01.592Z", "contributors": [ - "chrisdavidmills", + "yooonmi", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/stylesheet": { - "modified": "2019-03-23T23:42:20.266Z", + "conflicting/Learn/CSS/Building_blocks": { + "modified": "2019-03-23T23:33:01.323Z", "contributors": [ - "chrisdavidmills", + "yooonmi", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/template": { - "modified": "2019-03-23T23:42:17.631Z", + "conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance": { + "modified": "2019-03-23T23:33:16.790Z", "contributors": [ - "chrisdavidmills", + "ElleXD", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/text": { - "modified": "2019-03-23T23:42:18.405Z", + "conflicting/Learn/CSS/Building_blocks/Styling_tables": { + "modified": "2019-03-23T23:33:00.475Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/transform": { - "modified": "2019-03-23T23:41:43.222Z", + "conflicting/Learn/CSS/Styling_text/Fundamentals": { + "modified": "2019-03-23T23:33:09.659Z", "contributors": [ - "chrisdavidmills", + "yooonmi", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/value-of": { - "modified": "2019-03-23T23:42:23.711Z", + "Web/API/HTMLMediaElement/abort_event": { + "modified": "2019-04-30T14:12:00.284Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "wbamberg", + "guyeol" ] }, - "Web/XSLT/variable": { - "modified": "2019-03-23T23:42:20.796Z", + "conflicting/Web/API/Document_Object_Model": { + "modified": "2019-03-23T23:26:56.400Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "Sheppy" ] }, - "Web/XSLT/when": { - "modified": "2019-03-23T23:42:22.611Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2019-01-16T16:11:22.319Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Wafe" ] }, - "Web/XSLT/with-param": { - "modified": "2019-03-23T23:42:24.179Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece": { + "modified": "2019-03-23T23:43:37.505Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "panda", + "Wafe" ] }, - "Web/참조": { - "modified": "2019-03-23T23:28:22.951Z", + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators": { + "modified": "2019-01-16T16:11:11.253Z", "contributors": [ - "DeadIntegral", - "jarangseo", - "eyekorea", - "LimeClover", - "Channy", - "hyeonseok", - "narae_lee" + "teoli", + "Wafe" ] }, - "Web/참조/API": { - "modified": "2019-03-23T23:23:26.342Z", + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40": { + "modified": "2019-01-16T16:11:13.405Z", "contributors": [ - "Netaras", - "tamnajio", - "Channy" + "teoli", + "Wafe" ] }, - "WebAPI": { - "modified": "2019-03-23T23:30:26.179Z", + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916": { + "modified": "2019-01-16T16:11:11.411Z", "contributors": [ - "wbamberg", - "fscholz", - "oohii", - "hyeonseok", - "PillarLee", - "junho85", - "francisco.jordano" + "teoli", + "Wafe" ] }, - "WebAPI/Battery_Status": { - "modified": "2020-11-26T10:20:08.081Z", + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915": { + "modified": "2019-01-16T16:11:17.876Z", "contributors": [ - "dink95", - "alattalatta", - "oohii" + "teoli", + "Wafe" ] }, - "WebAPI/Detecting_device_orientation": { - "modified": "2019-03-23T23:27:06.270Z", - "contributors": [ - "ingpdw", - "PillarLee", - "junho85" + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74": { + "modified": "2019-01-16T16:11:17.176Z", + "contributors": [ + "teoli", + "Wafe" ] }, - "WebAPI/Managing_screen_orientation": { - "modified": "2019-03-23T23:27:05.980Z", + "conflicting/Web/JavaScript/Guide": { + "modified": "2019-01-16T16:10:38.273Z", "contributors": [ "teoli", - "junho85" + "Wafe" ] }, - "WebAPI/Network_Information": { - "modified": "2019-03-23T23:26:43.220Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f": { + "modified": "2019-01-16T16:11:27.423Z", "contributors": [ - "hyeonseok" + "teoli", + "Wafe" ] }, - "WebAPI/Proximity": { - "modified": "2019-03-23T23:26:46.443Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3": { + "modified": "2019-01-16T16:11:23.067Z", "contributors": [ - "yunji_koh" + "teoli", + "Wafe" ] }, - "WebAPI/Using_Light_Events": { - "modified": "2020-10-15T21:24:18.175Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f": { + "modified": "2019-01-16T16:11:22.455Z", "contributors": [ - "alattalatta", - "hyeonseok" + "teoli", + "Wafe" ] }, - "WebAPI/Using_Web_Notifications": { - "modified": "2020-03-08T01:03:17.759Z", + "conflicting/Learn/JavaScript/Objects": { + "modified": "2019-03-23T23:29:46.029Z", "contributors": [ - "feeva", - "oohii", - "junho85" + "Parcovia", + "JayK95", + "rinuel", + "teoli", + "JaehaAhn" ] }, - "WebAPI/Using_geolocation": { - "modified": "2020-04-03T04:36:16.235Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-10-15T21:43:28.882Z", "contributors": [ "alattalatta", - "cs09g", - "chooco13", - "hallower", - "mmnmm", - "xcoda" + "noritersand" ] }, - "WebAssembly": { - "modified": "2020-10-15T21:52:54.017Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T21:34:44.080Z", "contributors": [ - "limkukhyun", - "lastmirage", - "kesuskim", - "0xABCDEF", - "lukewagner" + "alattalatta", + "Cho.Eun", + "ByungChangCha", + "teoli" ] }, - "WebAssembly/C_to_wasm": { - "modified": "2020-10-29T08:46:10.367Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/InternalError": { + "modified": "2019-03-23T22:28:33.047Z", "contributors": [ - "limkukhyun", - "jung-han", - "04SeoHyun", - "nakyong" + "teoli", + "magnoliaa" ] }, - "WebAssembly/Caching_modules": { - "modified": "2019-03-18T21:26:57.835Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { + "modified": "2020-10-15T22:22:06.369Z", "contributors": [ - "limkukhyun" + "fscholz", + "alattalatta" ] }, - "WebAssembly/Concepts": { - "modified": "2020-12-08T12:12:26.855Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { + "modified": "2020-10-15T22:21:51.361Z", "contributors": [ - "dsma73", - "jung-han", - "kyhsa93", - "limkukhyun", - "Jungbin-Kim", - "mingrammer", - "kesuskim", - "0xABCDEF" + "fscholz", + "alattalatta" ] }, - "WebAssembly/Exported_functions": { - "modified": "2019-03-18T21:27:58.372Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T21:55:20.178Z", "contributors": [ - "limkukhyun" + "alattalatta", + "echo304" ] }, - "WebAssembly/Loading_and_running": { - "modified": "2019-03-23T22:11:38.016Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T22:10:14.861Z", "contributors": [ - "limkukhyun", - "kesuskim" + "alattalatta", + "DeadIntegral" ] }, - "WebAssembly/Rust_to_wasm": { - "modified": "2020-06-15T19:31:56.028Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:34:43.084Z", "contributors": [ - "fantajeon", - "04SeoHyun", - "piutranq", - "limkukhyun" + "zero0yes", + "noritersand", + "alattalatta", + "Parcovia", + "Netaras", + "DavidSunny", + "teoli" ] }, - "WebAssembly/Text_format_to_wasm": { - "modified": "2019-03-18T21:28:27.225Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:47:20.685Z", "contributors": [ - "limkukhyun" + "alattalatta", + "fscholz", + "Netaras" ] }, - "WebAssembly/Understanding_the_text_format": { - "modified": "2019-03-23T22:04:19.997Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy": { + "modified": "2020-10-15T21:55:35.789Z", "contributors": [ - "limkukhyun", - "a1p4ca", - "composite" + "alattalatta", + "SphinxKnight" ] }, - "WebAssembly/Using_the_JavaScript_API": { - "modified": "2019-12-26T10:33:44.717Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2020-10-15T21:48:56.464Z", "contributors": [ - "04SeoHyun", - "limkukhyun" + "alattalatta", + "Netaras" ] }, - "WebAssembly/existing_C_to_wasm": { - "modified": "2019-03-18T21:28:25.734Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { + "modified": "2020-10-15T22:15:02.439Z", "contributors": [ - "limkukhyun" + "cs09g" ] }, - "WebSockets": { - "modified": "2019-03-23T23:30:25.980Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-09-19T03:24:36.691Z", "contributors": [ - "d-wook", - "Geun-Hyung_Kim", - "pjc0247", - "ELem" + "dbs6339", + "pusanbear", + "teoli", + "MoGi" ] }, - "WebSockets/Writing_WebSocket_client_applications": { - "modified": "2020-11-11T22:09:43.354Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2019-03-23T22:28:47.337Z", "contributors": [ - "CJ_Lee", - "VBChunguk", - "michellehuh", - "pjc0247", - "rutesun" + "magnoliaa" ] }, - "WebSockets/Writing_WebSocket_servers": { - "modified": "2020-11-26T05:53:45.381Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray": { + "modified": "2019-03-23T22:30:03.771Z", "contributors": [ - "gdev219", - "soon0698", - "lpsgm63", - "zerunus", - "SQLGate", - "green-autumn", - "pjc0247" + "Netaras" ] }, - "Web_Development": { - "modified": "2019-03-23T23:41:47.329Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap": { + "modified": "2019-03-23T22:27:54.259Z", "contributors": [ - "teoli", - "Jiyoon", - "Unixcruiser", - "Netaras", - "Sebuls" + "Netaras" ] }, - "Windows_and_menus_in_XULRunner": { - "modified": "2019-01-16T15:50:48.799Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet": { + "modified": "2019-03-23T22:28:07.290Z", "contributors": [ - "Channy" + "Netaras" ] }, - "XHTML": { - "modified": "2019-12-26T10:45:10.722Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": { + "modified": "2020-10-15T22:08:10.181Z", "contributors": [ - "04SeoHyun", - "jeonnoej", - "teoli", - "Sebuls" + "limkukhyun" ] }, - "XSLT_in_Gecko": { - "modified": "2019-01-16T16:14:51.504Z", + "conflicting/Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:50:08.581Z", "contributors": [ - "Sebuls" + "alattalatta", + "chimimode", + "fscholz", + "wbamberg", + "KSH-code", + "siwoolee", + "ChanghwaLee", + "imskojs" ] }, - "XSLT_in_Gecko/Basic_Example": { - "modified": "2019-01-16T16:14:48.906Z", + "conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e": { + "modified": "2020-10-15T21:50:31.036Z", "contributors": [ - "Sebuls" + "alattalatta", + "wbamberg", + "NessunKim", + "daehyoung" ] }, - "XSLT_in_Gecko/Browser_Differences": { - "modified": "2019-01-16T16:15:11.615Z", + "conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560": { + "modified": "2020-10-15T21:25:50.021Z", "contributors": [ - "Sebuls" + "alattalatta", + "jghg2724", + "epicsaga", + "daewon", + "teoli", + "Cho.Eun" ] }, - "XSLT_in_Gecko/Generating_HTML": { - "modified": "2019-01-16T16:14:51.789Z", + "conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23": { + "modified": "2020-10-15T21:46:03.880Z", "contributors": [ - "Sebuls" + "alattalatta", + "Parcovia", + "ohsory1324", + "LEGOLLAS" ] }, - "XSLT_in_Gecko/Introduction": { - "modified": "2019-01-16T16:14:50.568Z", + "conflicting/Web/JavaScript/Reference/Operators_13aeb53e31f9cec454ca631cb162449f": { + "modified": "2020-10-15T21:47:31.347Z", "contributors": [ - "Sebuls" + "alattalatta", + "atomDevelop", + "r2fresh", + "Parcovia", + "gnujoow", + "helloheesu", + "imskojs" ] }, - "XSLT_in_Gecko/Resources": { - "modified": "2019-03-23T23:42:20.360Z", + "conflicting/Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-10-15T22:07:33.273Z", "contributors": [ - "teoli", - "Sebuls" + "alattalatta", + "SSJ-unclear" ] }, - "개발자를_위한_Firefox_3.6": { - "modified": "2019-12-13T20:33:13.788Z", + "conflicting/Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2019-03-23T23:14:43.699Z", "contributors": [ - "wbamberg", - "SphinxKnight", - "teoli", - "kladess" + "eunsuklee", + "teoli" ] }, - "지역의_코드를_씁니다.": { - "modified": "2019-01-16T14:36:32.523Z", + "conflicting/Web/API": { + "modified": "2019-03-23T23:30:26.179Z", "contributors": [ - "wkdqudso" + "wbamberg", + "fscholz", + "oohii", + "hyeonseok", + "PillarLee", + "junho85", + "francisco.jordano" ] }, - "확장기능_개발_환경_구축": { - "modified": "2019-03-24T00:02:16.151Z", + "Web/API/XSLTProcessor": { + "modified": "2019-01-16T16:14:51.504Z", "contributors": [ - "teoli", - "kladess" + "Sebuls" ] } } \ No newline at end of file diff --git a/files/ko/conflicting/learn/common_questions/index.html b/files/ko/conflicting/learn/common_questions/index.html index 3752c49274..b31ee26f0d 100644 --- a/files/ko/conflicting/learn/common_questions/index.html +++ b/files/ko/conflicting/learn/common_questions/index.html @@ -1,8 +1,9 @@ --- title: Infrastructure -slug: Learn/Infrastructure +slug: conflicting/Learn/Common_questions translation_of: Learn/Common_questions translation_of_original: Learn/Infrastructure +original_slug: Learn/Infrastructure ---

이 능력은 인터넷 기술 스택에 대해  잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:

diff --git a/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html index 1f04d35fe1..cfebc2d59c 100644 --- a/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html +++ b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html @@ -1,11 +1,12 @@ --- title: Web 기술 -slug: Learn/Web_기술 +slug: conflicting/Learn/Common_questions_139278709439023a85d849385412271e tags: - Beginner - WebMechanics translation_of: Learn/Common_questions translation_of_original: Learn/Web_Mechanics +original_slug: Learn/Web_기술 ---

이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.

diff --git a/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html index 5c58432ad2..73e1decd09 100644 --- a/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -1,8 +1,9 @@ --- title: 종속과 상속 -slug: Web/CSS/시작하기/종속과_상속 +slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +original_slug: Web/CSS/시작하기/종속과_상속 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/building_blocks/index.html b/files/ko/conflicting/learn/css/building_blocks/index.html index cc6b499241..04c02d0efe 100644 --- a/files/ko/conflicting/learn/css/building_blocks/index.html +++ b/files/ko/conflicting/learn/css/building_blocks/index.html @@ -1,8 +1,9 @@ --- title: 상자 -slug: Web/CSS/시작하기/상자 +slug: conflicting/Learn/CSS/Building_blocks translation_of: Learn/CSS/Building_blocks translation_of_original: Web/Guide/CSS/Getting_started/Boxes +original_slug: Web/CSS/시작하기/상자 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html index 17a57d49e9..68fe28a5f0 100644 --- a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html +++ b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -1,8 +1,9 @@ --- title: 테이블 -slug: Web/CSS/시작하기/테이블 +slug: conflicting/Learn/CSS/Building_blocks/Styling_tables translation_of: Learn/CSS/Building_blocks/Styling_tables translation_of_original: Web/Guide/CSS/Getting_started/Tables +original_slug: Web/CSS/시작하기/테이블 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/css_layout/index.html b/files/ko/conflicting/learn/css/css_layout/index.html index 86ea912bb7..1b3c4a73ca 100644 --- a/files/ko/conflicting/learn/css/css_layout/index.html +++ b/files/ko/conflicting/learn/css/css_layout/index.html @@ -1,8 +1,9 @@ --- title: 배치 -slug: Web/CSS/시작하기/배치 +slug: conflicting/Learn/CSS/CSS_layout translation_of: Learn/CSS/CSS_layout translation_of_original: Web/Guide/CSS/Getting_started/Layout +original_slug: Web/CSS/시작하기/배치 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/css_layout/introduction/index.html b/files/ko/conflicting/learn/css/css_layout/introduction/index.html index 5437902bf1..d8d0dc9b06 100644 --- a/files/ko/conflicting/learn/css/css_layout/introduction/index.html +++ b/files/ko/conflicting/learn/css/css_layout/introduction/index.html @@ -1,8 +1,9 @@ --- title: Introduction to CSS Layout -slug: Learn/CSS/Basics/Layout +slug: conflicting/Learn/CSS/CSS_layout/Introduction translation_of: Learn/CSS/CSS_layout/Introduction translation_of_original: Learn/CSS/Basics/Layout +original_slug: Learn/CSS/Basics/Layout ---

{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}

diff --git a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html index 8866132472..ac90109fc1 100644 --- a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html +++ b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html @@ -1,8 +1,9 @@ --- title: 텍스트 스타일 -slug: Web/CSS/시작하기/텍스트_스타일 +slug: conflicting/Learn/CSS/Styling_text/Fundamentals translation_of: Learn/CSS/Styling_text/Fundamentals translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +original_slug: Web/CSS/시작하기/텍스트_스타일 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html index 0e0e215006..b368adde4e 100644 --- a/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html +++ b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html @@ -1,8 +1,9 @@ --- title: 리스트 -slug: Web/CSS/시작하기/리스트 +slug: conflicting/Learn/CSS/Styling_text/Styling_lists translation_of: Learn/CSS/Styling_text/Styling_lists translation_of_original: Web/Guide/CSS/Getting_started/Lists +original_slug: Web/CSS/시작하기/리스트 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html index 4eeb42cae2..54ecdbf832 100644 --- a/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -1,8 +1,9 @@ --- title: 시작하기 (자바스크립트 튜토리얼) -slug: Web/JavaScript/시작하기 +slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics translation_of: Learn/Getting_started_with_the_web/JavaScript_basics translation_of_original: Web/JavaScript/Getting_Started +original_slug: Web/JavaScript/시작하기 ---

왜 자바스크립트인가?

자바스크립트는 종종 오해할 수 있는 강력하고 복잡한 컴퓨터 언어이다. 사용자가 쉽게 데이터를 입력하고 결과를 볼 수 있게 어플리케이션을 빠르게 개발 할 수 있다.

diff --git a/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html index 8a1d0cb625..e67b78e192 100644 --- a/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -1,11 +1,12 @@ --- title: 약자 표시 및 이해시키는 방법 -slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +slug: conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - HTML - 초보 translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +original_slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable ---

HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.

diff --git a/files/ko/conflicting/learn/index.html b/files/ko/conflicting/learn/index.html index 582bd0d275..b3fa083bab 100644 --- a/files/ko/conflicting/learn/index.html +++ b/files/ko/conflicting/learn/index.html @@ -1,10 +1,11 @@ --- title: 스킬 -slug: Learn/Skills +slug: conflicting/Learn tags: - Index translation_of: Learn translation_of_original: Learn/Skills +original_slug: Learn/Skills ---

여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. WebMaker는 초심자들이 기초를 학습하는 로드맵인 Web Literacy Map이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:

diff --git a/files/ko/conflicting/learn/javascript/objects/index.html b/files/ko/conflicting/learn/javascript/objects/index.html index 03015b1407..c0f51fe532 100644 --- a/files/ko/conflicting/learn/javascript/objects/index.html +++ b/files/ko/conflicting/learn/javascript/objects/index.html @@ -1,8 +1,9 @@ --- title: 객체지향 자바스크립트 개요 -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +slug: conflicting/Learn/JavaScript/Objects translation_of: Learn/JavaScript/Objects translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---

비록 다른 객체지향적인 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, JavaScript는 강력한 객체지향 프로그래밍 능력들을 지니고 있다.

diff --git a/files/ko/conflicting/mdn/tools/index.html b/files/ko/conflicting/mdn/tools/index.html index eec139e803..0de69f5c0d 100644 --- a/files/ko/conflicting/mdn/tools/index.html +++ b/files/ko/conflicting/mdn/tools/index.html @@ -1,11 +1,12 @@ --- title: MDN 사용자 가이드 -slug: MDN/User_guide +slug: conflicting/MDN/Tools tags: - 모질라 개발자 네트워크 - 사용자 가이드 translation_of: MDN/Tools translation_of_original: MDN/User_guide +original_slug: MDN/User_guide ---
{{MDNSidebar}}

모질라 개발자 네트워크 (이하 MDN) 사이트는, (파이어폭스 및 파이어폭스 운영체제 개발자 뿐 아니라) 웹 개발자를 위한 문서 및 샘플 코드를 찾고, 읽고, 기여하는 고급 시스템입니다. MDN 사용자 가이드는 필요한 문서를 찾도록 MDN을 이용하는 방법을, 원한다면 좀 더 좋은, 더 광범위하고, 더 완전한 자료를 만들도록 돕는 방법을 열거하는 항목을 제공합니다.

diff --git a/files/ko/conflicting/mozilla/add-ons/index.html b/files/ko/conflicting/mozilla/add-ons/index.html index 133e0f8341..6c717110d5 100644 --- a/files/ko/conflicting/mozilla/add-ons/index.html +++ b/files/ko/conflicting/mozilla/add-ons/index.html @@ -1,11 +1,12 @@ --- title: Building an Extension -slug: Building_an_Extension +slug: conflicting/Mozilla/Add-ons tags: - Add-ons - Extensions translation_of: Mozilla/Add-ons translation_of_original: Building_an_Extension +original_slug: Building_an_Extension ---

시작하기

확장기능 마법사를 이용해서 웹으로 간단한 확장기능을 만들 수 있습니다.

diff --git a/files/ko/conflicting/web/api/document_object_model/index.html b/files/ko/conflicting/web/api/document_object_model/index.html index fc26bc0bee..b9d5d2fc30 100644 --- a/files/ko/conflicting/web/api/document_object_model/index.html +++ b/files/ko/conflicting/web/api/document_object_model/index.html @@ -1,6 +1,6 @@ --- title: DOM developer guide -slug: Web/Guide/DOM +slug: conflicting/Web/API/Document_Object_Model tags: - API - DOM @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: Web/API/Document_Object_Model translation_of_original: Web/Guide/API/DOM +original_slug: Web/Guide/DOM ---

{{draft}}

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

diff --git a/files/ko/conflicting/web/api/index.html b/files/ko/conflicting/web/api/index.html index 07c0c99acb..05ac8c1c05 100644 --- a/files/ko/conflicting/web/api/index.html +++ b/files/ko/conflicting/web/api/index.html @@ -1,6 +1,6 @@ --- title: WebAPI -slug: WebAPI +slug: conflicting/Web/API tags: - Apps - DOM @@ -10,6 +10,7 @@ tags: - TopicStub translation_of: Web/API translation_of_original: WebAPI +original_slug: WebAPI ---

WebAPI는 웹 앱과 웹 콘텐츠가 기기의 하드웨어에 접근(배터리 상태나 기기의 진동 하드웨어 등)하고 기기의 데이터 저장소에 접근(달력이나 주소록 목록 등)할 수 있도록 해주는 기기 호환과 접근 API의 모음을 나타내는 단어입니다. 이러한 API를 추가함으로써 오늘날 웹이 할 수 있는 일과 과거에 특정 플랫폼에서만 가능했던 일들이 확장되기를 희망합니다.

diff --git a/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index 94e969e37a..7aa22576b3 100644 --- a/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ b/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -1,6 +1,6 @@ --- title: 크로스-도메인 텍스쳐 -slug: Web/API/WebGL_API/Cross-Domain_Textures +slug: conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL tags: - WebGL - 웹지엘 @@ -8,6 +8,7 @@ tags: - 텍스쳐 translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures +original_slug: Web/API/WebGL_API/Cross-Domain_Textures ---

WebGL 텍스쳐 로딩은 크로스-도메인 접근 규칙에 따라 제약을 받습니다. 여러분이 만든 컨텐츠에서 다른 도메인의 텍스쳐, 즉, 크로스-도메인 텍스쳐를 로딩하려면 CORS 승인이 필요합니다. CORS에 대한 자세한 내용은 HTTP access control을 참고하시기 바랍니다.

diff --git a/files/ko/conflicting/web/css/@viewport/index.html b/files/ko/conflicting/web/css/@viewport/index.html index 96dd3182ad..899947b05f 100644 --- a/files/ko/conflicting/web/css/@viewport/index.html +++ b/files/ko/conflicting/web/css/@viewport/index.html @@ -1,6 +1,6 @@ --- title: height -slug: Web/CSS/@viewport/height +slug: conflicting/Web/CSS/@viewport tags: - '@viewport' - CSS @@ -8,6 +8,7 @@ tags: - Reference translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/height +original_slug: Web/CSS/@viewport/height ---
{{CSSRef}}
diff --git a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html index 7dab19acbd..9af37b8be1 100644 --- a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html +++ b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -1,8 +1,9 @@ --- title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit +slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/viewport-fit +original_slug: Web/CSS/@viewport/viewport-fit ---
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
diff --git a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html index 699b60921e..4d0a6a0247 100644 --- a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html +++ b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -1,6 +1,6 @@ --- title: zoom -slug: Web/CSS/@viewport/zoom +slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 tags: - CSS - CSS Descriptor @@ -10,6 +10,7 @@ tags: - Reference translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/zoom +original_slug: Web/CSS/@viewport/zoom ---
{{ CSSRef }}
diff --git a/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index 69d4320e3c..1a8c900e9c 100644 --- a/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -1,6 +1,6 @@ --- title: 여러개의 배경 지정하기 -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds tags: - CSS - CSS Background @@ -9,6 +9,7 @@ tags: - Intermediate translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---

{{CSSRef}}

diff --git a/files/ko/conflicting/web/guide/index.html b/files/ko/conflicting/web/guide/index.html index 6dc2104009..56a70887cf 100644 --- a/files/ko/conflicting/web/guide/index.html +++ b/files/ko/conflicting/web/guide/index.html @@ -1,10 +1,11 @@ --- title: Web Development -slug: Web_Development +slug: conflicting/Web/Guide tags: - Web Development translation_of: Web/Guide translation_of_original: Web_Development +original_slug: Web_Development ---
웹 개발은 웹 사이트 그리고 웹 응용프로그램 개발을 (양자를 포괄적으로) 포함하고 있습니다.
diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html index f8793b4cbc..621a2cee51 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html @@ -1,9 +1,10 @@ --- title: Arithmetic Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators +slug: conflicting/Web/JavaScript/Guide/Expressions_and_Operators translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Arithmetic_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators ---

산술 연산자

산술 연산자는 수(상수값이든지 변수든지)를 받아서 하나의 수를 반환합니다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어에서 처럼 동작합니다. 예외적으로 / 연산자는 JavaScript에서 소수를 반환합니다. C나 Java 같은 다른 언어에서는 / 연산자가 소수 부분은 잘라버립니다. 예를 들면 이렇습니다. diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html index edf5f640a5..172de20c73 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html @@ -1,9 +1,11 @@ --- title: Logical Operators slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators + conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Logical_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators ---

논리 연산자

논리 연산자는 주로 불리언(논리적) 값과 함께 사용됩니다. 그때 논리 연산자는 불리언 값을 반환합니다. 그러나 &&와 || 연산자는 실제로는 피연산자 중에 하나의 값을 반환하기 때문에, 이 연산자가 불리언 값이 아닌 값과 함께 사용되면 불리언 값이 아닌 값을 반환할 것입니다. 다음 표에 논리 연산자에 대해서 설명했습니다. diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html index fc39b5a34f..7da67ef78a 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html @@ -1,9 +1,11 @@ --- title: String Operators slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators + conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/String_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators ---

문자열 연산자

문자열 값에 사용할 수 있는 비교 연산자 외에도 연결 연산자(+)가 있는데, 이 연산자는 두 문자열 값을 연결한 새로운 문자열 값을 반환합니다. 예를 들어, "my " + "string"는 "my string"라는 문자열을 반환합니다. diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html index f238901cab..813470385b 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html @@ -1,9 +1,11 @@ --- title: Special Operators slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators + conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Special_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators ---

특수 연산자

JavaScript 다음과 같은 특별한 연산자를 제공합니다. diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html index 3aed13da65..82af3b32f7 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html @@ -1,9 +1,11 @@ --- title: Bitwise Operators slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators + conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Bitwise_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators ---


diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html index 7b5f5c577c..ece3da245d 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html @@ -1,8 +1,9 @@ --- title: Constants -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants +slug: conflicting/Web/JavaScript/Guide/Grammar_and_types translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Constants +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants ---

상수

const 키워드를 이용하면 읽기 전용의 이름 있는 상수를 만들 수 있습니다. 상수 식별자(const identifier)는 변수의 식별자와 동일합니다. 문자나 밑줄로 시작해야 하고, 알파벳, 숫자, 밑줄 문자를 사용할 수 있습니다. diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html index c9260414d3..014cc159ff 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html @@ -1,8 +1,10 @@ --- title: Variables -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables +slug: >- + conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Variables +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables ---

변수

우리는 프로그램 내에서 값에 이름을 부여하기 위해서 변수를 사용할 수 있습니다. 변수의 이름은 "식별자(identifier)"라고 불리며, 몇 가지 규칙을 따라야 합니다. diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html index 9c97d9cf82..4437362b39 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html @@ -1,8 +1,10 @@ --- title: Unicode -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode +slug: >- + conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Unicode +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode ---

유니코드

유니코드는 세계의 주요한 문자 언어를 교환하고 표현하기 위한 문자-코딩 표준입니다. 유니코드는 아메리카, 유럽, 중동, 아프리카, 인도, 아시아, 태평양 지역(Pacifica)의 언어를 포함하며 고문자와 기술 분야 기호들도 포함합니다. 유니코드는 공통적인 기술 분야, 수학 분야 기호 뿐만 아니라 여러 언어를 포함한 텍스트의 교환, 처리, 표현을 지원합니다. 유니코드는 나라마다 서로 다른 문자 표준으로 인해서 여러 언어를 포함했을 때 발생하는 국제화 문제를 해결할 수 있기를 희망합니다. 하지만 아직은 모든 현대 문자, 고대 문자를 지원하지는 못합니다. diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html index ee62d0cecf..fa1d8fe3d5 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html @@ -1,8 +1,10 @@ --- title: Literals -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals +slug: >- + conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Literals +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals ---

상수값(Literal)

JavaScript에서 값을 표현하기 위해 상수값을 사용할 수 있습니다. 그것은 변수가 아니라 고정된 값으로서 "문자 그대로(literally)" 스크립트에 값을 제공하는 것입니다. 이 절에서 다음과 같은 상수값에 대해서 설명하겠습니다.

diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html index e5c40d23bf..cb690bb9be 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html @@ -1,8 +1,10 @@ --- title: Values -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values +slug: >- + conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Values +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values ---

값

JavaScript는 다음과 같은 값 형식을 인식합니다. diff --git a/files/ko/conflicting/web/javascript/guide/index.html b/files/ko/conflicting/web/javascript/guide/index.html index d8d0156dc2..38ef567276 100644 --- a/files/ko/conflicting/web/javascript/guide/index.html +++ b/files/ko/conflicting/web/javascript/guide/index.html @@ -1,9 +1,10 @@ --- title: Predefined Core Objects -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects +slug: conflicting/Web/JavaScript/Guide translation_of: Web/JavaScript/Guide translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects ---

미리 정의된 기본 개체

이 절에서는 기본 JavaScrip에 미리 정의된 개체에 대해서 설명하겠습니다. diff --git a/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html index b7d3de85bf..ba17dea652 100644 --- a/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html +++ b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html @@ -1,9 +1,10 @@ --- title: The DOM and JavaScript -slug: The_DOM_and_JavaScript +slug: conflicting/Web/JavaScript/JavaScript_technologies_overview tags: - DOM - JavaScript +original_slug: The_DOM_and_JavaScript ---

큰 그림

diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html index 6e90207661..f49c3592b0 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -1,6 +1,6 @@ --- title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean tags: - Boolean - JavaScript @@ -8,6 +8,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Boolean translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html index 06e1bba5f7..4b84cc87cf 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html @@ -1,6 +1,6 @@ --- title: Date.prototype -slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date tags: - Date - JavaScript @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Date translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Date/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html index 6e13afb6db..782fc3d9e2 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html @@ -1,8 +1,9 @@ --- title: InternalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/InternalError translation_of: Web/JavaScript/Reference/Global_Objects/InternalError translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---
{{JSRef}} {{non-standard_header}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html index 2f1b031b39..4b5b7f24b8 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -1,6 +1,6 @@ --- title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat tags: - DateTimeFormat - Internationalization @@ -11,6 +11,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html index fcbaa6c247..ea9a8820fd 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -1,6 +1,6 @@ --- title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat tags: - Internationalization - Intl @@ -10,6 +10,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html index 3445bf2847..6fef19f59d 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html @@ -1,6 +1,6 @@ --- title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map tags: - ECMAScript 2015 - JavaScript @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Map translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html index 2bf39d20f9..a6c46b27cc 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html @@ -1,6 +1,6 @@ --- title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number tags: - JavaScript - Number @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Number translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html index 8f7b08793f..03786c2910 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html @@ -1,6 +1,6 @@ --- title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object tags: - JavaScript - Object @@ -9,6 +9,7 @@ tags: - 프로토타입 translation_of: Web/JavaScript/Reference/Global_Objects/Object translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html index 2e393d68d3..6ac1c919ce 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -1,6 +1,6 @@ --- title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise tags: - JavaScript - Promise @@ -8,6 +8,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Promise translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html index 8183d348a9..173883769c 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html @@ -1,6 +1,6 @@ --- title: Set.prototype -slug: Web/JavaScript/Reference/Global_Objects/Set/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Set tags: - ECMAScript 2015 - JavaScript @@ -9,6 +9,7 @@ tags: - set translation_of: Web/JavaScript/Reference/Global_Objects/Set translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Set/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html index 849b70c1c6..b0d86cbb55 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -1,6 +1,6 @@ --- title: SharedArrayBuffer.prototype -slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer tags: - JavaScript - SharedArrayBuffer @@ -9,6 +9,7 @@ tags: - 속성 translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html index fa32999954..b8c4064d6c 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,6 +1,6 @@ --- title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - JavaScript - Property @@ -8,6 +8,7 @@ tags: - String translation_of: Web/JavaScript/Reference/Global_Objects/String translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---
{{JSRef("Global_Objects", "String")}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html index aa38e80799..aaf73c5def 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -1,8 +1,9 @@ --- title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html index 75f63010bf..f100a49134 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html @@ -1,12 +1,13 @@ --- title: TypedArray.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray tags: - JavaScript - Property - TypedArray translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html index fa2ad9691d..50ee3cd958 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -1,6 +1,6 @@ --- title: WeakMap.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap tags: - ECMAScript6 - JavaScript @@ -8,6 +8,7 @@ tags: - WeakMap translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html index 0c75408df5..e479c2067c 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -1,6 +1,6 @@ --- title: WeakSet.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet tags: - ECMAScript6 - JavaScript @@ -8,6 +8,7 @@ tags: - WeakSet translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html index c7c1c54bab..e647badb6a 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html @@ -1,8 +1,9 @@ --- title: WebAssembly.Global.prototype -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators/index.html b/files/ko/conflicting/web/javascript/reference/operators/index.html index 3e61415550..71373078bf 100644 --- a/files/ko/conflicting/web/javascript/reference/operators/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators/index.html @@ -1,12 +1,13 @@ --- title: 산술 연산자 -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +slug: conflicting/Web/JavaScript/Reference/Operators tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html index b442b1d7bd..7220888794 100644 --- a/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html @@ -1,6 +1,7 @@ --- title: 논리 연산자 -slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) +slug: >- + conflicting/Web/JavaScript/Reference/Operators_13aeb53e31f9cec454ca631cb162449f tags: - JavaScript - Logic @@ -12,6 +13,7 @@ tags: - 논리 translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +original_slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html index cf5ae3afa2..39a3c0c6c3 100644 --- a/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html @@ -1,12 +1,14 @@ --- title: 비교 연산자 -slug: Web/JavaScript/Reference/Operators/Comparison_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +original_slug: Web/JavaScript/Reference/Operators/Comparison_Operators ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html index 4cc5ab7b5a..7f8b67dd78 100644 --- a/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -1,12 +1,14 @@ --- title: 비트 연산자 -slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html index 93146d63cf..e0fee1dac4 100644 --- a/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html @@ -1,12 +1,14 @@ --- title: 할당 연산자 -slug: Web/JavaScript/Reference/Operators/Assignment_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators#Assignment_operators translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/statements/switch/index.html b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html index 4fe127b7db..77a82304bd 100644 --- a/files/ko/conflicting/web/javascript/reference/statements/switch/index.html +++ b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html @@ -1,12 +1,13 @@ --- title: default -slug: Web/JavaScript/Reference/Statements/default +slug: conflicting/Web/JavaScript/Reference/Statements/switch tags: - JavaScript - Keyword - Reference translation_of: Web/JavaScript/Reference/Statements/switch translation_of_original: Web/JavaScript/Reference/Statements/default +original_slug: Web/JavaScript/Reference/Statements/default ---
{{jsSidebar("Statements")}}
diff --git a/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html index e5e70ed9fa..efc1cc940e 100644 --- a/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ b/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -1,6 +1,6 @@ --- title: Using XPath -slug: Using_XPath +slug: conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript tags: - AJAX - Add-ons @@ -10,6 +10,7 @@ tags: - XPath translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript translation_of_original: Using_XPath +original_slug: Using_XPath ---

XPath은 XML 문서의 위치 정보를 위한 언어입니다.

이 문서는 자바스크립트 코드와 XPath의 관계를 위한 Mozilla 인터페이스에 대해 설명합니다. 이러한 것들은 (이 부분에 대해 W3C 작업 그룹에서 작성한) DOM Level 3 XPath에 설명되어 있습니다. diff --git a/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html b/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html index ca79e665a1..44355fca0d 100644 --- a/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html @@ -1,6 +1,6 @@ --- title: 득점 -slug: Games/Tutorials/2D_breakout_game_Phaser/득점 +slug: Games/Tutorials/2D_breakout_game_Phaser/The_score tags: - 게임 - 게임제작 @@ -8,6 +8,7 @@ tags: - 득점시스템 - 튜토리얼 translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score +original_slug: Games/Tutorials/2D_breakout_game_Phaser/득점 ---

{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html index 2df00b91b9..6c0d723b80 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -1,7 +1,8 @@ --- title: 공을 벽에 튕기기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html index 9560da25e9..ef96583521 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html @@ -1,7 +1,8 @@ --- title: 벽돌 만들기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html index f312374938..d214b49ae7 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -1,7 +1,8 @@ --- title: 충돌 감지 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection ---
{{GamesSidebar}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html index a7f1ed4130..a32e03f5d9 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -1,6 +1,7 @@ --- title: 캔버스 생성과 그리기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기 +slug: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it tags: - 2D - 게임 @@ -10,6 +11,7 @@ tags: - 튜토리얼 translation_of: >- Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기 ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html index b23a4b6b33..e0ef02994f 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -1,11 +1,12 @@ --- title: 개발 마무리 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up tags: - Canvas - Games - JavaScript translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up ---
{{GamesSidebar}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html index d0c72fb8b3..6733d49fd5 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html @@ -1,6 +1,6 @@ --- title: 게임 오버 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over tags: - 게임 - 게임 오버 @@ -10,6 +10,7 @@ tags: - 캔버스 - 튜토리얼 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html index 8b0e4da888..9b1a5fe86f 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -1,6 +1,6 @@ --- title: 순수한 자바스크립트를 이용한 2D 벽돌깨기 게임 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임 +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript tags: - 2D - 게임 @@ -8,6 +8,7 @@ tags: - 캔버스 - 튜토리얼 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임 ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html index e05faf32e8..0526df40d3 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -1,11 +1,12 @@ --- title: 마우스로 패들 조종하기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls tags: - Canvas - Games - JavaScript translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls ---
{{GamesSidebar}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html index 5a8b02904e..0f451908d9 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -1,6 +1,6 @@ --- title: 공 움직이기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기 +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball tags: - 2D - 게임 @@ -11,6 +11,7 @@ tags: - 캔버스 - 튜토리얼 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기 ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html index 47cde1be4e..2f4415bfc3 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -1,7 +1,8 @@ --- title: Paddle과 키보드 컨트롤 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html index 76883a1655..b82e8be9bd 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html @@ -1,11 +1,12 @@ --- title: Track the score and win -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win tags: - Canvas - Games - JavaScript translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win ---
{{GamesSidebar}}
diff --git a/files/ko/glossary/array/index.html b/files/ko/glossary/array/index.html index b7f3f63957..9dc0173b1a 100644 --- a/files/ko/glossary/array/index.html +++ b/files/ko/glossary/array/index.html @@ -1,9 +1,10 @@ --- title: 배열 -slug: Glossary/배열 +slug: Glossary/array tags: - 배열 translation_of: Glossary/array +original_slug: Glossary/배열 ---

배열은 데이터의 순서가 있는 집합  (  언어어 따라 {{Glossary("primitive")}} 또는  {{Glossary("object")}}) 이다. 배열은 하나의 변수의 여러개의 값들을 저장하는데 사용된다.  이것은 단 하나의 값을 저장하는 변수와 비교된다. 

diff --git a/files/ko/glossary/boolean/index.html b/files/ko/glossary/boolean/index.html index 9d63373163..0cd9455dc2 100644 --- a/files/ko/glossary/boolean/index.html +++ b/files/ko/glossary/boolean/index.html @@ -1,6 +1,6 @@ --- title: 불린 -slug: Glossary/불린 +slug: Glossary/Boolean tags: - 데이터 타입 - 부울 @@ -9,6 +9,7 @@ tags: - 자바스크립트 - 프로그래밍 언어 translation_of: Glossary/Boolean +original_slug: Glossary/불린 ---

컴퓨터 과학에서, 불린(boolean)은 논리적인 데이터 유형이다. 불린은 참(true) 혹은 거짓(false) 값만을 가질 수 있다. 자바스크립트에서 불린 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 쓰인다.

diff --git a/files/ko/glossary/browsing_context/index.html b/files/ko/glossary/browsing_context/index.html index e4d5fab662..79c5af7e7b 100644 --- a/files/ko/glossary/browsing_context/index.html +++ b/files/ko/glossary/browsing_context/index.html @@ -1,10 +1,11 @@ --- title: 브라우징 맥락 -slug: Glossary/브라우저-컨텍스트 +slug: Glossary/Browsing_context tags: - CodingScripting - Glossary translation_of: Glossary/Browsing_context +original_slug: Glossary/브라우저-컨텍스트 ---
{{QuickLinksWithSubpages("/ko/docs/Glossary")}}
diff --git a/files/ko/glossary/cache/index.html b/files/ko/glossary/cache/index.html index 6d45b6772c..7f9fd0aa77 100644 --- a/files/ko/glossary/cache/index.html +++ b/files/ko/glossary/cache/index.html @@ -1,7 +1,8 @@ --- title: 캐시 -slug: Glossary/캐시 +slug: Glossary/Cache translation_of: Glossary/Cache +original_slug: Glossary/캐시 ---

캐시 (웹 캐시 또는 HTTP 캐시)는 HTTP 응답들(responses)을 일시적으로 저장하는 곳입니다. 이를 통해 그 다음 HTTP 요청들(requests)에서 특정 조건이 만족될 때까지 캐시에 저장한 리소스를 사용할 수 있습니다. 

diff --git a/files/ko/glossary/dhtml/index.html b/files/ko/glossary/dhtml/index.html index 1eada4d952..2ed3c1f82f 100644 --- a/files/ko/glossary/dhtml/index.html +++ b/files/ko/glossary/dhtml/index.html @@ -1,9 +1,10 @@ --- title: DHTML -slug: DHTML +slug: Glossary/DHTML tags: - DHTML translation_of: Glossary/DHTML +original_slug: DHTML ---
DHTML은 "dynamic HTML"을 줄인 것이다. DHTML은 일반적으로 Flash나Java 플러그인을 사용하여 다루어지지 않는 역동적 웹페이지 뒤의 코드를 참조하는데 사용된다. 복합 기능성을 모은 용어는 웹 개발자가 HTML, CSS, Document Object Model, 그리고 JavaScript를 사용하는 것을 가능하게 한다.
diff --git a/files/ko/glossary/dynamic_programming_language/index.html b/files/ko/glossary/dynamic_programming_language/index.html index dc17a46f18..b031c498fa 100644 --- a/files/ko/glossary/dynamic_programming_language/index.html +++ b/files/ko/glossary/dynamic_programming_language/index.html @@ -1,7 +1,8 @@ --- title: 동적 프로그래밍 언어 -slug: Glossary/동적_프로그래밍_언어 +slug: Glossary/Dynamic_programming_language translation_of: Glossary/Dynamic_programming_language +original_slug: Glossary/동적_프로그래밍_언어 ---

A dynamic programming language is a programming language in which operations otherwise done at compile-time can be done at run-time. For example, in JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running.

diff --git a/files/ko/glossary/http_header/index.html b/files/ko/glossary/http_header/index.html index 30a1051acf..50e0c68f04 100644 --- a/files/ko/glossary/http_header/index.html +++ b/files/ko/glossary/http_header/index.html @@ -1,10 +1,11 @@ --- title: 헤더 -slug: Glossary/Header +slug: Glossary/HTTP_header tags: - WebMechanics - 용어 translation_of: Glossary/HTTP_header +original_slug: Glossary/Header ---

HTTP 헤더는 부가적인 정보를 전달하는 HTTP 요청 또는 응답 필드로, 메시지나 바디의 의미를 변경하거나 미리 조정합니다. 헤더는 대소문자를 구별하지 않으며, 줄의 처음에서 시작하여 바로 다음에 ':'과 헤더에 해당하는 값이 따라옵니다. 값은 다음 CR 또는 메시지의 마지막에서 끝납니다.

diff --git a/files/ko/glossary/identifier/index.html b/files/ko/glossary/identifier/index.html index f306315b66..ca64dedab0 100644 --- a/files/ko/glossary/identifier/index.html +++ b/files/ko/glossary/identifier/index.html @@ -1,10 +1,11 @@ --- title: 식별자 -slug: Glossary/식별자 +slug: Glossary/Identifier tags: - Beginner - Glossary translation_of: Glossary/Identifier +original_slug: Glossary/식별자 ---

식별자는 코드 내의 {{glossary("variable", "변수")}}, {{glossary("function", "함수")}}, 혹은 {{glossary("property", "속성")}}을 식별하는 문자열입니다.

diff --git a/files/ko/glossary/localization/index.html b/files/ko/glossary/localization/index.html index d2f45a54e0..21d3a54702 100644 --- a/files/ko/glossary/localization/index.html +++ b/files/ko/glossary/localization/index.html @@ -1,9 +1,10 @@ --- title: Localization -slug: Localization +slug: Glossary/Localization tags: - Localization translation_of: Glossary/Localization +original_slug: Localization ---

지역화는 소프트웨어 사용자 인터페이스를 다른 언어로 번역하고 그 문화에 맞게 바꾸는 과정을 의미합니다. 지역화와 관련된 내용은 모질라 기반의 프로그램이나 확장기능을 지역화 할 수 있게 만드는 것에 관한 것입니다.

diff --git a/files/ko/glossary/scope/index.html b/files/ko/glossary/scope/index.html index 259cc6b9f4..db31f200a2 100644 --- a/files/ko/glossary/scope/index.html +++ b/files/ko/glossary/scope/index.html @@ -1,7 +1,8 @@ --- title: 스코프 -slug: Glossary/스코프 +slug: Glossary/Scope translation_of: Glossary/Scope +original_slug: Glossary/스코프 ---

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는  {{glossary("값","값")}}과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다. 만약 {{glossary("변수")}} 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

diff --git a/files/ko/glossary/transmission_control_protocol_(tcp)/index.html b/files/ko/glossary/transmission_control_protocol_(tcp)/index.html index 6644b8772c..072c3ccbb9 100644 --- a/files/ko/glossary/transmission_control_protocol_(tcp)/index.html +++ b/files/ko/glossary/transmission_control_protocol_(tcp)/index.html @@ -1,9 +1,10 @@ --- title: 전송 제어 프로토콜 -slug: Glossary/전송_제어_프로토콜_(TCP) +slug: Glossary/Transmission_Control_Protocol_(TCP) tags: - 전송 제어 프로토콜 translation_of: Glossary/Transmission_Control_Protocol_(TCP) +original_slug: Glossary/전송_제어_프로토콜_(TCP) ---

TCP (Transmission Control Protocol)는 IP 네트워크의 두 컴퓨터 간의 연결 지향 통신을 위한 전송 계층 호스트 간 프로토콜입니다. TCP는 가상 포트를 사용하여 두 컴퓨터 간의 물리적 연결을 재사용 할 수 있는 가상 종단 간 연결을 만듭니다. TCP는 {{glossary ( 'HTTP')}} 및 {{glossary ( 'SMTP')}} (email)과 같은 상위 레벨 프로토콜 데이터를 캡슐화합니다.

diff --git a/files/ko/glossary/xhtml/index.html b/files/ko/glossary/xhtml/index.html index dfab34e19d..2c5191f49c 100644 --- a/files/ko/glossary/xhtml/index.html +++ b/files/ko/glossary/xhtml/index.html @@ -1,9 +1,10 @@ --- title: XHTML -slug: XHTML +slug: Glossary/XHTML tags: - XHTML translation_of: Glossary/XHTML +original_slug: XHTML ---

HTML은 HTML 또는 XHTML이라는 XML문법으로 브라우저를 통해 네트워크에 접속할 수 있습니다.

diff --git a/files/ko/learn/accessibility/html/index.html b/files/ko/learn/accessibility/html/index.html index dae842fc92..efc98a5735 100644 --- a/files/ko/learn/accessibility/html/index.html +++ b/files/ko/learn/accessibility/html/index.html @@ -1,6 +1,6 @@ --- title: 'HTML: 접근성을 위한 기초' -slug: Learn/접근성/HTML +slug: Learn/Accessibility/HTML tags: - HTML - HTML 접근성 @@ -11,6 +11,7 @@ tags: - 웹 접근성 - 접근성 향상 translation_of: Learn/Accessibility/HTML +original_slug: Learn/접근성/HTML ---
{{LearnSidebar}}
diff --git a/files/ko/learn/accessibility/index.html b/files/ko/learn/accessibility/index.html index 01c9c2e2bb..ba2981d06b 100644 --- a/files/ko/learn/accessibility/index.html +++ b/files/ko/learn/accessibility/index.html @@ -1,6 +1,6 @@ --- title: 접근성 -slug: Learn/접근성 +slug: Learn/Accessibility tags: - ARIA - CSS @@ -13,6 +13,7 @@ tags: - 비기너 - 접근성 translation_of: Learn/Accessibility +original_slug: Learn/접근성 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/accessibility/mobile/index.html b/files/ko/learn/accessibility/mobile/index.html index a64c0eaa88..d057d285e6 100644 --- a/files/ko/learn/accessibility/mobile/index.html +++ b/files/ko/learn/accessibility/mobile/index.html @@ -1,7 +1,8 @@ --- title: 모바일 접근성 -slug: Learn/접근성/모바일 +slug: Learn/Accessibility/Mobile translation_of: Learn/Accessibility/Mobile +original_slug: Learn/접근성/모바일 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/accessibility/what_is_accessibility/index.html b/files/ko/learn/accessibility/what_is_accessibility/index.html index 67f4b6d302..f7ab84a9ae 100644 --- a/files/ko/learn/accessibility/what_is_accessibility/index.html +++ b/files/ko/learn/accessibility/what_is_accessibility/index.html @@ -1,7 +1,8 @@ --- title: What is accessibility? -slug: Learn/접근성/What_is_accessibility +slug: Learn/Accessibility/What_is_accessibility translation_of: Learn/Accessibility/What_is_accessibility +original_slug: Learn/접근성/What_is_accessibility ---

{{LearnSidebar}}

diff --git a/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html index d39ea4069f..3005d81a05 100644 --- a/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html +++ b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -1,7 +1,8 @@ --- title: 웹 사이트가 제대로 동작하는지 확인하는 방법 -slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 +slug: Learn/Common_questions/Checking_that_your_web_site_is_working_properly translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +original_slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 ---

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

diff --git a/files/ko/learn/common_questions/thinking_before_coding/index.html b/files/ko/learn/common_questions/thinking_before_coding/index.html index 8885c5999b..7923c8dadf 100644 --- a/files/ko/learn/common_questions/thinking_before_coding/index.html +++ b/files/ko/learn/common_questions/thinking_before_coding/index.html @@ -1,10 +1,11 @@ --- title: 나의 웹사이트를 설계하기 위해서는? -slug: Learn/Common_questions/코딩하기_전에_생각하기 +slug: Learn/Common_questions/Thinking_before_coding tags: - 능동학습필요 - 초보자 translation_of: Learn/Common_questions/Thinking_before_coding +original_slug: Learn/Common_questions/코딩하기_전에_생각하기 ---

이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.

diff --git a/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html index d16df40221..61ef3af45d 100644 --- a/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -1,7 +1,8 @@ --- title: 기본적인 CSS 이해 -slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 +slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +original_slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/css/building_blocks/selectors/index.html b/files/ko/learn/css/building_blocks/selectors/index.html index 274653da91..932912bcb8 100644 --- a/files/ko/learn/css/building_blocks/selectors/index.html +++ b/files/ko/learn/css/building_blocks/selectors/index.html @@ -1,7 +1,8 @@ --- title: CSS 선택자 -slug: Learn/CSS/Building_blocks/선택자 +slug: Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors +original_slug: Learn/CSS/Building_blocks/선택자 ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
diff --git a/files/ko/learn/css/building_blocks/the_box_model/index.html b/files/ko/learn/css/building_blocks/the_box_model/index.html index eec5f2b929..655db5171f 100644 --- a/files/ko/learn/css/building_blocks/the_box_model/index.html +++ b/files/ko/learn/css/building_blocks/the_box_model/index.html @@ -1,6 +1,6 @@ --- title: 상자 모델 -slug: Learn/CSS/Building_blocks/상자_모델 +slug: Learn/CSS/Building_blocks/The_box_model tags: - CSS - 디스플레이 @@ -11,6 +11,7 @@ tags: - 패딩 - 학습 translation_of: Learn/CSS/Building_blocks/The_box_model +original_slug: Learn/CSS/Building_blocks/상자_모델 ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
diff --git a/files/ko/learn/css/css_layout/media_queries/index.html b/files/ko/learn/css/css_layout/media_queries/index.html index cf13a1421c..4c2ba12014 100644 --- a/files/ko/learn/css/css_layout/media_queries/index.html +++ b/files/ko/learn/css/css_layout/media_queries/index.html @@ -1,6 +1,6 @@ --- title: 미디어 쿼리 초보자 안내서 -slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 +slug: Learn/CSS/CSS_layout/Media_queries tags: - 미디어 쿼리 - 씨에스에스 @@ -8,6 +8,7 @@ tags: - 초보자 - 학습 translation_of: Learn/CSS/CSS_layout/Media_queries +original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 ---

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

diff --git a/files/ko/learn/css/css_layout/normal_flow/index.html b/files/ko/learn/css/css_layout/normal_flow/index.html index 43b4366c0e..13dc60e97e 100644 --- a/files/ko/learn/css/css_layout/normal_flow/index.html +++ b/files/ko/learn/css/css_layout/normal_flow/index.html @@ -1,6 +1,6 @@ --- title: 일반 대열 -slug: Learn/CSS/CSS_layout/일반_흐름 +slug: Learn/CSS/CSS_layout/Normal_Flow tags: - 격자형 - 부동 @@ -10,6 +10,7 @@ tags: - 초보자 - 학습 translation_of: Learn/CSS/CSS_layout/Normal_Flow +original_slug: Learn/CSS/CSS_layout/일반_흐름 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/css/css_layout/positioning/index.html b/files/ko/learn/css/css_layout/positioning/index.html index 76a491ae0e..f6c02bb762 100644 --- a/files/ko/learn/css/css_layout/positioning/index.html +++ b/files/ko/learn/css/css_layout/positioning/index.html @@ -1,6 +1,6 @@ --- title: 위치잡기 -slug: Learn/CSS/CSS_layout/위치잡기 +slug: Learn/CSS/CSS_layout/Positioning tags: - 고정 - 글 @@ -13,6 +13,7 @@ tags: - 초보자 - 코딩스크립팅 translation_of: Learn/CSS/CSS_layout/Positioning +original_slug: Learn/CSS/CSS_layout/위치잡기 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/css/css_layout/responsive_design/index.html b/files/ko/learn/css/css_layout/responsive_design/index.html index b1311448c7..c3f2064cc4 100644 --- a/files/ko/learn/css/css_layout/responsive_design/index.html +++ b/files/ko/learn/css/css_layout/responsive_design/index.html @@ -1,6 +1,6 @@ --- title: 반응형 디자인 -slug: Learn/CSS/CSS_layout/반응형_디자인 +slug: Learn/CSS/CSS_layout/Responsive_Design tags: - 가변상장 - 격자 @@ -11,6 +11,7 @@ tags: - 이미지 - 타이포크래피 translation_of: Learn/CSS/CSS_layout/Responsive_Design +original_slug: Learn/CSS/CSS_layout/반응형_디자인 ---
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
diff --git a/files/ko/learn/css/css_layout/supporting_older_browsers/index.html b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html index 07910a4d26..456a59f385 100644 --- a/files/ko/learn/css/css_layout/supporting_older_browsers/index.html +++ b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html @@ -1,6 +1,6 @@ --- title: 이전 브라우저 지원 -slug: Learn/CSS/CSS_layout/이전_브라우저_지원 +slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers tags: - 가변상자 - 격자 @@ -13,6 +13,7 @@ tags: - 초보자 - 학습 translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +original_slug: Learn/CSS/CSS_layout/이전_브라우저_지원 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/css/howto/css_faq/index.html b/files/ko/learn/css/howto/css_faq/index.html index 604448f6c3..c86d002d48 100644 --- a/files/ko/learn/css/howto/css_faq/index.html +++ b/files/ko/learn/css/howto/css_faq/index.html @@ -1,7 +1,8 @@ --- title: 공통된 CSS 질문들 -slug: Web/CSS/Common_CSS_Questions +slug: Learn/CSS/Howto/CSS_FAQ translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/Common_CSS_Questions ---

왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?

diff --git a/files/ko/learn/forms/how_to_structure_a_web_form/index.html b/files/ko/learn/forms/how_to_structure_a_web_form/index.html index 37bfbb57ae..1702909e58 100644 --- a/files/ko/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ko/learn/forms/how_to_structure_a_web_form/index.html @@ -1,7 +1,8 @@ --- title: HTML_폼_구성_방법 -slug: Learn/HTML/Forms/HTML_폼_구성_방법 +slug: Learn/Forms/How_to_structure_a_web_form translation_of: Learn/Forms/How_to_structure_a_web_form +original_slug: Learn/HTML/Forms/HTML_폼_구성_방법 ---

HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.

diff --git a/files/ko/learn/forms/index.html b/files/ko/learn/forms/index.html index f7244cbdc1..a133468144 100644 --- a/files/ko/learn/forms/index.html +++ b/files/ko/learn/forms/index.html @@ -1,7 +1,8 @@ --- title: HTML 폼 가이드 -slug: Learn/HTML/Forms +slug: Learn/Forms translation_of: Learn/Forms +original_slug: Learn/HTML/Forms ---

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

diff --git a/files/ko/learn/forms/sending_and_retrieving_form_data/index.html b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html index f1d7c35437..69dbe42e3d 100644 --- a/files/ko/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html @@ -1,7 +1,8 @@ --- title: Sending and retrieving form data -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data +slug: Learn/Forms/Sending_and_retrieving_form_data translation_of: Learn/Forms/Sending_and_retrieving_form_data +original_slug: Learn/HTML/Forms/Sending_and_retrieving_form_data ---

많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.

diff --git a/files/ko/learn/forms/your_first_form/index.html b/files/ko/learn/forms/your_first_form/index.html index b997fc1f08..656600f2d5 100644 --- a/files/ko/learn/forms/your_first_form/index.html +++ b/files/ko/learn/forms/your_first_form/index.html @@ -1,7 +1,8 @@ --- title: 나의 첫 HTML 폼 -slug: Learn/HTML/Forms/Your_first_HTML_form +slug: Learn/Forms/Your_first_form translation_of: Learn/Forms/Your_first_form +original_slug: Learn/HTML/Forms/Your_first_HTML_form ---

이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTML, CSS)

diff --git a/files/ko/learn/getting_started_with_the_web/css_basics/index.html b/files/ko/learn/getting_started_with_the_web/css_basics/index.html index a5e8e08648..a517978ee1 100644 --- a/files/ko/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/ko/learn/getting_started_with_the_web/css_basics/index.html @@ -1,15 +1,16 @@ --- title: CSS 기초 -slug: Learn/Getting_started_with_the_web/CSS_기본 +slug: Learn/Getting_started_with_the_web/CSS_basics tags: - CSS - - 'l10n:priority' + - l10n:priority - 꾸미기 - 스크립트 코딩 - 웹 - 초보자 - 학습 translation_of: Learn/Getting_started_with_the_web/CSS_basics +original_slug: Learn/Getting_started_with_the_web/CSS_기본 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html index 1ed38e8cde..8493a63327 100644 --- a/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -1,14 +1,15 @@ --- title: 파일 다루기 -slug: Learn/Getting_started_with_the_web/파일들_다루기 +slug: Learn/Getting_started_with_the_web/Dealing_with_files tags: - Beginner - CodingScripting - Files - Guide - HTML - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Learn/Getting_started_with_the_web/파일들_다루기 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html index 009b22ec8f..f244ed2c43 100644 --- a/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html +++ b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -1,7 +1,8 @@ --- title: 웹의 동작 방식 -slug: Learn/Getting_started_with_the_web/웹의_동작_방식 +slug: Learn/Getting_started_with_the_web/How_the_Web_works translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +original_slug: Learn/Getting_started_with_the_web/웹의_동작_방식 ---

{{LearnSidebar}}

diff --git a/files/ko/learn/getting_started_with_the_web/html_basics/index.html b/files/ko/learn/getting_started_with_the_web/html_basics/index.html index 530f3fe11f..895dd2241d 100644 --- a/files/ko/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/ko/learn/getting_started_with_the_web/html_basics/index.html @@ -1,14 +1,15 @@ --- title: HTML 기본 -slug: Learn/Getting_started_with_the_web/HTML_기본 +slug: Learn/Getting_started_with_the_web/HTML_basics tags: - Beginner - HTML - Learn - Web - - 'l10n:priority' + - l10n:priority - 입문자 translation_of: Learn/Getting_started_with_the_web/HTML_basics +original_slug: Learn/Getting_started_with_the_web/HTML_기본 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html index 58ec16a8d9..db763035e3 100644 --- a/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html +++ b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -1,6 +1,6 @@ --- title: 기본 소프트웨어 설치하기 -slug: Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기 +slug: Learn/Getting_started_with_the_web/Installing_basic_software tags: - Beginner - Browser @@ -8,8 +8,9 @@ tags: - Setup - Tools - WebMechanics - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +original_slug: Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html index df2016e530..bc79f62cbd 100644 --- a/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -1,7 +1,8 @@ --- title: 웹사이트 출판하기 -slug: Learn/Getting_started_with_the_web/웹사이트_출판하기 +slug: Learn/Getting_started_with_the_web/Publishing_your_website translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +original_slug: Learn/Getting_started_with_the_web/웹사이트_출판하기 ---

{{LearnSidebar}}

diff --git a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html index 09ac7171e0..71d5a7517a 100644 --- a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html @@ -1,9 +1,10 @@ --- title: Tips for Authoring Fast-loading HTML Pages -slug: Tips_for_Authoring_Fast-loading_HTML_Pages +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages tags: - HTML translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +original_slug: Tips_for_Authoring_Fast-loading_HTML_Pages ---

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 이 글의 토론 페이지에 조언해 주시기 바랍니다.

최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.

diff --git a/files/ko/learn/html/howto/use_data_attributes/index.html b/files/ko/learn/html/howto/use_data_attributes/index.html index d4abd5da57..a2f568d908 100644 --- a/files/ko/learn/html/howto/use_data_attributes/index.html +++ b/files/ko/learn/html/howto/use_data_attributes/index.html @@ -1,6 +1,6 @@ --- title: 데이터 속성 사용하기 -slug: Learn/HTML/Howto/데이터_속성_사용하기 +slug: Learn/HTML/Howto/Use_data_attributes tags: - HTML - HTML5 @@ -9,6 +9,7 @@ tags: - 웹 - 전용 데이터 속성 translation_of: Learn/HTML/Howto/Use_data_attributes +original_slug: Learn/HTML/Howto/데이터_속성_사용하기 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index d6930ac381..984a8d3479 100644 --- a/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -1,7 +1,8 @@ --- title: 비디오 그리고 오디오 컨텐츠 -slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +original_slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content ---
{{LearnSidebar}}
diff --git a/files/ko/learn/javascript/building_blocks/conditionals/index.html b/files/ko/learn/javascript/building_blocks/conditionals/index.html index 858d6f9116..379ad28fff 100644 --- a/files/ko/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ko/learn/javascript/building_blocks/conditionals/index.html @@ -1,7 +1,8 @@ --- title: Making decisions in your code — 조건문 -slug: Learn/JavaScript/Building_blocks/조건문 +slug: Learn/JavaScript/Building_blocks/conditionals translation_of: Learn/JavaScript/Building_blocks/conditionals +original_slug: Learn/JavaScript/Building_blocks/조건문 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html index 94759e21bf..52a774c001 100644 --- a/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -1,10 +1,11 @@ --- title: JavaScript -slug: Web/CSS/Getting_Started/JavaScript +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents tags: - - 'CSS:Getting_Started' + - CSS:Getting_Started translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +original_slug: Web/CSS/Getting_Started/JavaScript ---

이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.

II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.

diff --git a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html index 526779b577..eff0af8858 100644 --- a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html +++ b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html @@ -1,7 +1,8 @@ --- title: '얼마나 이해했는지 확인해보자: JSON' -slug: 'Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON' -translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_JSON' +slug: Learn/JavaScript/Objects/Test_your_skills:_JSON +translation_of: Learn/JavaScript/Objects/Test_your_skills:_JSON +original_slug: Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON ---
{{learnsidebar}}
diff --git a/files/ko/learn/server-side/express_nodejs/development_environment/index.html b/files/ko/learn/server-side/express_nodejs/development_environment/index.html index f3ab1846f6..5cab9987ca 100644 --- a/files/ko/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/ko/learn/server-side/express_nodejs/development_environment/index.html @@ -1,6 +1,6 @@ --- title: Node 개발 환경을 설치하기 -slug: Learn/Server-side/Express_Nodejs/개발_환경 +slug: Learn/Server-side/Express_Nodejs/development_environment tags: - CodingScripting - Express @@ -13,6 +13,7 @@ tags: - 인트로 - 초보자 translation_of: Learn/Server-side/Express_Nodejs/development_environment +original_slug: Learn/Server-side/Express_Nodejs/개발_환경 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html index ca72e39124..32dc64faa9 100644 --- a/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html @@ -1,7 +1,8 @@ --- title: 'Express Tutorial Part 2: 스켈레톤 웹사이트 만들기' -slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 +slug: Learn/Server-side/Express_Nodejs/skeleton_website translation_of: Learn/Server-side/Express_Nodejs/skeleton_website +original_slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/server-side/node_server_without_framework/index.html b/files/ko/learn/server-side/node_server_without_framework/index.html index 1050f6aafd..43380d7e1a 100644 --- a/files/ko/learn/server-side/node_server_without_framework/index.html +++ b/files/ko/learn/server-side/node_server_without_framework/index.html @@ -1,7 +1,8 @@ --- title: Node server without framework -slug: Node_server_without_framework +slug: Learn/Server-side/Node_server_without_framework translation_of: Learn/Server-side/Node_server_without_framework +original_slug: Node_server_without_framework ---

소개

diff --git a/files/ko/mdn/at_ten/index.html b/files/ko/mdn/at_ten/index.html index d4883ca7cd..3f2e11b37c 100644 --- a/files/ko/mdn/at_ten/index.html +++ b/files/ko/mdn/at_ten/index.html @@ -1,6 +1,6 @@ --- title: MDN at 10 -slug: MDN_at_ten +slug: MDN/At_ten tags: - MDN - MDN 메타 @@ -8,6 +8,7 @@ tags: - 역사 - 출발 translation_of: MDN_at_ten +original_slug: MDN_at_ten --- diff --git a/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html index 27ac6774f1..1468978832 100644 --- a/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html +++ b/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -1,11 +1,12 @@ --- title: '"살아있는" 코드 샘플로 변환하기' -slug: MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live tags: - 라이브샘플 - 살아있는 코드 - 샘플코드 translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +original_slug: MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 ---
{{MDNSidebar}}

MDN의 라이브 샘플 시스템이란, 페이지에서 보여주는 샘플 코드를 수정하면 이 샘플 코드의 실행 결과도 달라지는 기능을 말합니다. 많은 문서에 샘플 코드들이 있지만 모든 샘플이 이 시스템을 사용하고 있지는 않으며, 생명력을 불어 넣어줘야 합니다.

diff --git a/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html b/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html index 6993674a4f..10f0b2a87c 100644 --- a/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html +++ b/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html @@ -1,12 +1,13 @@ --- title: 페이지 생성 및 수정 -slug: MDN/Contribute/Creating_and_editing_pages +slug: MDN/Contribute/Howto/Create_and_edit_pages tags: - 초보자 - 페이지생성 - 페이지수정 - 페이지편집 translation_of: MDN/Contribute/Howto/Create_and_edit_pages +original_slug: MDN/Contribute/Creating_and_editing_pages ---
{{MDNSidebar}}

신규 공헌자가 이미 있는 문서를 수정하거나 신규 문서를 생성하는 법에 대해 설명합니다. 

diff --git a/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html b/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html index fd8be5585d..8769e65a9e 100644 --- a/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html +++ b/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html @@ -1,7 +1,8 @@ --- title: API 레퍼런스의 사이드바 -slug: MDN/Structures/API_references/API_reference_sidebars +slug: MDN/Contribute/Howto/Write_an_API_reference/Sidebars translation_of: MDN/Structures/API_references/API_reference_sidebars +original_slug: MDN/Structures/API_references/API_reference_sidebars ---
{{MDNSidebar}}
diff --git a/files/ko/mdn/guidelines/code_guidelines/general/index.html b/files/ko/mdn/guidelines/code_guidelines/general/index.html index 093f50ae47..e35f30140d 100644 --- a/files/ko/mdn/guidelines/code_guidelines/general/index.html +++ b/files/ko/mdn/guidelines/code_guidelines/general/index.html @@ -1,6 +1,6 @@ --- title: 모든 코드에 대한 일반 가이드라인 -slug: MDN/Guidelines/Code_guidelines/Code_guidelines +slug: MDN/Guidelines/Code_guidelines/General tags: - Code - General @@ -12,6 +12,7 @@ tags: - 코드 블록 - 코드 스타일 translation_of: MDN/Guidelines/Code_guidelines/General +original_slug: MDN/Guidelines/Code_guidelines/Code_guidelines ---
{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}
diff --git a/files/ko/mdn/guidelines/conventions_definitions/index.html b/files/ko/mdn/guidelines/conventions_definitions/index.html index d8c5f2b247..1386fbe2f3 100644 --- a/files/ko/mdn/guidelines/conventions_definitions/index.html +++ b/files/ko/mdn/guidelines/conventions_definitions/index.html @@ -1,11 +1,12 @@ --- title: 모범 사례 -slug: MDN/Guidelines/Best_practices +slug: MDN/Guidelines/Conventions_definitions tags: - Guide - Guidelines - MDN Meta translation_of: MDN/Guidelines/Conventions_definitions +original_slug: MDN/Guidelines/Best_practices ---
{{MDNSidebar}}

이 글은 MDN에서 추천하는 콘텐츠 작업 법을 설명합니다. 이 가이드라인은 더 나은 결과로 이끌 선호하는 일하는 법을 설명하거나 비슷한 일을 하는 여러 방법 중에서 결정에 조언을 제공합니다.

diff --git a/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html b/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html index 46f6395a52..b623e5e594 100644 --- a/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html +++ b/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html @@ -1,7 +1,8 @@ --- title: 이건 MDN에 있나요? -slug: MDN/Contribute/Does_this_belong +slug: MDN/Guidelines/Does_this_belong_on_MDN translation_of: MDN/Guidelines/Does_this_belong_on_MDN +original_slug: MDN/Contribute/Does_this_belong ---
{{MDNSidebar}}
{{IncludeSubnav("/ko/docs/MDN")}}
diff --git a/files/ko/mdn/guidelines/writing_style_guide/index.html b/files/ko/mdn/guidelines/writing_style_guide/index.html index 507f30e228..89c12f6377 100644 --- a/files/ko/mdn/guidelines/writing_style_guide/index.html +++ b/files/ko/mdn/guidelines/writing_style_guide/index.html @@ -1,6 +1,6 @@ --- title: MDN 스타일 가이드 -slug: MDN/Guidelines/Style_guide +slug: MDN/Guidelines/Writing_style_guide tags: - Documentation - Guide @@ -10,6 +10,7 @@ tags: - 스타일 가이드 - 스타일 가이드 작성 translation_of: MDN/Guidelines/Writing_style_guide +original_slug: MDN/Guidelines/Style_guide ---
{{MDNSidebar}}
diff --git a/files/ko/mdn/yari/index.html b/files/ko/mdn/yari/index.html index becf84221a..2a4fa0fa6b 100644 --- a/files/ko/mdn/yari/index.html +++ b/files/ko/mdn/yari/index.html @@ -1,11 +1,12 @@ --- title: '쿠마(Kuma): MDN 위키 플랫폼' -slug: MDN/Kuma +slug: MDN/Yari tags: - MDN 메타 - 시작하기 - 쿠마 translation_of: MDN/Kuma +original_slug: MDN/Kuma ---
{{MDNSidebar}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html index d6d933b22e..9ec44aaf70 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html @@ -1,7 +1,8 @@ --- title: menus.ContextType -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType +slug: Mozilla/Add-ons/WebExtensions/API/menus/ContextType translation_of: Mozilla/Add-ons/WebExtensions/API/menus/ContextType +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType ---
{{AddonSidebar()}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html index 9a053e6639..75b4bb92d5 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html @@ -1,7 +1,8 @@ --- title: menus.create() -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/create +slug: Mozilla/Add-ons/WebExtensions/API/menus/create translation_of: Mozilla/Add-ons/WebExtensions/API/menus/create +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/create ---
{{AddonSidebar()}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html index 7cb70b5fa7..495e97d1f1 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html @@ -1,7 +1,8 @@ --- title: menus.getTargetElement() -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement +slug: Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement translation_of: Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement ---
{{AddonSidebar}}{{Draft}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/index.html index 58f5af938b..7718d3b866 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/index.html @@ -1,7 +1,8 @@ --- title: contextMenus -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus +slug: Mozilla/Add-ons/WebExtensions/API/menus translation_of: Mozilla/Add-ons/WebExtensions/API/menus +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus ---
{{AddonSidebar}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html index 1fd716e3bb..035077de99 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html @@ -1,7 +1,8 @@ --- title: menus.onShown -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown +slug: Mozilla/Add-ons/WebExtensions/API/menus/onShown translation_of: Mozilla/Add-ons/WebExtensions/API/menus/onShown +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown ---
{{AddonSidebar()}}
diff --git a/files/ko/mozilla/developer_guide/source_code/cvs/index.html b/files/ko/mozilla/developer_guide/source_code/cvs/index.html index bcd46453fc..81325c1507 100644 --- a/files/ko/mozilla/developer_guide/source_code/cvs/index.html +++ b/files/ko/mozilla/developer_guide/source_code/cvs/index.html @@ -1,6 +1,7 @@ --- title: Mozilla Source Code Via CVS -slug: Mozilla_Source_Code_Via_CVS +slug: Mozilla/Developer_guide/Source_Code/CVS +original_slug: Mozilla_Source_Code_Via_CVS ---

Those doing active development can check out the latest source using CVS. This is the preferred method if you plan to provide patches and fix bugs, as it lets you get up-to-the-minute changes and merge them with your own.

If you want to compile a product for release, it is generally better to Download Mozilla Source Code tarballs.

diff --git a/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html index 363b27b75e..d710dac260 100644 --- a/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html +++ b/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -1,11 +1,12 @@ --- title: Adapting XUL Applications for Firefox 1.5 -slug: Adapting_XUL_Applications_for_Firefox_1.5 +slug: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 tags: - Add-ons - Extensions - XUL translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +original_slug: Adapting_XUL_Applications_for_Firefox_1.5 ---

이 페이지는 XUL 개발자에 영향을 미치는 Firefox 1.5에서 바뀐 점 목록을 포함합니다.

특정 바뀐 점

diff --git a/files/ko/mozilla/firefox/releases/1.5/index.html b/files/ko/mozilla/firefox/releases/1.5/index.html index fa1dba1cc6..35fc73dc12 100644 --- a/files/ko/mozilla/firefox/releases/1.5/index.html +++ b/files/ko/mozilla/firefox/releases/1.5/index.html @@ -1,6 +1,6 @@ --- title: Firefox 1.5 for developers -slug: Firefox_1.5_for_developers +slug: Mozilla/Firefox/Releases/1.5 tags: - Add-ons - CSS @@ -17,6 +17,7 @@ tags: - XSLT - XUL translation_of: Mozilla/Firefox/Releases/1.5 +original_slug: Firefox_1.5_for_developers ---

Firefox 1.5

Firefox 1.5를 출시하여 내려 받기할 수 있습니다. Gecko 1.8 엔진에 기반을 둔 이 최신 버전은 이미 최고인 클래스 표준 지원 개선과 다음 세대 웹 어플리케이션에서 가능한 새 기능을 제공합니다. Firefox 1.5는 CSS2와 CSS3 지원 개선, 많은 DHTML, JavaScript, DOM 향상은 물론 SVG 1.1과 <canvas>, XForms, XML 이벤트를 통한 스크립팅과 프로그래밍이 가능한 2D 그래픽스 API를 크게 다룹니다.

diff --git a/files/ko/mozilla/firefox/releases/2/index.html b/files/ko/mozilla/firefox/releases/2/index.html index e39f256625..e5c0ce7af2 100644 --- a/files/ko/mozilla/firefox/releases/2/index.html +++ b/files/ko/mozilla/firefox/releases/2/index.html @@ -1,7 +1,8 @@ --- title: Firefox 2 for developers -slug: Firefox_2_for_developers +slug: Mozilla/Firefox/Releases/2 translation_of: Mozilla/Firefox/Releases/2 +original_slug: Firefox_2_for_developers ---

Firefox 2 새로운 기능

Firefox 2는 다양하고 새로운 기능들을 소개하고 있습니다. 이 문서는 이러한 새로운 기능들을 소개하고 자세한 정보를 제공하고 있습니다. diff --git a/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html b/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html index b8c6f9f648..36933502e7 100644 --- a/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html +++ b/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html @@ -1,7 +1,8 @@ --- title: Updating extensions for Firefox 2 -slug: Updating_extensions_for_Firefox_2 +slug: Mozilla/Firefox/Releases/2/Updating_extensions translation_of: Mozilla/Firefox/Releases/2/Updating_extensions +original_slug: Updating_extensions_for_Firefox_2 ---

이 문서는 Firefox 2에서 확장 기능이 동작하도록 개발자들에게 유용한 정보를 제공해 줍니다.

diff --git a/files/ko/mozilla/firefox/releases/3.5/index.html b/files/ko/mozilla/firefox/releases/3.5/index.html index 2431607551..a5f2a553c1 100644 --- a/files/ko/mozilla/firefox/releases/3.5/index.html +++ b/files/ko/mozilla/firefox/releases/3.5/index.html @@ -1,7 +1,8 @@ --- title: Firefox 3.5 for developers -slug: Firefox_3.5_for_developers +slug: Mozilla/Firefox/Releases/3.5 translation_of: Mozilla/Firefox/Releases/3.5 +original_slug: Firefox_3.5_for_developers ---

Firefox 3.5은 넓은 범위의 향상된 웹 표준을 지원하는 것을 포함한 새로운 여러 가지 기능을 보여줍니다. 이 문서에는 향상된 부분 중 주된 부분에 대한 문서의 링크를 제공합니다.

Firefox 3.5에서 개발자를 위한 새로운 부분

diff --git a/files/ko/mozilla/firefox/releases/3.6/index.html b/files/ko/mozilla/firefox/releases/3.6/index.html index d6b5b7521f..2f72d6d2a7 100644 --- a/files/ko/mozilla/firefox/releases/3.6/index.html +++ b/files/ko/mozilla/firefox/releases/3.6/index.html @@ -1,7 +1,8 @@ --- title: 개발자를 위한 Firefox 3.6 -slug: 개발자를_위한_Firefox_3.6 +slug: Mozilla/Firefox/Releases/3.6 translation_of: Mozilla/Firefox/Releases/3.6 +original_slug: 개발자를_위한_Firefox_3.6 ---

Firefox 3.6은 새로운 웹표준, 향상된 퍼포먼스, 그리고 전체적으로 개선된 사용자와 개발자 경험을 제공합니다. 이 페이지에서는 Firefox 3.6의 새로운 기능을 다루는 링크를 제공합니다.

diff --git a/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html b/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html index 800e5979df..8c33dfc0af 100644 --- a/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html +++ b/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html @@ -1,10 +1,11 @@ --- title: DOM improvements in Firefox 3 -slug: DOM_improvements_in_Firefox_3 +slug: Mozilla/Firefox/Releases/3/DOM_improvements tags: - DOM - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +original_slug: DOM_improvements_in_Firefox_3 ---

{{ Fx_minversion_header(3) }}

Firefox 3에서는 Document Object Model (DOM)에 있어 다양한 개선이 있었으며, 특히 다른 브라우저들에서 제공되는 DOM의 확장을 지원한다는 면에서 특히 그러합니다. 본 글은 이러한 개선 사항들과 세부 문서에 대한 링크들로 구성되어 있습니다.

diff --git a/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html index 3051b40775..aced021100 100644 --- a/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html +++ b/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -1,7 +1,8 @@ --- title: Full page zoom -slug: Full_page_zoom +slug: Mozilla/Firefox/Releases/3/Full_page_zoom translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +original_slug: Full_page_zoom ---

{{ Gecko_minversion_header("1.9") }}

전체 페이지 확대(또는 그냥 전체 확대)는 Firefox 3에서 지원하게 될 새로운 기능입니다. Gecko 1.9a7 버전부터 트렁크 빌드에서 사용이 가능합니다. 지금은 사용자 인터페이스가 없지만 자바스크립트와 nsIMarkupDocumentViewer XPCOM 인터페이스를 사용할 수 있습니다.

diff --git a/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html b/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html index fa8b5ea99a..1463c8502a 100644 --- a/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html +++ b/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html @@ -1,7 +1,8 @@ --- title: Notable bugs fixed in Firefox 3 -slug: Notable_bugs_fixed_in_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Notable_bugs_fixed translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +original_slug: Notable_bugs_fixed_in_Firefox_3 ---

이 글은 문서에서는 명확하지 않을 수도 있는 Firefox 3의 중요한 버그 수정 목록을 제공합니다.

    diff --git a/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html b/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html index e64f1600bc..c48ba98724 100644 --- a/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html +++ b/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html @@ -1,10 +1,11 @@ --- title: SVG improvements in Firefox 3 -slug: SVG_improvements_in_Firefox_3 +slug: Mozilla/Firefox/Releases/3/SVG_improvements tags: - Firefox 3 - SVG translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +original_slug: SVG_improvements_in_Firefox_3 ---

    {{ Fx_minversion_header(3) }}

    Firefox 3에서는 이전 버전에 비해 Scalable Vector Graphics (SVG)에 대한 향상된 지원을 제공합니다. 이러한 내용은 다른 곳에서도 문서화되어 있지만, Firefox 3에서 어떤 기능들이 추가되었는지 쉽게 찾아볼 수 있도록 본 글이 작성되었습니다.

    diff --git a/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html b/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html index 82531182f4..d698b8d8db 100644 --- a/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html @@ -1,9 +1,10 @@ --- title: Updating extensions for Firefox 3 -slug: Updating_extensions_for_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Updating_extensions tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +original_slug: Updating_extensions_for_Firefox_3 ---

    초안
    diff --git a/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html index 6598042587..dc1b800713 100644 --- a/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html +++ b/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -1,9 +1,10 @@ --- title: Updating web applications for Firefox 3 -slug: Updating_web_applications_for_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Updating_web_applications tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +original_slug: Updating_web_applications_for_Firefox_3 ---

    {{ Fx_minversion_header(3) }}{{ Draft() }} Firefox 3에는 웹 사이트와 웹 애플리케이션에 영향을 줄 수 있는 다수의 변경 사항과 잇점을 줄 수 있는 새로운 기능이 포함 되어 있습니다. 이 문서는 Firefox 3의 잇점을 최대한 이용 가능할 수 있도록 웹 사이트를 업데이트 하는 방법을 알려 줄 것입니다.

    diff --git a/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html b/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html index a2f6f18b0c..522b51b69f 100644 --- a/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html +++ b/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html @@ -1,10 +1,11 @@ --- title: How to Build an XPCOM Component in Javascript -slug: How_to_Build_an_XPCOM_Component_in_Javascript +slug: orphaned/How_to_Build_an_XPCOM_Component_in_Javascript tags: - Add-ons - Extensions - XPCOM +original_slug: How_to_Build_an_XPCOM_Component_in_Javascript ---

    본 문서는 자바스크립트에서 XPCOM 컴포넌트를 만드는 방법을 소개합니다. 이 문서에서는 XPCOM이 어떻게 움직이는지 혹은 그에 대한 코드는 다루지 않습니다. 자세한 사항은 XPCOM에서 아실 수 있습니다. 여기서는 실제로 이를 어떻게 움직이게하는 가에 달려 있습니다. diff --git a/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html b/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html index db46ed7fee..e01a0c9830 100644 --- a/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html +++ b/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html @@ -1,8 +1,9 @@ --- title: JavaScript C Engine Embedder's Guide -slug: JavaScript_C_Engine_Embedder's_Guide +slug: orphaned/JavaScript_C_Engine_Embedder's_Guide tags: - SpiderMonkey +original_slug: JavaScript_C_Engine_Embedder's_Guide ---

    이 문서는 C로 구현된 JavaScript 엔진인 SpiderMonkey를 전반적으로 소개하며, 애플리케이션이 JavaScript를 인식하도록 하기 위해 어떻게 엔진을 내장하는지에 대해 설명합니다. JavaScript엔진을 여러분의 애플리케이션에 내장하는데는 두가지 큰 이유가 있을 것입니다. 먼저, 스크립트를 사용하여 애플리케이션을 자동화하는 것이 있고, JavaScript엔진과 스크립트를 사용하여 특정 플랫폼에 의존적인 애플케이션 솔루션이 되지 않도록 크로스 플랫폼을 지원하는 것입니다.

    지원되는 자바스크립트 버전

    diff --git a/files/ko/orphaned/learn/how_to_contribute/index.html b/files/ko/orphaned/learn/how_to_contribute/index.html index 08ee091c24..14fa2761a3 100644 --- a/files/ko/orphaned/learn/how_to_contribute/index.html +++ b/files/ko/orphaned/learn/how_to_contribute/index.html @@ -1,15 +1,16 @@ --- title: MDN의 학습 영역에 기여하는 방법 -slug: Learn/How_to_contribute +slug: orphaned/Learn/How_to_contribute tags: - Documentation - MDN Meta - - 'l10n:priority' + - l10n:priority - 가이드 - 배우기 - 참여 - 초보자 translation_of: Learn/How_to_contribute +original_slug: Learn/How_to_contribute ---
    {{LearnSidebar}}
    diff --git a/files/ko/orphaned/mdn/about/mdn_services/index.html b/files/ko/orphaned/mdn/about/mdn_services/index.html index 1d04e3d468..ec7021b9c1 100644 --- a/files/ko/orphaned/mdn/about/mdn_services/index.html +++ b/files/ko/orphaned/mdn/about/mdn_services/index.html @@ -1,10 +1,11 @@ --- title: MDN Services -slug: MDN/About/MDN_services +slug: orphaned/MDN/About/MDN_services tags: - Landing - MDN Meta translation_of: MDN/About/MDN_services +original_slug: MDN/About/MDN_services ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/community/conversations/index.html b/files/ko/orphaned/mdn/community/conversations/index.html index 9d41e6c30c..16d0d9bacb 100644 --- a/files/ko/orphaned/mdn/community/conversations/index.html +++ b/files/ko/orphaned/mdn/community/conversations/index.html @@ -1,11 +1,12 @@ --- title: MDN community conversations -slug: MDN/Community/Conversations +slug: orphaned/MDN/Community/Conversations tags: - Community - Guide - MDN Meta translation_of: MDN/Community/Conversations +original_slug: MDN/Community/Conversations ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/community/index.html b/files/ko/orphaned/mdn/community/index.html index faff8c5f2e..ac179cda5b 100644 --- a/files/ko/orphaned/mdn/community/index.html +++ b/files/ko/orphaned/mdn/community/index.html @@ -1,12 +1,13 @@ --- title: MDN 커뮤니티 참여하기 -slug: MDN/Community +slug: orphaned/MDN/Community tags: - Community - Guide - Landing - MDN Meta translation_of: MDN/Community +original_slug: MDN/Community ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/community/working_in_community/index.html b/files/ko/orphaned/mdn/community/working_in_community/index.html index 0398e29823..c35f66fe9a 100644 --- a/files/ko/orphaned/mdn/community/working_in_community/index.html +++ b/files/ko/orphaned/mdn/community/working_in_community/index.html @@ -1,7 +1,8 @@ --- title: 커뮤니티에서의 활동 -slug: MDN/Community/Working_in_community +slug: orphaned/MDN/Community/Working_in_community translation_of: MDN/Community/Working_in_community +original_slug: MDN/Community/Working_in_community ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html index b3b84a92b1..ba43bdafe7 100644 --- a/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -1,12 +1,13 @@ --- title: MDN 계정 생성 -slug: MDN/Contribute/Howto/MDN_계정_생성하기 +slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account tags: - 가입 - 계정 - 시작하기 - 인증 translation_of: MDN/Contribute/Howto/Create_an_MDN_account +original_slug: MDN/Contribute/Howto/MDN_계정_생성하기 ---
    {{MDNSidebar}}

    페이지를 수정하거나 데모에 기여하는 등 MDN의 컨텐츠를 변경하려면 MDN 프로필이 필요합니다. 단지 내용을 읽거나 검색하는 것에는 프로필이 필요없으니 걱정하지 마세요. 아래는 MDN 프로필을 설정하기 위한 가이드입니다.

    diff --git a/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html index 9b648a8d0c..9fbae8650b 100644 --- a/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -1,7 +1,8 @@ --- title: 기술 리뷰를 하는 방법 -slug: MDN/Contribute/Howto/Do_a_technical_review +slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review translation_of: MDN/Contribute/Howto/Do_a_technical_review +original_slug: MDN/Contribute/Howto/Do_a_technical_review ---
    {{MDNSidebar}}

    기술 리뷰는 기술적 정확성과 글의 완결성을 검토하는 것, 필요하다면 수정하는 것으로 이루어집니다. 글의 작성자가 다른 사람이 글의 기술적 내용을 확인하는 것을 바란다면, 작성자는 편집을 하는동안 "Technical review" 체크박스에 체크합니다. 작성자는 대개 기술 리뷰를 위해 특정한 엔지니어와 접촉하지만, 해당 주제에 대한 전문가라면 누구라도 가능합니다.

    이 글은 기술 리뷰를 어떻게 하는지에 대해 기술하고, 그에 따라서 MDN의 컨텐츠들이 정확하도록 도움을 줍니다.

    diff --git a/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html index 13b2f0d4a1..ebecb25a78 100644 --- a/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -1,7 +1,8 @@ --- title: 편집 검토를 하는 방법 -slug: MDN/Contribute/Howto/Do_an_editorial_review +slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review translation_of: MDN/Contribute/Howto/Do_an_editorial_review +original_slug: MDN/Contribute/Howto/Do_an_editorial_review ---
    {{MDNSidebar}}
    {{IncludeSubnav("/ko-KR/docs/MDN")}}
    diff --git a/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html b/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html index 9df3680b49..fc939a2aca 100644 --- a/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html @@ -1,10 +1,11 @@ --- title: Property Template -slug: Web/CSS/Reference/Property_Template +slug: orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template tags: - CSS - MDN Meta translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template +original_slug: Web/CSS/Reference/Property_Template ---

    {{MDNSidebar}}

    diff --git a/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html index e26a3d3a05..6ab33e31d4 100644 --- a/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -1,7 +1,8 @@ --- title: 페이지에 대한 요약을 설정하는 방법 -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +original_slug: MDN/Contribute/Howto/Set_the_summary_for_a_page ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html index 8825a20a62..a34ae695ef 100644 --- a/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -1,7 +1,8 @@ --- title: JavaScript tag를 다는 방법 -slug: MDN/Contribute/Howto/Tag_JavaScript_pages +slug: orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +original_slug: MDN/Contribute/Howto/Tag_JavaScript_pages ---
    {{MDNSidebar}}

    태그달기는 페이지에 메타 정보를 추가함을 통해 관련된 내용이 묶여질수 있도록 하는 작업을 포함합니다.

    diff --git a/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html index 1eddcc7383..72f5ebb56f 100644 --- a/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -1,7 +1,8 @@ --- title: 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법 -slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +slug: orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +original_slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/editor/index.html b/files/ko/orphaned/mdn/editor/index.html index a327f0fd89..48abb52ed3 100644 --- a/files/ko/orphaned/mdn/editor/index.html +++ b/files/ko/orphaned/mdn/editor/index.html @@ -1,10 +1,11 @@ --- title: MDN 에디터 UI 가이드 -slug: MDN/Editor +slug: orphaned/MDN/Editor tags: - Landing - MDN translation_of: MDN/Editor +original_slug: MDN/Editor ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/editor/links/index.html b/files/ko/orphaned/mdn/editor/links/index.html index f6217db92c..ae7d0d7cc1 100644 --- a/files/ko/orphaned/mdn/editor/links/index.html +++ b/files/ko/orphaned/mdn/editor/links/index.html @@ -1,12 +1,13 @@ --- title: Links -slug: MDN/Editor/Links +slug: orphaned/MDN/Editor/Links tags: - MDN - 가이드 - 문서화 - 에디터 translation_of: MDN/Editor/Links +original_slug: MDN/Editor/Links ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/structures/api_references/index.html b/files/ko/orphaned/mdn/structures/api_references/index.html index c521b5f4ec..9218476c34 100644 --- a/files/ko/orphaned/mdn/structures/api_references/index.html +++ b/files/ko/orphaned/mdn/structures/api_references/index.html @@ -1,12 +1,13 @@ --- title: API 레퍼런스 -slug: MDN/Structures/API_references +slug: orphaned/MDN/Structures/API_references tags: - API - 가이드 - 레퍼런스 - 봉사 translation_of: MDN/Structures/API_references +original_slug: MDN/Structures/API_references ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/tools/page_regeneration/index.html b/files/ko/orphaned/mdn/tools/page_regeneration/index.html index 2b75d2508f..b6d26e63be 100644 --- a/files/ko/orphaned/mdn/tools/page_regeneration/index.html +++ b/files/ko/orphaned/mdn/tools/page_regeneration/index.html @@ -1,12 +1,13 @@ --- title: 페이지 재생성 -slug: MDN/Tools/페이지_재생성 +slug: orphaned/MDN/Tools/Page_regeneration tags: - Guide - MDN Meta - Page-level - Tools translation_of: MDN/Tools/Page_regeneration +original_slug: MDN/Tools/페이지_재생성 ---
    {{MDNSidebar}}

    MDN 사이트는 성능상의 이유로 페이지를 캐시합니다. 그 결과, 당신이 페이지에 저장한 변경 사항이 다음 번 페이지 새로 고침할 때 나타나지 않을 수 있습니다. 자주, 항상은 아니지만, 배너가 페이지 업데이트가 진행 중임을 알리는 페이지에 나타납니다. 당신은 서버에서 페이지를 새로 고침하기 위해 브라우저에 "강제 새로 고침"을 할 수 있지만, 이는 서버의 업데이트가 끝나지 않았다면 효과가 없을 지도 모릅니다.

    diff --git a/files/ko/orphaned/places/custom_containers/index.html b/files/ko/orphaned/places/custom_containers/index.html index 305255ee4d..695f57aea1 100644 --- a/files/ko/orphaned/places/custom_containers/index.html +++ b/files/ko/orphaned/places/custom_containers/index.html @@ -1,8 +1,9 @@ --- title: Custom Containers -slug: Places/Custom_Containers +slug: orphaned/Places/Custom_Containers tags: - Places +original_slug: Places/Custom_Containers ---

    사용자 정의 콘테이너는 확장이나 기타 서비스가 플레이스 폴더의 결과를 동적으로 제공하는 것을 가능하게 합니다. 이 문서를 읽기 전에 질의와 결과의 작동 방법에 대한 플레이스 질의 시스템을 숙지하는 것이 좋습니다.

    diff --git a/files/ko/orphaned/places/instantiating_views/index.html b/files/ko/orphaned/places/instantiating_views/index.html index 4fdcc5d1c9..2d7c0e0923 100644 --- a/files/ko/orphaned/places/instantiating_views/index.html +++ b/files/ko/orphaned/places/instantiating_views/index.html @@ -1,8 +1,9 @@ --- title: Instantiating Views -slug: Places/Instantiating_Views +slug: orphaned/Places/Instantiating_Views tags: - Places +original_slug: Places/Instantiating_Views ---

    여러분의 확장이나 애플리케이션에서 북마크나 히스토리의 내용을 보여주려면 내장 플레이스 뷰를 사용할 수 있습니다. 이는 포괄적이며, 기본 기능을 작성하는 시간을 많이 아껴주므로 여러분은 애플리케이션을 작성하는데 집중할 수 있습니다.

    diff --git a/files/ko/orphaned/places/query_system/index.html b/files/ko/orphaned/places/query_system/index.html index 1a3dccf574..9caeb1fe7f 100644 --- a/files/ko/orphaned/places/query_system/index.html +++ b/files/ko/orphaned/places/query_system/index.html @@ -1,9 +1,10 @@ --- title: Query System -slug: Places/Query_System +slug: orphaned/Places/Query_System tags: - Firefox 3 - Places +original_slug: Places/Query_System ---

    Firefox의 히스토리와 북마크 데이터는 "플레이스" 질의 API를 이용하여 접근할 수 있습니다. 이 API는 히스토리, 북마크, 그리고 두 가지 모두에 대하여 복잡한 질의를 실행할 수 있는 기능을 제공합니다. 질의의 결과는 조건에 맞는 데이터의 단순 목록이나 트리 구조를 포함한 개체입니다. 질의 API와 결과 데이터의 구조에 대한 정의는 toolkit/components/places/public/nsINavHistoryService.idl에 있습니다. 이 페이지는 일반적인 작업에 대한 소개와 핵심 API 사용법에 대한 예제를 제공합니다.

    diff --git a/files/ko/orphaned/places/views/index.html b/files/ko/orphaned/places/views/index.html index 7f4233cc5a..6678035a7b 100644 --- a/files/ko/orphaned/places/views/index.html +++ b/files/ko/orphaned/places/views/index.html @@ -1,8 +1,9 @@ --- title: Views -slug: Places/Views +slug: orphaned/Places/Views tags: - Places +original_slug: Places/Views ---

    뷰는 nsINavHistoryResult 개체를 사용자에게 표시하는 방법입니다. 뷰는 nsINavHistoryService.idl에 정의된 nsINavHistoryResultViewer 인터페이스를 구현합니다.

    diff --git a/files/ko/orphaned/theme_packaging/index.html b/files/ko/orphaned/theme_packaging/index.html index 0ff635c4aa..0e911afff3 100644 --- a/files/ko/orphaned/theme_packaging/index.html +++ b/files/ko/orphaned/theme_packaging/index.html @@ -1,10 +1,11 @@ --- title: Theme Packaging -slug: Theme_Packaging +slug: orphaned/Theme_Packaging tags: - Add-ons - Themes - Toolkit API +original_slug: Theme_Packaging ---

    이 문서는 파이어폭스나 썬더버드에서 테마를 포장하는 방법에 대해서 기술하고 있습니다.

    준비사항

    diff --git a/files/ko/orphaned/tools/add-ons/dom_inspector/index.html b/files/ko/orphaned/tools/add-ons/dom_inspector/index.html index d84e82b45e..bb57c113ea 100644 --- a/files/ko/orphaned/tools/add-ons/dom_inspector/index.html +++ b/files/ko/orphaned/tools/add-ons/dom_inspector/index.html @@ -1,13 +1,14 @@ --- title: DOM Inspector -slug: Tools/Add-ons/DOM_Inspector +slug: orphaned/Tools/Add-ons/DOM_Inspector tags: - - 'DOM:Tools' - - 'Extensions:Tools' - - 'Themes:Tools' - - 'Web Development:Tools' - - 'XUL:Tools' + - DOM:Tools + - Extensions:Tools + - Themes:Tools + - Web Development:Tools + - XUL:Tools translation_of: Tools/Add-ons/DOM_Inspector +original_slug: Tools/Add-ons/DOM_Inspector ---
    {{ToolsSidebar}}

    DOMi로도 알려진 DOM Inspector는 문서 - 보통 웹 페이지 또는 XUL windows - 의 Document Object Model을 검증, 검색, 편집하는데 사용되는 Mozilla 도구입니다.

    diff --git a/files/ko/orphaned/tools/add-ons/index.html b/files/ko/orphaned/tools/add-ons/index.html index 24ffbe79e9..05b25237f5 100644 --- a/files/ko/orphaned/tools/add-ons/index.html +++ b/files/ko/orphaned/tools/add-ons/index.html @@ -1,12 +1,13 @@ --- title: Add-ons -slug: Tools/Add-ons +slug: orphaned/Tools/Add-ons tags: - NeedsTranslation - TopicStub - Web Development - - 'Web Development:Tools' + - Web Development:Tools translation_of: Tools/Add-ons +original_slug: Tools/Add-ons ---
    {{ToolsSidebar}}

    Developer tools that are not built into Firefox, but ship as separate add-ons.

    diff --git a/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html b/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html index 194ca2c7b7..e315ea43dd 100644 --- a/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html +++ b/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html @@ -1,7 +1,8 @@ --- title: Using Mozilla in Testing and Debugging Web Sites -slug: Using_Mozilla_in_Testing_and_Debugging_Web_Sites +slug: orphaned/Using_Mozilla_in_Testing_and_Debugging_Web_Sites translation_of: Using_Mozilla_in_Testing_and_Debugging_Web_Sites +original_slug: Using_Mozilla_in_Testing_and_Debugging_Web_Sites ---

    Original Document Information

    diff --git a/files/ko/orphaned/web/css/index/index.html b/files/ko/orphaned/web/css/index/index.html index 953130cd26..52279781f5 100644 --- a/files/ko/orphaned/web/css/index/index.html +++ b/files/ko/orphaned/web/css/index/index.html @@ -1,10 +1,11 @@ --- title: CSS documentation index -slug: Web/CSS/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/html/element/command/index.html b/files/ko/orphaned/web/html/element/command/index.html index 8353384f2a..458108784f 100644 --- a/files/ko/orphaned/web/html/element/command/index.html +++ b/files/ko/orphaned/web/html/element/command/index.html @@ -1,12 +1,13 @@ --- title: -slug: Web/HTML/Element/command +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()}}
    diff --git a/files/ko/orphaned/web/html/element/element/index.html b/files/ko/orphaned/web/html/element/element/index.html index be045093a5..9f5f8e5190 100644 --- a/files/ko/orphaned/web/html/element/element/index.html +++ b/files/ko/orphaned/web/html/element/element/index.html @@ -1,7 +1,8 @@ --- title: -slug: Web/HTML/Element/element +slug: orphaned/Web/HTML/Element/element translation_of: Web/HTML/Element/element +original_slug: Web/HTML/Element/element ---
    {{HTMLRef}}{{obsolete_header}}
    diff --git a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html b/files/ko/orphaned/web/html/global_attributes/dropzone/index.html index 15d26aad15..488b51cf46 100644 --- a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html +++ b/files/ko/orphaned/web/html/global_attributes/dropzone/index.html @@ -1,12 +1,13 @@ --- title: dropzone -slug: Web/HTML/Global_attributes/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}}
    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 index 70fd4256c3..0d247bd7f8 100644 --- a/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html +++ b/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html @@ -1,7 +1,8 @@ --- title: Differential inheritance in JavaScript -slug: Web/JavaScript/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

    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 index 05deb2017f..69e27ae450 100644 --- 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 @@ -1,6 +1,7 @@ --- title: About -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/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는 다음과 같은 개선과 새 기능을 제공합니다: 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 index 20601a0e81..2ff86aff3c 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

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

    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 index d969b378f4..ebebbdbb32 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

    정규표현식 만들기

    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 index 3238e19b0f..760bf0d3a0 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 정의하기

    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 index 8e91a2007f..dd76945d49 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

    메소드 정의

    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 index 17c2aa7de8..6b458144cc 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

    개체 형식에 속성 정의하기

    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 index 1b6f50cc11..e5cf88cec9 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

    속성 제거

    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 index 8345ba1478..a1a24a41af 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 index 84b9df2c2d..6c96480b54 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

    개체 속성 접근하기

    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 index 552347b70e..0b2e514d4b 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

    생성자 함수 사용하기

    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 index 0ed663ae1f..2c67101057 100644 --- 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 @@ -1,6 +1,8 @@ --- 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를 사용한 개체 참조

    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 index d9f8bb0bf9..e1d0b7a8c9 100644 --- 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 @@ -1,6 +1,8 @@ --- title: Expressions -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/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), 변수, 연산자 그리고 단일값을 반환하는 계산식(값은 숫자, 문자열, 논리값이 가능)이 알맞게 조합된 집합체다. 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 index 310ab25c67..8bd3674552 100644 --- 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 @@ -1,6 +1,8 @@ --- 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란 무엇인가?

    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 index abe9ff83f4..0b40cb802d 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

    객체와 속성

    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 index dbc284f12f..e76f0b7653 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 ---

    할당 연산자

    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 index 53b8e67492..a0c66afea2 100644 --- 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 @@ -1,6 +1,8 @@ --- title: Operators -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/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에는 다음과 같은 연산자 타입이 있습니다. 이 섹션은 연산자에 대해 기술하고 연산자 우선순위에 대한 정보를 제공합니다. 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 index 1f6ef48f3a..5d7d2e2892 100644 --- 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 @@ -1,6 +1,8 @@ --- 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 개체

    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 index 6ba56eb37e..f68990df5e 100644 --- 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 @@ -1,6 +1,6 @@ --- title: BigInt.prototype -slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +slug: orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype tags: - BigInt - JavaScript @@ -8,6 +8,7 @@ tags: - Prototype - Reference translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---
    {{JSRef}}
    diff --git a/files/ko/orphaned/web/security/information_security_basics/index.html b/files/ko/orphaned/web/security/information_security_basics/index.html index 48eeaed961..807a154611 100644 --- a/files/ko/orphaned/web/security/information_security_basics/index.html +++ b/files/ko/orphaned/web/security/information_security_basics/index.html @@ -1,7 +1,8 @@ --- title: Information Security Basics -slug: Web/Security/정보_보안_기본 +slug: orphaned/Web/Security/Information_Security_Basics translation_of: Web/Security/Information_Security_Basics +original_slug: Web/Security/정보_보안_기본 ---

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

    diff --git a/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html b/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html index 53fc6eea99..81613a499d 100644 --- a/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html +++ b/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html @@ -1,9 +1,10 @@ --- title: Windows and menus in XULRunner -slug: Windows_and_menus_in_XULRunner +slug: orphaned/Windows_and_menus_in_XULRunner tags: - XUL - XULRunner +original_slug: Windows_and_menus_in_XULRunner ---

    {{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }} diff --git "a/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" "b/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" index 617dea4228..c7dfcac1f8 100644 --- "a/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" +++ "b/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" @@ -1,5 +1,6 @@ --- title: 지역의 코드를 씁니다. -slug: 지역의_코드를_씁니다. +slug: orphaned/지역의_코드를_씁니다. +original_slug: 지역의_코드를_씁니다. ---

    이 페이지는 연결되어 있지 않습니다.. 풍부한 MDC에 기여합니다.

    diff --git "a/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" "b/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" index 19bfdf3f81..e8a231a81b 100644 --- "a/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" +++ "b/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" @@ -1,6 +1,7 @@ --- title: 확장기능 개발 환경 구축 -slug: 확장기능_개발_환경_구축 +slug: orphaned/확장기능_개발_환경_구축 +original_slug: 확장기능_개발_환경_구축 ---

    이 글에는 확장기능 개발을 위한 Mozilla 응용프로그램 설정 방법을 제공합니다. 특별한 지정하지 않는 한 이 방법들은 Firefox와 Thunderbird 뿐만 아니라 SeaMonkey 버전 2.0 이상에서도 적용가능합니다.

    개요

    diff --git a/files/ko/plugins/guide/scripting_plugins/index.html b/files/ko/plugins/guide/scripting_plugins/index.html index cb761b44e4..23b14d7755 100644 --- a/files/ko/plugins/guide/scripting_plugins/index.html +++ b/files/ko/plugins/guide/scripting_plugins/index.html @@ -1,7 +1,8 @@ --- title: Scripting Plugins -slug: Scripting_Plugins +slug: Plugins/Guide/Scripting_plugins translation_of: Plugins/Guide/Scripting_plugins translation_of_original: Scripting_plugins +original_slug: Scripting_Plugins ---

    {{wiki.localize('System.API.page-generated-for-subpage')}}

    diff --git a/files/ko/tools/debugger/how_to/index.html b/files/ko/tools/debugger/how_to/index.html index 40f5269f45..9158bd5866 100644 --- a/files/ko/tools/debugger/how_to/index.html +++ b/files/ko/tools/debugger/how_to/index.html @@ -1,10 +1,11 @@ --- title: How to -slug: Tools/How_to +slug: Tools/Debugger/How_to tags: - NeedsTranslation - TopicStub translation_of: Tools/Debugger/How_to +original_slug: Tools/How_to ---
    {{ToolsSidebar}}

    These articles describe how to use the debugger.

    diff --git a/files/ko/tools/debugger/how_to/open_the_debugger/index.html b/files/ko/tools/debugger/how_to/open_the_debugger/index.html index 5b27e11b7a..6980986290 100644 --- a/files/ko/tools/debugger/how_to/open_the_debugger/index.html +++ b/files/ko/tools/debugger/how_to/open_the_debugger/index.html @@ -1,7 +1,8 @@ --- title: Open the debugger -slug: Tools/How_to/Open_the_debugger +slug: Tools/Debugger/How_to/Open_the_debugger translation_of: Tools/Debugger/How_to/Open_the_debugger +original_slug: Tools/How_to/Open_the_debugger ---
    {{ToolsSidebar}}

    이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition 에 나타나는 JavaScript Debugger 에 대해 설명합니다.

    diff --git a/files/ko/tools/debugger/how_to/search/index.html b/files/ko/tools/debugger/how_to/search/index.html index 9971abcaae..a431812524 100644 --- a/files/ko/tools/debugger/how_to/search/index.html +++ b/files/ko/tools/debugger/how_to/search/index.html @@ -1,7 +1,8 @@ --- title: Search -slug: Tools/How_to/Search +slug: Tools/Debugger/How_to/Search translation_of: Tools/Debugger/How_to/Search +original_slug: Tools/How_to/Search ---
    {{ToolsSidebar}}

    이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

    diff --git a/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html b/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html index f5d2af9e06..8d3f48d749 100644 --- a/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html +++ b/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html @@ -1,7 +1,8 @@ --- title: Set a breakpoint -slug: Tools/How_to/Set_a_breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint translation_of: Tools/Debugger/How_to/Set_a_breakpoint +original_slug: Tools/How_to/Set_a_breakpoint ---
    {{ToolsSidebar}}

    이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

    diff --git a/files/ko/tools/debugger/keyboard_shortcuts/index.html b/files/ko/tools/debugger/keyboard_shortcuts/index.html index d213621412..418361e48e 100644 --- a/files/ko/tools/debugger/keyboard_shortcuts/index.html +++ b/files/ko/tools/debugger/keyboard_shortcuts/index.html @@ -1,7 +1,8 @@ --- title: 디버거 단축키 -slug: Tools/Debugger/단축키 +slug: Tools/Debugger/Keyboard_shortcuts translation_of: Tools/Debugger/Keyboard_shortcuts +original_slug: Tools/Debugger/단축키 ---
    {{ToolsSidebar}}

    {{ Page ("ko/docs/tools/Keyboard_shortcuts", "debugger") }}

    diff --git a/files/ko/web/api/ambient_light_events/index.html b/files/ko/web/api/ambient_light_events/index.html index b033d4f80d..c192bad9c0 100644 --- a/files/ko/web/api/ambient_light_events/index.html +++ b/files/ko/web/api/ambient_light_events/index.html @@ -1,9 +1,10 @@ --- title: Using Light Events -slug: WebAPI/Using_Light_Events +slug: Web/API/Ambient_Light_Events tags: - Ambient Light translation_of: Web/API/Ambient_Light_Events +original_slug: WebAPI/Using_Light_Events ---
    {{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
    diff --git a/files/ko/web/api/battery_status_api/index.html b/files/ko/web/api/battery_status_api/index.html index 12347b0f20..eb3811f226 100644 --- a/files/ko/web/api/battery_status_api/index.html +++ b/files/ko/web/api/battery_status_api/index.html @@ -1,6 +1,6 @@ --- title: Battery Status API -slug: WebAPI/Battery_Status +slug: Web/API/Battery_Status_API tags: - API - Apps @@ -13,6 +13,7 @@ tags: - 배터리 - 어플리케이션 translation_of: Web/API/Battery_Status_API +original_slug: WebAPI/Battery_Status ---
    {{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}
    diff --git a/files/ko/web/api/broadcastchannel/message_event/index.html b/files/ko/web/api/broadcastchannel/message_event/index.html index 1796b8ee0c..c08ff98a17 100644 --- a/files/ko/web/api/broadcastchannel/message_event/index.html +++ b/files/ko/web/api/broadcastchannel/message_event/index.html @@ -1,7 +1,8 @@ --- title: message -slug: Web/Events/message +slug: Web/API/BroadcastChannel/message_event translation_of: Web/API/BroadcastChannel/message_event +original_slug: Web/Events/message ---

    메시지 이벤트는 메시지가 수신되었음을 알리는 메시지, {{domxref("WebSocket")}}, {{domxref("RTCDataConnection")}} 또는 {{domxref("BroadcastChannel")}} 개체를 알려 줍니다.

    diff --git a/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html index 950b0f5366..ca7552e76b 100644 --- a/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html @@ -1,6 +1,6 @@ --- title: A basic ray-caster -slug: A_Basic_RayCaster +slug: Web/API/Canvas_API/A_basic_ray-caster tags: - Advanced - Canvas @@ -9,6 +9,7 @@ tags: - HTML - Web translation_of: Web/API/Canvas_API/A_basic_ray-caster +original_slug: A_Basic_RayCaster ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/index.html b/files/ko/web/api/canvas_api/index.html index bbe466e58d..2cf311cc8b 100644 --- a/files/ko/web/api/canvas_api/index.html +++ b/files/ko/web/api/canvas_api/index.html @@ -1,6 +1,6 @@ --- title: Canvas API -slug: Web/HTML/Canvas +slug: Web/API/Canvas_API tags: - API - Canvas @@ -8,6 +8,7 @@ tags: - 개요 - 레퍼런스 translation_of: Web/API/Canvas_API +original_slug: Web/HTML/Canvas ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html index 7851f86154..bfbb86a771 100644 --- a/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html +++ b/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -1,12 +1,13 @@ --- title: 캔버스(canvas)를 이용한 비디오 조작하기 -slug: Web/HTML/Canvas/Manipulating_video_using_canvas +slug: Web/API/Canvas_API/Manipulating_video_using_canvas tags: - Canvas - Video - 비디오 - 캔버스 translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +original_slug: Web/HTML/Canvas/Manipulating_video_using_canvas ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html index 1779e63b2c..00c4da27e9 100644 --- a/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -1,7 +1,8 @@ --- title: 발전된 애니메이션 -slug: Web/HTML/Canvas/Tutorial/Advanced_animations +slug: Web/API/Canvas_API/Tutorial/Advanced_animations translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +original_slug: Web/HTML/Canvas/Tutorial/Advanced_animations ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index df094acb71..6c515e0f0d 100644 --- a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -1,11 +1,12 @@ --- title: 스타일과 색 적용하기 -slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors +slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors tags: - HTML5 - 그래픽 - 캔버스 translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +original_slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html index 457d658172..e1deb1599a 100644 --- a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html +++ b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html @@ -1,11 +1,12 @@ --- title: 기본 애니메이션 -slug: Web/HTML/Canvas/Tutorial/Basic_animations +slug: Web/API/Canvas_API/Tutorial/Basic_animations tags: - HTML5 - 그래픽 - 캔버스 translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +original_slug: Web/HTML/Canvas/Tutorial/Basic_animations ---

    {{HTMLElement("canvas")}} 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.

    도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.

    diff --git a/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html index f455563e87..172aceed94 100644 --- a/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html @@ -1,7 +1,8 @@ --- title: 캔버스(Canvas) 기본 사용법 -slug: Web/HTML/Canvas/Tutorial/Basic_usage +slug: Web/API/Canvas_API/Tutorial/Basic_usage translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +original_slug: Web/HTML/Canvas/Tutorial/Basic_usage ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html b/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html index e3d74f5220..30eee3d316 100644 --- a/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html +++ b/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html @@ -1,12 +1,13 @@ --- title: 도형 합성 예제 -slug: Web/HTML/Canvas/Tutorial/Compositing/Example +slug: Web/API/Canvas_API/Tutorial/Compositing/Example tags: - HTML5 - 그래픽 - 예제 - 캔버스 translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +original_slug: Web/HTML/Canvas/Tutorial/Compositing/Example ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/index.html b/files/ko/web/api/canvas_api/tutorial/compositing/index.html index 108c493d9d..7c86f31582 100644 --- a/files/ko/web/api/canvas_api/tutorial/compositing/index.html +++ b/files/ko/web/api/canvas_api/tutorial/compositing/index.html @@ -1,11 +1,12 @@ --- title: 도형 합성 -slug: Web/HTML/Canvas/Tutorial/Compositing +slug: Web/API/Canvas_API/Tutorial/Compositing tags: - HTML5 - 그래픽 - 캔버스 translation_of: Web/API/Canvas_API/Tutorial/Compositing +original_slug: Web/HTML/Canvas/Tutorial/Compositing ---

    이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데,  globalCompositeOperation 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.

    diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html index 09df4b829d..312ed46347 100644 --- a/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -1,6 +1,6 @@ --- title: 캔버스(canvas)를 이용한 도형 그리기 -slug: Web/HTML/Canvas/Tutorial/Drawing_shapes +slug: Web/API/Canvas_API/Tutorial/Drawing_shapes tags: - Canvas - 그래픽 @@ -8,6 +8,7 @@ tags: - 캔버스 - 튜토리얼 translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +original_slug: Web/HTML/Canvas/Tutorial/Drawing_shapes ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html index 2c789e85a4..e4bdca4564 100644 --- a/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html @@ -1,11 +1,12 @@ --- title: 텍스트 그리기 -slug: Drawing_text_using_a_canvas +slug: Web/API/Canvas_API/Tutorial/Drawing_text tags: - HTML - - 'HTML:Canvas' + - HTML:Canvas - NeedsContent translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +original_slug: Drawing_text_using_a_canvas ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/finale/index.html b/files/ko/web/api/canvas_api/tutorial/finale/index.html index 1241680c5c..8a4ef4650e 100644 --- a/files/ko/web/api/canvas_api/tutorial/finale/index.html +++ b/files/ko/web/api/canvas_api/tutorial/finale/index.html @@ -1,11 +1,12 @@ --- title: Finale -slug: Web/HTML/Canvas/Tutorial/Finale +slug: Web/API/Canvas_API/Tutorial/Finale tags: - 그래픽 - 캔버스 - 튜토리얼 translation_of: Web/API/Canvas_API/Tutorial/Finale +original_slug: Web/HTML/Canvas/Tutorial/Finale ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html index e720af3159..54c362deaa 100644 --- a/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html +++ b/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -1,7 +1,8 @@ --- title: 히트(Hit) 영역과 접근성 -slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility +slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +original_slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility ---
    {{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
    diff --git a/files/ko/web/api/canvas_api/tutorial/index.html b/files/ko/web/api/canvas_api/tutorial/index.html index 03077163aa..3886ef9cf1 100644 --- a/files/ko/web/api/canvas_api/tutorial/index.html +++ b/files/ko/web/api/canvas_api/tutorial/index.html @@ -1,6 +1,6 @@ --- title: 캔버스 튜토리얼 -slug: Web/HTML/Canvas/Tutorial +slug: Web/API/Canvas_API/Tutorial tags: - Canvas - Graphic @@ -10,6 +10,7 @@ tags: - Intermediate - Web translation_of: Web/API/Canvas_API/Tutorial +original_slug: Web/HTML/Canvas/Tutorial ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 460b5e893f..5ac1efab0b 100644 --- a/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -1,7 +1,8 @@ --- title: 캔버스 최적화 -slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas +slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +original_slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/transformations/index.html b/files/ko/web/api/canvas_api/tutorial/transformations/index.html index b93747b581..4566e38e0c 100644 --- a/files/ko/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/ko/web/api/canvas_api/tutorial/transformations/index.html @@ -1,6 +1,6 @@ --- title: 변형 (transformations) -slug: Web/HTML/Canvas/Tutorial/변형 +slug: Web/API/Canvas_API/Tutorial/Transformations tags: - CSS - HTML @@ -11,6 +11,7 @@ tags: - 트랜스폼 - 확대 translation_of: Web/API/Canvas_API/Tutorial/Transformations +original_slug: Web/HTML/Canvas/Tutorial/변형 ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/using_images/index.html b/files/ko/web/api/canvas_api/tutorial/using_images/index.html index d9aae1c993..15b25d820a 100644 --- a/files/ko/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/ko/web/api/canvas_api/tutorial/using_images/index.html @@ -1,6 +1,6 @@ --- title: Using images -slug: Web/HTML/Canvas/Tutorial/Using_images +slug: Web/API/Canvas_API/Tutorial/Using_images tags: - Advanced - Canvas @@ -8,6 +8,7 @@ tags: - HTML - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Using_images +original_slug: Web/HTML/Canvas/Tutorial/Using_images ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
    diff --git a/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html index c9bb8b32ba..90a96302c0 100644 --- a/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -1,7 +1,8 @@ --- title: Determining the dimensions of elements -slug: Determining_the_dimensions_of_elements +slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +original_slug: Determining_the_dimensions_of_elements ---

    엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.

    diff --git a/files/ko/web/api/css_object_model/managing_screen_orientation/index.html b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html index 934384d0bf..974b5bb659 100644 --- a/files/ko/web/api/css_object_model/managing_screen_orientation/index.html +++ b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html @@ -1,7 +1,8 @@ --- title: Managing screen orientation -slug: WebAPI/Managing_screen_orientation +slug: Web/API/CSS_Object_Model/Managing_screen_orientation translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +original_slug: WebAPI/Managing_screen_orientation ---

    {{SeeCompatTable}}

    Summary

    diff --git a/files/ko/web/api/detecting_device_orientation/index.html b/files/ko/web/api/detecting_device_orientation/index.html index 664842f66d..995997b5ab 100644 --- a/files/ko/web/api/detecting_device_orientation/index.html +++ b/files/ko/web/api/detecting_device_orientation/index.html @@ -1,7 +1,8 @@ --- title: 기기 방향 감지하기 -slug: WebAPI/Detecting_device_orientation +slug: Web/API/Detecting_device_orientation translation_of: Web/API/Detecting_device_orientation +original_slug: WebAPI/Detecting_device_orientation ---
    {{SeeCompatTable}}
    diff --git a/files/ko/web/api/document/createevent/index.html b/files/ko/web/api/document/createevent/index.html index 549a51bfdc..c884693dc7 100644 --- a/files/ko/web/api/document/createevent/index.html +++ b/files/ko/web/api/document/createevent/index.html @@ -1,8 +1,9 @@ --- title: Event.createEvent() -slug: Web/API/Event/createEvent +slug: Web/API/Document/createEvent translation_of: Web/API/Document/createEvent translation_of_original: Web/API/Event/createEvent +original_slug: Web/API/Event/createEvent ---

    {{APIRef("DOM")}}

    diff --git a/files/ko/web/api/document_object_model/introduction/index.html b/files/ko/web/api/document_object_model/introduction/index.html index b31dbc43d9..4b82e96f80 100644 --- a/files/ko/web/api/document_object_model/introduction/index.html +++ b/files/ko/web/api/document_object_model/introduction/index.html @@ -1,11 +1,12 @@ --- title: DOM 소개 -slug: Web/API/Document_Object_Model/소개 +slug: Web/API/Document_Object_Model/Introduction tags: - DOM - 가이드 - 문서 translation_of: Web/API/Document_Object_Model/Introduction +original_slug: Web/API/Document_Object_Model/소개 ---

    이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. 

    diff --git a/files/ko/web/api/documentorshadowroot/getselection/index.html b/files/ko/web/api/documentorshadowroot/getselection/index.html index c4d219fbde..dee63369ab 100644 --- a/files/ko/web/api/documentorshadowroot/getselection/index.html +++ b/files/ko/web/api/documentorshadowroot/getselection/index.html @@ -1,8 +1,9 @@ --- title: Document.getSelection() -slug: Web/API/Document/getSelection +slug: Web/API/DocumentOrShadowRoot/getSelection translation_of: Web/API/DocumentOrShadowRoot/getSelection translation_of_original: Web/API/Document/getSelection +original_slug: Web/API/Document/getSelection ---

    {{APIRef("DOM")}}

    diff --git a/files/ko/web/api/element/blur_event/index.html b/files/ko/web/api/element/blur_event/index.html index 3bbcc6acb0..a6b52304d8 100644 --- a/files/ko/web/api/element/blur_event/index.html +++ b/files/ko/web/api/element/blur_event/index.html @@ -1,7 +1,8 @@ --- title: blur -slug: Web/Events/blur +slug: Web/API/Element/blur_event translation_of: Web/API/Element/blur_event +original_slug: Web/Events/blur ---

    blur 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 focusout 이벤트의 가장 다른점은 focusout 은 이벤트 버블링이 발생합니다.

    diff --git a/files/ko/web/api/elementcssinlinestyle/style/index.html b/files/ko/web/api/elementcssinlinestyle/style/index.html index 5976dd66bc..14083b9d84 100644 --- a/files/ko/web/api/elementcssinlinestyle/style/index.html +++ b/files/ko/web/api/elementcssinlinestyle/style/index.html @@ -1,6 +1,6 @@ --- title: element.style -slug: Web/API/HTMLElement/style +slug: Web/API/ElementCSSInlineStyle/style tags: - API - HTML DOM @@ -9,6 +9,7 @@ tags: - Reference - Style translation_of: Web/API/ElementCSSInlineStyle/style +original_slug: Web/API/HTMLElement/style ---
    {{ APIRef("HTML DOM") }}
    diff --git a/files/ko/web/api/fetch_api/using_fetch/index.html b/files/ko/web/api/fetch_api/using_fetch/index.html index 403c340413..b28a982a16 100644 --- a/files/ko/web/api/fetch_api/using_fetch/index.html +++ b/files/ko/web/api/fetch_api/using_fetch/index.html @@ -1,7 +1,8 @@ --- title: Using Fetch -slug: Web/API/Fetch_API/Fetch의_사용법 +slug: Web/API/Fetch_API/Using_Fetch translation_of: Web/API/Fetch_API/Using_Fetch +original_slug: Web/API/Fetch_API/Fetch의_사용법 ---

    Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 {{domxref("GlobalFetch.fetch","fetch()")}} 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.

    diff --git a/files/ko/web/api/fullscreen_api/index.html b/files/ko/web/api/fullscreen_api/index.html index d7f561a95c..86546157a1 100644 --- a/files/ko/web/api/fullscreen_api/index.html +++ b/files/ko/web/api/fullscreen_api/index.html @@ -1,7 +1,8 @@ --- title: Using fullscreen mode -slug: Web/Guide/DOM/Using_full_screen_mode +slug: Web/API/Fullscreen_API translation_of: Web/API/Fullscreen_API +original_slug: Web/Guide/DOM/Using_full_screen_mode ---
    {{DefaultAPISidebar("Fullscreen API")}}
    diff --git a/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html index e5f9913376..44f644b5d5 100644 --- a/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html +++ b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -1,11 +1,12 @@ --- title: Geolocation API 사용하기 -slug: WebAPI/Using_geolocation +slug: Web/API/Geolocation_API/Using_the_Geolocation_API tags: - Geolocation API - Guide - Intermediate translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +original_slug: WebAPI/Using_geolocation ---

    {{securecontext_header}}{{APIRef("Geolocation API")}}
    Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.

    diff --git a/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html index 122e835b75..2e577ab60b 100644 --- a/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html +++ b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -1,7 +1,8 @@ --- title: Drag Operations -slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations +slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +original_slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations ---

    {{DefaultAPISidebar("HTML Drag and Drop API")}}

    diff --git a/files/ko/web/api/html_drag_and_drop_api/index.html b/files/ko/web/api/html_drag_and_drop_api/index.html index 70a4295284..0f91e7dc5a 100644 --- a/files/ko/web/api/html_drag_and_drop_api/index.html +++ b/files/ko/web/api/html_drag_and_drop_api/index.html @@ -1,6 +1,6 @@ --- title: HTML 드래그 앤 드롭 API -slug: Web/API/HTML_드래그_앤_드롭_API +slug: Web/API/HTML_Drag_and_Drop_API tags: - HTML5 - XUL @@ -10,6 +10,7 @@ tags: - 드래그 앤 드롭 - 이벤트 translation_of: Web/API/HTML_Drag_and_Drop_API +original_slug: Web/API/HTML_드래그_앤_드롭_API ---

    {{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}

    diff --git a/files/ko/web/api/htmlelement/accesskey/index.html b/files/ko/web/api/htmlelement/accesskey/index.html index 0fc48bd749..7ef2393b5d 100644 --- a/files/ko/web/api/htmlelement/accesskey/index.html +++ b/files/ko/web/api/htmlelement/accesskey/index.html @@ -1,6 +1,6 @@ --- title: Element.accessKey -slug: Web/API/Element/accessKey +slug: Web/API/HTMLElement/accessKey tags: - API - Access Keys @@ -13,6 +13,7 @@ tags: - 키보드 단축키 translation_of: Web/API/HTMLElement/accessKey translation_of_original: Web/API/Element/accessKey +original_slug: Web/API/Element/accessKey ---
    {{APIRef("DOM")}}
    diff --git a/files/ko/web/api/htmlelement/innertext/index.html b/files/ko/web/api/htmlelement/innertext/index.html index 414fab5c00..e15778f089 100644 --- a/files/ko/web/api/htmlelement/innertext/index.html +++ b/files/ko/web/api/htmlelement/innertext/index.html @@ -1,6 +1,6 @@ --- title: Node.innerText -slug: Web/API/Node/innerText +slug: Web/API/HTMLElement/innerText tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Property - Reference translation_of: Web/API/HTMLElement/innerText +original_slug: Web/API/Node/innerText ---
    {{APIRef("HTML DOM")}}
    diff --git a/files/ko/web/api/htmlmediaelement/abort_event/index.html b/files/ko/web/api/htmlmediaelement/abort_event/index.html index 2278a24c24..fde61e96f4 100644 --- a/files/ko/web/api/htmlmediaelement/abort_event/index.html +++ b/files/ko/web/api/htmlmediaelement/abort_event/index.html @@ -1,6 +1,6 @@ --- title: abort -slug: Web/Events/abort +slug: Web/API/HTMLMediaElement/abort_event tags: - DOM - Event @@ -9,6 +9,7 @@ tags: - 이벤트 translation_of: Web/API/HTMLMediaElement/abort_event translation_of_original: Web/Events/abort +original_slug: Web/Events/abort ---

    abort 이벤트는 리소스의 로딩이 중단되었을 때, 발생합니다.

    diff --git a/files/ko/web/api/htmlorforeignelement/dataset/index.html b/files/ko/web/api/htmlorforeignelement/dataset/index.html index 2b2a891dca..82d9e484f2 100644 --- a/files/ko/web/api/htmlorforeignelement/dataset/index.html +++ b/files/ko/web/api/htmlorforeignelement/dataset/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset +slug: Web/API/HTMLOrForeignElement/dataset tags: - API - HTML DOM @@ -10,6 +10,7 @@ tags: - Read-only - Reference translation_of: Web/API/HTMLOrForeignElement/dataset +original_slug: Web/API/HTMLElement/dataset ---
    {{APIRef("HTML DOM")}}
    diff --git a/files/ko/web/api/htmlorforeignelement/tabindex/index.html b/files/ko/web/api/htmlorforeignelement/tabindex/index.html index 7cbb0fa1f0..e28ecb36c0 100644 --- a/files/ko/web/api/htmlorforeignelement/tabindex/index.html +++ b/files/ko/web/api/htmlorforeignelement/tabindex/index.html @@ -1,11 +1,12 @@ --- title: element.tabIndex -slug: Web/API/HTMLElement/tabIndex +slug: Web/API/HTMLOrForeignElement/tabIndex tags: - DOM - Gecko - Gecko DOM Reference translation_of: Web/API/HTMLOrForeignElement/tabIndex +original_slug: Web/API/HTMLElement/tabIndex ---

    {{ ApiRef() }}

    요약

    diff --git a/files/ko/web/api/navigation_timing_api/index.html b/files/ko/web/api/navigation_timing_api/index.html index c9a0c1465b..a387d3c50e 100644 --- a/files/ko/web/api/navigation_timing_api/index.html +++ b/files/ko/web/api/navigation_timing_api/index.html @@ -1,7 +1,8 @@ --- title: 내비게이션 타이밍(Navigation Timing) -slug: Navigation_timing +slug: Web/API/Navigation_timing_API translation_of: Web/API/Navigation_timing_API +original_slug: Navigation_timing ---

    Navigation Timing API는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.

    다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.

    diff --git a/files/ko/web/api/navigator/connection/index.html b/files/ko/web/api/navigator/connection/index.html index 1afa39d9c1..2152c8ab3a 100644 --- a/files/ko/web/api/navigator/connection/index.html +++ b/files/ko/web/api/navigator/connection/index.html @@ -1,7 +1,8 @@ --- title: window.navigator.connection -slug: Web/API/NetworkInformation/connection +slug: Web/API/Navigator/connection translation_of: Web/API/Navigator/connection +original_slug: Web/API/NetworkInformation/connection ---

    {{ Apiref() }}

    {{ SeeCompatTable() }}

    diff --git a/files/ko/web/api/network_information_api/index.html b/files/ko/web/api/network_information_api/index.html index 9526bd2d5f..2dd356b86d 100644 --- a/files/ko/web/api/network_information_api/index.html +++ b/files/ko/web/api/network_information_api/index.html @@ -1,7 +1,8 @@ --- title: Network Information API -slug: WebAPI/Network_Information +slug: Web/API/Network_Information_API translation_of: Web/API/Network_Information_API +original_slug: WebAPI/Network_Information ---

    {{ SeeCompatTable() }}

    네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: {{domxref("window.navigator.connection")}}.

    diff --git a/files/ko/web/api/notifications_api/using_the_notifications_api/index.html b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html index 351361d2af..d56373a529 100644 --- a/files/ko/web/api/notifications_api/using_the_notifications_api/index.html +++ b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html @@ -1,7 +1,8 @@ --- title: 알림 API 사용하기 -slug: WebAPI/Using_Web_Notifications +slug: Web/API/Notifications_API/Using_the_Notifications_API translation_of: Web/API/Notifications_API/Using_the_Notifications_API +original_slug: WebAPI/Using_Web_Notifications ---

    {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

    diff --git a/files/ko/web/api/proximity_events/index.html b/files/ko/web/api/proximity_events/index.html index ad1687ddd2..85fb728f86 100644 --- a/files/ko/web/api/proximity_events/index.html +++ b/files/ko/web/api/proximity_events/index.html @@ -1,7 +1,8 @@ --- title: Proximity -slug: WebAPI/Proximity +slug: Web/API/Proximity_Events translation_of: Web/API/Proximity_Events +original_slug: WebAPI/Proximity ---

    {{ SeeCompatTable }}

    Summary

    diff --git a/files/ko/web/api/screen/onorientationchange/index.html b/files/ko/web/api/screen/onorientationchange/index.html index dc1a76013f..9c55badab7 100644 --- a/files/ko/web/api/screen/onorientationchange/index.html +++ b/files/ko/web/api/screen/onorientationchange/index.html @@ -1,7 +1,8 @@ --- title: window.screen.onorientationchange -slug: Web/API/Screen.onorientationchange +slug: Web/API/Screen/onorientationchange translation_of: Web/API/Screen/onorientationchange +original_slug: Web/API/Screen.onorientationchange ---

    {{ ApiRef() }}

    {{SeeCompatTable}}

    diff --git a/files/ko/web/api/streams_api/concepts/index.html b/files/ko/web/api/streams_api/concepts/index.html index 9c993b81a3..3537318227 100644 --- a/files/ko/web/api/streams_api/concepts/index.html +++ b/files/ko/web/api/streams_api/concepts/index.html @@ -1,7 +1,8 @@ --- title: Streams API 컨셉 -slug: Web/API/Streams_API/컨셉 +slug: Web/API/Streams_API/Concepts translation_of: Web/API/Streams_API/Concepts +original_slug: Web/API/Streams_API/컨셉 ---
    {{apiref("Streams")}}
    diff --git a/files/ko/web/api/vibration_api/index.html b/files/ko/web/api/vibration_api/index.html index 16271ff248..a981773215 100644 --- a/files/ko/web/api/vibration_api/index.html +++ b/files/ko/web/api/vibration_api/index.html @@ -1,7 +1,8 @@ --- title: Vibration API -slug: Web/Guide/API/Vibration/Vibration +slug: Web/API/Vibration_API translation_of: Web/API/Vibration_API +original_slug: Web/Guide/API/Vibration/Vibration ---
    {{DefaultAPISidebar("Vibration API")}}
    diff --git a/files/ko/web/api/web_workers_api/using_web_workers/index.html b/files/ko/web/api/web_workers_api/using_web_workers/index.html index eb0e309e8e..5fda4804ce 100644 --- a/files/ko/web/api/web_workers_api/using_web_workers/index.html +++ b/files/ko/web/api/web_workers_api/using_web_workers/index.html @@ -1,7 +1,8 @@ --- title: 웹 워커 사용하기 -slug: Web/API/Web_Workers_API/basic_usage +slug: Web/API/Web_Workers_API/Using_web_workers translation_of: Web/API/Web_Workers_API/Using_web_workers +original_slug: Web/API/Web_Workers_API/basic_usage ---

    웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공합니다. 워커 스레드는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 또한 워커는 ( responseXML 과 channel속성이 언제나 null이지만) XMLHttpRequest 를 사용하여 I/O작업을 수행할 수도 있습니다. 워커는 생성이 된 후에 생성자가 명시한 이벤트 핸들러로 메세지를 올려서 자신의 하위 작업(spawning task)에 메세지를 전달할 수 도 있습니다. 본 글에서 전용 워커와 공유 워커에 대하여 소개합니다.

    diff --git a/files/ko/web/api/websockets_api/index.html b/files/ko/web/api/websockets_api/index.html index 8b6fd20b1a..d4e1092ee3 100644 --- a/files/ko/web/api/websockets_api/index.html +++ b/files/ko/web/api/websockets_api/index.html @@ -1,7 +1,8 @@ --- title: 웹 소켓 -slug: WebSockets +slug: Web/API/WebSockets_API translation_of: Web/API/WebSockets_API +original_slug: WebSockets ---

    웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.

    diff --git a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html index e7826d8595..484a1bef26 100644 --- a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html +++ b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -1,6 +1,6 @@ --- title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기 -slug: WebSockets/Writing_WebSocket_client_applications +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications tags: - 가이드 - 네트워킹 @@ -9,6 +9,7 @@ tags: - 웹소켓API - 클라이언트 translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +original_slug: WebSockets/Writing_WebSocket_client_applications ---

    WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.

    diff --git a/files/ko/web/api/websockets_api/writing_websocket_servers/index.html b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html index 24c3cbe6c0..79ed39021a 100644 --- a/files/ko/web/api/websockets_api/writing_websocket_servers/index.html +++ b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html @@ -1,7 +1,8 @@ --- title: 웹소켓 서버 작성하기 -slug: WebSockets/Writing_WebSocket_servers +slug: Web/API/WebSockets_API/Writing_WebSocket_servers translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +original_slug: WebSockets/Writing_WebSocket_servers ---

    {{gecko_minversion_header("2")}}

    diff --git a/files/ko/web/api/window/domcontentloaded_event/index.html b/files/ko/web/api/window/domcontentloaded_event/index.html index 24db56aa91..212d755171 100644 --- a/files/ko/web/api/window/domcontentloaded_event/index.html +++ b/files/ko/web/api/window/domcontentloaded_event/index.html @@ -1,12 +1,13 @@ --- title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded +slug: Web/API/Window/DOMContentLoaded_event tags: - Event - Reference - Web - Window translation_of: Web/API/Window/DOMContentLoaded_event +original_slug: Web/Events/DOMContentLoaded ---
    {{APIRef}}
    diff --git a/files/ko/web/api/window/load_event/index.html b/files/ko/web/api/window/load_event/index.html index baef50af25..8bfa5a0dcd 100644 --- a/files/ko/web/api/window/load_event/index.html +++ b/files/ko/web/api/window/load_event/index.html @@ -1,10 +1,11 @@ --- title: load -slug: Web/Events/load +slug: Web/API/Window/load_event tags: - Event - 이벤트 translation_of: Web/API/Window/load_event +original_slug: Web/Events/load ---

    load 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.

    diff --git a/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html index 7b338a83fa..a9d31000f3 100644 --- a/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html @@ -1,9 +1,10 @@ --- title: WindowTimers.setTimeout() -slug: Web/API/WindowTimers/setTimeout +slug: Web/API/WindowOrWorkerGlobalScope/setTimeout tags: - setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/WindowTimers/setTimeout ---
    {{APIRef("HTML DOM")}}
    diff --git a/files/ko/web/api/xmlhttprequest/timeout_event/index.html b/files/ko/web/api/xmlhttprequest/timeout_event/index.html index 4ecc599f9d..f426661dc5 100644 --- a/files/ko/web/api/xmlhttprequest/timeout_event/index.html +++ b/files/ko/web/api/xmlhttprequest/timeout_event/index.html @@ -1,7 +1,8 @@ --- title: timeout -slug: Web/API/XMLHttpRequest/timeout +slug: Web/API/XMLHttpRequest/timeout_event translation_of: Web/API/XMLHttpRequest/timeout_event +original_slug: Web/API/XMLHttpRequest/timeout ---

    timeout 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.

    diff --git a/files/ko/web/api/xsltprocessor/basic_example/index.html b/files/ko/web/api/xsltprocessor/basic_example/index.html index cb96c52c55..a09cf8ed1d 100644 --- a/files/ko/web/api/xsltprocessor/basic_example/index.html +++ b/files/ko/web/api/xsltprocessor/basic_example/index.html @@ -1,7 +1,8 @@ --- title: Basic Example -slug: XSLT_in_Gecko/Basic_Example +slug: Web/API/XSLTProcessor/Basic_Example translation_of: Web/API/XSLTProcessor/Basic_Example +original_slug: XSLT_in_Gecko/Basic_Example ---

    기본 예

    이 첫 예는 브라우저에서 XSLT 변환 설정의 기본을 보여준다. 이 예는 Article에 대한 정보(Title, Author 목록과 Body 글)를 포함한 XML 문서를 얻어 그것을 사람이 읽을 수 있는 형식으로 나타낸다. diff --git a/files/ko/web/api/xsltprocessor/browser_differences/index.html b/files/ko/web/api/xsltprocessor/browser_differences/index.html index 0d22a5b825..d89378893c 100644 --- a/files/ko/web/api/xsltprocessor/browser_differences/index.html +++ b/files/ko/web/api/xsltprocessor/browser_differences/index.html @@ -1,7 +1,8 @@ --- title: Browser Differences -slug: XSLT_in_Gecko/Browser_Differences +slug: Web/API/XSLTProcessor/Browser_Differences translation_of: Web/API/XSLTProcessor/Browser_Differences +original_slug: XSLT_in_Gecko/Browser_Differences ---

    브라우저 차이

    Netscape 7.x (모든 플랫폼)과 Internet Explorer 6(윈도즈)는 W3C XSLT 1.0 표준( http://www.w3.org/TR/xslt )을 지원합니다. IE 5.0과 5.5 (둘 다 윈도즈)는 XSLT의 초안만 지원하므로 XSLT 1.0 스타일쉬트와는 호환하지 않습니다. Netscape 6.x는 XSLT 1.0을 부분적으로만 지원합니다. diff --git a/files/ko/web/api/xsltprocessor/generating_html/index.html b/files/ko/web/api/xsltprocessor/generating_html/index.html index 5bb284bdb8..bb855f18cc 100644 --- a/files/ko/web/api/xsltprocessor/generating_html/index.html +++ b/files/ko/web/api/xsltprocessor/generating_html/index.html @@ -1,7 +1,8 @@ --- title: Generating HTML -slug: XSLT_in_Gecko/Generating_HTML +slug: Web/API/XSLTProcessor/Generating_HTML translation_of: Web/API/XSLTProcessor/Generating_HTML +original_slug: XSLT_in_Gecko/Generating_HTML ---

    HTML 생성하기

    브라우저에서 XSLT의 공통 응용은 XML을 클라이언트의 안에 변환해 넣는 것이다. 두번째 예는 입력문서(example2.xml)를 변환하는데, 이것은 또 글의 정보를 포함하고 HTML문서 안에 들어간다. diff --git a/files/ko/web/api/xsltprocessor/index.html b/files/ko/web/api/xsltprocessor/index.html index 84d5198c58..e8938f4f88 100644 --- a/files/ko/web/api/xsltprocessor/index.html +++ b/files/ko/web/api/xsltprocessor/index.html @@ -1,10 +1,11 @@ --- title: XSLT in Gecko -slug: XSLT_in_Gecko +slug: Web/API/XSLTProcessor tags: - XSLT translation_of: Web/API/XSLTProcessor translation_of_original: XSLT_in_Gecko +original_slug: XSLT_in_Gecko ---

    1. 개요
    2. 기본 예제 diff --git a/files/ko/web/api/xsltprocessor/introduction/index.html b/files/ko/web/api/xsltprocessor/introduction/index.html index bfb103b98f..fd28421eaf 100644 --- a/files/ko/web/api/xsltprocessor/introduction/index.html +++ b/files/ko/web/api/xsltprocessor/introduction/index.html @@ -1,7 +1,8 @@ --- title: Introduction -slug: XSLT_in_Gecko/Introduction +slug: Web/API/XSLTProcessor/Introduction translation_of: Web/API/XSLTProcessor/Introduction +original_slug: XSLT_in_Gecko/Introduction ---

      개요

      W3표준 안에서 주목할만한 하나의 흐름은 스타일로부터 내용을 분리하려는 노력이다. diff --git a/files/ko/web/api/xsltprocessor/resources/index.html b/files/ko/web/api/xsltprocessor/resources/index.html index bcdb54116f..2d0d6dda69 100644 --- a/files/ko/web/api/xsltprocessor/resources/index.html +++ b/files/ko/web/api/xsltprocessor/resources/index.html @@ -1,7 +1,8 @@ --- title: Resources -slug: XSLT_in_Gecko/Resources +slug: Web/API/XSLTProcessor/Resources translation_of: Web/API/XSLTProcessor/Resources +original_slug: XSLT_in_Gecko/Resources ---

      자원

        diff --git a/files/ko/web/css/adjacent_sibling_combinator/index.html b/files/ko/web/css/adjacent_sibling_combinator/index.html index 4446172ab3..2d054e75f9 100644 --- a/files/ko/web/css/adjacent_sibling_combinator/index.html +++ b/files/ko/web/css/adjacent_sibling_combinator/index.html @@ -1,11 +1,12 @@ --- title: 인접 형제 결합자 -slug: Web/CSS/인접_형제_선택자 +slug: Web/CSS/Adjacent_sibling_combinator tags: - CSS - Reference - Selectors translation_of: Web/CSS/Adjacent_sibling_combinator +original_slug: Web/CSS/인접_형제_선택자 ---
        {{CSSRef("Selectors")}}
        diff --git a/files/ko/web/css/containing_block/index.html b/files/ko/web/css/containing_block/index.html index 35c6bf56cb..78bb5734d8 100644 --- a/files/ko/web/css/containing_block/index.html +++ b/files/ko/web/css/containing_block/index.html @@ -1,12 +1,13 @@ --- title: 컨테이닝 블록의 모든 것 -slug: Web/CSS/All_About_The_Containing_Block +slug: Web/CSS/Containing_block tags: - CSS - Guide - Layout - Position translation_of: Web/CSS/Containing_block +original_slug: Web/CSS/All_About_The_Containing_Block ---
        {{cssref}}
        diff --git a/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index f3f0d6529b..09a00d46bc 100644 --- a/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ b/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -1,6 +1,6 @@ --- title: 배경 이미지 크기 조정하기 -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images tags: - CSS - CSS Background @@ -10,6 +10,7 @@ tags: - Reference - Web translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images ---
        {{cssref}}
        diff --git a/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 416718c17f..e8e6d447af 100644 --- a/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,12 +1,13 @@ --- title: cursor 속성값에 URL 사용 -slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - CSS_2.1 - Cross-browser_Development - Web Development translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property ---

        Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)은 URL 값을 CSS2 커서 속성값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.

        diff --git a/files/ko/web/css/css_columns/using_multi-column_layouts/index.html b/files/ko/web/css/css_columns/using_multi-column_layouts/index.html index 47d363969c..1f860e087a 100644 --- a/files/ko/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/ko/web/css/css_columns/using_multi-column_layouts/index.html @@ -1,12 +1,13 @@ --- title: CSS 다단 레이아웃 사용 -slug: CSS3_Columns +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts tags: - Advanced - CSS - Guide - Multi-columns translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: CSS3_Columns ---

        {{CSSRef("CSS Multi-columns")}}

        diff --git a/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 1966114608..1a42e8635a 100644 --- a/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,7 +1,8 @@ --- title: flexbox의 기본 개념 -slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index a9f75246aa..6403678166 100644 --- a/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ b/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -1,6 +1,6 @@ --- title: 가변상자의 대표적인 사용례 -slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 +slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox tags: - 가변상자 - 씨에스에스 @@ -8,6 +8,7 @@ tags: - 용례 - 패턴 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 ---

        {{CSSRef}}

        diff --git a/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index cc7753cb70..b2a138ce3e 100644 --- a/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html +++ b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -1,6 +1,6 @@ --- title: 일반 대열 속 블록 및 인라인 조판 -slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 +slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow tags: - 대열 - 씨에스에스 @@ -10,6 +10,7 @@ tags: - 조판 - 중급 translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +original_slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html index 697bdfacde..d99969965b 100644 --- a/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -1,6 +1,6 @@ --- title: 대열 조판과 대열이탈 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow tags: - 가시성 - 대열 조판 @@ -11,6 +11,7 @@ tags: - 중급 - 텍스트 대열이탈 translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +original_slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 ---

        컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.

        diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html index 4d35855ee5..0d932806c2 100644 --- a/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -1,6 +1,6 @@ --- title: 대열 조판과 쓰기 모드 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes tags: - 대열 조판 - 쓰기모드 @@ -8,6 +8,7 @@ tags: - 안내서 - 지향 translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +original_slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 ---

        어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. 조판 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.

        diff --git a/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index 2b05d99f39..bdec8123f8 100644 --- a/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html +++ b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -1,6 +1,6 @@ --- title: 대열과 탈대열 -slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 +slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow tags: - 대열 - 대열 조판 @@ -10,6 +10,7 @@ tags: - 조판 - 중급 translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +original_slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html index 675b5127f3..fc171f9b89 100644 --- a/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html +++ b/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -1,11 +1,12 @@ --- title: Consistent List Indentation -slug: Consistent_List_Indentation +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation tags: - CSS - Guide - NeedsUpdate translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Consistent_List_Indentation ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_masking/index.html b/files/ko/web/css/css_masking/index.html index 5a48e0af6e..ddf760bb02 100644 --- a/files/ko/web/css/css_masking/index.html +++ b/files/ko/web/css/css_masking/index.html @@ -1,12 +1,13 @@ --- title: CSS Masking -slug: Web/CSS/CSS_Masks +slug: Web/CSS/CSS_Masking tags: - CSS - CSS Masking - Overview - Reference translation_of: Web/CSS/CSS_Masking +original_slug: Web/CSS/CSS_Masks ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_values_and_units/index.html b/files/ko/web/css/css_values_and_units/index.html index 94d8ceabd6..5f1f3831fb 100644 --- a/files/ko/web/css/css_values_and_units/index.html +++ b/files/ko/web/css/css_values_and_units/index.html @@ -1,12 +1,13 @@ --- title: CSS 단위와 값 -slug: Web/CSS/CSS_단위와_값 +slug: Web/CSS/CSS_Values_and_Units tags: - CSS - 값과 단위 - 안내서 - 참조 translation_of: Web/CSS/CSS_Values_and_Units +original_slug: Web/CSS/CSS_단위와_값 ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/media_queries/using_media_queries/index.html b/files/ko/web/css/media_queries/using_media_queries/index.html index 559b5805c6..78061792a4 100644 --- a/files/ko/web/css/media_queries/using_media_queries/index.html +++ b/files/ko/web/css/media_queries/using_media_queries/index.html @@ -1,6 +1,6 @@ --- title: 미디어 쿼리 사용하기 -slug: Web/Guide/CSS/Media_queries +slug: Web/CSS/Media_Queries/Using_media_queries tags: - Advanced - CSS @@ -10,6 +10,7 @@ tags: - Responsive Design - Web translation_of: Web/CSS/Media_Queries/Using_media_queries +original_slug: Web/Guide/CSS/Media_queries ---
        {{cssref}}
        diff --git a/files/ko/web/css/url()/index.html b/files/ko/web/css/url()/index.html index 76904ccd73..ae4c05af7f 100644 --- a/files/ko/web/css/url()/index.html +++ b/files/ko/web/css/url()/index.html @@ -1,6 +1,6 @@ --- title: -slug: Web/CSS/url +slug: Web/CSS/url() tags: - CSS - CSS Data Type @@ -8,6 +8,7 @@ tags: - Reference translation_of: Web/CSS/url() translation_of_original: Web/CSS/url +original_slug: Web/CSS/url ---
        {{ CssRef() }}
        diff --git a/files/ko/web/css/visual_formatting_model/index.html b/files/ko/web/css/visual_formatting_model/index.html index 4b32d08a30..4f516071b3 100644 --- a/files/ko/web/css/visual_formatting_model/index.html +++ b/files/ko/web/css/visual_formatting_model/index.html @@ -1,11 +1,12 @@ --- title: 시각적 서식 모델 -slug: Web/Guide/CSS/Visual_formatting_model +slug: Web/CSS/Visual_formatting_model tags: - 씨에스에스 - 씨에스에스 상자 모델 - 참조 translation_of: Web/CSS/Visual_formatting_model +original_slug: Web/Guide/CSS/Visual_formatting_model ---
        {{CSSRef}}
        diff --git a/files/ko/web/guide/graphics/index.html b/files/ko/web/guide/graphics/index.html index cb7cd6f873..feb2816351 100644 --- a/files/ko/web/guide/graphics/index.html +++ b/files/ko/web/guide/graphics/index.html @@ -1,6 +1,6 @@ --- title: 웹 상 그래픽 -slug: Web/Guide/그래픽 +slug: Web/Guide/Graphics tags: - 2D - 3D @@ -11,6 +11,7 @@ tags: - WebGL - WebRTC translation_of: Web/Guide/Graphics +original_slug: Web/Guide/그래픽 ---

        웹 사이트 및 응용 프로그램은 종종 그래픽을 보일 필요가 있습니다. 정지 이미지는 {{HTMLElement("img")}} 요소 사용이나 {{cssxref("background-image")}} 속성을 사용한 HTML 요소의 배경 설정으로 쉽게 표시할 수 있습니다. 또한 그래픽을 그때그때 생성하거나 사후에 이미지를 조작할 수도 있습니다. 여기서는 이를 수행할 수 있는 법을 주의 깊게 살펴봅니다.

        diff --git a/files/ko/web/guide/html/editable_content/index.html b/files/ko/web/guide/html/editable_content/index.html index 2e039ea976..583783c87a 100644 --- a/files/ko/web/guide/html/editable_content/index.html +++ b/files/ko/web/guide/html/editable_content/index.html @@ -1,6 +1,6 @@ --- title: Content Editable -slug: Web/Guide/HTML/Content_Editable +slug: Web/Guide/HTML/Editable_content tags: - HTML - HTML5 @@ -10,6 +10,7 @@ tags: - 웹 - 필요컨텐트 translation_of: Web/Guide/HTML/Editable_content +original_slug: Web/Guide/HTML/Content_Editable ---

        HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.

        diff --git a/files/ko/web/guide/html/html5/index.html b/files/ko/web/guide/html/html5/index.html index 2d64ce56d6..ff48740224 100644 --- a/files/ko/web/guide/html/html5/index.html +++ b/files/ko/web/guide/html/html5/index.html @@ -1,7 +1,8 @@ --- title: HTML5 -slug: Web/HTML/HTML5 +slug: Web/Guide/HTML/HTML5 translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/HTML/HTML5 ---

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

        diff --git a/files/ko/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/web/guide/html/html5/introduction_to_html5/index.html index 8b9698dc53..f0bfebe0e7 100644 --- a/files/ko/web/guide/html/html5/introduction_to_html5/index.html +++ b/files/ko/web/guide/html/html5/introduction_to_html5/index.html @@ -1,10 +1,11 @@ --- title: HTML5 소개 -slug: Web/HTML/HTML5/Introduction_to_HTML5 +slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 tags: - HTML5 - 웹개발 translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/HTML/HTML5/Introduction_to_HTML5 ---

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

        diff --git a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html index 87cae41ebd..2927a70a19 100644 --- a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html +++ b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html @@ -1,10 +1,11 @@ --- title: HTML 구획과 개요 사용하기 -slug: Web/HTML/HTML5_문서의_섹션과_윤곽 +slug: Web/Guide/HTML/Using_HTML_sections_and_outlines tags: - HTML - HTML5 translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/HTML/HTML5_문서의_섹션과_윤곽 ---
        {{HTMLSidebar}}
        diff --git a/files/ko/web/guide/parsing_and_serializing_xml/index.html b/files/ko/web/guide/parsing_and_serializing_xml/index.html index 872dfffaa3..7659099765 100644 --- a/files/ko/web/guide/parsing_and_serializing_xml/index.html +++ b/files/ko/web/guide/parsing_and_serializing_xml/index.html @@ -1,6 +1,6 @@ --- title: XML 파싱 및 직렬화 -slug: Web/Guide/XML_파싱_및_직렬화 +slug: Web/Guide/Parsing_and_serializing_XML tags: - AJAX - Add-ons @@ -12,6 +12,7 @@ tags: - XMLHttpRequest - 가이드 translation_of: Web/Guide/Parsing_and_serializing_XML +original_slug: Web/Guide/XML_파싱_및_직렬화 ---

        웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.

        diff --git a/files/ko/web/html/global_attributes/class/index.html b/files/ko/web/html/global_attributes/class/index.html index d0aa89b606..0e063c3f5d 100644 --- a/files/ko/web/html/global_attributes/class/index.html +++ b/files/ko/web/html/global_attributes/class/index.html @@ -1,11 +1,12 @@ --- title: class -slug: Web/HTML/Global_attributes/클래스 +slug: Web/HTML/Global_attributes/class tags: - Global attributes - HTML - Reference translation_of: Web/HTML/Global_attributes/class +original_slug: Web/HTML/Global_attributes/클래스 ---
        {{HTMLSidebar("Global_attributes")}}
        diff --git a/files/ko/web/http/browser_detection_using_the_user_agent/index.html b/files/ko/web/http/browser_detection_using_the_user_agent/index.html index 8ffc0ff0b5..27c3f6de3f 100644 --- a/files/ko/web/http/browser_detection_using_the_user_agent/index.html +++ b/files/ko/web/http/browser_detection_using_the_user_agent/index.html @@ -1,11 +1,12 @@ --- title: 사용자 에이전트를 이용한 브라우저 감지 -slug: Web/HTTP/User_agent를_이용한_브라우저_감지 +slug: Web/HTTP/Browser_detection_using_the_user_agent tags: - Compatibility - HTTP - Web Development translation_of: Web/HTTP/Browser_detection_using_the_user_agent +original_slug: Web/HTTP/User_agent를_이용한_브라우저_감지 ---
        {{HTTPSidebar}}
        diff --git a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html b/files/ko/web/javascript/a_re-introduction_to_javascript/index.html index 7206716138..f8f301aa66 100644 --- a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/ko/web/javascript/a_re-introduction_to_javascript/index.html @@ -1,6 +1,6 @@ --- title: JavaScript 재입문하기 (JS ​튜토리얼) -slug: A_re-introduction_to_JavaScript +slug: Web/JavaScript/A_re-introduction_to_JavaScript tags: - CodingScripting - Intermediate @@ -9,6 +9,7 @@ tags: - Learn - Tutorial translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +original_slug: A_re-introduction_to_JavaScript ---
        {{jsSidebar}}
        diff --git a/files/ko/web/javascript/about_javascript/index.html b/files/ko/web/javascript/about_javascript/index.html index c7ec0f9f28..57120431b4 100644 --- a/files/ko/web/javascript/about_javascript/index.html +++ b/files/ko/web/javascript/about_javascript/index.html @@ -1,11 +1,12 @@ --- title: JavaScript에 대하여 -slug: Web/JavaScript/About +slug: Web/JavaScript/About_JavaScript tags: - 비기너 - 소개 - 자바스크립트 translation_of: Web/JavaScript/About_JavaScript +original_slug: Web/JavaScript/About ---

        {{JsSidebar}}

        diff --git a/files/ko/web/javascript/closures/index.html b/files/ko/web/javascript/closures/index.html index b56d843b2b..6a9b8554a8 100644 --- a/files/ko/web/javascript/closures/index.html +++ b/files/ko/web/javascript/closures/index.html @@ -1,6 +1,6 @@ --- title: 클로저 -slug: Web/JavaScript/Guide/Closures +slug: Web/JavaScript/Closures tags: - Closure - ES5 @@ -8,6 +8,7 @@ tags: - JavaScript - Reference translation_of: Web/JavaScript/Closures +original_slug: Web/JavaScript/Guide/Closures ---
        {{jsSidebar("Intermediate")}}
        diff --git a/files/ko/web/javascript/guide/details_of_the_object_model/index.html b/files/ko/web/javascript/guide/details_of_the_object_model/index.html index 230d5cb9e1..cacb978922 100644 --- a/files/ko/web/javascript/guide/details_of_the_object_model/index.html +++ b/files/ko/web/javascript/guide/details_of_the_object_model/index.html @@ -1,7 +1,8 @@ --- title: 객체 모델의 세부 사항 -slug: Web/JavaScript/Guide/객체_모델의_세부사항 +slug: Web/JavaScript/Guide/Details_of_the_Object_Model translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +original_slug: Web/JavaScript/Guide/객체_모델의_세부사항 ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
        diff --git a/files/ko/web/javascript/guide/functions/index.html b/files/ko/web/javascript/guide/functions/index.html index cf9d928eb3..381beaefe4 100644 --- a/files/ko/web/javascript/guide/functions/index.html +++ b/files/ko/web/javascript/guide/functions/index.html @@ -1,7 +1,8 @@ --- title: 함수 -slug: Web/JavaScript/Guide/함수 +slug: Web/JavaScript/Guide/Functions translation_of: Web/JavaScript/Guide/Functions +original_slug: Web/JavaScript/Guide/함수 ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
        diff --git a/files/ko/web/javascript/guide/grammar_and_types/index.html b/files/ko/web/javascript/guide/grammar_and_types/index.html index 629cbd069a..54d51091a9 100644 --- a/files/ko/web/javascript/guide/grammar_and_types/index.html +++ b/files/ko/web/javascript/guide/grammar_and_types/index.html @@ -1,11 +1,12 @@ --- title: 문법과 자료형 -slug: 'Web/JavaScript/Guide/Values,_variables,_and_literals' +slug: Web/JavaScript/Guide/Grammar_and_types tags: - Guide - JavaScript - - 'l10n:priority' + - l10n:priority translation_of: Web/JavaScript/Guide/Grammar_and_types +original_slug: Web/JavaScript/Guide/Values,_variables,_and_literals ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
        diff --git a/files/ko/web/javascript/guide/introduction/index.html b/files/ko/web/javascript/guide/introduction/index.html index cac0779ee0..cac6b40ed4 100644 --- a/files/ko/web/javascript/guide/introduction/index.html +++ b/files/ko/web/javascript/guide/introduction/index.html @@ -1,12 +1,13 @@ --- title: Introduction -slug: Web/JavaScript/Guide/소개 +slug: Web/JavaScript/Guide/Introduction tags: - JavaScript - 가이드 - 안내서 - 자바스크립트 translation_of: Web/JavaScript/Guide/Introduction +original_slug: Web/JavaScript/Guide/소개 ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
        diff --git a/files/ko/web/javascript/guide/meta_programming/index.html b/files/ko/web/javascript/guide/meta_programming/index.html index fe4fa13f83..9b84db0876 100644 --- a/files/ko/web/javascript/guide/meta_programming/index.html +++ b/files/ko/web/javascript/guide/meta_programming/index.html @@ -1,7 +1,8 @@ --- title: 메타 프로그래밍 -slug: Web/JavaScript/Guide/메타_프로그래밍 +slug: Web/JavaScript/Guide/Meta_programming translation_of: Web/JavaScript/Guide/Meta_programming +original_slug: Web/JavaScript/Guide/메타_프로그래밍 ---
        {{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}
        diff --git a/files/ko/web/javascript/guide/regular_expressions/assertions/index.html b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html index 350c50f8f9..6a7cd8b8f1 100644 --- a/files/ko/web/javascript/guide/regular_expressions/assertions/index.html +++ b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html @@ -1,7 +1,8 @@ --- title: Assertions -slug: Web/JavaScript/Guide/정규식/Assertions +slug: Web/JavaScript/Guide/Regular_Expressions/Assertions translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +original_slug: Web/JavaScript/Guide/정규식/Assertions ---

        {{jsSidebar("JavaScript Guide")}}

        diff --git a/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html b/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html index 2e2109b4ed..75e8e65b9c 100644 --- a/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html +++ b/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html @@ -1,7 +1,8 @@ --- title: Groups and Ranges -slug: Web/JavaScript/Guide/정규식/Groups_and_Ranges +slug: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges +original_slug: Web/JavaScript/Guide/정규식/Groups_and_Ranges ---

        {{jsSidebar("JavaScript Guide")}}{{draft}}

        diff --git a/files/ko/web/javascript/guide/regular_expressions/index.html b/files/ko/web/javascript/guide/regular_expressions/index.html index 5fbbcef0a0..84f1ce7bc4 100644 --- a/files/ko/web/javascript/guide/regular_expressions/index.html +++ b/files/ko/web/javascript/guide/regular_expressions/index.html @@ -1,10 +1,11 @@ --- title: 정규 표현식 -slug: Web/JavaScript/Guide/정규식 +slug: Web/JavaScript/Guide/Regular_Expressions tags: - 자바스크립트 - 정규식 translation_of: Web/JavaScript/Guide/Regular_Expressions +original_slug: Web/JavaScript/Guide/정규식 ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
        diff --git a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html index e05bab3102..ae9edde4a0 100644 --- a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html +++ b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -1,12 +1,13 @@ --- title: 상속과 프로토타입 -slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain +slug: Web/JavaScript/Inheritance_and_the_prototype_chain tags: - JavaScript - 객체지향 - 상속 - 중급 translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +original_slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain ---

        {{jsSidebar("Advanced")}}

        diff --git a/files/ko/web/javascript/language_resources/index.html b/files/ko/web/javascript/language_resources/index.html index 5743a54e24..c10436fe6e 100644 --- a/files/ko/web/javascript/language_resources/index.html +++ b/files/ko/web/javascript/language_resources/index.html @@ -1,10 +1,11 @@ --- title: 자바스크립트 언어 자료 -slug: Web/JavaScript/언어_리소스 +slug: Web/JavaScript/Language_Resources tags: - Advanced - 자바스크립트 translation_of: Web/JavaScript/Language_Resources +original_slug: Web/JavaScript/언어_리소스 ---
        {{JsSidebar}}
        diff --git a/files/ko/web/javascript/reference/classes/public_class_fields/index.html b/files/ko/web/javascript/reference/classes/public_class_fields/index.html index 959c65fada..c2c346cb63 100644 --- a/files/ko/web/javascript/reference/classes/public_class_fields/index.html +++ b/files/ko/web/javascript/reference/classes/public_class_fields/index.html @@ -1,7 +1,8 @@ --- title: Class fields -slug: Web/JavaScript/Reference/Classes/Class_fields +slug: Web/JavaScript/Reference/Classes/Public_class_fields translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +original_slug: Web/JavaScript/Reference/Classes/Class_fields ---
        {{JsSidebar("Classes")}}
        diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html index 02dc0d55e4..14c11cc7e8 100644 --- a/files/ko/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ko/web/javascript/reference/functions/arrow_functions/index.html @@ -1,6 +1,6 @@ --- title: 화살표 함수 -slug: Web/JavaScript/Reference/Functions/애로우_펑션 +slug: Web/JavaScript/Reference/Functions/Arrow_functions tags: - ECMAScript6 - Functions @@ -8,6 +8,7 @@ tags: - JavaScript - Reference translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 ---
        {{jsSidebar("Functions")}}
        diff --git a/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html index b4928da1d8..28be207090 100644 --- a/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html +++ b/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -1,11 +1,12 @@ --- title: handler.apply() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply tags: - apply트랩 - 트랩 - 프록시 translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply ---
        {{JSRef}}
        diff --git a/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html index d153c621c6..588a2e92e5 100644 --- a/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html +++ b/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -1,12 +1,13 @@ --- title: Proxy handler -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy tags: - ECMAScript 2015 - JavaScript - Proxy translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---
        {{JSRef}}
        diff --git a/files/ko/web/javascript/reference/operators/operator_precedence/index.html b/files/ko/web/javascript/reference/operators/operator_precedence/index.html index 7a82346d09..d67711452b 100644 --- a/files/ko/web/javascript/reference/operators/operator_precedence/index.html +++ b/files/ko/web/javascript/reference/operators/operator_precedence/index.html @@ -1,12 +1,13 @@ --- title: 연산자 우선순위 -slug: Web/JavaScript/Reference/Operators/연산자_우선순위 +slug: Web/JavaScript/Reference/Operators/Operator_Precedence tags: - JavaScript - Operator - 연산자 - 우선순위 translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +original_slug: Web/JavaScript/Reference/Operators/연산자_우선순위 ---
        {{jsSidebar("Operators")}}
        diff --git a/files/ko/web/javascript/shells/index.html b/files/ko/web/javascript/shells/index.html index 718fa8bdc2..106b41621c 100644 --- a/files/ko/web/javascript/shells/index.html +++ b/files/ko/web/javascript/shells/index.html @@ -1,7 +1,8 @@ --- title: JavaScript 쉘 -slug: Web/JavaScript/쉘 +slug: Web/JavaScript/Shells translation_of: Web/JavaScript/Shells +original_slug: Web/JavaScript/쉘 ---
        {{JsSidebar}}
        diff --git a/files/ko/web/media/formats/codecs_parameter/index.html b/files/ko/web/media/formats/codecs_parameter/index.html index 43cce1aa1f..7958c6b652 100644 --- a/files/ko/web/media/formats/codecs_parameter/index.html +++ b/files/ko/web/media/formats/codecs_parameter/index.html @@ -1,7 +1,8 @@ --- title: 일반 미디어 타입에서 "codecs" 파라미터 사용하기 -slug: Web/Media/Formats/코덱파라미터 +slug: Web/Media/Formats/codecs_parameter translation_of: Web/Media/Formats/codecs_parameter +original_slug: Web/Media/Formats/코덱파라미터 ---
        {{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
        diff --git a/files/ko/web/media/formats/containers/index.html b/files/ko/web/media/formats/containers/index.html index d4e45c294a..1af00ff513 100644 --- a/files/ko/web/media/formats/containers/index.html +++ b/files/ko/web/media/formats/containers/index.html @@ -1,7 +1,8 @@ --- title: 미디어 컨테이너 포맷 (파일 타입) -slug: Web/Media/Formats/컨테이너 +slug: Web/Media/Formats/Containers translation_of: Web/Media/Formats/Containers +original_slug: Web/Media/Formats/컨테이너 ---

        오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. 이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.

        diff --git a/files/ko/web/media/formats/video_codecs/index.html b/files/ko/web/media/formats/video_codecs/index.html index 5cccc89329..4e9701b342 100644 --- a/files/ko/web/media/formats/video_codecs/index.html +++ b/files/ko/web/media/formats/video_codecs/index.html @@ -1,7 +1,8 @@ --- title: 웹 비디오 코덱 가이드 -slug: Web/Media/Formats/비디오코덱 +slug: Web/Media/Formats/Video_codecs translation_of: Web/Media/Formats/Video_codecs +original_slug: Web/Media/Formats/비디오코덱 ---

        압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:

        diff --git a/files/ko/web/performance/critical_rendering_path/index.html b/files/ko/web/performance/critical_rendering_path/index.html index 0dd28ed81c..010f6ecfa9 100644 --- a/files/ko/web/performance/critical_rendering_path/index.html +++ b/files/ko/web/performance/critical_rendering_path/index.html @@ -1,7 +1,8 @@ --- title: 중요 렌더링 경로 -slug: Web/Performance/중요_렌더링_경로 +slug: Web/Performance/Critical_rendering_path translation_of: Web/Performance/Critical_rendering_path +original_slug: Web/Performance/중요_렌더링_경로 ---

        {{draft}}

        diff --git a/files/ko/web/performance/how_browsers_work/index.html b/files/ko/web/performance/how_browsers_work/index.html index 473e30980d..346648524a 100644 --- a/files/ko/web/performance/how_browsers_work/index.html +++ b/files/ko/web/performance/how_browsers_work/index.html @@ -1,7 +1,8 @@ --- title: '웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가' -slug: Web/Performance/브라우저는_어떻게_동작하는가 +slug: Web/Performance/How_browsers_work translation_of: Web/Performance/How_browsers_work +original_slug: Web/Performance/브라우저는_어떻게_동작하는가 ---

        Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals.

        diff --git a/files/ko/web/progressive_web_apps/introduction/index.html b/files/ko/web/progressive_web_apps/introduction/index.html index e253c96ce9..9de0a22e10 100644 --- a/files/ko/web/progressive_web_apps/introduction/index.html +++ b/files/ko/web/progressive_web_apps/introduction/index.html @@ -1,6 +1,6 @@ --- title: 프로그레시브 웹 앱 소개 -slug: Web/Progressive_web_apps/소개 +slug: Web/Progressive_web_apps/Introduction tags: - PWA - js13kGames @@ -8,6 +8,7 @@ tags: - 프로그레시브 - 프로그레시브 웹 앱 translation_of: Web/Progressive_web_apps/Introduction +original_slug: Web/Progressive_web_apps/소개 ---
        {{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
        diff --git a/files/ko/web/progressive_web_apps/responsive/media_types/index.html b/files/ko/web/progressive_web_apps/responsive/media_types/index.html index 2c9fceaca0..3c907f9c9b 100644 --- a/files/ko/web/progressive_web_apps/responsive/media_types/index.html +++ b/files/ko/web/progressive_web_apps/responsive/media_types/index.html @@ -1,7 +1,8 @@ --- title: 미디어 -slug: Web/CSS/시작하기/미디어 +slug: Web/Progressive_web_apps/Responsive/Media_types translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/CSS/시작하기/미디어 ---

        {{ CSSTutorialTOC() }}

        diff --git a/files/ko/web/reference/api/index.html b/files/ko/web/reference/api/index.html index 363fa9d3e9..7ce64e1a32 100644 --- a/files/ko/web/reference/api/index.html +++ b/files/ko/web/reference/api/index.html @@ -1,12 +1,13 @@ --- title: Web API 설명집 -slug: Web/참조/API +slug: Web/Reference/API tags: - API - 대문 - 웹 - 편람 translation_of: Web/Reference/API +original_slug: Web/참조/API ---

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

        diff --git a/files/ko/web/reference/index.html b/files/ko/web/reference/index.html index f8d1a1dc35..5918ed9c1a 100644 --- a/files/ko/web/reference/index.html +++ b/files/ko/web/reference/index.html @@ -1,11 +1,12 @@ --- title: 웹 기술 문서 목록 -slug: Web/참조 +slug: Web/Reference tags: - Landing - Reference - Web translation_of: Web/Reference +original_slug: Web/참조 ---

        {{draft()}}
        오픈 웹은 많은 기술을 사용하여 구축됩니다. 이 기술들을 사용하기 위해서는 적절한 지식이 필요합니다.
        diff --git a/files/ko/web/svg/element/rect/index.html b/files/ko/web/svg/element/rect/index.html index 90a3d08d24..0447978f9b 100644 --- a/files/ko/web/svg/element/rect/index.html +++ b/files/ko/web/svg/element/rect/index.html @@ -1,7 +1,8 @@ --- title: -slug: Web/SVG/Element/사각형 +slug: Web/SVG/Element/rect translation_of: Web/SVG/Element/rect +original_slug: Web/SVG/Element/사각형 ---

        {{SVGRef}}
        diff --git a/files/ko/web/svg/svg_1.1_support_in_firefox/index.html b/files/ko/web/svg/svg_1.1_support_in_firefox/index.html index f8c31a2a8c..95ecedba2c 100644 --- a/files/ko/web/svg/svg_1.1_support_in_firefox/index.html +++ b/files/ko/web/svg/svg_1.1_support_in_firefox/index.html @@ -1,9 +1,10 @@ --- title: SVG in Firefox -slug: SVG_in_Firefox +slug: Web/SVG/SVG_1.1_Support_in_Firefox tags: - SVG translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +original_slug: SVG_in_Firefox ---

        Firefox 2는 더욱 폭넓은 Scalable Vector Graphics (SVG) 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 <textPath>입니다. -- 아래 참조.

        Firefox SVG는 SVG 1.1의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.

        diff --git a/files/ko/web/svg/tutorial/basic_shapes/index.html b/files/ko/web/svg/tutorial/basic_shapes/index.html index 8169e4c890..4d0307f57c 100644 --- a/files/ko/web/svg/tutorial/basic_shapes/index.html +++ b/files/ko/web/svg/tutorial/basic_shapes/index.html @@ -1,7 +1,8 @@ --- title: 기본 도형 -slug: Web/SVG/Tutorial/기본_도형 +slug: Web/SVG/Tutorial/Basic_Shapes translation_of: Web/SVG/Tutorial/Basic_Shapes +original_slug: Web/SVG/Tutorial/기본_도형 ---

        {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

        diff --git a/files/ko/web/svg/tutorial/getting_started/index.html b/files/ko/web/svg/tutorial/getting_started/index.html index 8a0b5c82b7..0e4bec9543 100644 --- a/files/ko/web/svg/tutorial/getting_started/index.html +++ b/files/ko/web/svg/tutorial/getting_started/index.html @@ -1,12 +1,13 @@ --- title: 시작하기 -slug: Web/SVG/Tutorial/시작하기 +slug: Web/SVG/Tutorial/Getting_Started tags: - SVG - - 'SVG:Tutorial' + - SVG:Tutorial - 초보자 - 튜토리얼 translation_of: Web/SVG/Tutorial/Getting_Started +original_slug: Web/SVG/Tutorial/시작하기 ---

        {{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

        diff --git a/files/ko/web/svg/tutorial/positions/index.html b/files/ko/web/svg/tutorial/positions/index.html index 391765175c..9d2bd8cf0b 100644 --- a/files/ko/web/svg/tutorial/positions/index.html +++ b/files/ko/web/svg/tutorial/positions/index.html @@ -1,7 +1,8 @@ --- title: 위치 -slug: Web/SVG/Tutorial/위치 +slug: Web/SVG/Tutorial/Positions translation_of: Web/SVG/Tutorial/Positions +original_slug: Web/SVG/Tutorial/위치 ---

        {{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

        diff --git a/files/ko/web/svg/tutorial/svg_and_css/index.html b/files/ko/web/svg/tutorial/svg_and_css/index.html index d8ca001fb2..421cb46488 100644 --- a/files/ko/web/svg/tutorial/svg_and_css/index.html +++ b/files/ko/web/svg/tutorial/svg_and_css/index.html @@ -1,9 +1,10 @@ --- title: SVG graphics -slug: Web/CSS/Getting_Started/SVG_graphics +slug: Web/SVG/Tutorial/SVG_and_CSS tags: - - 'CSS:Getting_Started' + - CSS:Getting_Started translation_of: Web/SVG/Tutorial/SVG_and_CSS +original_slug: Web/CSS/Getting_Started/SVG_graphics ---

        이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.

        SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.

        diff --git a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html index e15574b588..9ae214d84b 100644 --- a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -1,6 +1,6 @@ --- title: Introduction to using XPath in JavaScript -slug: Introduction_to_using_XPath_in_JavaScript +slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript tags: - Add-ons - DOM @@ -9,6 +9,7 @@ tags: - Web Development - XPath translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +original_slug: Introduction_to_using_XPath_in_JavaScript ---

        이 문서는 JavaScript 안, 확장기능, 웹사이트에서 XPath를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 DOM 3 XPath를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.

        diff --git a/files/ko/web/xslt/element/apply-imports/index.html b/files/ko/web/xslt/element/apply-imports/index.html index 9377bd2538..a3e2a34f57 100644 --- a/files/ko/web/xslt/element/apply-imports/index.html +++ b/files/ko/web/xslt/element/apply-imports/index.html @@ -1,9 +1,10 @@ --- title: apply-imports -slug: Web/XSLT/apply-imports +slug: Web/XSLT/Element/apply-imports tags: - XSLT_Reference translation_of: Web/XSLT/Element/apply-imports +original_slug: Web/XSLT/apply-imports ---

        {{ XsltRef() }}


        diff --git a/files/ko/web/xslt/element/apply-templates/index.html b/files/ko/web/xslt/element/apply-templates/index.html index fdb8662849..7e5a800932 100644 --- a/files/ko/web/xslt/element/apply-templates/index.html +++ b/files/ko/web/xslt/element/apply-templates/index.html @@ -1,9 +1,10 @@ --- title: apply-templates -slug: Web/XSLT/apply-templates +slug: Web/XSLT/Element/apply-templates tags: - XSLT_Reference translation_of: Web/XSLT/Element/apply-templates +original_slug: Web/XSLT/apply-templates ---

        {{ XsltRef() }}

        <xsl:apply-templates> 요소는 입력 트리 안 노드 집합을 선택하고 그 집합에 알맞은 템플릿을 적용하도록 처리기에게 지시합니다.

        diff --git a/files/ko/web/xslt/element/attribute-set/index.html b/files/ko/web/xslt/element/attribute-set/index.html index e4b34b6b21..9f9bb349fc 100644 --- a/files/ko/web/xslt/element/attribute-set/index.html +++ b/files/ko/web/xslt/element/attribute-set/index.html @@ -1,9 +1,10 @@ --- title: attribute-set -slug: Web/XSLT/attribute-set +slug: Web/XSLT/Element/attribute-set tags: - XSLT_Reference translation_of: Web/XSLT/Element/attribute-set +original_slug: Web/XSLT/attribute-set ---

        {{ XsltRef() }}

        <xsl:attribute-set> 요소는 CSS 안에 이름 붙인 스타일과 비슷한 방식으로 이름 붙인 속성 집합을 만듭니다. 그러면, 출력 문서에 전체로서 적용할 수 있습니다.

        diff --git a/files/ko/web/xslt/element/attribute/index.html b/files/ko/web/xslt/element/attribute/index.html index 1c348584f7..f4a75657d1 100644 --- a/files/ko/web/xslt/element/attribute/index.html +++ b/files/ko/web/xslt/element/attribute/index.html @@ -1,9 +1,10 @@ --- title: attribute -slug: Web/XSLT/attribute +slug: Web/XSLT/Element/attribute tags: - XSLT_Reference translation_of: Web/XSLT/Element/attribute +original_slug: Web/XSLT/attribute ---

        {{ XsltRef() }}

        <xsl:attribute> 요소는 스타일시트에서 접근할 수 있는 어떤 값을 써서 출력 문서에 속성을 만듭니다. 요소는 속성값을 자리 잡게 하는 출력 문서 요소 안에 정의한 것 가운데 처음이어야 합니다.

        diff --git a/files/ko/web/xslt/element/call-template/index.html b/files/ko/web/xslt/element/call-template/index.html index c5aa8c1a53..623ba72623 100644 --- a/files/ko/web/xslt/element/call-template/index.html +++ b/files/ko/web/xslt/element/call-template/index.html @@ -1,9 +1,10 @@ --- title: call-template -slug: Web/XSLT/call-template +slug: Web/XSLT/Element/call-template tags: - XSLT_Reference translation_of: Web/XSLT/Element/call-template +original_slug: Web/XSLT/call-template ---

        {{ XsltRef() }}

        <xsl:call-template> 요소는 이름 붙인 템플릿을 호출합니다.

        diff --git a/files/ko/web/xslt/element/choose/index.html b/files/ko/web/xslt/element/choose/index.html index ea615e7e15..cb8162c00a 100644 --- a/files/ko/web/xslt/element/choose/index.html +++ b/files/ko/web/xslt/element/choose/index.html @@ -1,9 +1,10 @@ --- title: choose -slug: Web/XSLT/choose +slug: Web/XSLT/Element/choose tags: - XSLT_Reference translation_of: Web/XSLT/Element/choose +original_slug: Web/XSLT/choose ---

        {{ XsltRef() }}

        <xsl:choose> 요소는 많은 선택 가운데 하나를 정의합니다. 그리고 절차형 언어(procedural language)의 스위치 문처럼 동작합니다.

        diff --git a/files/ko/web/xslt/element/comment/index.html b/files/ko/web/xslt/element/comment/index.html index 56b12a9968..33ab342b71 100644 --- a/files/ko/web/xslt/element/comment/index.html +++ b/files/ko/web/xslt/element/comment/index.html @@ -1,9 +1,10 @@ --- title: comment -slug: Web/XSLT/comment +slug: Web/XSLT/Element/comment tags: - XSLT_Reference translation_of: Web/XSLT/Element/comment +original_slug: Web/XSLT/comment ---

        {{ XsltRef() }}

        <xsl:comment> 요소는 출력 문서에 주석을 작성합니다. 오직 텍스트만 포함해야 합니다.

        diff --git a/files/ko/web/xslt/element/copy-of/index.html b/files/ko/web/xslt/element/copy-of/index.html index cfd00ae443..99619c2bba 100644 --- a/files/ko/web/xslt/element/copy-of/index.html +++ b/files/ko/web/xslt/element/copy-of/index.html @@ -1,9 +1,10 @@ --- title: copy-of -slug: Web/XSLT/copy-of +slug: Web/XSLT/Element/copy-of tags: - XSLT_Reference translation_of: Web/XSLT/Element/copy-of +original_slug: Web/XSLT/copy-of ---

        {{ XsltRef() }}

        <xsl:copy-of> 요소는 select 속성이 출력 문서에 무엇을 지정하든지 (자손 노드를 포함하여) 깊게 복사(deep copy)합니다.

        diff --git a/files/ko/web/xslt/element/copy/index.html b/files/ko/web/xslt/element/copy/index.html index 7d6e480167..9d88349f6f 100644 --- a/files/ko/web/xslt/element/copy/index.html +++ b/files/ko/web/xslt/element/copy/index.html @@ -1,9 +1,10 @@ --- title: copy -slug: Web/XSLT/copy +slug: Web/XSLT/Element/copy tags: - XSLT_Reference translation_of: Web/XSLT/Element/copy +original_slug: Web/XSLT/copy ---

        {{ XsltRef() }}

        <xsl:copy> 요소는 출력 문서에 현재 노드의 노드와 어떤 관련 이름공간 노드만을 얕게 복사(shallow copy) 전달합니다. 속성이나 자식은 복사하지 않습니다.

        diff --git a/files/ko/web/xslt/element/decimal-format/index.html b/files/ko/web/xslt/element/decimal-format/index.html index 83e51a2e90..3547ebce4f 100644 --- a/files/ko/web/xslt/element/decimal-format/index.html +++ b/files/ko/web/xslt/element/decimal-format/index.html @@ -1,9 +1,10 @@ --- title: decimal-format -slug: Web/XSLT/decimal-format +slug: Web/XSLT/Element/decimal-format tags: - XSLT_Reference translation_of: Web/XSLT/Element/decimal-format +original_slug: Web/XSLT/decimal-format ---

        {{ XsltRef() }}

        <xsl:decimal-format> 요소는 diff --git a/files/ko/web/xslt/element/fallback/index.html b/files/ko/web/xslt/element/fallback/index.html index af407f4512..df4ad29dc2 100644 --- a/files/ko/web/xslt/element/fallback/index.html +++ b/files/ko/web/xslt/element/fallback/index.html @@ -1,9 +1,10 @@ --- title: fallback -slug: Web/XSLT/fallback +slug: Web/XSLT/Element/fallback tags: - XSLT_Reference translation_of: Web/XSLT/Element/fallback +original_slug: Web/XSLT/fallback ---

        {{ XsltRef() }}

        <xsl:fallback> 요소는 주어진 확장(이나 결국에는 새 버전) 요소에서 지원하지 않으면 쓸 템플릿을 지정합니다.

        diff --git a/files/ko/web/xslt/element/for-each/index.html b/files/ko/web/xslt/element/for-each/index.html index 6beb713190..12e3c53000 100644 --- a/files/ko/web/xslt/element/for-each/index.html +++ b/files/ko/web/xslt/element/for-each/index.html @@ -1,9 +1,10 @@ --- title: for-each -slug: Web/XSLT/for-each +slug: Web/XSLT/Element/for-each tags: - XSLT_Reference translation_of: Web/XSLT/Element/for-each +original_slug: Web/XSLT/for-each ---

        {{ XsltRef() }}

        <xsl:for-each> 요소는 노드 집합을 선택하고 같은 방식으로 각 노드를 처리합니다. 노드 집합을 되풀이하(iterate)거나 현재 노드를 바꾸는데 자주 씁니다. 하나 이상의 <xsl:sort> 요소가 이 요소의 자식으로 나타나면, 처리에 앞서 정렬을 합니다. 그렇지 않으면, 노드는 문서 순으로 처리합니다.

        diff --git a/files/ko/web/xslt/element/if/index.html b/files/ko/web/xslt/element/if/index.html index 2c56b7d218..062d4b661a 100644 --- a/files/ko/web/xslt/element/if/index.html +++ b/files/ko/web/xslt/element/if/index.html @@ -1,9 +1,10 @@ --- title: if -slug: Web/XSLT/if +slug: Web/XSLT/Element/if tags: - XSLT_Reference translation_of: Web/XSLT/Element/if +original_slug: Web/XSLT/if ---

        {{ XsltRef() }}

        <xsl:if> 요소는 test 속성과 템플릿을 포함합니다. test 속성을 참으로 평가하면, 템플릿을 처리합니다. 이것은 다른 언어의 if 문과 비슷합니다. 그러나, <tt>if-then-else</tt> 문의 기능을 다하기 위해 <xsl:when>과 <xsl:otherwise> 자식이 하나씩 있는 <xsl:choose> 요소를 씁니다.

        diff --git a/files/ko/web/xslt/element/import/index.html b/files/ko/web/xslt/element/import/index.html index 5a469656cb..cc21696d56 100644 --- a/files/ko/web/xslt/element/import/index.html +++ b/files/ko/web/xslt/element/import/index.html @@ -1,9 +1,10 @@ --- title: import -slug: Web/XSLT/import +slug: Web/XSLT/Element/import tags: - XSLT_Reference translation_of: Web/XSLT/Element/import +original_slug: Web/XSLT/import ---

        {{ XsltRef() }}

        <xsl:import> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트로 가져오는 역할을 하는 최상위 요소입니다. 대체로, 가져올 스타일시트의 컨텐트는 가져오는 스타일시트의 컨텐트보다 가져오기 우선순위가 낮습니다. 이는 포함되는 스타일시트의 컨텐트가 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같은 <xsl:include>와는 뚜렷이 다릅니다.

        diff --git a/files/ko/web/xslt/element/include/index.html b/files/ko/web/xslt/element/include/index.html index 965d03a15f..c630a24fa9 100644 --- a/files/ko/web/xslt/element/include/index.html +++ b/files/ko/web/xslt/element/include/index.html @@ -1,9 +1,10 @@ --- title: include -slug: Web/XSLT/include +slug: Web/XSLT/Element/include tags: - XSLT_Reference translation_of: Web/XSLT/Element/include +original_slug: Web/XSLT/include ---

        {{ XsltRef() }}

        <xsl:include> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트에 합칩니다. <xsl:import>와는 달리, 포함되는 스타일시트의 컨텐트는 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같습니다.

        diff --git a/files/ko/web/xslt/element/key/index.html b/files/ko/web/xslt/element/key/index.html index 733196810d..b90dc027fb 100644 --- a/files/ko/web/xslt/element/key/index.html +++ b/files/ko/web/xslt/element/key/index.html @@ -1,9 +1,10 @@ --- title: key -slug: Web/XSLT/key +slug: Web/XSLT/Element/key tags: - XSLT_Reference translation_of: Web/XSLT/Element/key +original_slug: Web/XSLT/key ---

        {{ XsltRef() }}

        <xsl:key> 요소는 key( ) 함수가 있는 스타일시트 어디서나 쓸 수 있는 이름 붙은 키를 선언합니다.

        diff --git a/files/ko/web/xslt/element/message/index.html b/files/ko/web/xslt/element/message/index.html index d533a2d3c7..da7d0dc5e3 100644 --- a/files/ko/web/xslt/element/message/index.html +++ b/files/ko/web/xslt/element/message/index.html @@ -1,9 +1,10 @@ --- title: message -slug: Web/XSLT/message +slug: Web/XSLT/Element/message tags: - XSLT_Reference translation_of: Web/XSLT/Element/message +original_slug: Web/XSLT/message ---

        {{ XsltRef() }}

        <xsl:message> 요소는 (NS에서 자바스크립트 콘솔에) 메시지를 출력하고 선택에 따라 스타일시트 실행을 끝냅니다. 디버깅에 유용할 수 있습니다.

        diff --git a/files/ko/web/xslt/element/namespace-alias/index.html b/files/ko/web/xslt/element/namespace-alias/index.html index e085abc4e7..2eecc31677 100644 --- a/files/ko/web/xslt/element/namespace-alias/index.html +++ b/files/ko/web/xslt/element/namespace-alias/index.html @@ -1,9 +1,10 @@ --- title: namespace-alias -slug: Web/XSLT/namespace-alias +slug: Web/XSLT/Element/namespace-alias tags: - XSLT_Reference translation_of: Web/XSLT/Element/namespace-alias +original_slug: Web/XSLT/namespace-alias ---

        {{ XsltRef() }}

        <xsl:namespace-alias> 요소는 스타일시트 이름공간을 출력 트리의 다른 이름공간으로 매기는(map) 데 드물게 쓰는 방안(device)입니다. 이 요소의 가장 평범한 쓰임은 다른 스타일시트로부터 스타일시트를 만드는 것입니다. 보통 xsl:가 접두사로 붙은 (결과 트리에 단순히 복사해도 좋을) LRE(literal result element)를 처리기가 오해하는 것을 막기 위해, 결과 트리의 XSLT 이름공간에 적당하게 도로 다시 바꿀 임시 이름공간을 할당합니다.

        diff --git a/files/ko/web/xslt/element/number/index.html b/files/ko/web/xslt/element/number/index.html index b822625a0e..dee0854a78 100644 --- a/files/ko/web/xslt/element/number/index.html +++ b/files/ko/web/xslt/element/number/index.html @@ -1,9 +1,10 @@ --- title: number -slug: Web/XSLT/number +slug: Web/XSLT/Element/number tags: - XSLT_Reference translation_of: Web/XSLT/Element/number +original_slug: Web/XSLT/number ---

        {{ XsltRef() }}

        <xsl:number> 요소는 숫자를 연속으로 셉니다. 또한 숫자를 빠르게 구성하는(format) 데도 쓸 수 있습니다.

        diff --git a/files/ko/web/xslt/element/otherwise/index.html b/files/ko/web/xslt/element/otherwise/index.html index 50249dc0b4..166fccd78a 100644 --- a/files/ko/web/xslt/element/otherwise/index.html +++ b/files/ko/web/xslt/element/otherwise/index.html @@ -1,9 +1,10 @@ --- title: otherwise -slug: Web/XSLT/otherwise +slug: Web/XSLT/Element/otherwise tags: - XSLT_Reference translation_of: Web/XSLT/Element/otherwise +original_slug: Web/XSLT/otherwise ---

        {{ XsltRef() }}

        <xsl:otherwise> 요소는 아무런 <xsl:when> 조건도 적용하지 않았을 때 취하면 좋을 동작을 정의하는 데 씁니다. 다른 프로그래밍 언어의 else나 default 경우와 비슷합니다.

        diff --git a/files/ko/web/xslt/element/output/index.html b/files/ko/web/xslt/element/output/index.html index 97baf3f433..396209b19f 100644 --- a/files/ko/web/xslt/element/output/index.html +++ b/files/ko/web/xslt/element/output/index.html @@ -1,9 +1,10 @@ --- title: output -slug: Web/XSLT/output +slug: Web/XSLT/Element/output tags: - XSLT_Reference translation_of: Web/XSLT/Element/output +original_slug: Web/XSLT/output ---

        {{ XsltRef() }}

        <xsl:output> 요소는 출력 문서의 특성을 조절합니다. method 속성이 있는 이 요소가 Netscape에서 정확하게 기능하도록 쓸 수 있어야 합니다. 7.0 현재, method="text"는 기대한 대로 동작합니다.

        diff --git a/files/ko/web/xslt/element/param/index.html b/files/ko/web/xslt/element/param/index.html index e1bcf36e19..647bc6de91 100644 --- a/files/ko/web/xslt/element/param/index.html +++ b/files/ko/web/xslt/element/param/index.html @@ -1,9 +1,10 @@ --- title: param -slug: Web/XSLT/param +slug: Web/XSLT/Element/param tags: - XSLT_Reference translation_of: Web/XSLT/Element/param +original_slug: Web/XSLT/param ---

        {{ XsltRef() }}

        <xsl:param> 요소는 이름과 선택에 따라 기본값으로 매개변수를 설정합니다. 최상위 요소로 쓸 때, 매개변수는 전역입니다. <xsl:template> 요소 안에서 쓰면, 매개변수는 그 템플릿에 대해 지역입니다. 이 경우에 요소는 템플릿의 첫 자식 요소여야 합니다.

        diff --git a/files/ko/web/xslt/element/preserve-space/index.html b/files/ko/web/xslt/element/preserve-space/index.html index 771ffe81d6..d8f881ca93 100644 --- a/files/ko/web/xslt/element/preserve-space/index.html +++ b/files/ko/web/xslt/element/preserve-space/index.html @@ -1,9 +1,10 @@ --- title: preserve-space -slug: Web/XSLT/preserve-space +slug: Web/XSLT/Element/preserve-space tags: - XSLT_Reference translation_of: Web/XSLT/Element/preserve-space +original_slug: Web/XSLT/preserve-space ---

        {{ XsltRef() }}

        <xsl:preserve-space> 요소는 공백을 보존하면 좋을 소스 문서의 요소를 정의합니다. 하나 이상의 요소가 있으면, 공백 문자로 이름을 구분하세요. 공백 보존하기가 기본 설정이므로 이 요소는 오직 <xsl:strip-space> 요소와 거꾸로 동작하기 위해 쓸 필요가 있습니다.

        diff --git a/files/ko/web/xslt/element/processing-instruction/index.html b/files/ko/web/xslt/element/processing-instruction/index.html index ad1c6eaaf6..7050401821 100644 --- a/files/ko/web/xslt/element/processing-instruction/index.html +++ b/files/ko/web/xslt/element/processing-instruction/index.html @@ -1,9 +1,10 @@ --- title: processing-instruction -slug: Web/XSLT/processing-instruction +slug: Web/XSLT/Element/processing-instruction tags: - XSLT_Reference translation_of: Web/XSLT/Element/processing-instruction +original_slug: Web/XSLT/processing-instruction ---

        {{ XsltRef() }}

        <xsl:processing-instruction> 요소는 출력 문서에 처리 명령을 씁니다.

        diff --git a/files/ko/web/xslt/element/sort/index.html b/files/ko/web/xslt/element/sort/index.html index 22217ec61f..878933a511 100644 --- a/files/ko/web/xslt/element/sort/index.html +++ b/files/ko/web/xslt/element/sort/index.html @@ -1,9 +1,10 @@ --- title: sort -slug: Web/XSLT/sort +slug: Web/XSLT/Element/sort tags: - XSLT_Reference translation_of: Web/XSLT/Element/sort +original_slug: Web/XSLT/sort ---

        {{ XsltRef() }}

        <xsl:sort> 요소는 <xsl:apply-templates>나 <xsl:for-each>가 선택한 노드에 정렬키를 정의하고 노드를 처리할 순서를 결정합니다.

        diff --git a/files/ko/web/xslt/element/strip-space/index.html b/files/ko/web/xslt/element/strip-space/index.html index 7bbc485afd..3809c15ef1 100644 --- a/files/ko/web/xslt/element/strip-space/index.html +++ b/files/ko/web/xslt/element/strip-space/index.html @@ -1,9 +1,10 @@ --- title: strip-space -slug: Web/XSLT/strip-space +slug: Web/XSLT/Element/strip-space tags: - XSLT_Reference translation_of: Web/XSLT/Element/strip-space +original_slug: Web/XSLT/strip-space ---

        {{ XsltRef() }}

        <xsl:strip-space> 요소는 공백을 지웠으면 하는 소스 문서의 요소를 정의합니다.

        diff --git a/files/ko/web/xslt/element/stylesheet/index.html b/files/ko/web/xslt/element/stylesheet/index.html index 0119cec645..14357afada 100644 --- a/files/ko/web/xslt/element/stylesheet/index.html +++ b/files/ko/web/xslt/element/stylesheet/index.html @@ -1,9 +1,10 @@ --- title: stylesheet -slug: Web/XSLT/stylesheet +slug: Web/XSLT/Element/stylesheet tags: - XSLT_Reference translation_of: Web/XSLT/Element/stylesheet +original_slug: Web/XSLT/stylesheet ---

        {{ XsltRef() }}

        <xsl:stylesheet>(나 동등한 <xsl:transform>) 요소는 스타일시트의 최외곽 요소입니다.

        diff --git a/files/ko/web/xslt/element/template/index.html b/files/ko/web/xslt/element/template/index.html index 1ce4a66d2b..aef6bd013d 100644 --- a/files/ko/web/xslt/element/template/index.html +++ b/files/ko/web/xslt/element/template/index.html @@ -1,9 +1,10 @@ --- title: template -slug: Web/XSLT/template +slug: Web/XSLT/Element/template tags: - XSLT_Reference translation_of: Web/XSLT/Element/template +original_slug: Web/XSLT/template ---

        {{ XsltRef() }}

        <xsl:template> 요소는 출력 생성 템플릿을 정의합니다. 이 요소는 match 속성이나 name 속성 집합이 있어야 합니다.

        diff --git a/files/ko/web/xslt/element/text/index.html b/files/ko/web/xslt/element/text/index.html index 71bd6eceda..ce02fc6f17 100644 --- a/files/ko/web/xslt/element/text/index.html +++ b/files/ko/web/xslt/element/text/index.html @@ -1,9 +1,10 @@ --- title: text -slug: Web/XSLT/text +slug: Web/XSLT/Element/text tags: - XSLT_Reference translation_of: Web/XSLT/Element/text +original_slug: Web/XSLT/text ---

        {{ XsltRef() }}

        <xsl:text> 요소는 출력 트리에 리터럴(literal) 텍스트를 씁니다. #PCDATA, 리터럴 텍스트, 엔티티 참조를 포함할 지도 모릅니다.

        diff --git a/files/ko/web/xslt/element/transform/index.html b/files/ko/web/xslt/element/transform/index.html index 8071ebdad3..b1c398999c 100644 --- a/files/ko/web/xslt/element/transform/index.html +++ b/files/ko/web/xslt/element/transform/index.html @@ -1,9 +1,10 @@ --- title: transform -slug: Web/XSLT/transform +slug: Web/XSLT/Element/transform tags: - XSLT_Reference translation_of: Web/XSLT/Element/transform +original_slug: Web/XSLT/transform ---

        {{ XsltRef() }}

        <xsl:transform> 요소는 <xsl:stylesheet> 요소와 정확히 같습니다.

        diff --git a/files/ko/web/xslt/element/value-of/index.html b/files/ko/web/xslt/element/value-of/index.html index 90f1777bed..1020c96edb 100644 --- a/files/ko/web/xslt/element/value-of/index.html +++ b/files/ko/web/xslt/element/value-of/index.html @@ -1,9 +1,10 @@ --- title: value-of -slug: Web/XSLT/value-of +slug: Web/XSLT/Element/value-of tags: - XSLT_Reference translation_of: Web/XSLT/Element/value-of +original_slug: Web/XSLT/value-of ---

        {{ XsltRef() }}

        <xsl:value-of> 요소는 XPath 식을 평가하여 그것을 문자열로 바꾸고 문자열을 결과 트리에 씁니다.

        diff --git a/files/ko/web/xslt/element/variable/index.html b/files/ko/web/xslt/element/variable/index.html index 8568f70b20..ba1f44730a 100644 --- a/files/ko/web/xslt/element/variable/index.html +++ b/files/ko/web/xslt/element/variable/index.html @@ -1,9 +1,10 @@ --- title: variable -slug: Web/XSLT/variable +slug: Web/XSLT/Element/variable tags: - XSLT_Reference translation_of: Web/XSLT/Element/variable +original_slug: Web/XSLT/variable ---

        {{ XsltRef() }}

        <xsl:variable> 요소는 스타일시트에 전역 변수나 지역 변수를 선언하고 그 변수에 값을 줍니다. XSLT가 부작용(side-effect)을 허용하지 않기 때문에, 변수값을 한 번 주면 그 변수는 범위(scope)를 벗어날 때까지 같은 값입니다.

        diff --git a/files/ko/web/xslt/element/when/index.html b/files/ko/web/xslt/element/when/index.html index 4d5f52d9c3..7d1d5dcf0b 100644 --- a/files/ko/web/xslt/element/when/index.html +++ b/files/ko/web/xslt/element/when/index.html @@ -1,9 +1,10 @@ --- title: when -slug: Web/XSLT/when +slug: Web/XSLT/Element/when tags: - XSLT_Reference translation_of: Web/XSLT/Element/when +original_slug: Web/XSLT/when ---

        {{ XsltRef() }}

        <xsl:when> 요소는 항상 case 문처럼 동작하는 <xsl:choose> 요소 안에 나타납니다.

        diff --git a/files/ko/web/xslt/element/with-param/index.html b/files/ko/web/xslt/element/with-param/index.html index cd96049cc5..78e2dedd60 100644 --- a/files/ko/web/xslt/element/with-param/index.html +++ b/files/ko/web/xslt/element/with-param/index.html @@ -1,9 +1,10 @@ --- title: with-param -slug: Web/XSLT/with-param +slug: Web/XSLT/Element/with-param tags: - XSLT_Reference translation_of: Web/XSLT/Element/with-param +original_slug: Web/XSLT/with-param ---

        {{ XsltRef() }}

        <xsl:with-param> 요소는 템플릿에 건네는 매개변수 값을 지정합니다.

        diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html index c3ee407348..18932af57d 100644 --- a/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html +++ b/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html @@ -1,10 +1,11 @@ --- title: The XSLT/JavaScript Interface in Gecko -slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko +slug: Web/XSLT/XSLT_JS_interface_in_Gecko tags: - DOM - XSLT translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko +original_slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko ---
        1. 개요
          2. diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html index dd74a5998d..0c34b2bffb 100644 --- a/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html +++ b/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html @@ -1,7 +1,8 @@ --- title: Introduction -slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction +slug: Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction +original_slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction ---

          개요

          XSLT를 지원하는 현대의 브라우저를 가지고, 개발자는 XSLT가 제공하는 힘에 접근하기 위해 자바스크립트를 지금 사용할 수 있다. 자바스크립트는 웹 프로그램이 XML자료를 로드하고, XSLT를 통해 표현가능한 형태로 처리하고 존재하는 문서안에 넣는 것을 가능하게 한다. XML자료는 아무런 표현자료 없이 오직 날 정보만을 포함하므로, 다이얼업에서도 빠르게 로드할 수 있다.

          diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html index fb2f456e70..d4bad4d57f 100644 --- a/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html +++ b/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html @@ -1,7 +1,8 @@ --- title: Setting Parameters -slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters +slug: Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +original_slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters ---

          Parameter 설정

          이미 코딩된 .xsl과 .xml 파일을 이용하여 변환을 실행하는 것은 꽤 쓸모있는데, .xml파일을 JavaScript로부터 설정하는 것은 좀 더 쓸모있다.예로, JavaScript와 XSLT는 XML데이터를 정렬하여 표시하는 데 쓸 수 있다. 정렬은 오름차순과 내림차순을 바꿀 수 있어야 할 것이다. XSLT는 xsl:param 요소를 제공하는데, 그것은 xsl:stylesheet 요소의 자식이다. XSLTProcessor()는 이 파라메터와 상호작용하기 위해 3가지 JavaScript 메소드를 제공한다: setParameter, getParameter, removeParameter.

          -- cgit v1.2.3-54-g00ecf