diff options
Diffstat (limited to 'files/ko/web')
258 files changed, 5328 insertions, 9363 deletions
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..c192bad9c0 --- /dev/null +++ b/files/ko/web/api/ambient_light_events/index.html @@ -0,0 +1,65 @@ +--- +title: 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 +--- +<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> + +<p>주변의 빛을 감지하는 이벤트를 활용해서 웹페이지나 어플리케이션이 주변 빛의 세기를 감지할 수 있습니다. 사용자 인터페이스의 색상 대비나 사진의 노출을 변경하는 용도로 사용할 수 있습니다.</p> + +<h2 id="빛_이벤트">빛 이벤트</h2> + +<p>기기의 빛 센서가 빛의 변화를 감지하면 브라우저에 변화를 전달합니다. 브라우저가 이러한 알림을 받으면 정확한 빛의 세기를 알려주는 {{domxref("DeviceLightEvent")}} 이벤트를 발생시킵니다.</p> + +<p>이 이벤트는 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드 ({{event("devicelight")}} 이벤트 이름 사용)를 사용하거나 {{domxref("window.ondevicelight")}} 속성에 이벤트 핸들러를 사용함으로서 <code>window</code> 객체 수준에서 캡춰됩니다.</p> + +<p>캡춰가 되면 이벤트 객체의 {{domxref("DeviceLightEvent.value")}} 속성을 통해서 럭스(lux) 단위의 빛의 세기를 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">window.addEventListener('devicelight', function(event) { + var html = document.getElementsByTagName('html')[0]; + + if (event.value < 50) { + html.classList.add('darklight'); + html.classList.remove('brightlight'); + } else { + html.classList.add('brightlight'); + html.classList.remove('darklight'); + } +});</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}</td> + <td>{{ Spec2('AmbientLight') }}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.DeviceLightEvent")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{event("devicelight")}}</li> +</ul> diff --git a/files/ko/web/api/analysernode/index.html b/files/ko/web/api/analysernode/index.html index a76feaf59c..dcffff0050 100644 --- a/files/ko/web/api/analysernode/index.html +++ b/files/ko/web/api/analysernode/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/AnalyserNode <p><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 프로퍼티.<em> </em></p> <dl> - <dt><span id="cke_bm_91S" style="display: none;"> </span>{{domxref("AnalyserNode.fftSize")}}</dt> + <dt><span id="cke_bm_91S" class="hidden"> </span>{{domxref("AnalyserNode.fftSize")}}</dt> <dd>부호가 없는(unsigned long value) 주파수 영역에서의 전체 크기의 값을 나타내기 위한 푸리에 변환의 값의 크기를 나타낸다. (대략적으로 설명을 하면 해당 주파수영역을 보는데 얼마나 세밀하게 데이터를 볼것인지를 나타낸다. 클수록 세밀하지만 시간이 오래걸리고 작으면 빨리한다.)</dd> <dt> </dt> <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt> 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..eb3811f226 --- /dev/null +++ b/files/ko/web/api/battery_status_api/index.html @@ -0,0 +1,76 @@ +--- +title: Battery Status API +slug: Web/API/Battery_Status_API +tags: + - API + - Apps + - Battery API + - Battery Status API + - Obsolete + - 가이드 + - 개요 + - 모바일 + - 배터리 + - 어플리케이션 +translation_of: Web/API/Battery_Status_API +original_slug: WebAPI/Battery_Status +--- +<div>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</div> + +<p><strong>Battery API </strong>만큼이나 자주 언급되는 <strong>Battery Status API</strong>는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.</p> + +<p>Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니다. 이는 {{domxref("BatteryManager")}} 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{event("chargingchange")}} 와 {{event("levelchange")}} 이벤트가 발생하면 완료 됩니다.</p> + +<pre class="brush: js notranslate">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(); +</pre> + +<p>명세서의 예제도 <strong><a href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction" title="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">확인</a></strong>해보세요.</p> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Battery API")}}</td> + <td>{{Spec2("Battery API")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 만약 데이터의 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 확인하고 pull 요청을 우리에게 보내세요.</div> + +<p>{{Compat("api.BatteryManager")}}</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Using the Battery API</a></li> + <li>{{domxref("BatteryManager")}}</li> + <li>{{domxref("window.navigator.battery","navigator.battery")}}</li> +</ul> diff --git a/files/ko/web/events/message/index.html b/files/ko/web/api/broadcastchannel/message_event/index.html index 1796b8ee0c..c08ff98a17 100644 --- a/files/ko/web/events/message/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 --- <p>메시지 이벤트는 메시지가 수신되었음을 알리는 메시지, {{domxref("WebSocket")}}, {{domxref("RTCDataConnection")}} 또는 {{domxref("BroadcastChannel")}} 개체를 알려 줍니다.</p> 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..ca7552e76b --- /dev/null +++ b/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,54 @@ +--- +title: A basic ray-caster +slug: Web/API/Canvas_API/A_basic_ray-caster +tags: + - Advanced + - Canvas + - Example + - Graphics + - HTML + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +original_slug: A_Basic_RayCaster +--- +<div>{{CanvasSidebar}}</div> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p> + +<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Open in new window</a></strong></p> + +<h2 id="Why.3F" name="Why.3F">Why?</h2> + +<p>After realizing, to my delight, that the nifty <code><canvas></code> element I'd been <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">reading about</a> was not only soon to be supported in Firefox, but was <strong>already</strong> supported in the current version of Safari, I had to try a little experiment.</p> + +<p>The canvas <a href="/en-US/docs/Web/API/Canvas_API">overview</a> and <a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">tutorial</a> 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.</p> + +<h2 id="How.3F" name="How.3F">How?</h2> + +<p>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 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">get to that</a>, and I wanted to see if I could do this.</p> + +<p>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.</p> + +<p>The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMothe<em>Tricks of the Game Programming Gurus</em> book (<small>ISBN: 0672305070</small>), and a <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a> 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.</p> + +<h2 id="Results" name="Results">Results</h2> + +<p>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.</p> + +<p>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. =)</p> + +<h2 id="The_RayCaster" name="The_RayCaster">The ray-caster</h2> + +<p>The nice people here have manually copied my files up so you can take a <a href="http://mdn.github.io/canvas-raycaster/">look</a>, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).</p> + +<p>So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <code><canvas></code> element and enjoy!<br> + <br> + <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> +</ul> diff --git a/files/ko/web/html/canvas/index.html b/files/ko/web/api/canvas_api/index.html index bbe466e58d..2cf311cc8b 100644 --- a/files/ko/web/html/canvas/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 --- <div>{{CanvasSidebar}}</div> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}}</div> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <p>{{HTMLElement("canvas")}} 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.</p> <p>도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.</p> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}}</div> diff --git a/files/ko/web/html/canvas/tutorial/compositing/index.html b/files/ko/web/api/canvas_api/tutorial/compositing/index.html index 108c493d9d..7c86f31582 100644 --- a/files/ko/web/html/canvas/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 --- <p>이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데, <code>globalCompositeOperation</code> 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.</p> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> 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..e4bdca4564 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,165 @@ +--- +title: 텍스트 그리기 +slug: Web/API/Canvas_API/Tutorial/Drawing_text +tags: + - HTML + - HTML:Canvas + - NeedsContent +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +original_slug: Drawing_text_using_a_canvas +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> + +<div class="summary"> +<p>이전 챕터에서 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">스타일과 컬러를 적용하는 방법</a>에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.</p> +</div> + +<h2 id="텍스트_그리기">텍스트 그리기</h2> + +<p>캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> + <dd>주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> + <dd>주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다.</dd> +</dl> + +<h3 id="fillText_예제"><code>fillText</code> 예제</h3> + +<p>텍스트는 현재의 <code>fillStyle</code>을 사용하여 채워집니다.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.fillText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> + +<h3 id="strokeText_예제"><code>strokeText</code> 예제</h3> + +<p>텍스트는 현재의 <code>strokeStyle</code>을 이용하여 채워집니다.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.strokeText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> + +<h2 id="텍스트_스타일_적용하기">텍스트 스타일 적용하기</h2> + +<p> 위의 예제에서 우리는 이미 텍스트를 기본 사이즈를 키우기 위하여 <code>font</code> 프로퍼티를 사용하였습니다. 그리고 캔버스에 표시되는 텍스트를 조정할 수 있는 속성이 더 있습니다. </p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> + <dd>텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}} 프로퍼티와 동일한구문을 사용합니다. 기본값으로 sans-serif의 10px가 설정되어 있습니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt> + <dd>텍스트 정렬 설정. 사용가능한 값: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>center</code>. 기본 값은 <code>start</code> 입니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt> + <dd>베이스라인 정렬 설정. 사용가능한 값: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. 기본 값은 <code>alphabetic</code> 입니다</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt> + <dd>글자 방향. 사용가능한 값: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. 기본 값은 <code>inherit</code> 입니다.</dd> +</dl> + +<p>만약 CSS를 다뤄보신적이 있다면 이러한 프로퍼티들은 익숙하실겁니다.</p> + +<p>다음에 나오는 <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> 예제 다이어그램은 <code>textBaseline</code>를 이용하여 다양한 베이스라인 설정을 보여줍니다.<img alt="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." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p> + +<h3 id="textBaseline_예제">textBaseline 예제</h3> + +<p>아래의 코드를 수정하여 캔버스에서 어떻게 바뀌는지 실시간으로 확인해 보세요.</p> + +<pre class="brush: js;highlight[2]">ctx.font = '48px serif'; +ctx.textBaseline = 'hanging'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = "48px serif"; +ctx.textBaseline = "hanging"; +ctx.strokeText("Hello world", 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="어드밴스드_텍스트_측정">어드밴스드 텍스트 측정</h2> + +<p>만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> + <dd>현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 {{domxref("TextMetrics")}} 객체 리턴. </dd> +</dl> + +<p>다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.</p> + +<pre class="brush: js;highlight[3]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var text = ctx.measureText('foo'); // TextMetrics object + text.width; // 16; +} +</pre> + +<h2 id="Gecko_사용시_주의점">Gecko 사용시 주의점</h2> + +<p>Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">prefixed APIs</a>가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다. </p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/finale/index.html b/files/ko/web/api/canvas_api/tutorial/finale/index.html index 1241680c5c..8a4ef4650e 100644 --- a/files/ko/web/html/canvas/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 --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> diff --git a/files/ko/web/html/canvas/tutorial/index.html b/files/ko/web/api/canvas_api/tutorial/index.html index 03077163aa..3886ef9cf1 100644 --- a/files/ko/web/html/canvas/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 --- <div>{{CanvasSidebar}}</div> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> diff --git a/files/ko/web/html/canvas/tutorial/변형/index.html b/files/ko/web/api/canvas_api/tutorial/transformations/index.html index b93747b581..4566e38e0c 100644 --- a/files/ko/web/html/canvas/tutorial/변형/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/변형 --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div> diff --git a/files/ko/web/html/canvas/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/html/canvas/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 --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div> 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..90a96302c0 --- /dev/null +++ b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,29 @@ +--- +title: 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 +--- +<p>엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.</p> + +<h3 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">공간을 얼마나 차지하나요?</h3> + +<p>표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, <code><a href="/en/DOM/element.offsetWidth" title="en/DOM/element.offsetWidth">offsetWidth</a></code>와 <code><a href="/en/DOM/element.offsetHeight" title="en/DOM/element.offsetHeight">offsetHeight</a> 속성을 사용하세요:</code></p> + +<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> + +<h3 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">보이는 컨텐트의 크기는요?</h3> + +<p>패딩은 포함하되 경계선, 여백, 스크롤바는 포함시키지 않고 보이는 컨텐트가 실제로 차지하는 공간이 알고 싶다면, <code><a href="/en/DOM/element.clientWidth" title="en/DOM/element.clientWidth">clientWidth</a></code>와 <code><a href="/en/DOM/element.clientHeight" title="en/DOM/element.clientHeight">clientHeight</a></code> 속성을 사용하세요:</p> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + +<h3 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">컨텐트는 얼마나 크나요?</h3> + +<p>컨텐트의 실제 크기를 알고 싶다면(보여지는 부분만이 아닌 전체 컨텐트 크기), <code><a href="/en/DOM/element.scrollWidth" title="en/DOM/element.scrollWidth">scrollWidth</a></code>와 <code><a href="/en/DOM/element.scrollHeight" title="en/DOM/element.scrollHeight">scrollHeight</a></code> 속성을 사용하세요. 이 속성들은 엘리먼트 컨텐트의 전체 크기에 해당하는 너비와 높이를 반환합니다. 보여지는 영역이 작아서 스크롤바를 사용하고 있다해도 관계없습니다.</p> + +<p>예를 들어, 600x400 픽셀 크기의 엘리먼트가 300x300 픽셀의 스크롤박스에서 보여진다면 <code>scrollWidth</code>는 600을, <code>scrollHeight</code>는 400을 각각 반환합니다.</p> + +<h3 id="References" name="References">참고자료</h3> + +<p><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></p> 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..974b5bb659 --- /dev/null +++ b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html @@ -0,0 +1,137 @@ +--- +title: 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 +--- +<p>{{SeeCompatTable}}</p> +<h2 id="Summary">Summary</h2> +<p>Screen orientation 은 <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">device orientation</a> 과는 조금 다르다. 비록 장치가 방향을 감지 못하더라도 화면은 언제나 방향을 가지고 있다. 그리고 만약 장치가 방향을 알 수 있더라도 웹 어플리케이션의 인터페이스를 유지하거나 적응하기 위해 화면의 방향을 조정하는 능력을 갖는게 좋다.</p> +<p>화면의 방향을 다루기 위한 여러 방법이 있는데, CSS 와 JavaScript 이다. 첫 번째는 <a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">orientation media query</a> 이다. 이것은 내용이 CSS를 사용해서 레이아웃을 조정하게 하는데, 브라우저 창이 가로 모드 (너비가 높이보다 큼) 또는 세로모드 (높이가 너비보다 큼) 여부에 달려 있다.</p> +<p>두번째 방법은 JavaScript Screen orientation API 인데 이것은 화면의 현재 방향을 구하고 잠그는데 사용할 수 있다.</p> +<h2 id="Adjusting_layout_based_on_the_orientation">Adjusting layout based on the orientation</h2> +<p>방향 변환에서 가장 흔한 케이스 중 하나는 장치의 방향에 따라 내용의 레이아웃을 조정 하는 것이다. 예를 들자면, 당신은 버튼바를 장치 화면의 가장 긴 크기로 펼치고 싶어 할 수 있는데, media query를 이용해서 쉽고 자동으로 할 수 있다.</p> +<p>다음의 HTML code 예제를 보자</p> +<pre class="brush: html"><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> +</pre> +<p>CSS 는 화면 방향에 따라 <span style="line-height: inherit;">특정 스타일을 을 </span><span style="line-height: inherit;">다루기 위해 orientation media query 에 의존한다</span></p> +<pre class="brush: css">/* 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; +} +</pre> +<p>Once we have some common styles we can start defining a special case for the orientation</p> +<pre class="brush: css">/* 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; + } +} +</pre> +<p>실행 결과를 보자</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Portrait</th> + <th scope="col">Landscape</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td> + <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>Note:</strong> orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.</p> +</div> +<h2 id="Locking_the_screen_orientation">Locking the screen orientation</h2> +<div class="warning"> + <p><strong>Warning:</strong> 이 API 는 실험적이며 현재 <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> 와 <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> 에서 <code>moz</code> 접두사를 이용하여 사용할 수 있다.</p> +</div> +<p>몇몇 장치들은 (주로 모바일 장치) 사용자가 언제나 화면을 읽을 수 있게 장치의 방향에 따라 동적으로 화면의 방향을 변화시킬 수 있다. 만약 이러한 행위가 텍스트 컨텐츠에 적합하다면, 이러한 변화 때문에 고통 받을 수 있는 켄텐츠도 있다. 예를 들어, 장치의 방향에 따른 게임들은 이러한 방향전환 때문에 혼란스러울 수 있다.</p> +<p>Screen Orientation API 는 정확히 그러한 변화를 방지하기 위해 만들어졌다.</p> +<h3 id="Listening_orientation_change">Listening orientation change</h3> +<p>{{event("orientationchange")}} 이벤트는 장치가 화면의 방향을 변환할 때와 <span style="line-height: inherit;">방향이 {{domxref("window.screen.orientation","screen.orientation")}} 속성과 함께 읽혀질 때 </span><span style="line-height: inherit;">마다 불려 진다. </span></p> +<pre class="brush: js">screen.addEventListener("orientationchange", function () { + console.log("The orientation of the screen is: " + screen.orientation); +}); +</pre> +<h3 id="Preventing_orientation_change">Preventing orientation change</h3> +<p>모든 웹 어플리케이션은 필요에 따라 스크린을 잠굴 수 있다. 화면은 {{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 함수를 사용하여 잠그고 {{domxref("window.screen.unlockOrientation","screen.unlockOrientation()")}}. 함수로 잠금 해제 한다.</p> +<p>{{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 는 적용 할 잠금의 종류를 정의하는 문자열 <span style="line-height: inherit;"> (또는 일련의 문자열) </span><span style="line-height: inherit;">을 수용한다. 수용하는 값들: </span><code style="font-size: 14px; line-height: inherit;">portrait-primary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">portrait-secondary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape-primary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape-secondary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">portrait</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape</code><span style="line-height: inherit;"> (각각의 값들에 대해 좀 더 알려면 {{domxref("window.screen.lockOrientation","lockOrientation")}} 를 보라).</span></p> +<pre class="brush: js">screen.lockOrientation('landscape');</pre> +<div class="note"> + <p><strong>Note:</strong> 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 {{event("orientationchange")}} 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.</p> + <p>그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 {{event("orientationchange")}} 이벤트를 호출 할 수 있다.</p> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li>{{domxref("window.screen.orientation","screen.orientation")}}</li> + <li>{{domxref("window.screen.lockOrientation()","screen.lockOrientation()")}}</li> + <li>{{domxref("window.screen.unlockOrientation()","screen.unlockOrientation()")}}</li> + <li>{{domxref("window.screen.onorientationchange","screen.onorientationchange")}}</li> + <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li> +</ul> 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..995997b5ab --- /dev/null +++ b/files/ko/web/api/detecting_device_orientation/index.html @@ -0,0 +1,274 @@ +--- +title: 기기 방향 감지하기 +slug: Web/API/Detecting_device_orientation +translation_of: Web/API/Detecting_device_orientation +original_slug: WebAPI/Detecting_device_orientation +--- +<div>{{SeeCompatTable}}</div> + +<h2 id="요약">요약</h2> + +<p>웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.</p> + +<p>방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 {{domxref("DeviceOrientationEvent")}}로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다. 이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.</p> + +<p>두 번째 이벤트는 {{domxref("DeviceMotionEvent")}}로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 {{domxref("DeviceOrientationEvent")}}와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로{{domxref("DeviceMotionEvent")}}를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. {{domxref("DeviceOrientationEvent")}}는 모바일 기기에서 주로 더 많이 나타난다.</p> + +<h2 id="방향_이벤트_처리하기">방향 이벤트 처리하기</h2> + +<p>방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:</p> + +<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true); +</pre> + +<p>이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.</p> + +<p>방향 이벤트는 다음 네 개의 값을 가진다:</p> + +<ul> + <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li> + <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li> + <li>{{ domxref("DeviceOrientationEvent.beta") }}</li> + <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li> +</ul> + +<p>이벤트 핸들러 함수는 보통 다음과 같다:</p> + +<pre class="brush: js">function handleOrientation(event) { + var absolute = event.absolute; + var alpha = event.alpha; + var beta = event.beta; + var gamma = event.gamma; + + // Do stuff with the new orientation data +} +</pre> + +<h3 id="방향_값_설명">방향 값 설명</h3> + +<p>각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a> 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.</p> + +<ul> + <li>{{ domxref("DeviceOrientationEvent.alpha") }} 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.</li> + <li>{{ domxref("DeviceOrientationEvent.beta") }} 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.</li> + <li>{{ domxref("DeviceOrientationEvent.gamma") }} 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.</li> +</ul> + +<h3 id="방향_예제">방향 예제</h3> + +<p>이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.</p> + +<p>자 그럼, 정원에 공이 하나 있다고 상상해보자:</p> + +<pre class="brush: html"><div class="garden"> + <div class="ball"></div> +</div> + +<pre class="output"></pre> +</pre> + +<p>이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:</p> + +<pre class="brush: css">.garden { + position: relative; + width : 200px; + height: 200px; + border: 5px solid #CCC; + border-radius: 10px; +} + +.ball { + position: absolute; + top : 90px; + left : 90px; + width : 20px; + height: 20px; + background: green; + border-radius: 100%; +} +</pre> + +<p>이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:</p> + +<pre class="brush: js">var ball = document.querySelector('.ball'); +var garden = document.querySelector('.garden'); +var output = document.querySelector('.output'); + +var maxX = garden.clientWidth - ball.clientWidth; +var maxY = garden.clientHeight - ball.clientHeight; + +function handleOrientation(event) { + var x = event.beta; // In degree in the range [-180,180] + var y = event.gamma; // In degree in the range [-90,90] + + output.innerHTML = "beta : " + x + "\n"; + output.innerHTML += "gamma: " + y + "\n"; + + // Because we don't want to have the device upside down + // We constrain the x value to the range [-90,90] + if (x > 90) { x = 90}; + if (x < -90) { x = -90}; + + // To make computation easier we shift the range of + // x and y to [0,180] + x += 90; + y += 90; + + // 10 is half the size of the ball + // It center the positionning point to the center of the ball + ball.style.top = (maxX*x/180 - 10) + "px"; + ball.style.left = (maxY*y/180 - 10) + "px"; +} + +window.addEventListener('deviceorientation', handleOrientation); +</pre> + +<p>여기 실제로 실행해 볼 수 있는 예제이다:</p> + +<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div> + +<div class="warning"> +<p><strong>경고:</strong> Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.</p> +</div> + +<h2 id="모션_이벤트_처리하기">모션 이벤트 처리하기</h2> + +<p>모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.</p> + +<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre> + +<p><em>HandleMotion</em> 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.</p> + +<p>모션 이벤트는 다음 네 가지 속성을 가진다:</p> + +<ul> + <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> + <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li> + <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li> + <li>{{ domxref("DeviceMotionEvent.interval") }}</li> +</ul> + +<h3 id="모션_값_설명">모션 값 설명</h3> + +<p>{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a> 문서를 참조).</p> + +<p>{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:</p> + +<ul> + <li><code>x</code>: 서쪽에서 동쪽으로 나타나는 축을 의미한다</li> + <li><code>y</code>: 남쪽에서 북쪽으로 나타나는 축을 의미한다</li> + <li><code>z</code>: 땅에서 수직으로 나타나는 축을 의미한다</li> +</ul> + +<p>{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:</p> + +<ul> + <li><code>alpha</code>: 화면(또는 데스크탑의 키보드)에 수직인 축을 따른 회전율을 의미한다</li> + <li><code>beta</code>: 화면(또는 데스크탑의 키보드)의 평면의 왼쪽에서 오른쪽으로 나타나는 축을 따른 회전율을 의미한다</li> + <li><code>gamma</code>: 화면(또는 데스크탑의 키보드)의 평면의 아래에서 위쪽으로 나타나는 축을 따른 회전율을 의미한다</li> +</ul> + +<p>마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.</p> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Device Orientation')}}</td> + <td>{{Spec2('Device Orientation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>{{domxref("DeviceOrientationEvent")}}</td> + <td>7.0</td> + <td>3.6<sup>[1]</sup><br> + 6</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>{{domxref("DeviceMotionEvent")}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>6</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{domxref("DeviceOrientationEvent")}}</td> + <td>3.0</td> + <td>3.6<sup>[1]</sup><br> + 6</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.2</td> + </tr> + <tr> + <td>{{domxref("DeviceMotionEvent")}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>6</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td><span style="font-size: 12px; line-height: 18px;">4.2</span></td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_구현_참고_사항">Gecko 구현 참고 사항</h3> + +<ol> + <li>Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>을 지원한다</li> +</ol> + +<h2 id="참고_자료">참고 자료</h2> + +<ul> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> +</ul> diff --git a/files/ko/web/api/documentorshadowroot/activeelement/index.html b/files/ko/web/api/document/activeelement/index.html index 2f4d4394d9..ff6af94682 100644 --- a/files/ko/web/api/documentorshadowroot/activeelement/index.html +++ b/files/ko/web/api/document/activeelement/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot.activeElement -slug: Web/API/DocumentOrShadowRoot/activeElement +slug: Web/API/Document/activeElement tags: - API - Document @@ -10,6 +10,7 @@ tags: - Reference - ShadowRoot translation_of: Web/API/DocumentOrShadowRoot/activeElement +original_slug: Web/API/DocumentOrShadowRoot/activeElement --- <div>{{APIRef("Shadow DOM")}}</div> diff --git a/files/ko/web/api/document/adoptnode/index.html b/files/ko/web/api/document/adoptnode/index.html index d2cce901a6..269f91125a 100644 --- a/files/ko/web/api/document/adoptnode/index.html +++ b/files/ko/web/api/document/adoptnode/index.html @@ -23,8 +23,8 @@ translation_of: Web/API/Document/adoptNode </pre> <dl> - <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt> - <dd>는 현재 문서에 삽입될 노드를 의미. 아직 해당 문서에 삽입되기 전이기 때문에 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a>는 <code>null이다.</code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></dd> + <dt><code><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span>node</code></dt> + <dd>는 현재 문서에 삽입될 노드를 의미. 아직 해당 문서에 삽입되기 전이기 때문에 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a>는 <code>null이다.</code><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></dd> <dt><code>externalNode</code></dt> <dd>는 노드를 가져오기 위한 외부 문서에 있는 노드를 의미.</dd> </dl> diff --git a/files/ko/web/api/event/createevent/index.html b/files/ko/web/api/document/createevent/index.html index 549a51bfdc..c884693dc7 100644 --- a/files/ko/web/api/event/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 --- <p>{{APIRef("DOM")}}</p> diff --git a/files/ko/web/api/document/getselection/index.html b/files/ko/web/api/document/getselection/index.html index c4d219fbde..919e52e9b3 100644 --- a/files/ko/web/api/document/getselection/index.html +++ b/files/ko/web/api/document/getselection/index.html @@ -3,6 +3,7 @@ title: Document.getSelection() slug: Web/API/Document/getSelection translation_of: Web/API/DocumentOrShadowRoot/getSelection translation_of_original: Web/API/Document/getSelection +original_slug: Web/API/DocumentOrShadowRoot/getSelection --- <p>{{APIRef("DOM")}}</p> diff --git a/files/ko/web/api/documentorshadowroot/stylesheets/index.html b/files/ko/web/api/document/stylesheets/index.html index cf6e1c38ce..326d92d32a 100644 --- a/files/ko/web/api/documentorshadowroot/stylesheets/index.html +++ b/files/ko/web/api/document/stylesheets/index.html @@ -1,12 +1,13 @@ --- title: DocumentOrShadowRoot.styleSheets -slug: Web/API/DocumentOrShadowRoot/styleSheets +slug: Web/API/Document/styleSheets tags: - API - Document - Propert - Reference translation_of: Web/API/DocumentOrShadowRoot/styleSheets +original_slug: Web/API/DocumentOrShadowRoot/styleSheets --- <div>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</div> diff --git a/files/ko/web/api/document_object_model/소개/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/소개/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/소개 --- <p>이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. </p> diff --git a/files/ko/web/events/blur/index.html b/files/ko/web/api/element/blur_event/index.html index 3bbcc6acb0..a6b52304d8 100644 --- a/files/ko/web/events/blur/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 --- <p><code>blur</code> 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 <code><a href="/en-US/docs/Mozilla_event_reference/focusout">focusout</a></code> 이벤트의 가장 다른점은 <code><a href="/en-US/docs/Mozilla_event_reference/focusout">focusout</a></code> 은 이벤트 버블링이 발생합니다.</p> diff --git a/files/ko/web/api/htmlelement/style/index.html b/files/ko/web/api/elementcssinlinestyle/style/index.html index 5976dd66bc..14083b9d84 100644 --- a/files/ko/web/api/htmlelement/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 --- <div>{{ APIRef("HTML DOM") }}</div> diff --git a/files/ko/web/api/fetch_api/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/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의_사용법 --- <p><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a>를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 {{domxref("GlobalFetch.fetch","fetch()")}} 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.</p> diff --git a/files/ko/web/guide/dom/using_full_screen_mode/index.html b/files/ko/web/api/fullscreen_api/index.html index d7f561a95c..86546157a1 100644 --- a/files/ko/web/guide/dom/using_full_screen_mode/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 --- <div>{{DefaultAPISidebar("Fullscreen API")}}</div> 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..44f644b5d5 --- /dev/null +++ b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -0,0 +1,166 @@ +--- +title: Geolocation API 사용하기 +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 +--- +<p>{{securecontext_header}}{{APIRef("Geolocation API")}}<br> + <strong>Geolocation API</strong>는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.</p> + +<h2 id="geolocation_객체"><code>geolocation</code> 객체</h2> + +<p><a href="/ko/docs/Web/API/Geolocation_API">Geolocation API</a>는 {{domxref("navigator.geolocation")}} 객체를 통해 사용할 수 있습니다.</p> + +<p><code>geolocation</code> 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것입니다. 존재 여부는 다음과 같이 알아낼 수 있습니다.</p> + +<pre class="brush: js">if('geolocation' in navigator) { + /* 위치정보 사용 가능 */ +} else { + /* 위치정보 사용 불가능 */ +} +</pre> + +<h3 id="현재_위치_가져오기">현재 위치 가져오기</h3> + +<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} 메서드를 호출해서 사용자의 현재 위치를 얻을 수 있습니다. <code>getCurrentPosition()</code>은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청합니다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출합니다. 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수도 있습니다. 세 번째 매개변수 역시 선택 항목이며, 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체입니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}의 기본값에서는 최대한 빠르게 낮은 정밀도의 응답을 반환합니다. 정확하지 않더라도 빠른 정보가 필요한 상황에서 유용합니다. 예를 들어, GPS 기능을 가진 장비는 보정 과정에 수 분이 걸릴 수도 있으므로 IP 위치와 WiFi 등 정확하지 않은 출처에 기반한 위치 정보를 반환할 수 있습니다.</p> +</div> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition((position) => { + doSomething(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>위의 예제는 사용자 위치가 확인되면 <code>doSomething()</code> 함수를 실행합니다.</p> + +<h3 id="현재_위치_추적하기">현재 위치 추적하기</h3> + +<p>장치가 이동했거나 더 정확한 정보를 사용할 수 있어서 위치 정보가 바뀐 경우 호출할 콜백 함수를 {{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드로 설정할 수 있으며, {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 같은 매개변수를 받습니다. 콜백은 계속해서 호출될 수 있으므로, 브라우저가 사용자의 이동 시, 또는 고정밀 위치 기술을 사용할 수 있는 시점에 새로운 위치 정보를 제공할 수 있습니다. <code>getCurrentPosition()</code>과 마찬가지로 선택 사항인 오류 콜백 역시 여러 번 호출할 수 있습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}을 먼저 호출하지 않고도 {{domxref("Geolocation.watchPosition", "watchPosition()")}}을 사용할 수 있습니다.</p> +</div> + +<pre class="brush: js">const watchID = navigator.geolocation.watchPosition((position) => { + doSomething(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>{{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드는 위치 추적 요청의 고유 식별자를 나타내는 숫자값을 반환합니다. 해당 식별자를 {{domxref("Geolocation.clearWatch","clearWatch()")}} 메서드에 전달해서 추적을 종료할 수 있습니다.</p> + +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> + +<h3 id="응답_미세_조정">응답 미세 조정</h3> + +<p>{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 {{domxref("Geolocation.watchPosition","watchPosition()")}} 둘 다 성공 콜백, 실패 콜백 외에도 <a href="/ko/docs/Web/API/PositionOptions"><code>PositionOptions</code></a> 객체를 받을 수 있습니다.</p> + +<p><code>PositionsOptions</code> 객체를 사용하면 고정밀도 활성화 여부, 위치 정보의 캐시 수명(수명이 끝나기 전까지는 이전에 반환한 위치 정보를 저장해뒀다가, 같은 요청을 또 받을 경우 그대로 반환합니다), 그리고 위치 정보 요청의 응답을 대기할 최대 대기시간을 지정할 수 있습니다.</p> + +<p>옵션 객체를 사용한 {{domxref("Geolocation.watchPosition","watchPosition")}}의 호출 예시는 다음과 같습니다.</p> + +<pre class="brush: js">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);</pre> + +<h2 id="위치_표현">위치 표현</h2> + +<p>사용자의 위치는 {{domxref("GeolocationPosition")}} 객체를 담은 {{domxref("GeolocationCoordinates")}} 객체를 사용하여 표현합니다.</p> + +<p><code>GeolocationPosition</code>은 단 두 가지만 가집니다. 하나는 <code>GeolocationCoordinates</code> 인스턴스를 가진 <code>coords</code> 속성이고, 다른 하나는 위치 정보의 기록 시점을 나타내는 {{domxref("DOMTimeStamp")}} 인스턴스입니다.</p> + +<p>GeolocationCoordinates 인스턴스는 다수의 속성을 갖지만, 그 중 가장 많이 쓰게 될 항목은 지도의 지점을 가리킬 때 사용할 <code>latitude</code>와 <code>longitude</code>입니다. 따라서 대부분의 <code>Geolocation</code> 성공 콜백은 아래와 같이 꽤 간단한 형태입니다.</p> + +<pre class="brush: js">function success(position) { + const latitude = position.coords.latitude; + const longitude = position.coords.longitude; + + // Do something with your latitude and longitude +}</pre> + +<p>그러나 <code>GeolocationCoordinates</code> 객체에서 고도, 속도, 장치의 방향, 위경도와 고도의 정확도 등 다른 다양한 정보도 가져올 수 있습니다.</p> + +<h2 id="오류_처리">오류 처리</h2> + +<p><code>getCurrentPosition()</code> 또는 <code>watchPosition()</code>에 오류 콜백을 제공한 경우, 콜백은 첫 번째 매개변수로 <a href="/ko/docs/Web/API/GeolocationPositionError"><code>GeolocationPositionError</code></a> 객체를 받습니다. 해당 객체는 오류의 유형을 나타내는 <code>code</code> 속성과, 사람이 읽을 수 있는 형태로 오류 코드의 뜻을 설명한 <code>message</code> 속성을 갖습니다.</p> + +<p>다음 형태로 사용할 수 있습니다.</p> + +<pre class="brush: js">function errorCallback(error) { + alert(`ERROR(${error.code}): ${error.message}`); +};</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 Geolocation API를 사용해 사용자의 위경도를 가져옵니다. 성공한 경우, 사용자의 위치를 가리키는 <code>openstreetmap.org</code> 링크를 생성해 하이퍼링크에 할당합니다.</p> + +<div class="hidden"> +<pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +button { + margin: .5rem 0; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><button id = "find-me">Show my location</button><br/> +<p id = "status"></p> +<a id = "map-link" target="_blank"></a></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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);</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 350, 150)}}</p> diff --git a/files/ko/web/api/html_드래그_앤_드롭_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_드래그_앤_드롭_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 --- <p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p> diff --git a/files/ko/web/api/html_드래그_앤_드롭_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_드래그_앤_드롭_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 --- <p>{{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}</p> diff --git a/files/ko/web/api/htmlhyperlinkelementutils/href/index.html b/files/ko/web/api/htmlanchorelement/href/index.html index ba2dbea4d5..ec1e854a73 100644 --- a/files/ko/web/api/htmlhyperlinkelementutils/href/index.html +++ b/files/ko/web/api/htmlanchorelement/href/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.href -slug: Web/API/HTMLHyperlinkElementUtils/href +slug: Web/API/HTMLAnchorElement/href tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - Property - Reference translation_of: Web/API/HTMLHyperlinkElementUtils/href +original_slug: Web/API/HTMLHyperlinkElementUtils/href --- <div>{{ApiRef("URL API")}}</div> diff --git a/files/ko/web/api/element/accesskey/index.html b/files/ko/web/api/htmlelement/accesskey/index.html index 0fc48bd749..7ef2393b5d 100644 --- a/files/ko/web/api/element/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 --- <div>{{APIRef("DOM")}}</div> diff --git a/files/ko/web/api/node/innertext/index.html b/files/ko/web/api/htmlelement/innertext/index.html index 414fab5c00..e15778f089 100644 --- a/files/ko/web/api/node/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 --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ko/web/api/htmlhyperlinkelementutils/index.html b/files/ko/web/api/htmlhyperlinkelementutils/index.html deleted file mode 100644 index cd82725dbf..0000000000 --- a/files/ko/web/api/htmlhyperlinkelementutils/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: HTMLHyperlinkElementUtils -slug: Web/API/HTMLHyperlinkElementUtils -tags: - - API - - Experimental - - Mixin - - NeedsTranslation - - TopicStub - - URL API -translation_of: Web/API/HTMLHyperlinkElementUtils ---- -<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> - -<p>The <strong><code>HTMLHyperlinkElementUtils</code></strong> mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.</p> - -<p>There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.</p> - -<h2 id="Properties">Properties</h2> - -<div class="note"> -<p><strong>Note: </strong>This interface doesn't inherit any property.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the whole URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the domain of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the port number of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the username specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the password specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt> - <dd>This returns a {{domxref("USVString")}} containing the origin of the URL (that is its scheme, its domain and its port).</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<div class="note"> -<p><strong>Note: </strong>This interface doesn't inherit any method.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt> - <dd>This returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLHyperlinkElementUtils")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Interfaces implementing this one: {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}} - </li> -</ul> diff --git a/files/ko/web/events/abort/index.html b/files/ko/web/api/htmlmediaelement/abort_event/index.html index 2278a24c24..fde61e96f4 100644 --- a/files/ko/web/events/abort/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 --- <p><strong><code>abort</code></strong> 이벤트는 리소스의 로딩이 중단되었을 때, 발생합니다.</p> diff --git a/files/ko/web/api/htmlelement/dataset/index.html b/files/ko/web/api/htmlorforeignelement/dataset/index.html index 2b2a891dca..82d9e484f2 100644 --- a/files/ko/web/api/htmlelement/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 --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ko/web/api/htmlelement/tabindex/index.html b/files/ko/web/api/htmlorforeignelement/tabindex/index.html index 7cbb0fa1f0..e28ecb36c0 100644 --- a/files/ko/web/api/htmlelement/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 --- <p>{{ ApiRef() }}</p> <h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> 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..a387d3c50e --- /dev/null +++ b/files/ko/web/api/navigation_timing_api/index.html @@ -0,0 +1,138 @@ +--- +title: 내비게이션 타이밍(Navigation Timing) +slug: Web/API/Navigation_timing_API +translation_of: Web/API/Navigation_timing_API +original_slug: Navigation_timing +--- +<p><strong>Navigation Timing API</strong>는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.</p> +<p>다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.</p> +<pre>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); +} +</pre> +<p>{{domxref("PerformanceTiming")}} 인터페이스로 접근할 수 있는 밀리 초 단위로 주어진 측정된 이벤트가 많이 있습니다. 발생하는 순서로 된 이벤트 목록입니다.</p> +<ul> + <li>navigationStart</li> + <li>unloadEventStart</li> + <li>unloadEventEnd</li> + <li>redirectStart</li> + <li>redirectEnd</li> + <li>fetchStart</li> + <li>domainLookupStart</li> + <li>domainLookupEnd</li> + <li>connectStart</li> + <li>connectEnd</li> + <li>secureConnectionStart</li> + <li>requestStart</li> + <li>responseStart</li> + <li>responseEnd</li> + <li>domLoading</li> + <li>domInteractive</li> + <li>domContentLoadedEventStart</li> + <li>domContentLoadedEventEnd</li> + <li>domComplete</li> + <li>loadEventStart</li> + <li>loadEventEnd</li> +</ul> +<p><code>window.performance.navigation</code> 객체는 리다이렉트(redirect), 앞/뒤 버튼, 혹은 보통의 URL 로딩이 어떤 페이지 로드를 일으키는지(trigger) 아는 데 사용할 수 있는 두 속성을 저장합니다.</p> +<p>window.performance.navigation.type:</p> +<table class="standard-table" style="font-size: 14px;"> + <thead> + <tr> + <th scope="col">상수</th> + <th scope="col">값</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><a name="const_next"><code>TYPE_NAVIGATENEXT</code></a></td> + <td>0</td> + <td>아래 목록의 TYPE_RELOAD과 TYPE_BACK_FORWARD가 사용하는 것 외에, 링크 클릭하기, 사용자 에이전트(UA) 주소 바에 URL 입력하기, 폼 전송, 스크립트 연산으로 초기화하기로 시작한 내비게이션.</td> + </tr> + <tr> + <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td> + <td>1</td> + <td>리로드(reload) 연산 혹은 location.reload() 메소드를 통한 내비게이션.</td> + </tr> + <tr> + <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td> + <td>2</td> + <td>히스토리 순회(traversal) 연산을 통한 내비게이션</td> + </tr> + <tr> + <td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td> + <td>255</td> + <td>위 값으로 정의되지 않는 어떠한 내비게이션 타입.</td> + </tr> + </tbody> +</table> +<p><code>window.performance.navigation.redirectCount</code>는 마지막 페이지에 도달할 때까지, 만일 있다면 몇 번의 리다이렉션이 일어났는지를 나타냅니다.</p> +<p>Navigation Timing API는 XHR로 서버에 보낸 클라이언트 쪽 성능 데이터를 모을 뿐 아니라 이전 페이지 언로드(unload) 시간, 도메인 룩업(look up) 시간, window.onload 전체 시간 등 다른 방법으로 측정하기 매우 어려운 데이터를 측정하는 데 사용할 수 있습니다.</p> +<h3 id="예제">예제</h3> +<p>어떤 페이지를 로딩하는 데 필요한 전체 시간 계산하기.</p> +<pre>var perfData = window.performance.timing; +var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart; +</pre> +<p>요청 응답 시간 계산하기.</p> +<pre>var connectTime = perfData.responseEnd - perfData.requestStart;</pre> +<h3 id="Browser_Compatibility" name="Browser_Compatibility">링크</h3> +<ul> + <li><a class="external" href="http://webtimingdemo.appspot.com/" title="http://webtimingdemo.appspot.com/">Test Page</a></li> + <li><a class="external" href="http://w3c-test.org/webperf/specs/NavigationTiming/" title="http://w3c-test.org/webperf/specs/NavigationTiming/">http://w3c-test.org/webperf/specs/NavigationTiming/</a></li> + <li><a class="external" href="http://www.w3.org/TR/navigation-timing/" title="http://www.w3.org/TR/navigation-timing/">http://www.w3.org/TR/navigation-timing/</a></li> +</ul> +<h3 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환</h3> +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table" style="font-size: 14px; margin-bottom: 1.286em; border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;"> + <tbody> + <tr> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Feature</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome**</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)*</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera*</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari (WebKit)</th> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Basic support</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">6</p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">7</p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">9</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">15</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table" style="font-size: 14px; margin-bottom: 1.286em; border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;"> + <tbody> + <tr> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Feature</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox Mobile (Gecko)</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">IE Phone</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari Mobile</th> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Basic support</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">15.0</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<p> </p> diff --git a/files/ko/web/api/networkinformation/connection/index.html b/files/ko/web/api/navigator/connection/index.html index 1afa39d9c1..2152c8ab3a 100644 --- a/files/ko/web/api/networkinformation/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 --- <p>{{ Apiref() }}</p> <p>{{ SeeCompatTable() }}</p> 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..2dd356b86d --- /dev/null +++ b/files/ko/web/api/network_information_api/index.html @@ -0,0 +1,47 @@ +--- +title: Network Information API +slug: Web/API/Network_Information_API +translation_of: Web/API/Network_Information_API +original_slug: WebAPI/Network_Information +--- +<p>{{ SeeCompatTable() }}</p> +<p>네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: {{domxref("window.navigator.connection")}}.</p> +<h2 id="연결상태_변경_감지">연결상태 변경 감지</h2> +<p>이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.</p> +<pre class="brush: js">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(); +</pre> +<h2 id="Specifications" name="Specifications">명세</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Network Information', '', 'Network Information API') }}</td> + <td>{{ Spec2('Network Information') }}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> +<h2 id="브라우저_호환성">브라우저 호환성</h2> +<p>{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}</p> +<h2 id="관련_내용">관련 내용</h2> +<ul> + <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li> + <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></li> + <li>{{domxref("window.navigator.connection")}}</li> +</ul> 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..d56373a529 --- /dev/null +++ b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html @@ -0,0 +1,266 @@ +--- +title: 알림 API 사용하기 +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 +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>웹 페이지나 앱에서 <a href="/ko/docs/Web/API/Notifications_API">알림(Notifications) API</a>를 사용하면 페이지 외부에 표시되는 알림을 보낼 수 있습니다. 이것은 시스템 레벨에서 처리되는 것으로 애플리케이션이 유휴 상태거나 백그라운드에 있더라도 웹 앱이 사용자에게 정보를 보낼 수 있습니다. 이 글에서는 여러분의 앱에서 이 API를 사용하기 위한 기초를 알아봅니다.</p> + +<p>일반적으로 시스템 알림은 운영 체계의 표준 알림 메커니즘을 말합니다. 예를 들어 일반적인 데스크톱 시스템이나 모바일 장치의 브로드캐스트 알림을 생각해봅시다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10959/android-notification.png" style="display: block; height: 184px; margin: 0px auto; width: 300px;"></p> + +<p>물론 시스템 알림 시스템은 플랫폼 및 브라우저에 따라 다양하지만 괜찮습니다. 알림 API는 범용적으로 작성돼서 대부분의 시스템 알림 시스템과 호환됩니다.</p> + +<h2 id="예시">예시</h2> + +<p>웹 알림의 대표적인 사용 사례는 웹 기반 메일이나 IRC 애플리케이션입니다. 새 메시지가 도착하면 사용자가 다른 애플리케이션으로 다른 일을 하더라도 사용자에게 알릴 필요가 있습니다. 요즘은 <a href="https://slack.com/">Slack</a> 등 이러한 사례를 많이 찾아볼 수 있습니다.</p> + +<p>우리는 웹 알림을 사용하는 방법을 좀더 잘 알 수 있도록 실제적인 예시 — 할 일 목록 앱 —를 작성했습니다. 데이터는 로컬에서 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a>로 저장하고 사용자 알림은 할 일 기한이 됐을 때 시스템 알림을 사용합니다. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">할 일 목록 코드를 다운로드하거나</a>, <a href="https://mdn.github.io/to-do-notifications/">앱의 라이브 실행을 보세요</a>.</p> + +<h2 id="권한_요청하기">권한 요청하기</h2> + +<p><span style="line-height: inherit;">앱이 알림을 보내려면 먼저 사용자가 애플리케이션에 해당 권한을 허용해줘야 합니다. 이는 API가 웹페이지 외부와 상호작용할 때 통상적인 요구 사항입니다. 최소 한번은 사용자가 해당 애플리케이션이 알림을 표시할 수 있는 권한을 허용해줄 필요가 있으며 이로써 사용자는 어떤 앱/사이트가 알림을 보일 수 있는지 제어할 수 있습니다.</span></p> + +<p><span style="line-height: inherit;">과거에 푸시 알림에 대한 악용 때문에 웹 브라우저와 개발자는 그런 문제를 완화할 수 있는 전략을 구현하게 되었습니다. 알림을 발생시키려면 사용자 제스처(예: 단추 클릭)에 대한 응답으로만 가능합니다. 이것은 모범적인 방식일 뿐 아니라 </span>— 사용자에게 미동의 알림으로 스팸을 보내면 안됩니다 — 실제로도 전향적인 브라우저는 사용자 제스처에 대한 응답으로 촉발되지 않은 알림은 명시적으로 불허합니다. 파이어폭스는 이미 72 버전부터 이렇게 하고 있으며 사파리도 하고 있습니다.</p> + +<p>또한 크롬과 파이어폭스에서는 사이트가 보안 콘텍스트(즉, HTTPS)가 아니면 알림을 아예 요청할 수 없으며 크로스 오리진 {{htmlelement("iframe")}}으로부터의 알림 권한은 요청할 수 없게 되었습니다. </p> + +<h3 id="현재_권한_상태_확인하기">현재 권한 상태 확인하기</h3> + +<p><span style="line-height: inherit;">권한을 이미 가지고 있는지 확인하려면 </span>{{domxref("Notification.permission")}} 읽기 전용 속성의 값을 확인하면 됩니다. 다음 세 가지 값이 있을 수 있습니다.</p> + +<dl> + <dt><code>default</code></dt> + <dd>사용자에게 아직 권한을 요구하지 않았으며 따라서 알림을 표시하지 않습니다.</dd> + <dt><code>granted</code></dt> + <dd>사용자에게 알림 표시 권한을 요구했으며 사용자는 권한을 허용했습니다.</dd> + <dt><code>denied</code></dt> + <dd>사용자가 명시적으로 알림 표시 권한을 거부했습니다.</dd> +</dl> + +<h3 id="권한_획득하기">권한 획득하기</h3> + +<p>아직 알림 표시 권한이 허용되지 않았다면 애플리케이션은 {{domxref("Notification.requestPermission()")}} 메서드를 사용하여 사용자에게 권한을 요청할 필요가 있습니다. 간단하게는 아래와 같이 넣습니다.</p> + +<pre>Notification.requestPermission().then(function(result) { + console.log(result); +});</pre> + +<p>여기서는 프로미스 방식의 메서드 버전을 사용합니다. 과거 버전을 지원하려면 아래와 같이 과거의 콜백 버전을 사용해야 할 수 있습니다.</p> + +<pre>Notification.requestPermission();</pre> + +<p>콜백 버전은 콜백 함수를 옵셔널하게 받을 수 있으며 사용자가 표시 권한 요청에 응답한 후에 호출됩니다.</p> + +<h3 id="예시_2">예시</h3> + +<p>우리가 만드는 할 일 데모에서는 "알림 허용" 단추를 둬서 누르면 앱의 알림 권한을 요청합니다.</p> + +<pre><button id="enable">알림 허용</button></pre> + +<p>누르면 다음 <code>askNotificationPermission()</code> 함수를 호출합니다.</p> + +<pre>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); + }); + } + } +}</pre> + +<p>두 번째 메인 블록을 먼저 보면 알림이 지원되는지 확인하는 것을 알 수 있습니다. 지원하는 경우 그에 따라 <code>Notification.requestPermission()</code>의 프로미스 기반 버전이 지원되는지 보는 확인을 실행합니다. 맞다면 프로미스 기반 버전을 실행하고(사파리 외에는 전부 지원됨) 아니라면 과거의 콜백 기반 버전을 실행합니다(사파리에서 지원).</p> + +<p>코드 중복을 피하기 위해 뒷 처리 수행 코드를 <code>handlePermission()</code> 함수에 넣었는데 이 함수가 코드에서 첫 번째 메인 블록입니다. 그 안에서는 <code>Notification.permission</code> 값을 명시적으로 설정하고(크롬의 일부 과거 버전에서는 이게 자동으로 안됩니다) 사용자가 권한 대화창에서 선택한 결과에 따라 단추를 보이거나 숨깁니다. 권한이 이미 허용됐는지 보여주려는 것은 아니고 사용자가 권한을 거부한 경우 나중에 다시 선택할 수 있도록 해주는 것입니다.</p> + +<p><strong>참고:</strong> 크롬 37 버전 전에는 <code>load</code> 이벤트 핸들러에서 {{domxref("Notification.requestPermission()")}}을 호출할 수 없었습니다(<a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">이슈 274284</a> 참고).</p> + +<h3 id="requestPermission_프로미스_기능_알아내기">requestPermission() 프로미스 기능 알아내기</h3> + +<p>위에서 우리는 브라우저가 <code>Notification.requestPermission()</code>의 프로미스 버전을 지원하는지 확인해야 한다고 했습니다. 아래와 같이 했습니다.</p> + +<pre>function checkNotificationPromise() { + try { + Notification.requestPermission().then(); + } catch(e) { + return false; + } + + return true; + }</pre> + +<p>기본적으로 <code>requestPermission()</code>에 <code>.then()</code> 메서드가 있는지 알아보는 것입니다. 맞다면 계속 진행하고 <code>true</code>를 반환합니다. 실패라면 <code>catch() {}</code> 블록에서 <code>false</code>를 반환합니다.</p> + +<h2 id="알림_만들기">알림 만들기 </h2> + +<p>알림 만들기는 쉬워서 {{domxref("Notification")}} 생성자만 사용하면 됩니다. 이 생성자는 알림에 표시할 제목과 {{domxref("Notification.icon","icon")}}이나 텍스트 {{domxref("Notification.body","body")}} 같은 알림 조작 옵션 몇 가지를 받도록 돼 있습니다.</p> + +<p>예를 들어 할일 목록 예시에서 아래 코드로 필요시 알림을 만듭니다(<code>createNotification()</code> 함수에서 찾을 수 있음).</p> + +<pre>var img = '/to-do-notifications/img/icon-128.png'; +var text = '아! "' + title + '" 작업 기한이 만료됐습니다.'; +var notification = new Notification('할 일 목록', { body: text, icon: img }); +</pre> + +<h2 id="알림_닫기">알림 닫기</h2> + +<p>파이어폭스와 사파리는 알림을 자동으로 금방(약 4초) 닫습니다. 이것은 운영 체계 수준에서도 발생합니다. 그런데 크롬 같은 다른 브라우저는 그렇지 않습니다. 모든 브라우저에서 알림이 닫히게 하려면 {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수에서 {{domxref("Notification.close")}} 함수를 호출하여 알림을 4초 후에 닫으면 됩니다. <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code>를 사용하여 <code>close()</code> 호출이 알림에 연동되게 하는 것도 해줘야 합니다.</p> + +<pre>setTimeout(notification.close.bind(notification), 4000);</pre> + +<div class="note"> +<p><strong>참고</strong>: "close" 이벤트를 받았을 때 알림을 닫은 것이 사용자인지는 보장할 수 없습니다. 이것은 규격과도 일치합니다. 규격에서는 "알림이 닫힐 때 그것이 기반 알림 플랫폼에 의한 것이든지 사용자에 의한 것이든지 닫기 절차가 실행돼야 한다."고 기술하고 있습니다.</p> +</div> + +<h2 id="알림_이벤트">알림 이벤트</h2> + +<p><span style="line-height: inherit;">{{domxref("Notification")}} 인스턴스에 촉발되는 이벤트는 다음 네 가지입니다.</span></p> + +<dl> + <dt><code>click</code></dt> + <dd>사용자가 알림을 클릭하면 촉발됩니다.</dd> + <dt><code>close</code></dt> + <dd>알림이 닫힌 후 촉발됩니다.</dd> + <dt><code>error</code></dt> + <dd>알림에 문제가 있을 경우 촉발되며 대개 어떤 이유에 의해 알림을 표시할 수 없는 경우입니다.</dd> + <dt><code>show</code></dt> + <dd>알림이 사용자에게 표시되면 촉발됩니다.</dd> +</dl> + +<p>이 이벤트들은 {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, {{domxref("Notification.onerror","onerror")}}, {{domxref("Notification.onshow","onshow")}} 핸들러로 추적할 수 있습니다. <span style="line-height: inherit;">{{domxref("Notification")}}이 {{domxref("EventTarget")}}을 상속하기 때문에 </span>{{domxref("EventTarget.addEventListener","addEventListener()")}} 메서드를 사용할 수 있습니다.</p> + +<h2 id="기존_알림_대체하기">기존 알림 대체하기</h2> + +<p>사용자가 잠깐 사이에 알림을 많이 받는 것은 바람직하지 않습니다. 예를 들어 메신저 애플리케이션이 모든 수신 메시지를 사용자에게 알리는데 그게 아주 많다면요? 사용자가 알림 때문에 대량 스팸을 받지 않도록 알림 대기열(큐)을 수정해서 걸려 있는 알림 하나나 여럿을 새로운 알림 하나로 대체할 수 있습니다.</p> + +<p>이를 위해 새 알림에 태그를 붙일 수 있습니다. 알림에 이미 같은 태그가 있고 표시되지 않았다면 새 알림으로 이전 알림을 대체하는 것입니다. 같은 태그의 알림이 이미 표시됐다면 이전 알림을 닫고 새 알림을 표시합니다.</p> + +<h3 id="태그_예시">태그 예시</h3> + +<p>다음과 같은 간단한 HTML을 봅시다.</p> + +<pre class="brush: html"><button>알림 실행!</button></pre> + +<p>다수의 알림을 아래 방법으로 처리할 수 있습니다.</p> + +<pre class="brush: js">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("안녕!"); + } + }); +});</pre> + +<p>라이브 결과는 아래에서 보세요.</p> + +<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p> + +<h2 id="규격">규격</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">규격</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>현행 표준</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{page("/en-US/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="참고">참고</h2> + +<ul> + <li><a href="/ko/Apps/Build/User_notifications">사용자 알림 편람</a></li> + <li>{{ domxref("Notification") }}</li> +</ul> 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..85fb728f86 --- /dev/null +++ b/files/ko/web/api/proximity_events/index.html @@ -0,0 +1,120 @@ +--- +title: Proximity +slug: Web/API/Proximity_Events +translation_of: Web/API/Proximity_Events +original_slug: WebAPI/Proximity +--- +<p>{{ SeeCompatTable }}</p> +<h2 id="Summary">Summary</h2> +<p>근접 이벤트는 사용자가 디바이스에 가까이 갔을때를 알 수 있는 간단한 벙법이다.</p> +<p>예를 들어, 사용자가 전화가 걸려왔을 때 디바이스에 귀를 가까이 하면, 근접 이벤트들은 스마트폰의 화면이 꺼지게 하여 이러한 변화에 대응할 수 있게 해준다.</p> +<div class="note"> + <p><strong>Note:</strong> 당연히 이 API는 근접 센서를 가진 장치를 필요로 하며, 이 근접 센서는 대게 모바일 다비이스들에서만 이용 가능하다. 근접 센서가 없는 장치들에서는 근접 이벤트들을 지원할 수는 있을 지 몰라도 해당 이벤트들은 절대 발생하지 않을 것이다.</p> +</div> +<h2 id="Proximity_Events">Proximity Events</h2> +<p>다비이스 근접 센서가 장치와 대상 사이의 변화를 감지했을 때, 센서는 그 변화를 브라우저에게 알린다. 브라우저는 그 알림을 받으면 그 변화에 대해 {{domxref("DeviceProximityEvent")}} 이벤트를 발생시킨다. 그리고 더 대략적인 변화(more rough change)를 알리기 위해 {{domxref("UserProximityEvent")}} 이벤트를 발생시킨다.</p> +<p>window object 레벨에서 {{domxref("EventTarget.addEventListener","addEventListener")}} 메소드 ({{event("deviceproximity")}} 또는 {{event("userproximity")}} 이벤트명) 를 이용하여 근접 이벤트를 전달받을 수 있다. 또한 {{domxref("window.ondeviceproximity")}} 또는 {{domxref("window.onuserproximity")}} 프로퍼티에 이벤트 핸들러를 붙이는 방법으로도 이벤트를 전달받을 수 있다.</p> +<p>일단 이벤트가 전달되면, 그 이벤트 오브젝트는 다음과 같은 여러 종류의 정보에 접근할 수 있게 해준다:</p> +<ul> + <li> {{domxref("DeviceProximityEvent")}} 이벤트는 {{domxref("DeviceProximityEvent.value","value")}} 프로퍼티를 통해 디바이스와 대상 사이의 거리에 정확히 매치되는 값을 제공한다. 또한 이 이벤트는 장치가 감지할 수 있는 가장 가까운 거리, 가장 먼거리에 대한 정보를 {{domxref("DeviceProximityEvent.min","min")}} 와 {{domxref("DeviceProximityEvent.max","max")}} 프로퍼티 값을 통해 제공한다.</li> + <li>{{domxref("UserProximityEvent")}} 이벤트는 거리에 대한 대략적인 추정치를 boolean 형태로 제공한다. 대상과 디바이스가 가까운면 {{domxref("UserProximityEvent.near")}} 프로퍼티 값은 true 가 되고, 대상과의 거리가 멀다면 그 값은 false가 된다.</li> +</ul> +<h2 id="Example">Example</h2> +<pre class="brush: js">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; + } +});</pre> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td> + <td>{{ Spec2('Proximity Events') }}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{domxref("DeviceProximityEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>{{domxref("UserProximityEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{domxref("DeviceProximityEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{ CompatGeckoMobile("15.0") }}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>{{domxref("UserProximityEvent")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{event("deviceproximity")}}</li> + <li>{{event("userproximity")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html index 9062abc861..fe6ac9d284 100644 --- a/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html +++ b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html @@ -64,7 +64,7 @@ addIceCandidate(<em>candidate</em>, <em>successCallback</em>, <em>failureCallbac <li>지정된 {{domxref("RTCIceCandidate.sdpMLineIndex", "sdpMLineIndex")}}의 값이 원격 설명 (description)에 포함된 미디어의 숫자와 같거나 큼</li> <li>지정된 {{domxref("RTCIceCandidate.usernameFragment", "ufrag")}}가 어떠한 원격 설명 (description) 안의 <code>ufrag</code> 필드와 일치하지 않음</li> <li>{{domxref("RTCIceCandidate", "candidate")}} 문자열에 존재하는 하나 혹은 여러개의 값들이 올바르지 않거나, 파싱 될 수 없음</li> - <li>어떠한 이유에서던 candidate를 추가하려는 시도가 실패<span style="display: none;"> </span></li> + <li>어떠한 이유에서던 candidate를 추가하려는 시도가 실패<span class="hidden"> </span></li> </ul> </dd> </dl> diff --git a/files/ko/web/api/rtcsessiondescription/index.html b/files/ko/web/api/rtcsessiondescription/index.html index 927204c7da..dce47879a0 100644 --- a/files/ko/web/api/rtcsessiondescription/index.html +++ b/files/ko/web/api/rtcsessiondescription/index.html @@ -79,7 +79,7 @@ translation_of: Web/API/RTCSessionDescription <dd>Returns a {{Glossary("JSON")}} description of the object. The values of both properties, {{domxref("RTCSessionDescription.type", "type")}} and {{domxref("RTCSessionDescription.sdp", "sdp")}}, are contained in the generated JSON.</dd> </dl> -<h2 id="Example">Example<span id="cke_bm_72C" style="display: none;"> </span></h2> +<h2 id="Example">Example<span id="cke_bm_72C" class="hidden"> </span></h2> <pre class="brush: js">signalingChannel.onmessage = function (evt) { if (!pc) 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 --- <p>{{ ApiRef() }}</p> <p>{{SeeCompatTable}}</p> diff --git a/files/ko/web/api/streams_api/컨셉/index.html b/files/ko/web/api/streams_api/concepts/index.html index 9c993b81a3..3537318227 100644 --- a/files/ko/web/api/streams_api/컨셉/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/컨셉 --- <div>{{apiref("Streams")}}</div> diff --git a/files/ko/web/guide/api/vibration/vibration/index.html b/files/ko/web/api/vibration_api/index.html index 16271ff248..a981773215 100644 --- a/files/ko/web/guide/api/vibration/vibration/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 --- <div>{{DefaultAPISidebar("Vibration API")}}</div> diff --git a/files/ko/web/api/web_workers_api/basic_usage/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/basic_usage/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 --- <div class="summary"> <p>웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공합니다. 워커 스레드는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 또한 워커는 ( <code>responseXML</code> 과 <code>channel</code>속성이 언제나 null이지만) <code><a class="internal" href="/en/nsIXMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></code> 를 사용하여 I/O작업을 수행할 수도 있습니다. 워커는 생성이 된 후에 생성자가 명시한 이벤트 핸들러로 메세지를 올려서 자신의 하위 작업(spawning task)에 메세지를 전달할 수 도 있습니다. 본 글에서 전용 워커와 공유 워커에 대하여 소개합니다.</p> 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 ---- -<p>WebGL 텍스쳐 로딩은 크로스-도메인 접근 규칙에 따라 제약을 받습니다. 여러분이 만든 컨텐츠에서 다른 도메인의 텍스쳐,<span style="line-height: 16.7999992370605px;"> 즉, 크로스-도메인 텍스쳐를 로딩</span>하려면 CORS 승인이 필요합니다. CORS에 대한 자세한 내용은 <a href="/En/HTTP_access_control">HTTP access control</a>을 참고하시기 바랍니다.</p> - -<p>CORS 승인된 이미지를 WebGL 텍스쳐에 사용하는 방법에 대한 설명은 <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">hacks.mozilla.org 문서</a>와 <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">예제</a>를 참고하시기 바랍니다.</p> - -<blockquote> -<p>역자 주 : 예제 링크가 깨져있는데, 원문에도 깨진 링크가 포함되어 있습니다.</p> -</blockquote> - -<div class="note"> -<p><strong>Note:</strong> WebGL 텍스쳐에 대한 CORS 지원과 이미지 요소의 crossOrigin 속성이 {{Gecko("8.0")}}에 구현되어 있습니다.</p> -</div> - -<p>내용이 변경되어 오염된(tainted) 쓰기 전용의 2D 캔버스는 WebGL 텍스쳐로 사용될 수 없습니다. 예를 들어 크로스-도메인 이미지가 그려진 2D <span style="line-height: 16.7999992370605px;">{{ HTMLElement("canvas") }}는 오염된 2D 캔버스라고 할 수 있습니다.</span></p> - -<div class="note"> -<p><strong>Note:</strong> 캔버스 2D의 drawImage에 대한 CORS 지원은 {{Gecko("9.0")}}에 구현되어 있습니다. 따라서 {{Gecko("9.0")}}에서부터는, CORS 승인된 크로스-도메인 이미지는 2D 캔버스를 오염시키지 않으며, CORS 승인된 크로스-도메인 이미지가 그려진 2D 캔버스도 WebGL 텍스쳐로 사용할 수 있습니다.</p> -</div> - -<div class="note"> -<p><strong>Note:</strong> 크로스-도메인 비디오에 대한 CORS 지원과 {{ HTMLElement("video") }}요소의 crossorigin 속성은 {{Gecko("12.0")}}에 구현되어 있습니다.</p> -</div> - -<p>{{ languages( { "ja": "ja/WebGL/Cross-Domain_Textures", "ko": "ko/Web/WebGL/Cross-Domain_Textures"} ) }}</p> 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..d4e1092ee3 --- /dev/null +++ b/files/ko/web/api/websockets_api/index.html @@ -0,0 +1,173 @@ +--- +title: 웹 소켓 +slug: Web/API/WebSockets_API +translation_of: Web/API/WebSockets_API +original_slug: WebSockets +--- +<p>웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.</p> + +<div class="cleared row topicpage-table"> +<h2 class="Interfaces" id="Interfaces" name="Interfaces"><code>인터페이스</code></h2> + +<dl> + <dt><code><code><a href="/ko/docs/Web/API/WebSocket" title="ko/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></code></code></dt> + <dd>웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스</dd> + <dt><code><code><code><a href="/ko/docs/Web/API/CloseEvent" title="ko/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a></code></code></code></dt> + <dd>연결이 종료 되었을 때 웹 소켓 객체에 의해 전달된 이벤트</dd> + <dt><code><code><code><a href="/ko/docs/Web/API/MessageEvent" title="ko/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a></code></code></code></dt> + <dd>서버로 부터 메시지가 수신 되었을 때 웹 소켓 객체에 의해 전달된 이벤트</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools"><code><code>도구</code></code></h2> + +<ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>를 위한 강력한 크로스 플랫폼 웹 소켓 API</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>를 위한 웹 소켓 서버 API 구현</li> + <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">더 많은 프레임워크, 라이브러리 보기</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics"><code><code>관련 주제</code></code></h2> + +<ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> +</ul> +</div> + +<h2 id="같이_보기"><code><code>같이 보기</code></code></h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - 웹 소켓 프로토콜</a></li> + <li><a class="external" href="http://www.w3.org/TR/websockets/">웹 소켓 API 규격</a></li> + <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">서버로부터의 이벤트</a></li> + <li><a class="external" href="http://websocket.us/">WebSocket.us</a> - 웹 소켓에 대한 비영리 커뮤니티</li> +</ul> + +<h2 id="브라우저_호환성"><code><code>브라우저 호환성</code></code></h2> + +<p><code><code>{{CompatibilityTable}}</code></code></p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><code><code>기능</code></code></th> + <th><code><code>Chrome</code></code></th> + <th><code><code>Firefox (Gecko)</code></code></th> + <th><code><code>Internet Explorer</code></code></th> + <th><code><code>Opera</code></code></th> + <th><code><code>Safari</code></code></th> + </tr> + <tr> + <td><code><code>버전 76 지원 {{obsolete_inline}}</code></code></td> + <td><code><code>6</code></code></td> + <td><code><code>{{CompatGeckoDesktop("2.0")}}</code></code></td> + <td><code><code>{{CompatNo}}</code></code></td> + <td><code><code>11.00 (disabled)</code></code></td> + <td><code><code>5.0.1</code></code></td> + </tr> + <tr> + <td><code><code>버전 7 지원 {{obsolete_inline}}</code></code></td> + <td><code><code>{{CompatNo}}</code></code></td> + <td><code><code>{{CompatGeckoDesktop("6.0")}}<br> + {{property_prefix("Moz")}}</code></code></td> + <td><code><code>{{CompatNo}}</code></code></td> + <td><code><code>{{CompatNo}}</code></code></td> + <td><code><code>{{CompatNo}}</code></code></td> + </tr> + <tr> + <td><code><code>버전 10 지원 {{obsolete_inline}}</code></code></td> + <td><code><code>14</code></code></td> + <td><code><code>{{CompatGeckoDesktop("7.0")}}<br> + {{property_prefix("Moz")}}</code></code></td> + <td><code><code>HTML5 Labs</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + </tr> + <tr> + <td><code><code>표준 - RFC 6455 지원</code></code></td> + <td><code><code>16</code></code></td> + <td><code><code>{{CompatGeckoDesktop("11.0")}}</code></code></td> + <td><code><code>10</code></code></td> + <td><code><code>12.10</code></code></td> + <td><code><code>6.0</code></code></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><code><code>기능</code></code></th> + <th><code><code>Android</code></code></th> + <th><code><code>Firefox Mobile (Gecko)</code></code></th> + <th><code><code>IE Mobile</code></code></th> + <th><code><code>Opera Mobile</code></code></th> + <th><code><code>Safari Mobile</code></code></th> + </tr> + <tr> + <td><code><code>버전 76 지원 {{obsolete_inline}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + </tr> + <tr> + <td><code><code>버전 7 지원 {{obsolete_inline}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + </tr> + <tr> + <td><code><code>버전 8 지원 (IETF draft 10) {{obsolete_inline}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatGeckoMobile("7.0")}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + </tr> + <tr> + <td><code><code>표준 - RFC 6455 지원</code></code></td> + <td><code><code>16 (Chrome)</code></code></td> + <td><code><code>{{CompatGeckoDesktop("11.0")}}</code></code></td> + <td><code><code>{{CompatUnknown}}</code></code></td> + <td><code><code>12.10</code></code></td> + <td><code><code>6.0</code></code></td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko"><code><code>Gecko</code></code></h3> + +<p><code><code>파이어폭스는 발전하는 웹 소켓 규격을 지속적으로 지원하고 있습니다. 파이어폭스 6은 웹 소켓 프로토콜 버전 7을, 파이어폭스 7은 버전 8을 지원합니다. (IETF 초안 10) 파이어폭스 모바일은 7.0부터 웹 소켓을 지원합니다.</code></code></p> + +<h4 id="Gecko_6.0"><code><code>Gecko 6.0</code></code></h4> + +<p><code><code>Gecko 6.0 {{geckoRelease("6.0")}} 이전엔 <code>WebSocket </code>객체가 존재하였으며, 일부 사이트가 <code>WebSocket </code>서비스는 접두어가 붙지 않는 것이라고 생각하기도 했습니다. 이 객체는 <code>MozWebSocket</code>으로 개명되었습니다.</code></code></p> + +<h4 id="Gecko_7.0"><code><code>Gecko 7.0</code></code></h4> + +<p><code><code>Gecko 7.0 {{geckoRelease("7.0")}} 이후로 고급 환경 설정의 <code>network.websocket.max-connections</code> 항목을 통해 동시에 열릴 수 있는 웹 소켓 연결의 최대값을 지정할 수 있습니다. 기본값은 200입니다.</code></code></p> + +<h4 id="Gecko_8.0"><code><code>Gecko 8.0</code></code></h4> + +<p><code><code>Gecko 8.0 {{geckoRelease("8.0")}} 이후로 웹 소켓 규격 초안의 변경에 따라 웹 소켓의 deflate 스트림 확장이 비활성화 되었습니다. 이는 일부 사이트의 호환성 문제를 해결합니다.</code></code></p> + +<h4 id="Gecko_11.0"><code><code>Gecko 11.0</code></code></h4> + +<p><code><code>Gecko 11.0 이전에는 모든 메시지가 16 MB를 넘을 수 없었으나, 지금은 최대 2 GB까지 가능합니다. 그러나 (특히 모바일에서) 권장되는 방법은 아닙니다. 충분한 메모리를 가지지 못한 장치에서는 통신이 실패하게 될 것입니다.</code></code></p> + +<p><code><code>추가적으로 바이너리 데이터를 위한 ArrayBuffer 지원이 구현되었습니다.</code></code></p> + +<p><code><code>Gecko 11.0부터 웹 소켓 API는 더이상 접두사가 붙지 않습니다.</code></code></p> + +<div class="warning"><code><code><strong>주의:</strong> 파이어폭스 4, 5에서 웹 소켓이 비활성화 돼있었던 가장 주요한 이유는 <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">프로토콜 설계의 보안성 문제</a> 때문이었습니다. 이는 파이어폭스 6에서 상위 버전의 프로토콜을 구현함으로써 해결되었습니다.</code></code></div> + +<div><code><code>{{HTML5ArticleTOC}}</code></code></div> 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..484a1bef26 --- /dev/null +++ b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,192 @@ +--- +title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기 +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications +tags: + - 가이드 + - 네트워킹 + - 예제 + - 웹소켓 + - 웹소켓API + - 클라이언트 +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +original_slug: WebSockets/Writing_WebSocket_client_applications +--- +<p>WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.</p> + +<div class="note"><strong>Note:</strong> 우리에게는 작동하는 chat/server 시스템 예제 코드 조각이 있습니다. 이는 우리의 인프라가 WebSocket 예제들을 제대로 호스팅할 수 있는 환경이 되면 공유할 것입니다.</div> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="WebSocket_객체_생성하기">WebSocket 객체 생성하기</h2> + +<p>WebSocket 프로토콜을 사용하여 통신하기 위해서는 <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket">WebSocket</a></code>객체를 생성해야 합니다. 이 객체는 자동으로 서버로의 연결을 열려고 할 것입니다.</p> + +<p>WebSocket 생성자는 하나의 필수 파라미터와 하나의 선택 파라미터를 받습니다.</p> + +<pre class="notranslate">WebSocket WebSocket( + in DOMString url, + in optional DOMString protocols +); +</pre> + +<dl> + <dt><code>url</code></dt> + <dd>연결할 URL으로, 이것은 WebSocket 서버가 응답할 URL이어야 합니다.</dd> + <dt><code>protocols</code> {{ optional_inline() }}</dt> + <dd>하나의 프로토콜 문자열, 또는 프로토콜 문자열의 배열입니다. 이 문자열들은 서브 프로토콜을 지정하는데 사용되어, 하나의 서버가 여러 개의 WebSocket 서브 프로토콜을 구현할 수 있도록 해줍니다. 예를 들어, 하나의 서버가 처리하는 상호작용이 지정된 <code>protocols</code>에 따라 달라지도록 할 수 있습니다. 만약 프로토콜 문자열을 지정하지 않으면 빈 문자열을 넣은 것으로 간주됩니다.</dd> +</dl> + +<p>생성자는 예외를 발생시킬 수 있습니다:</p> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>접속을 시도하고 있는 포트가 차단되었습니다.</dd> +</dl> + +<dl> +</dl> + +<h3 id="연결_에러">연결 에러</h3> + +<p>만약 연결 시도 중 에러가 발생하면, 먼저 "error"란 이름의 이벤트가 <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket">WebSocket</a></code> 오브젝트로 전달되고, 그로 인해 <code>onerror</code> 핸들러가 실행됩니다. 그 후에 연결이 종료되는 이유를 가리키는 <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a> 이벤트가 <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket">WebSocket</a></code> 오브젝트로 전달되고, 그로 인해 <code>onclose</code> 핸들러가 실행됩니다.</p> + +<p>Firefox 11부터는 보통 에러 메세지에 대한 설명이 Mozillia 플랫폼의 콘솔에 표시되며, <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent">CloseEvent</a></code>로부터는 <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a>에 정의되어 있는 연결 종료 코드를 받게 됩니다.</p> + +<h3 id="예제">예제</h3> + +<p>이 간단한 예제는 새 웹소켓 오브젝트를 생성하여 <code><span class="nowiki">ws://www.example.com/socketserver </span></code><span class="nowiki">서버에 접속하는</span>것을 보여줍니다. 이 예제에서는 커스텀 프로토콜인 "protocolOne" 을 리퀘스트에 같이 지정합니다. (이 프로토콜을 지정하는 부분은 생략될 수 있습니다.)</p> + +<pre class="brush: js notranslate">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); +</pre> + +<p>반환된 <code>exampleSocket </code>오브젝트의<code> exampleSocket</code>.<code>readyState </code>값은<code> CONNECTING </code>입니다.<code> readyState</code> 값은 연결이 수립되어 데이터가 전송 가능한 상태가 되면 <code>OPEN</code> 으로 변경됩니다.</p> + +<p>만약 여러개의 프로토콜을 유연하게 대응할 수 있는 구조를 가지고 있다면, 연결 시에 배열을 통해 프로토콜의 목록을 지정할 수 있습니다.</p> + +<pre class="brush: js notranslate">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]); +</pre> + +<p>연결이 수립되면(<code>readyState</code> 가 <code>OPEN</code> 이 되었을 때<code>), exampleSocket.protocol </code>값을 조사하여 서버가 어떤 프로토콜을 선택했는지 알아낼 수 있습니다.</p> + +<p>위의 예제에서 ws 는 http 를 대체합니다. 비슷하게 wss 는 https 를 대체합니다. 웹소켓 연결은 HTTP 업그레이드 메카니즘에 의해 수행되기 때문에 HTTP 서버 주소 지정에 대한 프로토콜 업그레이드 요청은 암시적입니다. (<code><span class="nowiki">ws://www.example.com</span></code> 또는 <code><span class="nowiki">wss://www.example.com</span></code>. 같이)</p> + +<h2 id="서버에_데이터_전송하기">서버에 데이터 전송하기</h2> + +<p>한번 연결이 수립되면 이제부터는 서버로 데이터를 전송할 수 있습니다. 이것을 하기 위해서는 단순히 <code>WebSocket</code> 오브젝트의 <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> 호출하여 보내고 싶은 메세지를 지정하기만 하면 됩니다.:</p> + +<pre class="brush: js notranslate">exampleSocket.send("Here's some text that the server is urgently awaiting!"); +</pre> + +<p>보낼 수 있는 데이터는 String , {{ domxref("Blob") }}, 또는 <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a> </code>입니다.</p> + +<div class="note"><strong>Note:</strong> 버전 11 아래의 파이어폭스는 String 데이터 전송만을 지원합니다.</div> + +<p>연결을 맺는것은 비동기 작업이고 실패하기 쉬운 작업이기 때문에, WebSocket 오브젝트를 생성하자마자 <code>send()</code> 로 데이터 전송을 시도하는것은 성공하지 않을 가능성이 있습니다. 우리는 연결이 수립된 이후에만 데이터를 전송하도록 하기 위해 <code>onopen</code> 핸들러를 정의하고, 이 위에서 작업합니다.</p> + +<pre class="brush: js notranslate">exampleSocket.onopen = function (event) { + exampleSocket.send("Here's some text that the server is urgently awaiting!"); +}; +</pre> + +<h3 id="데이터_전송에_JSON_사용하기">데이터 전송에 JSON 사용하기</h3> + +<p><a href="/en/JSON" title="en/JSON">JSON</a> 을 사용하면 서버에 복잡한 데이터를 편리하게 보낼 수 있습니다. 예를 들어, 채팅 프로그램이 서버와 JSON으로 캡슐화된 패킷 데이터를 주고받는 프로토콜을 구현한것을 상상해 볼 수 있습니다.:</p> + +<pre class="brush: js notranslate">// 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 = ""; +} +</pre> + +<h2 id="서버로부터_데이터_수신하기">서버로부터 데이터 수신하기</h2> + +<p>WebSockets는 event-driven API 입니다; 메세지가 수신되면 "message" 이벤트가 <code>onmessage</code> 함수로 전달되게 됩니다. 아래와 같은 코드를 작성하여 수신되는 데이터를 받아볼 수 있습니다.:</p> + +<pre class="brush: js notranslate">exampleSocket.onmessage = function (event) { + console.log(event.data); +} +</pre> + +<h3 id="JSON_오브젝트를_받아서_처리하기">JSON 오브젝트를 받아서 처리하기</h3> + +<p>상단의 {{ anch("데이터 전송에 JSON 사용하기") }} 에서 작업한 코드와 연관되는 클라이언트를 생각해 봅시다. 클라이언트에서 받을 수 있는 패킷들의 목록은 다음과 같을 것 입니다.:</p> + +<ul> + <li>로그인 핸드쉐이크</li> + <li>메세지 텍스트</li> + <li>유저 목록 업데이트</li> +</ul> + +<p>위의 메세지들을 받아서 처리하는 코드는 아래와 같을 것 입니다.:</p> + +<pre class="brush: js notranslate">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); + } +}; +</pre> + +<p>여기서 우리는 <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> 를 통해 JSON 오브젝트를 자바스크립트 오브젝트로 변환합니다. 그 다음 콘텐츠에 따라 분기하고 처리하는 로직을 가집니다.</p> + +<h3 id="Text_data_format">Text data format</h3> + +<p>웹소켓을 통해 전달되는 텍스트들은 UTF-8 포멧을 가집니다.</p> + +<p>Gecko 9.0 {{ geckoRelease("9.0") }} 먼저 버전들은 유효한 UTF-8 텍스트가 아닌 문자가 들어올 경우 연결이 종료되었습니다. 지금은 이 값들을 정상적으로 허용합니다.</p> + +<h2 id="연결을_종료하기">연결을 종료하기</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">웹 소켓 사용을 마쳤다면 </font><a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()">close()</a> 메소드를 호출해 연결을 종료합니다.</code>:</p> + +<pre class="brush: js notranslate">exampleSocket.close(); +</pre> + +<p>연결을 닫아버리기 전에 <code>bufferedAmount </code>어트리뷰트를 조사하여 아직 네트워크에 전달되지 않은 데이터가 있는지 검사하는것도 좋은 방법입니다.</p> + +<h2 id="보안에_대한_고려_사항">보안에 대한 고려 사항</h2> + +<p>웹소켓은 혼합된 연결 환경에서 이용되어서는안됩니다. 예를들어 HTTPS를 이용해 로드된 페이지에서 non-secure 웹소켓 연결을 수립하는것(또는 반대) 처럼 말입니다. 몇몇 브라우저들은 이를 강제로 금지하고 있습니다. 파이어폭스 버전 8이상도 이를 금지합니다.</p> + +<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}</p> 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..79ed39021a --- /dev/null +++ b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,259 @@ +--- +title: 웹소켓 서버 작성하기 +slug: Web/API/WebSockets_API/Writing_WebSocket_servers +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +original_slug: WebSockets/Writing_WebSocket_servers +--- +<p>{{gecko_minversion_header("2")}}</p> + +<h2 id="개요">개요</h2> + +<p>웹 소켓 서버는 특정한 프로토콜을 따르는 서버의 임의 포트를 리스닝하고 있는 TCP 어플리케이션입니다. 사용자 서버를 만드는 작업은 두려운 일일수도 있습니다. 하지만, 당신이 선택한 플랫폼상에서 간단한 웹 소켓 서버를 구현하는것은 쉬울것입니다. </p> + +<p>웹 소켓 서버는 C(++), Python, <a href="/en-US/docs/PHP">PHP</a>, <a href="/en-US/docs/Web/JavaScript/Server-Side_JavaScript">server-side JavaScript</a>등과 같은 <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>을 지원하는 어떠한 server-side 프로그래밍 언어로도 개발될 수 있습니다. 이것은 어느 특정한 언어의 자습서는 아니지만, 당신 자신의 서버를 개발하는것을 용이하게 하는 지침으로써의 역할을 합니다.</p> + +<p>당신은 HTTP가 작동하는 방식과 중간정도의 개발 경험이 있어야만 합니다. 개발언어에서 제공하는 TCP 소켓에 대한 지식이 요구될 수도 있습니다. 이 지침의 범위는 당신이 웹 소켓서버를 개발하기위해 필요한 최소한의 지식에 대해 소개하는것입니다.</p> + +<div class="note"> +<p>최신의 공식 웹 소켓 문서인 <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>를 읽으세요. 1과 4-7 섹션이 특별히 서버개발자에게 흥미로운 부분입니다. 10 섹션에서는 보안에 대해 논의하며, 당신의 서버를 공개하기전 해당 부분을 반드시 정독하여 읽어보셔야만합니다.</p> +</div> + +<p>이 페이지에서 웹 소켓 서버는 매우 약간만 설명되어 있습니다. 웹 소켓 서버는 종종 다른 특정한 이유로 인해 분리되거나 전문화됩니다. 따라서 웹 소켓과의 핸드 쉐이크를 감지하거나 미리 처리하거나 또는 클라이언트들을 실제 웹 소켓 서버에 보내기위해 일반적으로 HTTP 서버와 같은 <a href="https://en.wikipedia.org/wiki/Reverse_proxy">reverse proxy</a>를 사용합니다. 이는 쿠키나 인증을 처리하기 위해 당신의 서버 코드를 잔뜩 작성하지 않아도 된다는 것을 의미합니다.</p> + +<h2 id="Step_1_The_WebSocket_Handshake"><a name="Handshake">Step 1: The WebSocket Handshake</a></h2> + +<p>먼저 서버는 표준 TCP 소켓을 사용하여 연결하려는 소켓을 위해 반드시 듣고 있어야 합니다. 당신의 플랫폼에 따라 서버는 이미 준비가 되어있을수도 있습니다. 예를들어, 당신의 서버가 example.com에 port가 8000인 채로 듣고 있다고 가정해봅시다. </p> + +<div class="warning"> +<p><strong>경고:</strong> 서버에서 아무 포트나 선택하여 연결할 수 있지만, 80 또는 443 포트가 아닌 다른 연결은 방화벽/프록시에 의해 문제를 일으킬 수 있습니다. TLS/SSL 보안 연결인 443 포트와의 연결이 가장 쉬울 것입니다. 현재 대부분의 브라우저(특히 Firefox 8+)는 안전한 페이지라 할지라도 보안 연결이 아닌 웹소켓 연결은 허용되지 않습니다.</p> +</div> + +<p>웹소켓의 핸드셰이크 과정은 HTTP를 바탕으로 이루어집니다. 자세한 연결 과정은 다루지 않으나, 각 요청자는 연결 과정이 제대로 이루어질때까지 요청을 보류합니다. 서버는 클라이언트가 요청하는 모든 것을 주의깊게 이해해야 하고, 그렇지 않을 경우 보안 이슈가 일어날 수 있습니다.</p> + +<h3 id="클라이언트_핸드쉐이크_요청">클라이언트 핸드쉐이크 요청</h3> + +<p>당신이 웹 소켓 서버를 개발 중이라도, 클라이언트는 여전히 웹 소켓 핸드쉐이킹 과정을 시작합니다. 따라서, 당신은 클라이언트의 요청을 이해하기 위한 방법을 이해해야합니다. 클라이언트는 아래와 같아 보이는 매우 표준적인 HTTP 요청을 보낼것입니다.(HTTP 버전은 반드시 1.1. 혹은 그 이상이어하며, 반드시 GET방식이어야합니다.)</p> + +<pre class="notranslate">GET /chat HTTP/1.1 +Host: example.com:8000 +<strong>Upgrade: websocket</strong> +<strong>Connection: Upgrade</strong> +Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== +Sec-WebSocket-Version: 13 + +</pre> + +<p>이외에도 클라이언트는 여러 메세지나 서브프로토콜을 추가해 보낼 수도 있습니다. <code>User-Agent</code>, <code>Referer</code>, <code>Cookie</code>와 같은 공통 헤더나, 인증 헤더도 말이죠. 자세한 <a href="#Miscellaneous">사항</a>은 다음을 참조하세요. 원하는 대로 요청에 무엇이든지 첨부하여 보낼 수 있으며 웹소켓과 관련이 없을 경우 무시합니다. 통상적으로, 리버스 프록시가 이미 그런 기능을 담당하고 있을 겁니다.</p> + +<p>잘못된 값을 가지거나 형식이 잘못된 헤더의 경우, 서버는 "<a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" 응답을 보내 즉시 소켓을 종료시켜야 합니다. HTTP 응답 바디에 핸드셰이크에 실패한 이유가 명시되어 있지만, 브라우저 상에서 명시적으로 나타내진 않습니다. 서버가 웹소켓의 버전 인식을 실패할 경우, 인식 가능한 버전을 명시해 <code>Sec-WebSocket-Version</code> 요청을 보내야 합니다. (최신 가이드 v13에서 설명되어 있습니다) 이제, 가장 흥미로운 헤더인 <code>Sec-WebSocket-Key</code>을 살펴봅니다.</p> + +<div class="note"> +<p><strong>팁:</strong> 모든 <strong>브라우저는</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Origin</code> header</a>를 보냅니다. 이 헤더는 보안을 위해 활용되며, (checking for same origin, whitelisting/ blacklisting, etc.) 활용하고 싶지 않다면 <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a>을 보냅니다. 하지만 non-browser 에이전트가 위조된 <code>Origin</code>을 보낼수도 있다는 것을 명심해야 합니다. 따라서 대부분의 애플리케이션은 이 헤더가 없는 요청을 거부합니다.</p> +</div> + +<div class="note"> +<p><strong>Tip:</strong> The request-uri (<code>/chat</code> here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, <code>example.com/chat</code> could invoke a multiuser chat app, while <code>/game</code> on the same server might invoke a multiplayer game.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Regular HTTP status codes</a> 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).</p> +</div> + +<h3 id="서버가_보내는_핸드쉐이크_응답">서버가 보내는 핸드쉐이크 응답</h3> + +<p>위와 같은 요청을 받으면 서버 역시도 HTTP 구조의 응답을 보내주어야 합니다. 자세한 내용은 아래와 같습니다.(각각의 헤더 끝에는 \r\n을 그리고 가장 마지막에는 한번 더 \r\n을 넣는걸 잊지 마세요.)</p> + +<pre class="notranslate"><strong>HTTP/1.1 101 Switching Protocols</strong> +Upgrade: websocket +Connection: Upgrade +<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= + +</strong></pre> + +<p>Additionally, the server can decide on extension/subprotocol requests here; see <a href="#Miscellaneous">Miscellaneous</a> for details. The <code>Sec-WebSocket-Accept</code> part is interesting. The server must derive it from the <code>Sec-WebSocket-Key</code> that the client sent. To get it, c<span style="line-height: 1.5em;">oncatenate the client's </span><code style="font-size: 14px;">Sec-WebSocket-Key</code><span style="line-height: 1.5em;"> and "</span><code style="font-size: 14px;">258EAFA5-E914-47DA-95CA-C5AB0DC85B11</code><span style="line-height: 1.5em;">" together (it's a "</span><a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a><span style="line-height: 1.5em;">"), </span><span style="line-height: 1.5em;">take the </span><a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">SHA-1 hash</a><span style="line-height: 1.5em;"> of the result, and </span><span style="line-height: 1.5em;">return the </span><a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a><span style="line-height: 1.5em;"> encoding of the hash.</span></p> + +<div class="note"> +<p><strong>FYI:</strong> 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.</p> +</div> + +<p>So if the Key was "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", the Accept will be "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Once the server sends these headers, the handshake is complete and you can start swapping data!</p> + +<div class="note"> +<p>The server can send other headers like Set-Cookie, or ask for authentication or redirects via other status codes, before sending the reply handshake.</p> +</div> + +<h3 id="클라이언트_추적">클라이언트 추적</h3> + +<p>웹소켓 프로토콜과 직접적인 연관은 없지만, 이 항목에서 언급할만한 의미가 있습니다. 웹소켓 서버는 이미 연결된 클라이언트들의 반복적인 연결(hand shaking)을 막기위해 클라이언트의 소켓 상태를 추적해야합니다. 같은 IP 주소를 가지는 클라이언트는 여러번 연결을 시도 할 수 있습니다.(하지만, 서버는 <a href="https://en.wikipedia.org/wiki/Denial_of_service">Denial-of-Service attacks</a> 을 위해 너무 많은 연결 요청을 거부할 수 있습니다).</p> + +<h2 id="Step_2_데이터_프레임_교환">Step 2: 데이터 프레임 교환</h2> + +<p>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 <a href="https://en.wikipedia.org/wiki/XOR_cipher">XOR encryption</a> (with a 32-bit key). Section 5 of the specification describes this in detail.</p> + +<h3 id="데이터_프레임_포멧">데이터 프레임 포멧</h3> + +<p>모든 데이터 프레임 (서버->클라이언트 / 클라이언트 -> 서버) 은 아래의 구조를 따릅니다:</p> + +<pre style="float: left; margin-right: 20px;"> <strong>0</strong> <strong>1</strong> <strong>2</strong> 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 <strong>10</strong> 11 ++ - - - - - - - - - - - - - - - +-------------------------------+ +| |Masking-key, if MASK set to 1 | ++-------------------------------+-------------------------------+ + 12 13 <strong>14</strong> 15 ++-------------------------------+-------------------------------+ +| Masking-key (continued) | Payload Data | ++-------------------------------- - - - - - - - - - - - - - - - + +: Payload Data continued ... : ++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +| Payload Data continued ... | ++---------------------------------------------------------------+</pre> + +<p>RSV1-3 는 사용되지 않습니다. 이 필드들은 확장 프로토콜 또는 미래를 위해 예약되었습니다.</p> + +<p>MASK 비트는 메세지가 인코딩되어있는지의 여부를 나타냅니다.클라이언트가 서버로 보내는 메세지는 항상 마스킹되어야합니다. 따라서 서버는 클라이언트로부터 받은 이 필드가 항상 1임을 기대할 수 있습니다. (만약 클라이언트가 마스킹되지 않은 메세지를 보낸다면 서버는 연결을 종료해야 합니다. 참고 : <a href="http://tools.ietf.org/html/rfc6455#section-5.1">section 5.1 of the spec</a> ).<br> + 서버가 클라이언트에게 보내는 메세지는 MASK 필드가 항상 0이고 데이터는 마스킹되지 않은 상태여야 합니다. 마스킹이 어떻게 이루어지는지 / 마스킹된 메세지를 어떻게 디코딩하는지는 나중에 설명합니다.<br> + (주의: wss 연결이라고 하더라도 클라이언트가 보내는 패킷은 항상 마스킹되어야 합니다.)</p> + +<p>opcode 필드는 뒤따라오는 payload 데이터가 어떠한 포멧인지를 나타냅니다. 0x0은 <span style="line-height: 1.5;">continuation, 0x1은 텍스트(항상 UTF-8), 0x2는 바이너리 데이터 / 나머지 값은 "컨트롤 코드"에 사용됩니다. (컨트롤 코드에 대해서는 나중에 다루게 됩니다.) 현재 버전의 웹소켓 프로토콜에서는 0x3 / 0x7 / 0xB~0xF는 아무런 의미도 지니고있지 않습니다.</span></p> + +<p>FIN 비트는 이 메세지가 마지막임을 나타냅니다. 만약 FIN 비트가 0이라면 서버는 뒤에 더 따라오게 될 메세지들까지 수신해야 합니다. FIN 비트가 1일 경우에는 전체 메세지가 수신되었으므로 이를 처리합니다. 이 부분에 대해서는 뒤에 다시 설명합니다.</p> + +<h3 id="Payload_길이_알아내기">Payload 길이 알아내기</h3> + +<p>수신한 프레임으로부터 payload 데이터를 읽기 위해서는 payload length 필드를 읽어야 합니다. 불행히도 이는 약간 복잡한 작업을 거치는데 아래 순서대로 처리해 주세요.</p> + +<ol> + <li>9번째부터 15번재까지의 비트를 읽습니다. 이를 unsigned integer로 취급한 다음 값이 125거나 이보다 작을 경우 이 자체가 payload length 입니다. 이 경우에는 2, 3 과정은 필요 없습니다. 하지만 126이면 2번으로, 127일 경우 3번으로 가주세요</li> + <li>다음 16비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다.</li> + <li>다음 64비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다. (<a href="https://ko.wikipedia.org/wiki/%EC%B5%9C%EC%83%81%EC%9C%84_%EB%B9%84%ED%8A%B8">최상위 비트</a>는 항상 0이어야 합니다.)</li> +</ol> + +<h3 id="마스킹된_Payload_데이터_디코딩하기">마스킹된 Payload 데이터 디코딩하기</h3> + +<p>MASK 비트가 설정되어 있디만 32비트 사이즈의 Masking-Key 필드 또한 존재하게 됩니다. <br> + 아래 의사코드는 Payload 데이터를 <strong>ENCODED </strong>/ Masking-Key 필드를 <strong>MASK </strong>라고 가정하고 데이터를 디코딩하는 방법을 보여줍니다. <strong>ENCODED</strong>값을 0부터 순회하면서 <strong>MASK</strong>의 i % 4에 해당하는 1바이트와 XOR 연산을 수행합니다.</p> + +<p>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. <span style="line-height: 1.5;">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 <strong>ENCODED</strong>, and the key <strong>MASK</strong>. To get <strong>DECODED</strong>, loop through the octets (bytes a.k.a. characters for text data) of <strong>ENCODED</strong> and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):</span></p> + +<pre class="notranslate">var DECODED = ""; +for (var i = 0; i < ENCODED.length; i++) { + DECODED[i] = ENCODED[i] ^ MASK[i % 4]; +<span style="line-height: 1.5;">}</span></pre> + +<p>이제 <strong>DECODED</strong> 데이터를 가지고 프로토콜에 맞게 활용하면 됩니다.</p> + +<h3 id="Message_Fragmentation">Message Fragmentation</h3> + +<p>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 <code>0x0</code> to <code>0x2</code>.</p> + +<p><span style="line-height: 1.5;">Recall that the opcode tells what a frame is meant to do. If it's <code>0x1</code>, the payload is text. If it's <code>0x2</code>, the payload is binary data.</span><span style="line-height: 1.5;"> However, if it's </span><code style="font-style: normal; line-height: 1.5;">0x0,</code><span style="line-height: 1.5;"> 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.</span><span style="line-height: 1.5;"> 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:</span></p> + +<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello" +<strong>Server:</strong> <em>(process complete message immediately) </em>Hi. +<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a" +<strong>Server:</strong> <em>(listening, new message containing text started)</em> +<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new" +<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em> +<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!" +<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre> + +<p>Notice the first frame contains an entire message (has <code>FIN=1</code> and <code>opcode!=0x0</code>), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (<code>opcode=0x1</code>), but the entire message has not arrived yet (<code>FIN=0</code>). All remaining parts of that message are sent with continuation frames (<code>opcode=0x0</code>), and the final frame of the message is marked by <code>FIN=1</code>. <a href="http://tools.ietf.org/html/rfc6455#section-5.4">Section 5.4 of the spec</a> describes message fragmentation.</p> + +<h2 id="Pings_and_Pongs_The_Heartbeat_of_WebSockets">Pings and Pongs: The Heartbeat of WebSockets</h2> + +<p>핸드쉐이크가 끝난 시점부터 서버 혹은 클라이언트는 언제든지 ping 패킷을 보낼 수 있습니다. 만약 ping 패킷이 수신되면 수신자는 가능한 빨리 응답으로 pong 패킷을 보내야 합니다. (ping에서 전달된 payload와 동일한 payload를 붙여서 pong을 보냅니다. 이 경우 최대 payload length는 125입니다.) 서버는 주기적으로 ping을 보내 클라이언트가 아직 살아있는 상태인지 체크할 수 있습니다.</p> + +<p>A ping or pong is just a regular frame, but it's a <strong>control frame</strong>. Pings have an opcode of <code>0x9</code>, and pongs have an opcode of <code>0xA</code>. 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.</p> + +<div class="note"> +<p>If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.</p> +</div> + +<h2 id="Step_4_Closing_the_connection">Step 4: Closing the connection</h2> + +<p>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 <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">Section 5.5.1</a>). 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. </p> + +<h2 id="Miscellaneous_2"><a name="Miscellaneous">Miscellaneous</a></h2> + +<div class="note"> +<p>WebSocket codes, extensions, subprotocols, etc. are registered at the <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p> +</div> + +<p>WebSocket extensions and subprotocols are negotiated via headers during <a href="#Handshake">the handshake</a>. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket <strong>frame</strong> and <strong>modify</strong> the payload, while subprotocols structure the WebSocket <strong>payload</strong> and <strong>never modify</strong> anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).</p> + +<h3 id="Extensions">Extensions</h3> + +<div class="note"> +<p><strong>This section needs expansion. Please edit if you are equipped to do so.</strong></p> +</div> + +<p>Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the <em>same</em> 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.</p> + +<div class="note"> +<p>Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.</p> +</div> + +<p><em>TODO</em></p> + +<h3 id="서브프로토콜">서브프로토콜</h3> + +<p>Think of a subprotocol as a custom <a href="https://en.wikipedia.org/wiki/XML_schema">XML schema</a> or <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">doctype declaration</a>. 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.</p> + +<div class="note"> +<p>Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.</p> +</div> + +<p>클라이언트는 핸드쉐이크 요청 시에 특정한 서브프로콜의 목록을 같이 보낼 수 있습니다.<strong> Sec-WebSocket-Protocol </strong>헤더에 사용하기를 원하는 서브프로토콜의 목록을 같이 보냅니다.</p> + +<pre class="notranslate">GET /chat HTTP/1.1 +... +Sec-WebSocket-Protocol: soap, wamp + +</pre> + +<p>또는 아래와 같이 보낼 수도 있습니다.:</p> + +<pre class="notranslate">... +Sec-WebSocket-Protocol: soap +Sec-WebSocket-Protocol: wamp + +</pre> + +<p>클라이언트로부터 서브프로토콜 요청을 받으면, 서버는 그 중에서 자신이 지원할 수 있는 서브프로토콜을 <strong>하나 </strong>골라야 합니다. 만약 클라이언트가 보낸 목록 중, 여러개를 지원할 수 있다면 지원하는 목록 중 가장 첫번째 서브프로토콜을 보내주세요. </p> + +<p>Imagine our server can use both <code>soap</code> and <code>wamp</code>. Then, in the response handshake, it'll send:</p> + +<pre class="notranslate">Sec-WebSocket-Protocol: soap + +</pre> + +<div class="warning"> +<p><code>서버는 반드시 하나의 Sec-Websocket-Protocol 헤더만을 송신해야 합니다.</code><br> + <code>만약 서버가 어떠한 서브프로토콜도 지원하고 싶지 않다면 Sec-Websocket-Protocol 헤더를 빼고 보내주세요. 빈 값을 넣어서 보내도 안됩니다.</code><br> + 서버가 아무 서브프로토콜을 지원하지 않겠다고 한다면 클라이언트는 연결을 닫아버릴수도 있습니다.</p> +</div> + +<p>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 <code>json</code>. In this subprotocol, all data is passed as <a href="https://en.wikipedia.org/wiki/JSON">JSON</a>. 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.</p> + +<div class="note"> +<p><strong>Tip:</strong> 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: <code>Sec-WebSocket-Protocol: chat.example.com</code>. For different versions, a widely-used method is to add a <code>/</code> followed by the version number, like <code>chat.example.com/2.0</code>. Note that this isn't required, it's just an optional convention, and you can use any string you wish.</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li> + <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li> + <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li> +</ul> diff --git a/files/ko/web/events/domcontentloaded/index.html b/files/ko/web/api/window/domcontentloaded_event/index.html index 24db56aa91..212d755171 100644 --- a/files/ko/web/events/domcontentloaded/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 --- <div>{{APIRef}}</div> diff --git a/files/ko/web/events/load/index.html b/files/ko/web/api/window/load_event/index.html index baef50af25..8bfa5a0dcd 100644 --- a/files/ko/web/events/load/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 --- <p><code>load</code> 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.</p> diff --git a/files/ko/web/api/windowtimers/settimeout/index.html b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html index 7b338a83fa..a9d31000f3 100644 --- a/files/ko/web/api/windowtimers/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 --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ko/web/api/xmlhttprequest/timeout/index.html b/files/ko/web/api/xmlhttprequest/timeout_event/index.html index 4ecc599f9d..f426661dc5 100644 --- a/files/ko/web/api/xmlhttprequest/timeout/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 --- <div> <p><code><strong>timeout</strong></code> 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.</p> 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..a09cf8ed1d --- /dev/null +++ b/files/ko/web/api/xsltprocessor/basic_example/index.html @@ -0,0 +1,50 @@ +--- +title: Basic Example +slug: Web/API/XSLTProcessor/Basic_Example +translation_of: Web/API/XSLTProcessor/Basic_Example +original_slug: XSLT_in_Gecko/Basic_Example +--- +<h2 id=".EA.B8.B0.EB.B3.B8_.EC.98.88"> 기본 예 </h2> +<p>이 첫 예는 브라우저에서 XSLT 변환 설정의 기본을 보여준다. 이 예는 Article에 대한 정보(Title, Author 목록과 Body 글)를 포함한 XML 문서를 얻어 그것을 사람이 읽을 수 있는 형식으로 나타낸다. +</p><p>그림1은 기본 XSLT예의 소스를 보여준다. XML문서(example.xml)은 글의 정보를 포함한다. ?xml-stylesheet? 처리명령을 써서, 그것의 href 속성을 통해 XSLT 스타일쉬트(example.xsl)에 연결한다. +</p><p>XSLT 스타일쉬트는 xsl:stylesheet 요소로 시작하는데, 이것은 최종 출력을 생성하는데 쓰이는 모든 템플리트를 포함한다. 그림1의 예는 템플리트 2개를 가진다 - 하나는 root 노드에 하나는 Author 노드에 대응한다. root 노드에 대응하는 템플리트는 글의 제목을 출력하고 Authors 노드의 자식노드인 Author 노드에 대응하는 모든 템플리트를 처리하기 위해 말한다. +</p><p>그림1 : 간단한 XSLT예 +</p><p>XML 문서 (example.xml) : +</p> +<pre> <?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> +</pre> +<p>XSL 스타일쉬트 (example.xsl) : +</p> +<pre> <?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> +</pre> +<p>브라우저 출력: +</p> +<pre> Article - My Article + Authors: + - Mr. Foo + - Mr. Bar +</pre> +{{ 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..d89378893c --- /dev/null +++ b/files/ko/web/api/xsltprocessor/browser_differences/index.html @@ -0,0 +1,9 @@ +--- +title: Browser Differences +slug: Web/API/XSLTProcessor/Browser_Differences +translation_of: Web/API/XSLTProcessor/Browser_Differences +original_slug: XSLT_in_Gecko/Browser_Differences +--- +<h2 id=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.B0.A8.EC.9D.B4"> 브라우저 차이</h2> +<p>Netscape 7.x (모든 플랫폼)과 Internet Explorer 6(윈도즈)는 W3C XSLT 1.0 표준( <a class=" external" href="http://www.w3.org/TR/xslt">http://www.w3.org/TR/xslt</a> )을 지원합니다. IE 5.0과 5.5 (둘 다 윈도즈)는 XSLT의 초안만 지원하므로 XSLT 1.0 스타일쉬트와는 호환하지 않습니다. Netscape 6.x는 XSLT 1.0을 부분적으로만 지원합니다. +</p>{{ 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..bb855f18cc --- /dev/null +++ b/files/ko/web/api/xsltprocessor/generating_html/index.html @@ -0,0 +1,175 @@ +--- +title: Generating HTML +slug: Web/API/XSLTProcessor/Generating_HTML +translation_of: Web/API/XSLTProcessor/Generating_HTML +original_slug: XSLT_in_Gecko/Generating_HTML +--- +<h2 id="HTML_.EC.83.9D.EC.84.B1.ED.95.98.EA.B8.B0"> HTML 생성하기</h2> +<p>브라우저에서 XSLT의 공통 응용은 XML을 클라이언트의 안에 변환해 넣는 것이다. 두번째 예는 입력문서(example2.xml)를 변환하는데, 이것은 또 글의 정보를 포함하고 HTML문서 안에 들어간다. +</p><p>Article의 <code><span><body></span></code> 요소는 지금 HTML의 요소 (<code><span><b></span></code> 와 <code><span><u></span></code> 태그, 그림 2)를 포함한다. XML 문서는 HTML요소와 XML 요소 모두 포함하지만, 단 하나의 namespace 즉 XML 요소만 필요하다. HTML namespace가 없으므로, 그리고 XHTML namespace를 사용하여 XSL에서 an XML document를 생성하고 그것은 HTML문서와 같은 양상은 아닐 것이고, XSL Stylesheet 의<code>xsl:output</code>는 결과문서는 HTML처럼 다루어질 것을 보장한다 . XML 요소에 대해, 우리 자신의 namespace <code><a class=" external" href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a></code> 는 필요하고, 그것은 접두어 myNS <code>(xmlns:myNS="<span>http://devedge.netscape.com/2002/de</span>)</code>에 주어진다. +</p><p><small><b>그림 2 XML 파일 (example2.xml)</b></small> +<span>XML Document (example2.xml):</span> +</p> +<pre><?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> +</pre> +<p>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 <code>HTML</code> by using the <code>xsl:output</code> 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. +</p><p><small><b>그림 3 : 두 namespaces를 가진 XSL Stylesheet (example2.xsl)</b></small> +<span>XSL Stylesheet (example2.xsl):</span> +</p> +<pre><?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"> +</pre> +<p>A template matching the root node of the XML document is created and used to create the basic structure of the HTML page. +</p><p><small><b>Figure 4 : Creating the basic HTML document</b></small> +<span>XSL Stylesheet (example2.xsl):</span> +</p> +<pre>... +<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> +... +</pre> +<p>Three more <code>xsl:template</code>'s are needed to complete the example. The first <code>xsl:template</code> 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. +</p><p><b><small>그림 5 : 최종 3개 템플리트</small></b> +<span>XSL Stylesheet(example2.xsl):</span> +</p> +<pre>... +<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> +... +</pre> +<p>The final XSLT stylesheet looks as follows: +</p><p><small><b>그림 6 : 최종 XSLT Stylesheet<span>view example | view source</span></b></small> +<span>XSL Stylesheet:</span> +</p> +<pre><?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> +</pre> +{{ 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..e8938f4f88 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/index.html @@ -0,0 +1,16 @@ +--- +title: 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 +--- +<ol><li> <a href="ko/XSLT_in_Gecko/Introduction">개요</a> +</li><li> <a href="ko/XSLT_in_Gecko/Basic_Example">기본 예제</a> +</li><li> <a href="ko/XSLT_in_Gecko/Generating_HTML">HTML 생성</a> +</li><li> <a href="ko/XSLT_in_Gecko/Browser_Differences">브라우저 차이</a> +</li><li> <a href="ko/XSLT_in_Gecko/Resources">자원</a> +</li></ol> +{{ 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..fd28421eaf --- /dev/null +++ b/files/ko/web/api/xsltprocessor/introduction/index.html @@ -0,0 +1,14 @@ +--- +title: Introduction +slug: Web/API/XSLTProcessor/Introduction +translation_of: Web/API/XSLTProcessor/Introduction +original_slug: XSLT_in_Gecko/Introduction +--- +<h2 id=".EA.B0.9C.EC.9A.94">개요</h2> +<p>W3표준 안에서 주목할만한 하나의 흐름은 스타일로부터 내용을 분리하려는 노력이다. +</p><p>이것은 같은 스타일이 여러 내용에서 재사용되는 것을 허용할 뿐 아니라 유지보수를 쉽게 하고 (하나의 파일만 바꾸어서) 내용의 외관을 빠르게 바꾸는 방법을 허용한다. +</p><p>CSS (Cascade Style Sheets)는 W3C에서 제안된 첫번째 방법이다. CSS는 스타일규칙을 웹문서에 적용하는 간단한 방법이다. 이 스타일규칙은 어떻게 문서(내용)가 놓일지 정의한다. 그러나, 여러 제한이 있다. 프로그램 구조와 복잡한 레이아웃 모델을 만드는 가능성의 부족. CSS는 요소의 위치 변화제공에 제한된다. +</p><p>XSL (Extensible Stylesheet Language)변환은 두 부분으로 구성된다. XML트리를 다른 마크업 트리로 변환하는 XSL요소, 트리를 위한 선택언어 XPath. +XSLT는 XML문서를 얻어서 XSL스타일쉬트안의 규칙에 기반한 새 문서를 생성한다. 이것은 XSLT가 원 XML문서로부터 요소를 추가, 제거, 재구성하는 것을 허용하고 따라서 결과문서구조의 좀더 세분된 제어를 허용한다. +</p><p>XSLT의 변환은 template로 구성된 규칙에 기반한다. 각 template은 입력 XML문서의 조각에 대응하고 대응하는 부분을 새 결과문서에 적용한다. +</p>{{ 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..2d0d6dda69 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/resources/index.html @@ -0,0 +1,15 @@ +--- +title: Resources +slug: Web/API/XSLTProcessor/Resources +translation_of: Web/API/XSLTProcessor/Resources +original_slug: XSLT_in_Gecko/Resources +--- +<h2 id=".EC.9E.90.EC.9B.90" name=".EC.9E.90.EC.9B.90">자원</h2> +<ul> + <li><a class="external" href="http://devedge.netscape.com/library/manuals/2001/xslt/1.0/">Transforming XML: Netscape and XSLT</a></li> + <li><a class="external" href="http://www-106.ibm.com/developerworks/library/x-xslt/">What kind of language is XSLT?</a> at <a class="external" href="http://www-106.ibm.com/developerworks/">IBM developerWorks</a></li> + <li><a class="external" href="http://www.zvon.org/xxl/XSLTutorial/Books/Book1/index.html">XSLT Tutorial</a> at <a class="external" href="http://www.zvon.org/">zvon.org</a></li> + <li><a class="external" href="http://www.zvon.org/xxl/XPathTutorial/General/examples.html">XPath Tutorial</a> at <a class="external" href="http://www.zvon.org/">zvon.org</a></li> + <li><a href="ko/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the Mozilla JavaScript interface to XSL Transformations</a></li> + <li><a class="external" href="http://www.mozilla.org/projects/xslt/">Mozilla.org's XSLT Project Page</a>, which includes a frequently encountered issues section.</li> +</ul> diff --git a/files/ko/web/css/@viewport/height/index.html b/files/ko/web/css/@viewport/height/index.html deleted file mode 100644 index 96dd3182ad..0000000000 --- a/files/ko/web/css/@viewport/height/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - '@viewport' - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<p><code><strong>height</strong></code> CSS 서술자(descriptor)는 뷰포트의 {{cssxref("@viewport/min-height", "min-height")}} 및 {{cssxref("@viewport/max-height", "max-height")}} 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.</p> - -<p>뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.</p> - -<p>{{cssinfo}}</p> - -<h2 id="구문">구문</h2> - -<pre class="brush: css">/* 한 값 */ -height: auto; -height: 320px; -height: 15em; - -/* 두 값 */ -height: 320px 200px; -</pre> - -<h3 id="값">값</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>다른 CSS 설명자의 값에서 계산된 사용값(used value).</dd> - <dt><code><length></code></dt> - <dd>음이 아닌 절대 또는 상대 길이.</dd> - <dt><code><percentage></code></dt> - <dd>가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.</dd> -</dl> - -<h3 id="형식_구문">형식 구문</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="예제">예제</h2> - -<pre class="brush: css">@viewport { - height: 500px; -}</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>초기 정의</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("css.at-rules.viewport.height")}}</p> diff --git a/files/ko/web/css/@viewport/viewport-fit/index.html b/files/ko/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 7dab19acbd..0000000000 --- a/files/ko/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> - -<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css; no-line-numbers">/* Keyword values */ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.</dd> - <dt><code>contain</code></dt> - <dd>뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.</dd> -</dl> - -<dl> - <dt><code>cover</code></dt> - <dd>뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용할 것을 권장합니다.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -<pre class="syntaxbox">auto | contain | cover -</pre> - -<div class="hidden">이 설명자는 아직 <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a>에 등재되지 않았습니다.</div> - -<h2 id="접근성_문제">접근성 문제</h2> - -<p><code>viewport-fit</code> 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용해야 함을 기억하세요.</p> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/ko/web/css/@viewport/zoom/index.html b/files/ko/web/css/@viewport/zoom/index.html deleted file mode 100644 index 699b60921e..0000000000 --- a/files/ko/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - CSS - - CSS Descriptor - - Graphics - - Layout - - NeedsExample - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -<div>{{ CSSRef }}</div> - -<p><code>zoom</code> <a href="/ko/docs/Web/CSS">CSS</a> 설명자(descriptor)는 {{cssxref("@viewport")}}에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.</p> - -<p><code>1.0</code> 또는 <code>100%</code>인 <em>줌 배율</em>은 줌이 없음에 해당합니다. 큰 값은 확대. 작은 값은 축소.</p> - -<p>{{cssinfo}}</p> - -<h2 id="구문">구문</h2> - -<pre class="brush:css">/* 키워드 값 */ -zoom: auto; - -/* <number> 값 */ -zoom: 0.8; -zoom: 2.0; - -/* <percentage> 값 */ -zoom: 150%; -</pre> - -<h3 id="값">값</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.</dd> - <dt><code><number></code></dt> - <dd>줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd> - <dt><code><percentage></code></dt> - <dd>줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd> -</dl> - -<h3 id="형식_구문">형식 구문</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Specifications" name="Specifications">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>초기 스펙</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/ko/web/css/인접_형제_선택자/index.html b/files/ko/web/css/adjacent_sibling_combinator/index.html index 4446172ab3..2d054e75f9 100644 --- a/files/ko/web/css/인접_형제_선택자/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/인접_형제_선택자 --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/ko/web/css/background-repeat/index.html b/files/ko/web/css/background-repeat/index.html index 5183ad67d6..b30e77ee93 100644 --- a/files/ko/web/css/background-repeat/index.html +++ b/files/ko/web/css/background-repeat/index.html @@ -181,7 +181,7 @@ div { /* Multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; diff --git a/files/ko/web/css/common_css_questions/index.html b/files/ko/web/css/common_css_questions/index.html deleted file mode 100644 index 604448f6c3..0000000000 --- a/files/ko/web/css/common_css_questions/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: 공통된 CSS 질문들 -slug: Web/CSS/Common_CSS_Questions -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -<h2 id="왜_유효한_내_CSS가_왜_올바르게_그려지지_않는가">왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?</h2> - -<p>Browsers use the <code>DOCTYPE</code> declaration to choose whether to show the document using a mode that is more compatible with Web standards or with old browser bugs. Using a correct and modern <code>DOCTYPE</code> declaration at the start of your HTML will improve browser standards compliance.</p> - -<p>Modern browsers have two main rendering modes:</p> - -<ul> - <li><em>Quirks Mode</em>: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. Documents with an incomplete, incorrect, or missing <code>DOCTYPE</code> declaration or a known <code>DOCTYPE</code> declaration in common use before 2001 will be rendered in Quirks Mode.</li> - <li><em>Standards Mode</em>: the browser attempts to follow the W3C standards strictly. New HTML pages are expected to be designed for standards-compliant browsers, and as a result, pages with a modern <code>DOCTYPE</code> declaration will be rendered with Standards Mode.</li> -</ul> - -<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p> - -<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p> - -<pre><!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5 - parser, this is the recommended doctype */ - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"http://www.w3.org/TR/html4/loose.dtd"> - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"http://www.w3.org/TR/html4/strict.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -</pre> - -<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">왜 유효한 내 CSS는 모두 랜더링 되지 않는가?</h2> - -<p>원인은 다음과 같다:</p> - -<ul> - <li>CSS 파일의 경로가 잘못되었다.</li> - <li>적용을 위해서는 CSS 파일은 반드시 <code>text/css</code> MIME type으로 전달되어야 한다. 만약 웹 서버가 이 타입을 지원하지 않는다면 적용할 수 없다.</li> -</ul> - -<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">id 와 css는 무엇이 다른가?</h2> - -<p>HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.<br> - <br> - Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.<br> - <br> - Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p> - -<p>Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).</p> - -<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p> - -<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"> 프로퍼티(property)에 기본값(default value)으로 복귀 시키는 방법은?</h2> - -<p> </p> - -<p>본래 CSS는 "default" 키워드를 제공하지 않으며 속성의 기본값을 복원하는 유일한 방법은 해당 속성을 명시 적으로 다시 선언하는 것이다.</p> - -<pre><code>/* Heading default color is black */ -h1 { color: red; } -h1 { color: black; }</code></pre> - -<p>이것은 CSS 2에서 변경되었다. 키워드 <a href="https://developer.mozilla.org/es/CSS/initial" title="initial">initial</a>은 이제 CSS 속성에서 유효한 값이다. 지정된 속성의 CSS 사양에 정의 된 기본값으로 재설정된다.</p> - -<pre><code>/* Heading default color is black */ -h1 { color: red; } -h1 { color: initial; }</code></pre> - -<p> </p> - -<h2 id="Derived_styles" name="Derived_styles">어떻게 하면 한 스타일(style)로 부터 다른 스타일을 파생시킬 수 있는가?</h2> - -<p>CSS는 한 스타일 안에서 다른 조건을 정의하는 것을 허용하지 않는다. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). 그러나 여러개의 클래스(class)들을 한 엘리먼트(element)에 할당하면 같은 효과를 제공받을 수 있다.</p> - -<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">어떻게 하면 한 요소(element)에 여러 클래스(class)를 할당할 수 있는가?</h2> - -<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p> - -<pre><style type="text/css"> -.news { background: black; color: white; } -.today { font-weight: bold; } -</style> - -<div class="news today"> -... content of today's news ... -</div> -</pre> - -<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p> - -<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">왜 내 스타일 룰(style rule)은 올바르게 동작하지 않는가?</h2> - -<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p> - -<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 요소(element) 계층(hierarchy)</h3> - -<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p> - -<pre>.news { color: black; } -.corpName { font-weight: bold; color: red; } - -<!-- news item text is black, but corporate name is red and in bold --> -<div class="news"> - (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... -</div> -</pre> - -<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p> - -<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">명확한 스타일 룰 재정의</h3> - -<p>CSS 스타일시트 안에서 순서가 중요하다. 만약 룰을 정의하고 같은 룰을 재정의 한다면 마지막 정의가 적용된다.</p> - -<pre>#stockTicker { font-weight: bold; } -.stockSymbol { color: red; } -/* other rules */ -/* other rules */ -/* other rules */ -.stockSymbol { font-weight: normal; } - -<!-- most text is in bold, except "GE", which is red and not bold --> -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>위와 같은 종류의 오류를 방지하려면 특정 선택자에 대해 규칙을 한 번만 정의하고 해당 선택자에 속하는 모든 규칙을 그룹화 하는 것이 좋다.</p> - -<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">프로퍼티(property) 축약형의 사용</h3> - -<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p> - -<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } -.stockSymbol { font: 14px Arial; color: red; } - -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p> - -<pre>#stockTicker { - font-weight: bold; - font: 12px Verdana; /* font-weight is now normal */ -} -</pre> - -<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">* 셀렉터(selector)의 사용</h3> - -<p>* 와일드카드 셀렉터는 모든 엘리먼트에 적용되고, 이것은 특별히 주의를 기울여 사용해야 한다.</p> - -<pre>body * { font-weight: normal; } -#stockTicker { font: 12px Verdana; } -.corpName { font-weight: bold; } -.stockUp { color: red; } - -<div id="section"> - NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... -</div> -</pre> - -<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p> - -<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p> - -<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS의 특수성</h3> - -<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p> - -<pre>div { color: black; } -#orange { color: orange; } -.green { color: green; } - -<div id="orange" class="green" style="color: red;">This is red</div> -</pre> - -<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p> - -<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 프로퍼티(property)들이 하는 것은?</h2> - -<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p> - -<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.</p> - -<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p> - -<h2 id="z-index는_어떻게_포지셔닝을_하는가">z-index는 어떻게 포지셔닝을 하는가?</h2> - -<p>The z-index property specifies the stack order of elements.</p> - -<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p> - -<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p> diff --git a/files/ko/web/css/all_about_the_containing_block/index.html b/files/ko/web/css/containing_block/index.html index 35c6bf56cb..78bb5734d8 100644 --- a/files/ko/web/css/all_about_the_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 --- <div>{{cssref}}</div> diff --git a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html index 01ae23c400..229a9eabd0 100644 --- a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html index a5db192618..db9310aa83 100644 --- a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html index 00b22833fb..63a6166cd1 100644 --- a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html +++ b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- <p>이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index 69d4320e3c..0000000000 --- a/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 여러개의 배경 지정하기 -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - 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 ---- -<p>{{CSSRef}}</p> - -<p><a href="/ko/CSS" title="CSS3">CSS3</a>를 사용하면 엘리먼트에 <strong>여러개의 배경</strong>을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상({{ cssxref("color") }})는 맨 마지막에만 지정할 수 있다. </p> - -<p>여러개의 배경을 지정하는건 간단하다.</p> - -<pre class="brush: css">.myclass { - background: background1, background 2, ..., backgroundN; -} -</pre> - -<p>배경에 관련된 다른 속성들은 {{ cssxref("background") }} 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다. 하지만 {{ cssxref("background-color") }} 속성은 리스트 형태로 지정할 수 없다. 다음과 같은 속성들은 리스트 형태로 동시에 여러개 지정할 수 있다. {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}</p> - -<h2 id="예제">예제</h2> - -<p>이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다. </p> - -<pre class="brush: css">.multi_bg_example { - background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), - linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), - url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); - background-repeat: no-repeat, no-repeat, repeat; - background-position: bottom right, left, right; -} -</pre> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Result</td> - </tr> - <tr> - <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td> - </tr> - </tbody> -</table> - -<p>첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. {{ cssxref("background-repeat") }} 와 {{ cssxref("background-position") }}) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 {{ cssxref("background-repeat") }} 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.</p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li> -</ul> diff --git a/files/ko/web/css/css_backgrounds_and_borders/scaling_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/scaling_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 --- <div>{{cssref}}</div> diff --git a/files/ko/web/css/cursor/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/cursor/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 --- <p><a href="ko/Gecko">Gecko</a> 1.8 (<a href="ko/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0)은 URL 값을 <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 커서 속성</a>값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.</p> diff --git a/files/ko/web/css/css_colors/color_picker_tool/index.html b/files/ko/web/css/css_colors/color_picker_tool/index.html index f5437c05b5..e4dfdff671 100644 --- a/files/ko/web/css/css_colors/color_picker_tool/index.html +++ b/files/ko/web/css/css_colors/color_picker_tool/index.html @@ -3,7 +3,7 @@ title: Color picker tool slug: Web/CSS/CSS_Colors/Color_picker_tool translation_of: Web/CSS/CSS_Colors/Color_picker_tool --- -<div style="display: none;"> +<div class="hidden"> <h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> <h3 id="HTML">HTML</h3> 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 new file mode 100644 index 0000000000..1f860e087a --- /dev/null +++ b/files/ko/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,205 @@ +--- +title: CSS 다단 레이아웃 사용 +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 +--- +<p>{{CSSRef("CSS Multi-columns")}}</p> + +<p><span class="seoSummary"><strong>CSS 다단(multi-column) 레이아웃</strong>은 다단 텍스트 정의가 쉽도록 <em>블록 레이아웃 모드</em>를 확장합니다.</span> 사람들은 줄이 너무 긴 경우 텍스트 읽는데 어려움이 있습니다; 한 줄 끝에서 다음 줄 시작까지 눈에 옮기기 너무 긴 경우, 어느 줄을 읽고 있었는 지를 잊어버립니다. 그러므로, 큰 화면을 최대로 쓰기 위해서는, 너비가 제한된 텍스트 단을 나란히 놓아야 합니다, 바로 신문이 하는 것처럼.</p> + +<p>불행하게도 이는 CSS 및 HTML로 하기는 고정 위치에서 강제 단 바꿈 또는 텍스트에 허용되는 마크업의 심한 제한 혹은 위대한(heroic) 스크립팅 사용 없이는 불가능합니다. 이 제한은 전통 블록 레이아웃 모드를 확장하는 새로운 CSS 속성 추가로 해결됐습니다.</p> + +<h2 id="단_사용">단 사용</h2> + +<h3 id="단_수와_너비">단 수와 너비</h3> + +<p>두 CSS 속성은 많은 단을 보일 지 여부와 방법을 제어합니다: {{ Cssxref("column-count") }} 및 {{ Cssxref("column-width") }}.</p> + +<p><code>column-count</code> 속성은 단 수를 특정한 수로 설정합니다. 가령,</p> + +<h2 id="예_1">예 1</h2> + +<h3 id="HTML">HTML</h3> + +<div id="column_count"> +<pre class="brush: html"><div id="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#col { +-moz-column-count: 2; +-webkit-column-count: 2; +column-count: 2; +} +</pre> +</div> + +<h3 id="결과">결과</h3> + +<p>두 단에 콘텐츠를 표시합니다 (다단 준수 브라우저를 사용 중인 경우):</p> + +<p>{{EmbedLiveSample('column_count','700px', '', '')}}</p> + +<p><code>column-width</code> 속성은 희망 최소 단 너비를 설정합니다. <code>column-count</code>도 설정되지 않은 경우, 그러면 브라우저는 자동으로 이용 가능한 너비에 맞게 많은 단을 만듭니다.</p> + +<h2 id="예_2">예 2</h2> + +<h3 id="HTML_2">HTML</h3> + +<div id="column_width"> +<pre class="brush: html"><div id="wid">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> +</pre> + +<h3 id="CSS_2">CSS</h3> + +<pre class="brush: css">#wid { +-moz-column-width: 100px; +-webkit-column-width: 100px; +column-width: 100px; +} +</pre> +</div> + +<h3 id="결과_2">결과</h3> + +<p>{{ EmbedLiveSample('column_width','700px', '', '') }}</p> + +<p>정확한 세부사항은 <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 스펙</a>에 설명되어 있습니다.</p> + +<p>다단 블록에서, 콘텐츠는 필요에 따라 한 단에서 다음 단으로 자동으로 흐릅니다. 모든 HTML, CSS 및 DOM 기능은 단 내에서 지원됩니다, 편집 및 인쇄 중일 때.</p> + +<h3 id="columns_단축"><code>columns</code> 단축</h3> + +<p>대부분, 웹 디자이너는 두 CSS 속성({{ cssxref("column-count") }} 또는 {{ cssxref("column-width") }}) 중 하나를 사용합니다. 이러한 속성에 대한 값이 겹치지 않기에, 종종 {{ cssxref("columns") }} 단축을 쓰는 게 편리합니다. 가령.</p> + +<p><code>column-width:12em</code> CSS 선언은 다음으로 대체될 수 있습니다:</p> + +<h2 id="예_3">예 3</h2> + +<h3 id="HTML_3">HTML</h3> + +<div id="column_short"> +<pre class="brush: html"><div id="col_short">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> +</pre> + +<h3 id="CSS_3">CSS</h3> + +<pre class="brush: css">#col_short { +-moz-column-width: 12em; +-moz-columns: 12em; +-webkit-columns: 12em; +columns: 12em; +} +</pre> +</div> + +<h3 id="결과_3">결과</h3> + +<p>{{EmbedLiveSample('column_short','700px', '', '')}}</p> + +<p><code>column-count:4</code> CSS 선언은 다음으로 대체될 수 있습니다:</p> + +<h2 id="예_4">예 4</h2> + +<h3 id="HTML_4">HTML</h3> + +<div id="four_columns"> +<pre class="brush: html"><div id="columns_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> +</pre> + +<h3 id="CSS_4">CSS</h3> + +<pre class="brush: css">#columns_4{ +-moz-column-count: 4; +-moz-columns: 4; +-webkit-columns: 4; +columns: 4; +} +</pre> +</div> + +<h3 id="결과_4">결과</h3> + +<p>{{ EmbedLiveSample('four_columns','700px', '', '') }}</p> + +<p><code>column-width:8em</code> 및 <code>column-count:12</code> 두 CSS 선언은 다음으로 대체될 수 있습니다:</p> + +<h2 id="예_5">예 5</h2> + +<h3 id="HTML_5">HTML</h3> + +<div id="twelve_columns"> +<pre class="brush: html"><div id="columns_12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> +</pre> + +<h3 id="CSS_5">CSS</h3> + +<pre class="brush: css">#columns_12 { +-moz-columns: 12 8em; +-webkit-columns: 12 8em; +columns: 12 8em; +} +</pre> +</div> + +<h3 id="결과_5">결과</h3> + +<p>{{ EmbedLiveSample('twelve_columns','700px', '', '') }}</p> + +<h3 id="높이_균형">높이 균형</h3> + +<p>CSS3 Column 스펙은 단 높이는 균형을 이루어야 함을 요구합니다: 즉, 브라우저는 각 단의 콘텐츠 높이가 거의 같도록 자동으로 최대 단 높이를 설정합니다. Firefox는 이를 행합니다.</p> + +<p>그러나, 일부 상황에서는 최대 단 높이를 명시해서 설정하는 것도 유용하고 그 다음 첫 단에서 시작하여 필요한 만큼 많은 단을 생성하며, 어쩌면 오른쪽으로 넘치는 콘텐츠를 배치합니다. 따라서, 높이가 제한되는 경우, 다단 블록에 CSS {{ cssxref("height") }} 또는 {{ cssxref("max-height") }} 속성을 설정하여, 각 단은 그 높이 및 더 이상 새로운 단을 추가하기 전까지 늘 수 있습니다. 이 모드 역시 레이아웃에 대해서 훨씬 더 효율이 좋습니다.</p> + +<h3 id="단_간격">단 간격</h3> + +<p>단 사이 간격이 있습니다. 기본 권장값은 <code>1em</code>입니다. 이 크기는 {{ Cssxref("column-gap") }} 속성을 다단 블록에 적용하여 바꿀 수 있습니다:</p> + +<h2 id="예_6">예 6</h2> + +<h3 id="HTML_6">HTML</h3> + +<div id="col_gap"> +<pre class="brush: html"><div id="column_gap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> +</pre> + +<h3 id="CSS_6">CSS</h3> + +<pre class="brush: css">#column_gap { +-webkit-column-count: 5; +-moz-column-count: 5; +column-count: 5; +-moz-column-gap: 2em; +-webkit-column-gap: 2em; +column-gap: 2em; +} +</pre> +</div> + +<h3 id="결과_6">결과</h3> + +<p>{{ EmbedLiveSample('col_gap','700px', '', '') }}</p> + +<h2 id="우아한_강등">우아한 강등</h2> + +<p>단 속성은 단을 지원하지 않는 브라우저에 의해 그냥 무시됩니다. 따라서 비지원 브라우저에서는 1단으로 표시하고 지원하는 브라우저에서는 다단을 사용하는 레이아웃을 만드는 게 그런 대로 쉽습니다.</p> + +<p>모든 브라우저가 이러한 접두어 없는 속성을 지원하는 것은 아님을 주의하세요. 오늘날 대부분의 브라우저에서 이 기능을 사용하기 위해서, 각 속성은 세 번({{ property_prefix("-moz") }} 접두어로 한 번, {{ property_prefix("-webkit") }} 접두어로 한 번 그리고 접두어 없이 한 번) 작성되어야 합니다.</p> + +<h2 id="결론">결론</h2> + +<p>CSS3 단(column)은 웹 개발자가 화면 영역(real estate)을 최대한 쓸 수 있게 돕는 원시(primitive) 레이아웃입니다. 상상력이 풍부한 개발자는 많은 단 사용법을 찾을 지도 모릅니다, 특히 자동 높이 균형 기능 가지고.</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li> +</ul> diff --git a/files/ko/web/css/css_flexible_box_layout/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/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의_기본_개념 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/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/가변상자의_대표적인_사용례/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/가변상자의_대표적인_사용례 --- <p>{{CSSRef}}</p> diff --git a/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/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/일반_흐름_속_블록_및_인라인_레이아웃/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/일반_흐름_속_블록_및_인라인_레이아웃 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/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/흐름_레이아웃과_오버플로/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/흐름_레이아웃과_오버플로 --- <p class="summary">컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.</p> diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/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/흐름_레이아웃과_쓰기_모드/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/흐름_레이아웃과_쓰기_모드 --- <p class="summary">어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/일반_대열_속_블록_및_인라인_조판">조판</a> 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.</p> diff --git a/files/ko/web/css/css_flow_layout/대열과_탈대열/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/대열과_탈대열/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/대열과_탈대열 --- <div>{{CSSRef}}</div> 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 new file mode 100644 index 0000000000..fc171f9b89 --- /dev/null +++ b/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,107 @@ +--- +title: 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 +--- +<div>{{CSSRef}}</div> + +<p>가장 흔하게 리스트에 적용되는 스타일 변경은 들여쓰기(indentation)거리의 변경입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.</p> + +<p>왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.</p> + +<h2 id=".EB.A6.AC.EC.8A.A4.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.A6.AC.EC.8A.A4.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0">리스트 만들기</h2> + +<p>먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다.</p> + +<p><img alt="Figure 1" src="https://developer.mozilla.org/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p> + +<p>빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다.</p> + +<p><img alt="Figure 2" src="https://developer.mozilla.org/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p> + +<p>이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <code><ul></code>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다.</p> + +<p><img alt="Figure 3" src="https://developer.mozilla.org/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p> + +<p>여기서, 푸른 점선 경계선은 <code><ul></code>엘리먼트의 내용물 지역의 경계를 보여줍니다. <code><ul></code>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.</p> + +<p>이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.</p> + +<p><img alt="Figure 4" src="https://developer.mozilla.org/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p> + +<p>보여지는 것으론, 마커들은 <code><ul></code>의 내용물-지역의<em>바깥</em> 에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <code><li></code>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <code><lt></code>의 내용물-지역의 밖에 매달려 있으나 여전히 <code><li></code>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다.</p> + +<p><br> + 바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <code><li></code>엘리먼트에 지정된 보더밖에 놓이며, <code>list-sytle-position</code>값으로 <code>outside</code>를 취하게 되는 것입니다. 만일 값이 <code>inside</code>로 바뀌게 되면, 마커들은, 비록 <code><li></code>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <code><li></code> 안쪽으로 옯겨지게 됩니다.</p> + +<h2 id=".EB.91.90.EB.B2.88_.EB.93.A4.EC.97.AC.EC.93.B0.EA.B8.B0" name=".EB.91.90.EB.B2.88_.EB.93.A4.EC.97.AC.EC.93.B0.EA.B8.B0">두번 들여쓰기</h2> + +<p>그럼 이 모든게 문서에서는 어떻게 나타날까요? 현재, 우리는 아래의 스타일들에 비견되는 상황에 있다고 할 수 있습니다.</p> + +<pre>ul, li {margin-left: 0; padding-left: 0;}</pre> + +<p>만일 이 리스트를 있는 그대로 문서에 삽입할 경우, 가시적 들여쓰기 효과는 나타나지 않고, 마커들은 브라우저 윈도우의 왼쪽끝으로 잘려나갈 상황에 처하게 될것입니다.</p> + +<p>이를 피하고 들여쓰기효과를 얻을 목적으로 브라우저 개발자들에게 사용가능한 옵션은 다음의 세가지밖에 없습니다.</p> + +<ol> + <li>각 <code><li></code> 엘리먼트에 왼쪽 마진을 준다.</li> + <li><code><ul></code> 엘리먼트에 왼쪽 마진을 준다.</li> + <li><code><ul></code> 엘리먼트에 왼쪽 패딩을 준다.</li> +</ol> + +<p>결과론적으로, 누구도 첫번째 옵션을 사용하지는 않는것 같습니다. 두번째 옵션은 윈도우 익스플로러, 매킨토쉬, 그리고 오페라에서 적용되었습니다. 세번째 옵션은 Gecko 와 범주상 이를 임베드해서 사용하는 모든 브라우저들에 적용되었다고 할 수 있습니다.</p> + +<p>이 두 접근법에 대해서 잠깐 살펴봅시다. 익스플로러와 오페라의 경우, 리스트들은 <code><ul></code>에 40 픽셀의 왼쪽 마진을 줌으로써 들여쓰여지게 됩니다. 만일 <code><ul></code> 엘리먼트에 배경색을 적용하고 리스트 아이템과 <code><ul></code> 보더들을 그냥 놔둘 경우, 그림 5에서 보이는 것과 같은 결과를 얻게 됩니다.</p> + +<p><img alt="Figure 5"></p> + +<p>반면, Gecko는 <code><ul></code> 엘리먼트에 대해서 40픽셀의 왼쪽<em>패딩</em> 을 줍니다. 따라서 그림 5를 만들어내는데 사용된 것과 똑 같은 스타일을 적용하게 된다고 가정하면, Gecko기반 브라우저로 예제를 로딩했을때 그림 6과 같은 그림을 보게 됩니다.</p> + +<p><img alt="Figure 6"></p> + +<p>보이는 바와 같이, 마커들은, 어디에 있게 되건간에, <code><li></code> 엘리먼트에 붙여진 채로 남아 있습니다. 차이점은 전적으로 <code><ul></code>가 어떤식으로 스타일을 갖추게 되는가에 달려있습니다. 이 차이점은 <code><ul></code> 엘리먼트에 배경색이나 보더를 지정하려고 할 경우에만 나타나게 됩니다.</p> + +<h2 id=".EC.9D.BC.EA.B4.80.EC.84.B1_.EC.B0.BE.EA.B8.B0" name=".EC.9D.BC.EA.B4.80.EC.84.B1_.EC.B0.BE.EA.B8.B0">일관성 찾기</h2> + +<p>모든것을 정리해보면 이런 결론에 도달하게 됩니다. 즉, Gecko, 익스플로러, 그리고 오페라 간에 리스트을 일관성있게 렌더링하고 싶으면, <code><ul></code> 엘리먼트의 왼쪽 마진 그리고 왼쪽 패딩<em>둘다</em> 지정해야 한다는 것입니다. 이런 목적으로 <code><li></code> 을 아예 무시해 버릴 수도 있습니다. 넷스케이프 6.x 에서 디폴트 디스플레이로 돌아가고 싶다면:</p> + +<pre>ul {margin-left: 0; padding-left: 40px;}</pre> + +<p>만약, 익스플로러/오페라 모델을 따르길 원한다면:</p> + +<pre>ul {margin-left: 40px; padding-left: 0;}</pre> + +<p>라고 쓰면 됩니다.</p> + +<p>물론, 자기 자신이 선호하는 값을 써 넣을 수도 있습니다. 원한다면 둘다 <code>1.25em</code>로 정해 줄 수도 있습니다 -- 픽셀에 기반한 들여쓰기에만 묶여있을 이유는 없습니다. 만일 리스트들이 들여쓰기를 하지 않도록 리셋하고 싶으면, 패딩과 마진 값을 0으로 정해 주어야만 합니다.</p> + +<pre>ul {margin-left: 0; padding-left: 0;}</pre> + +<p>하지만, 그렇게 하면, 불렛들이 리스트와 부모 엘리먼트의 바깥쪽에 매달려 있게 된다는 점을 기억하세요. 만일 <code>body</code>가 부모일 경우, 불렛이 브라우저 윈도우 밖으로 완전히 나가있게 되서, 보이지 않게 될 가능성이 아주 높습니다.</p> + +<h2 id=".EA.B2.B0.EB.A1.A0" name=".EA.B2.B0.EB.A1.A0">결론</h2> + +<p>결국, 여기에 언급된 브라우져들이 리스트를 레이아웃하는 방식에있어서 올바르거나 그르거나 하지 않다는 것을 알 수 있습니다. 각 브라우저는 다른 디폴트 스타일을 사용하고 있으며, 거기서 문제점들이 기어들어 오게 되는 것입니다. 리스트의 왼쪽 패딩과 왼쪽 마진 둘다를 확실하게 스타일 지정 함으로써 리스트 들여쓰기에 있어서 브라우저간 일관성을 보다 획기적으로 유지할 수 있게 되는 것입니다.</p> + +<h2 id=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD" name=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD">권장 사항</h2> + +<ul> + <li>리스트의 들여쓰기간격을 바꿀때에는 패딩과 마진 둘다 지정하는 것을 잊지마세요.</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Eric A. Meyer, Netscape Communications</li> + <li>Last Updated Date: Published 30 Aug 2002</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/ko/web/css/css_masks/index.html b/files/ko/web/css/css_masking/index.html index 5a48e0af6e..ddf760bb02 100644 --- a/files/ko/web/css/css_masks/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 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html index 9444e2bb5e..1c38813c95 100644 --- a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -107,7 +107,7 @@ span.bold { font-weight: bold; } <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" class="hidden"> </span></li> </ul> <div class="originaldocinfo"> <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index 04e826dc17..79cf0b4d91 100644 --- a/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -131,7 +131,7 @@ span.bold { font-weight: bold; } <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" class="hidden"> </span></li> </ul> <p> </p> <div class="originaldocinfo"> diff --git a/files/ko/web/css/css_transitions/using_css_transitions/index.html b/files/ko/web/css/css_transitions/using_css_transitions/index.html index c81a169965..15368d34c5 100644 --- a/files/ko/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ko/web/css/css_transitions/using_css_transitions/index.html @@ -76,7 +76,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -141,7 +141,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -206,7 +206,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -271,7 +271,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -340,7 +340,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -403,7 +403,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: linear</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -466,7 +466,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-end</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -529,7 +529,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: steps(4, end)</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -596,7 +596,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -663,7 +663,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -730,7 +730,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -797,7 +797,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ko/web/css/css_단위와_값/index.html b/files/ko/web/css/css_values_and_units/index.html index 94d8ceabd6..5f1f3831fb 100644 --- a/files/ko/web/css/css_단위와_값/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_단위와_값 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/filter/index.html b/files/ko/web/css/filter/index.html index 8020311f12..c6b8b3afd6 100644 --- a/files/ko/web/css/filter/index.html +++ b/files/ko/web/css/filter/index.html @@ -83,7 +83,7 @@ filter: unset;</pre> <pre class="brush: css notranslate">filter: blur(5px) </pre> -<div id="blur_example" style="display: none;"> +<div id="blur_example" class="hidden"> <pre class="brush: html notranslate"> <table class="standard-table"> <thead> <tr> @@ -178,7 +178,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> +<div id="brightness_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -273,7 +273,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="contrast_example" style="display: none;"> +<div id="contrast_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -380,7 +380,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="shadow_example" style="display: none;"> +<div id="shadow_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -498,7 +498,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: grayscale(100%)</pre> -<div id="grayscale_example" style="display: none;"> +<div id="grayscale_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -582,7 +582,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> -<div id="huerotate_example" style="display: none;"> +<div id="huerotate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -669,7 +669,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: invert(100%)</pre> -<div id="invert_example" style="display: none;"> +<div id="invert_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -753,7 +753,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: opacity(50%)</pre> -<div id="opacity_example" style="display: none;"> +<div id="opacity_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -835,7 +835,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: saturate(200%)</pre> -<div id="saturate_example" style="display: none;"> +<div id="saturate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -916,7 +916,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: sepia(100%)</pre> -<div id="sepia_example" style="display: none;"> +<div id="sepia_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -1000,7 +1000,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre> -<div id="combination_example" style="display: none;"> +<div id="combination_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> diff --git a/files/ko/web/css/font/index.html b/files/ko/web/css/font/index.html index 209669ed77..9be79a3f01 100644 --- a/files/ko/web/css/font/index.html +++ b/files/ko/web/css/font/index.html @@ -104,9 +104,8 @@ p { font: bold italic large serif } p { font: status-bar } </pre> -<p id="HTML_Content" style="display: none;">HTML Content</p> +<p id="HTML_Content" class="hidden">HTML Content</p> -<pre class="brush: html" style="display: none;"><p> Change the radio buttons below to see the generated shorthand and it's effect. </p> <form action="createShortHand()"> @@ -200,9 +199,9 @@ p { font: status-bar } <br/><br/><br/><br/><br/><br/> </pre> -<p id="CSS_Content" style="display: none;">CSS Content</p> +<p id="CSS_Content" class="hidden">CSS Content</p> -<pre class="brush: css" style="display: none;">body, input { +<pre class="brush: css" class="hidden">body, input { font: 14px arial; overflow: hidden; } @@ -253,9 +252,9 @@ p { font: status-bar } display: inline-block; }</pre> -<p id="JavaScript_Content" style="display: none;">JavaScript Content</p> +<p id="JavaScript_Content" class="hidden">JavaScript Content</p> -<pre class="brush: js" style="display: none;">var textAreas = document.getElementsByClassName("curCss"), +<pre class="brush: js" class="hidden">var textAreas = document.getElementsByClassName("curCss"), shortText = "", getCheckedValue, setCss, diff --git a/files/ko/web/css/getting_started/javascript/index.html b/files/ko/web/css/getting_started/javascript/index.html deleted file mode 100644 index 94759e21bf..0000000000 --- a/files/ko/web/css/getting_started/javascript/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: JavaScript -slug: Web/CSS/Getting_Started/JavaScript -tags: - - 'CSS:Getting_Started' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -<p>이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.</p> -<p>II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.</p> -<p>대신 이 페이지들은 CSS의 다양한 사용법을 설명하기 위해서 디자인되었습니다. 이들 페이지들을 사용하려면, CSS에 대해 좀 알고 있어야만 합니다, 그러나, 다른 분야 기술들에대한 어떤 지식을 필요로하지는 않습니다.</p> -<h3 id=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29" name=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29">정보: 자바스크립트(JavaScript)</h3> -<p>자바스크립트(JavaScript)는 - <i> - 프로그래밍 언어</i> - 입니다. 모질라 애플리케이션( 예를 들면, 모질라 브라우저) 사용할 때, 컴퓨터가 실행시키는 코드의 많은 부분이 자바스크립트로 쓰여져 있습니다.</p> -<p>자바스크립트는 스타일 시트와 상호작용하여, 문서 스타일을 동적으로 변화시키는 프로그램을 쓸 수 있게 해줍니다.</p> -<p>이렇게 하는데 세가지 방법이 있습니다:</p> -<ul> - <li>문서의 스타일 시트 리스트와 함께 작동함으로써 — 예: 스타일 시트를 첨가, 제거, 또는 수정함으로써</li> - <li>스타일 시트의 규칙(rules)와 함께 작동함으로써 — 예: 규칙을 첨가, 제거, 또는 수정 함으로써</li> - <li>DOM내의 각 엘리먼트(element)와 함께 작동함으로써 — 예: 문서 스타일을 문서의 스타일 시트와는 독립적으로 수정함으로써</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - More details</caption> - <tbody> - <tr> - <td>모질라에서의 자바스트립트에 대해 더 많은 정보를 원하시면, 이 위키(wiki)에 있는 <a href="ko/JavaScript">JavaScript</a>페이지를 보세요.</td> - </tr> - </tbody> -</table> -<h3 id=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29" name=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29">액션: 자바스크립트 예제(demonstration)</h3> -<p>새로은 HTML 문서 <code>doc5.html</code>를 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> - -<HEAD> -<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE> -<LINK rel="stylesheet" type="text/css" href="style5.css"> -<SCRIPT type="text/javascript" src="script5.js"></SCRIPT> -</HEAD> - -<BODY> -<H1>JavaScript sample</H1> - -<DIV id="square"></DIV> - -<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON> - -</BODY> -</HTML> -</pre> -</div> -<p>새로운 CSS 파일 <code>style5.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p> -<div style="width: 48em;"> - <pre>/*** JavaScript demonstration ***/ -#square { - width: 20em; - height: 20em; - border: 2px inset gray; - margin-bottom: 1em; - } - -button { - padding: .5em 2em; - } -</pre> -</div> -<p>새로운 텍스트 파일 <code>script5.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p> -<div style="width: 48em;"> - <pre>// JavaScript demonstration -function doDemo (button) { - var square = document.getElementById("square") - square.style.backgroundColor = "#fa4" - button.setAttribute("disabled", "true") - setTimeout(clearDemo, 2000, button) - } - -function clearDemo (button) { - var square = document.getElementById("square") - square.style.backgroundColor = "transparent" - button.removeAttribute("disabled") - } -</pre> -</div> -<p>브라우저에서 문서을 열고 버튼을 누르세요.</p> -<p>이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:</p> -<table> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><b>JavaScript demonstration</b></p> - <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;"> - <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><b>JavaScript demonstration</b></p> - <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;"> - <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p>이 예제에서 주의할 점:</p> -<ul> - <li>HTML 문서는 전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.</li> - <li>스크립트는 DOM안의 개개의 엘리먼트(element)와 함께 작동합니다. 스크립트는 사각형(square)의 스타일을 직접 수정합니다. 스크립트는 버튼의 스타일을 속성(attribute)을 변경함으로써 간접적으로 수정합니다.</li> - <li>자바스크립트에서 <code>document.getElementById("square")</code> 는 그 기능상 CSS 선별자(selector) <code>#square</code> 와 유사합니다.</li> - <li>자바스크립트에서 <code>backgroundColor</code>는 CSS 속성 <code>background-color</code>에 상응합니다.</li> - <li>브라우저는 버튼이 사용할 수 없게 되었을 때 그 모습을 바꾸어 주는 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code>에 대한 내장된 CSS 규칙을 가지고 있습니다.</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>스크립트를 변경해서 사각형(square)이 색이 변할 때 오른쪽으로 20em 점프했다가 이후 되 돌아오게 만드세요.</td> - </tr> - </tbody> -</table> -<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4> -<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p> -<p>이 예제에서 HTML 문서가 단지 버튼 엘리먼트만이 스크립트를 사용함에도 불구하고 스크립트에 링크를 가지고 있었습니다. 모질라는 CSS를 확장해서 자바스크립트 코드를 (내용물과 다른 스타일 시트들도) 선택된 엘리먼트에 링크할 수 있게 합니다. 다음 페이지에서는 다음을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XBL_bindings">XBL bindings</a></b></p> diff --git a/files/ko/web/css/image-rendering/index.html b/files/ko/web/css/image-rendering/index.html index 85522966f0..01bae01e74 100644 --- a/files/ko/web/css/image-rendering/index.html +++ b/files/ko/web/css/image-rendering/index.html @@ -47,7 +47,7 @@ image-rendering: unset; <dd>이미지 스케일링을 크게 확대할 때는 "nearest neighbor" 혹은 비슷한 알고리즘을 반드시 사용해야 합니다. 그래서 이미지의 큰 픽셀로 구성해서 나타낼 수 있습니다. 이미지를 작게 축소할 때는 "auto" 속성과 같습니다.</dd> </dl> -<div class="note">The values <span id="cke_bm_145S" style="display: none;"> </span><code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div> +<div class="note">The values <span id="cke_bm_145S" class="hidden"> </span><code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div> <h3 id="공식_문법">공식 문법</h3> diff --git a/files/ko/web/css/index/index.html b/files/ko/web/css/index/index.html deleted file mode 100644 index 953130cd26..0000000000 --- a/files/ko/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: CSS documentation index -slug: Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index ---- -<p>{{Index("/ko/docs/Web/CSS")}}</p> diff --git a/files/ko/web/guide/css/media_queries/index.html b/files/ko/web/css/media_queries/using_media_queries/index.html index 559b5805c6..78061792a4 100644 --- a/files/ko/web/guide/css/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 --- <div>{{cssref}}</div> diff --git a/files/ko/web/css/reference/property_template/index.html b/files/ko/web/css/reference/property_template/index.html deleted file mode 100644 index 9df3680b49..0000000000 --- a/files/ko/web/css/reference/property_template/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Property Template -slug: Web/CSS/Reference/Property_Template -tags: - - CSS - - MDN Meta -translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template ---- -<p>{{MDNSidebar}}</p> - -<div class="blockIndicator note"> -<p><span class="seoSummary">This is a template page for CSS property. Please use this as a raw template when you create a new CSS property page.</span><br> - <em>Comment in italics are information about how to use part of the template</em></p> -</div> - -<p>{{CSSRef}}</p> - -<p><em>Add the non-standard header if the property is not on the standard track. In the summary section, in a note, describe how to achieve its effect using standard Open Web technologies.</em></p> - -<p>{{Non-standard_Header}}</p> - -<p><em>Add the experimental header if in your judgement the property's behavior is likely to change in future, for example because of very immature specifications or competing incompatible implementations.</em></p> - -<p>{{SeeCompatTable}}</p> - -<p><em>Description of the property. It must start by "The <code>xyz</code> CSS property" followed by a one-sentence description. The first paragraph of this introduction will be used by default as the description of the page.</em></p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Placeholder for any special messages.</p> -</div> - -<p><em>But don't add several notes. It should be really important, or be part of the description!</em></p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css;">/* Keyword values */ -property: value1; -property: value2; - -/* <length> values */ -property: 12.8em; /* A valid length */ - -/* Global values */ -property: inherit; /* <-- To remember those are a possible values */ -property: initial; -property: unset; -</pre> - -<p><em>The second part of the is a simple translation of the what the formal syntax tells. It is aimed at medium-level users that will not understand well the formal syntax. </em></p> - -<h3 id="Values">Values</h3> - -<p><em>Each element of the formal syntax must be explained</em></p> - -<dl> - <dt><code>value_1</code></dt> - <dd>Is a keyword meaning...</dd> - <dt><code>value_2</code> {{Non-standard_Inline}} {{Experimental_Inline}}</dt> - <dd>Is a keyword meaning</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -<p><em>The formal syntax must be taken from the spec and added to the <a href="https://github.com/mdn/data">MDN data repository</a>. It is an important tool to get precise syntax information for advanced users.</em></p> - -<pre class="syntaxbox">{{CSSSyntax}}</pre> - -<h2 id="Examples">Examples</h2> - -<p><em>Add this only if there is such an example. No dead link here.</em></p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush:css"><em>elementName { - property: value; - thisis: "example"; - dream: 10000000mm; - love: "danger"; -}</em></pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><em><elementName>foo bar</elementName></em></pre> - -<h3 id="Result">Result</h3> - -<p><em>{{EmbedLiveSample("Examples")}}</em></p> - -<h2 id="Specifications">Specifications</h2> - -<p><em>Exclusively use this standard table. Place older spec on the bottom. Use the templates SpecName() for the name and Spec2() for the status. That way, when the spec progress on the standard track, or move, the table content will be automatically adapted.</em></p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}</td> - <td>{{Spec2("CSS3 Animations")}}</td> - <td>No change from CSS 2.1</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "#fake-link", "fake value")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p><em>(See <a href="/Project:en/Compatibility_tables" title="Project:en/Compatibility_tables">Compatibility tables</a> for more information)</em></p> - - - -<p>{{Compat("css.property.<em>property-name</em>")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li><em>Links of link of related properties: {{CSSxRef("example-property")}}</em></li> - <li><em>Links to article showing how to use the property in context: "Using … article"</em></li> - <li><em>Very good external links. Don't be afraid of external links, but they should be outstanding, and not only mention minor details.</em></li> -</ul> diff --git a/files/ko/web/css/transition-delay/index.html b/files/ko/web/css/transition-delay/index.html index 17a8543321..58b3e456cd 100644 --- a/files/ko/web/css/transition-delay/index.html +++ b/files/ko/web/css/transition-delay/index.html @@ -44,7 +44,7 @@ transition-delay: unset; <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -111,7 +111,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -178,7 +178,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -245,7 +245,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> 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: <url> -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 --- <div>{{ CssRef() }}</div> diff --git a/files/ko/web/guide/css/visual_formatting_model/index.html b/files/ko/web/css/visual_formatting_model/index.html index 4b32d08a30..4f516071b3 100644 --- a/files/ko/web/guide/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 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/시작하기/리스트/index.html b/files/ko/web/css/시작하기/리스트/index.html deleted file mode 100644 index 0e0e215006..0000000000 --- a/files/ko/web/css/시작하기/리스트/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: 리스트 -slug: Web/CSS/시작하기/리스트 -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -<p>{{ CSSTutorialTOC() }}</p> -<div class="warning"> - <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> -<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지 설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.</p> -<h2 class="clearLeft" id="정보_리스트">정보: 리스트</h2> -<p><a href="/en-US/docs/CSS/Getting_Started/Content" title="/en-US/docs/CSS/Getting_Started/Content">지난 섹션</a>에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.</p> -<p>CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.</p> -<p>리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.</p> -<p>CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.</p> -<h3 id="무순서_리스트">무순서 리스트</h3> -<p><em>무순서</em> 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.</p> -<p>CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.</p> -<ul style="padding-left: 2em;"> - <li style="list-style-type: disc;"><code>disc</code></li> - <li style="list-style-type: circle;"><code>circle</code></li> - <li style="list-style-type: square;"><code>square</code></li> -</ul> -<p>다른 이미지도 URL로 설정 가능하다.</p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.</p> - <pre class="brush:css">li.open {list-style: circle;} -li.closed {list-style: disc;} -</pre> - <p>When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):</p> - <pre class="brush:css"><ul> - <li class="open">Lorem ipsum</li> - <li class="closed">Dolor sit</li> - <li class="closed">Amet consectetuer</li> - <li class="open">Magna aliquam</li> - <li class="closed">Autem veleum</li> -</ul> -</pre> - <p>위 코드는 아래처럼 보여질 것이다.</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <ul style="padding-right: 6em;"> - <li style="list-style-type: circle;">Lorem ipsum</li> - <li style="list-style-type: disc;">Dolor sit</li> - <li style="list-style-type: disc;">Amet consectetuer</li> - <li style="list-style-type: circle;">Magna aliquam</li> - <li style="list-style-type: disc;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="순차_리스트">순차 리스트</h3> -<p>순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.</p> -<p>{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.</p> -<ul style="padding-left: 2em;"> - <li style=""><code>decimal</code></li> - <li style=""><code>lower-roman</code></li> - <li style=""><code>upper-roman</code></li> - <li style=""><code>lower-latin</code></li> - <li style=""><code>upper-latin</code></li> -</ul> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.</p> - <pre class="brush:css">ol.info {list-style: upper-latin;} -</pre> - <p>아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <ul> - <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - 좀더 자세히</div> - <p>{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.</p> - <p>만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.</p> - <p>브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.</p> -</div> -<h3 id="카운터">카운터</h3> -<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> - <p><strong>참고: </strong> 일부 브라우저는 카운터를 지원하지 않는다. <a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site의 </a><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html">CSS 내용물과 브라우저 호환성</a> 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 <a href="/en/CSS_Reference" title="https://developer.mozilla.org/en/CSS_Reference">CSS 참조Reference</a>의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.</p> -</div> -<p>리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.</p> -<p>순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.</p> -<p>element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.</p> -<p>카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.</p> -<p>카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 <code>content속성을 사용하여라.</code>(이전 페이지에서, <strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong>사용에 대해 참고하라).</p> -<p><code>content</code> 속성 값에 <code>counter()카운터 이름과 함께 사용하라.</code> 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 <strong>Ordered lists</strong> 섹션에 나온것과 같다.</p> -<p>보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.</p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.</p> - <pre class="brush:css">h3.numbered {counter-reset: mynum;} -</pre> - <p> </p> - <p>이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.</p> - <pre class="brush:css">p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold;} -</pre> - <p>결과는 아래와 같다.</p> - <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> - <tbody> - <tr> - <td><strong>Heading</strong><br> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - 좀더 자세히</div> - <p>카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.</p> - <p>카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.</p> - <p>좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 를 확인 하라.</p> -</div> -<h2 id="액션_화려한_리스트">액션: 화려한 리스트</h2> -<p><code>새로이 doc2.html</code>파일을 만들어라. 아래 코드를 복사하라.</p> -<pre class="brush:html;"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document 2</title> - <link rel="stylesheet" href="style2.css"> - </head> - <body> - - <h3 id="oceans">The oceans</h3> - <ul> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - - <h3 class="numbered">Numbered paragraphs</h3> - <p class="numbered">Lorem ipsum</p> - <p class="numbered">Dolor sit</p> - <p class="numbered">Amet consectetuer</p> - <p class="numbered">Magna aliquam</p> - <p class="numbered">Autem veleum</p> - - </body> -</html> -</pre> -<p><code>style2.css</code>를 만들어 아래 내용을 복사하라.</p> -<pre class="brush:css;">/* numbered paragraphs */ -h3.numbered {counter-reset: mynum;} - -p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold; -} -</pre> -<p>배치와 주석이 맘에 들지 않으면 마음대로 변경하라.</p> -<p>브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)</p> -<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> -<div class="tuto_example"> - <div class="tuto_type"> - 도전</div> - <p>예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.</p> - <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </td> - </tr> - </tbody> - </table> - <p> </p> - <p>예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.</p> - <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> - <p><strong>. . .</strong></p> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> - </table> -</div> -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">정답 확인.</a></p> -<h2 id="다음에는">다음에는?</h2> -<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(<a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">boxes</a>.xm).</p> diff --git a/files/ko/web/css/시작하기/배치/index.html b/files/ko/web/css/시작하기/배치/index.html deleted file mode 100644 index 86ea912bb7..0000000000 --- a/files/ko/web/css/시작하기/배치/index.html +++ /dev/null @@ -1,370 +0,0 @@ ---- -title: 배치 -slug: Web/CSS/시작하기/배치 -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -<p>{{ CSSTutorialTOC() }}</p> - -<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> - -<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자")}}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.</p> - -<h2 class="clearLeft" id="정보_배치">정보: 배치</h2> - -<p>Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.</p> - -<p>여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.</p> - -<p>여기서는 간단한 기술에 대해 연습 해 보자.</p> - -<h3 id="Document_구조">Document 구조</h3> - -<p>만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.</p> - -<p>document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 {{ HTMLElement("div") }} element를 사용 할 수 있다.</p> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<p>예제 Document에서 <u>Numbered paragraphs</u>가 표시된 단락은 컨테이너 구조가 아니다.</p> - -<p>따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.</p> - -<p>이 구조적 문제를 해결 하기 위해, {{ HTMLElement("div") }}태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.</p> - -<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> -<div id="numbered"> - <p>Lorem ipsum</p> - <p>Dolor sit</p> - <p>Amet consectetuer</p> - <p>Magna aliquam</p> - <p>Autem veleum</p> -</div> -</pre> - -<p>이제 예제 stylesheet 에 두 리스트에 주변의 경계 표시를 위한 규칙 하나를 아래와 같이 추가 하자.</p> - -<pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - -<p>아래와 같은 형식으로 출력된다.</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="크기_단위">크기 단위</h3> - -<p>지금까지 이 안내서에서는 크기를 픽셀(px)단위로 표시 해왔다. 컴퓨터 화면과 같은 출력장치에서는 어느 정도 적절한 표시 방법이다. 그러나, 사용자가 글씨 크기를 바꿔 버리면 화면 출력은 이상하게 엉켜버릴 수 있다.</p> - -<p>다양한 용도를 위해 크기는 백분위(%)값이나, 고정넓이폰트 값(em)으료 표시하는 것이 더 좋은 방법이다. 고정 넓이 폰트 값(em)은 현재 사용되는 글씨체중 'm'에 해당하는 넓이를 기준으로 하고 있다.(영문에서는 'm'이 가장 넓은 폰트이다). 사용자가 글씨 크기를 바꾸면 배치는 자동적으로 맞추어 질 것이다.</p> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<p>아래 텍스트의 왼쪽에 있는 경계는 픽셀로 크기를 지정 했다.</p> - -<p>오른쪽은 고정 넓이 폰트값(aka ems)으로 지정 했다.</p> - -<p>브라우저에서 글씨 크기를 변경하고 확인 해보면 오른쪽은 적당한 크기를 유지하지만, 왼쪽은 그렇지 않다는 것을 확인 할 수 있을 것이다.</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <div style="">RESIZE ME PLEASE</div> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">좀더 자세히</div> - -<p>다른 기기에서는 다른 단위가 적절할 수 있다.</p> - -<p>이 안내서 나중 페이지에 이에 대해 좀더 자세히 알아 보도록 하자.</p> - -<p>변수 값과 단위에 대해 상세하게 확인 하고 싶다면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> 부분을 참고 하라.</p> -</div> - -<h3 id="텍스트_배치">텍스트 배치</h3> - -<p>element 내용물을 배치하는데는 두가지 속성이 있다. 이 두가지를 통해 간단하게 배치/정열을 조절 할 수 있다.</p> - -<dl> - <dt>{{ cssxref("text-align") }}</dt> - <dd>이 <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>값로 할당하여 정열 할 수 있다.</dd> - <dt>{{ cssxref("text-indent") }}</dt> - <dd>들여쓰기를 위해 적당한 값을 명시하여 사용 한다.</dd> -</dl> - -<p>이 두 속성은 실제 텍스트 외에도 모든 텍스트 같은(text-like) element에도 영향을 미친다. 속성들은 부모로부터 자식까지 상송되므로, 자식 element에서 부모로 부터 받지 않으려는 속성에 대해서 정확하게 제거 하는 규칙을 추가 하지 않는다면 원하는 결과를 얻지 못할지 모른다.</p> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<p>헤더를 가운데 정렬하려면</p> - -<pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - -<p>결과는 아래와 같다.</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> -</table> - -<p>HTML document에서, 헤더 아래쪽에 보여지는 내용물(content)는 헤더에서 구조적으로 포함된 사항이 아니다. 그러므로 이와 같은 헤더를 정렬하려면 헤더 아래쪽 테그는 그 스타일을 상속 받아서는 안된다.</p> -</div> - -<h3 id="부유(Floats)">부유(Floats)</h3> - -<p>{{ cssxref("float") }}속성은 element를 강제로 왼쪽 혹은 오른쪽으로 정렬시킨다. 이것이 element의 위치와 크기를 조정하는 가장 간단한 방법이다.</p> - -<p>나머지 document의 내용물(content)는 부유 속성의 element 주변으로 떠있게 된다. {{ cssxref("clear") }} 속성을 통해서 element들을 부유 element로 부터 떨어져 고정 위치하도록 한다.</p> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<p>예제 document에서 리스트는 윈도우의 크기에 맞게 늘어난다. 이를 방지하기 위해서는 부유속성으로 왼쪽으로 정렬되도록 하면 된다.</p> - -<p>아래 예로 헤더를 왼쪽 한곳에 고정 시키려면 clear속성과 left를 함께 선언 해 주어야 한다.</p> - -<pre class="brush:css">ul, #numbered {float: left;} -h3 {clear: left;} -</pre> -</div> - -<p>The result looks like:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>(텍스트가 경계선에 바짝 붙어 있다면 박스의 오른편에 약간의 내부 여백 필요할듯 하다.)</p> - -<h3 id="위치잡기">위치잡기</h3> - -<p>{{ cssxref("position") }}속성에 아래 4가지 방법으로 값을 선언하여 위치를 잡을 수 있다.</p> - -<p>더 많은 속성이 있지만 아래와 같은 간단한 방법으로(여기서는 초급 안내서이므로) 위치를 조정 할 수 있다. 그러나 아래 방법을 조합해서 쓴다면 다소 어려워 질 것이다.</p> - -<dl> - <dt><code>relative</code></dt> - <dd>element의 위치는 상대적으로 정해진다. 어느 정도 값을 지정 함으로 element를 위치 시킬 수 있다. element의 바깥 여백값을 설정함으로 이와 동일한 설정 효과를 볼 수도 있다.</dd> - <dt><code>fixed</code></dt> - <dd>고정 위치 설정법. document window에서의 상대적 위치를 지정하는 방법이다. document의 나머지 부분이 스크롤 되어야 할지라도 해당 element는 고정 값을 가진다.</dd> - <dt><code>absolute</code></dt> - <dd>부모 element의 위치에 상대적으로 위치가 고정된다. 그 부모 element는 위치 지정 방법이 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 중 하나이어야 한다. element의 위치 속성을 releative로 설정 한다면 방향 표시를 하지 않더라도 어떠한 속성을 가진 부모 element에도 잘 동작 할 것이다.</dd> - <dt><code>static</code></dt> - <dd>기본 설정 값이다. 명확하게 상속받은 위치 지정을 해제하려면 이 값으로 선언 해야 한다.</dd> -</dl> - -<p>이 위치 지정 속성과 함께(<code>static은 제외</code>) 방향(<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>), 높이(<code>width)</code>, 넓이(<code>height) 크기(size)도 같이 지정 해야 한다.</code></p> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<p>아래 두 element의 Top정렬을 동일한 위치에 설정 하려면 예제 Document의 두 element에 부모 container를 만들어라.</p> - -<pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - -<p>예제 stylesheet에서 부모 element의 위치 속성을 <code>relative로 하라.</code> 방향 속성까지 같이 할 필요는 없다.자식 element의 위치는 absolute로 설정하라.</p> - -<pre class="brush:css">#parent-div { - position: relative; - font: bold 200% sans-serif; -} - -#forward, #back { - position: absolute; - margin:0px; /* no margin around the elements */ - top: 0px; /* distance from top */ - left: 0px; /* distance from left */ -} - -#forward { - color: blue; -} - -#back { - color: red; -} -</pre> - -<p>결과는 아래처럼 백슬레쉬(\)와 슬레쉬(/)가 겹쳐서 위치 되도록 하였다.</p> - -<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> - -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> -</div> - -<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">좀더 자세히</div> - -<p>위치 지정에 대한 모든 내용은 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a>과 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>의 두 챕터에 나와 있다.</p> - -<p>다양한 브라우저에서 동작하도록 stylesheet를 설계하고자 한다면, 브라우저별로 표준을 다르게 해석하는 것과 특정 버전의 브라우저에 있는 버그에 대해서도 고려해야 한다.</p> -</div> - -<h2 id="액션_배치_선언">액션: 배치 선언</h2> - -<ol> - <li><code>doc2.html와</code> <code>style2.css를 수정 하여 위에 나온</code><a href="#Document_structure" title="#Document structure"><strong>Document structure</strong></a> 와 <a href="#Floats" title="#Floats"><strong>Floats</strong></a>를 연습 해 보자.</li> - <li><a href="#Floats" title="#Floats"><strong>Floats</strong></a>예제에서 텍스트를 오른쪽 경계와의 안쪽 여백을 0.5 em로 설정 하라.</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">도전</div> - -<p><code>doc2.html의 아래쪽 </body> 바로 위에 아래 태그를 추가하라</code>.</p> - -<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - -<p>아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.</p> - -<table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td> - </tr> - </tbody> -</table> - -<p>Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.</p> - -<p>Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.</p> - -<p>브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.</p> - -<div style="position: relative; width: 29.5em; height: 18em;"> -<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - -<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> -<ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> -</ul> -</div> - -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - -<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> -<p><strong>1: </strong>Lorem ipsum</p> - -<p><strong>2: </strong>Dolor sit</p> - -<p><strong>3: </strong>Amet consectetuer</p> - -<p><strong>4: </strong>Magna aliquam</p> - -<p><strong>5: </strong>Autem veleum</p> -</div> - -<p style=""> </p> - -<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> -</div> -</div> -</div> - -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Layout">정답 확인.</a></p> - -<h2 id="다음에는">다음에는?</h2> - -<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 <a href="/en-US/docs/CSS/Getting_Started/Tables" title="/en-US/docs/CSS/Getting_Started/Tables">테이블</a>의 스타일을 설정하는 방법에 대해 알아보자.</p> diff --git a/files/ko/web/css/시작하기/상자/index.html b/files/ko/web/css/시작하기/상자/index.html deleted file mode 100644 index cc6b499241..0000000000 --- a/files/ko/web/css/시작하기/상자/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: 상자 -slug: Web/CSS/시작하기/상자 -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -<p>{{ CSSTutorialTOC() }}</p> - -<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> - -<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.</p> - -<h2 class="clearLeft" id="정보_상자">정보: 상자</h2> - -<p>Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.</p> - -<p>가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">margin</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">padding</p> - - <div style="background-color: #eee;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> - </div> - </div> - </div> - - <p><em>옅은 회색은 레이아웃의 구성을 보여준다.</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #fff;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> - </div> - </div> - </div> - - <p><em>브라우저에서는 위와 같이 보여준다.</em></p> - </td> - </tr> - </tbody> -</table> - -<p>안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.</p> - -<h3 id="색상입히기">색상입히기</h3> - -<p>안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">margin</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">padding</p> - - <div style="background-color: #ded;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> - </div> - </div> - </div> - - <p><em>element는 녹색 배경색이다..</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #efe;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> - </div> - </div> - </div> - - <p><em>브라우저에서 보면 위와 같다.</em></p> - </td> - </tr> - </tbody> -</table> - -<h3 id="경계">경계</h3> - -<p>라인이나 상자를 통해 element의 경계를 치장 할 수 있다.</p> - -<p>경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.</p> - -<p>스타일은 아래와 같다.</p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 6em;"> - <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> - </td> - </tr> - <tr> - <td style="width: 6em;"> - <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> - </td> - </tr> - </tbody> -</table> - -<p>스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.</p> - -<p>경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할 수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.</p> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<p>아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.</p> - -<pre class="brush:css">h3 { - border-top: 4px solid #7c7; /* mid green */ - background-color: #efe; /* pale green */ - color: #050; /* dark green */ - } -</pre> - -<p>결과는 아래와 같다.</p> - -<table> - <tbody> - <tr> - <td> - <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> - </td> - </tr> - </tbody> -</table> - -<p>아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.</p> - -<pre class="brush:css">img {border: 2px solid #ccc;} -</pre> -</div> - -<p>결과는 아래와 같다.</p> - -<table> - <tbody> - <tr> - <td>Image:</td> - <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> - </tr> - </tbody> -</table> - -<h3 id="내외부_여백">내/외부 여백</h3> - -<p>내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.</p> - -<p>바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.</p> - -<p>위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.</p> - -<p>넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.</p> - -<p>4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.</p> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<p>아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.</p> - -<p>안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.</p> - -<pre class="brush:css">p.remark { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> - -<p>결과는 아래와 같다.</p> - -<table> - <tbody> - <tr> - <td> - <p>Here is a normal paragraph.</p> - - <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">좀더 자세히</div> - -<p>내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.</p> - -<p>브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.</p> - -<p>원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.</p> - -<p>내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 <a href="/en/CSS/box_model" title="en/CSS/box model"><span class="external">Box model</span></a>를 참조하라.</p> -</div> - -<h2 id="액션_경계선_추가">액션: 경계선 추가</h2> - -<p><code>style2.css</code>를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.</p> - -<pre class="brush:css">h3 {border-top: 1px solid gray;} -</pre> - -<p>이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.</p> - -<pre class="brush:css">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> - -<p>결과를 보기위해 브라우저에서 새로 읽어 보라.</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">도전</div> - -<p>예제 stylesheet에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; padding-left: 1em;"> - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p>(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)</p> -</div> - -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Boxes">결과 확인.</a></p> - -<h2 id="다음에는">다음에는?</h2> - -<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.</p> diff --git a/files/ko/web/css/시작하기/종속과_상속/index.html b/files/ko/web/css/시작하기/종속과_상속/index.html deleted file mode 100644 index 5c58432ad2..0000000000 --- a/files/ko/web/css/시작하기/종속과_상속/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: 종속과 상속 -slug: Web/CSS/시작하기/종속과_상속 -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -<p>{{ CSSTutorialTOC() }}</p> - -<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> - -<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "CSS 동작 원리")}}<span class="seoSummary"><a href="/en-US/docs/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.</span></p> - -<h2 class="clearLeft" id="정보_종속과_상속">정보: 종속과 상속</h2> - -<p>element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.</p> - -<p>종속의 세가지 주요 원천은 아래와 같다.</p> - -<ul> - <li>마크업 언어를 위한 브라우저의 기본 style들</li> - <li>document를 읽는 사용자가 정의하는 styles</li> - <li>만든이에 의해 Style은 Document와 연결된다. 다음 3곳에서 그 내용을 명시할 수 있다.These can be specified in three places: - <ul> - <li>외부 파일: 이 안내서에서 주로 취급하는 Style에 대한 정의하는 법.</li> - <li>Document의 시작 부분에 정의하는 법: 선언한 Style은 선언된 Document의 페이지에서만 사용된다.</li> - <li>Document body의 특정 element에: 유지 보수가 가장 불편한 방법이며, 주로 테스트 용도로 쓴다.</li> - </ul> - </li> -</ul> - -<p>사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.</p> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<p>이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.</p> - -<p>일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.</p> - -<p>일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.</p> -</div> - -<p>예제 Document를 브라우저에서 열면, {{ HTMLElement("strong") }} elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.</p> - -<p>{{ HTMLElement("strong") }} elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.</p> - -<p>{{ HTMLElement("strong") }} elements는 {{ HTMLElement("p") }} element의 자식 style이므로 대부분의 {{ HTMLElement("p") }} element의 style을 상속한다. 같은 방식으로, {{ HTMLElement("p") }} element는 {{ HTMLElement("body") }} element의 대부분의 style을 상속한다.</p> - -<p>종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.</p> - -<p>상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.</p> - -<p>우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.</p> - -<div class="tuto_details"> -<div class="tuto_type">좀더 자세히</div> - -<p>CSS는 <code>!important 키워드를 써서 </code>사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.</p> - -<p>이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.</p> - -<p>종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">속성 값 할당, 종속 및 상속</a> 부분을 보라.</p> -</div> - -<h2 id="액션_상속_사용하기">액션: 상속 사용하기</h2> - -<ol> - <li>CSS 예제 파일을 편집해 보자.</li> - <li>아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는{{ HTMLElement("p") }} element가 {{ HTMLElement("strong") }} element의 부모가 되므로 지역적으로 영향을 미친다. - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. {{ HTMLElement("strong") }} elements는 부모{{ HTMLElement("p") }} element의 밑줄 속성을 상속 받았다.<br> - - <p>그러나 {{ HTMLElement("strong") }} elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 {{ HTMLElement("p") }} element의 파란색 속성보다 우선한다.</p> - </li> -</ol> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> -</table> - -<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> - <caption>Before</caption> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <caption>After</caption> - <tbody> - <tr> - <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">도전</div> -Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라. - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> - -<pre class="brush: css">p {color: blue; } -strong {color: orange; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div> - -<h2 id="다음에는">다음에는?</h2> - -<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "설렉터")}}예제 Stylesheet의 <code><p></code>와 <code><strong> 태그</code>를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="/en-US/docs/CSS/Getting_Started/Selectors">설렉터</a>를 사용하는 법에 대해 알아보자.</p> diff --git a/files/ko/web/css/시작하기/테이블/index.html b/files/ko/web/css/시작하기/테이블/index.html deleted file mode 100644 index 17a57d49e9..0000000000 --- a/files/ko/web/css/시작하기/테이블/index.html +++ /dev/null @@ -1,475 +0,0 @@ ---- -title: 테이블 -slug: Web/CSS/시작하기/테이블 -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -<p>{{ CSSTutorialTOC() }}</p> -<div class="warning"> - <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/20)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> -<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.</p> -<h2 class="clearLeft" id="정보_테이블">정보 : 테이블</h2> -<p>테이블이란 정보를 사각 격자 형태로 배치하는 것을 말한다. 어떤 테이블은 복잡하게 구성 될 수 있으며 그 복잡한 테이블은 브라우저마나 다르게 보여줄 수도 있다.</p> -<p>Document를 디자인 할때, 테이블을 이용하여 내용들 간의 관개정보들을 표시 할 수 있다. 브라우저별로 테이블을 조금 다르게 표시하여도 정보를 보여주는데는 크게 문제 되지 않는다.</p> -<p>시각적인 표시의 사용목적으로 테이블을 사용하는 것은 좋지 않다. 테이블 보다는 이전 페이지에 소개한 배치(<strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong>)를 사용하는 것이 더 좋은 방법이다.</p> -<h3 id="테이블_구조">테이블 구조</h3> -<p>테이블에서는 각 내용들이 각 테이블 블럭에 표시된다.</p> -<p>테이블의 같은 줄의 블럭은 하나의 행을 구성한다.</p> -<p>몇몇 테이블에서는 행은 하나의 그룹으로 구성된다. 테이블의 첫 행의 그룹은 머릿말(<em>header)</em>로 사용된다. 테이블의 마지막 행의 그룹은 꼬릿말<em>(footer)</em>로 사용되기도 한다. 테이블의 다른 행들은 본문(<em>body</em>)이 되고 한 덩어리의 그룹으로 간주된다.</p> -<p>아래에 있는 블럭은 하나의 열(<em>column</em>)로 구성되었고 제한적으로 사용되는 CSS테이블 이다.</p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">설렉터</a>페이지 내의 <a href="/en/CSS/Getting_Started/Selectors#relselectors" title="en/CSS/Getting_Started/Selectors#relselectors">연관관계로 본 설렉터</a>의 테이블은 10개의 셀 블럭으로 구성된 5행 테이블이다.</p> - <p>첫번째 행은 머릿말이고 나머지 4개행은 본문이다. 꼬릿말은 없다.</p> - <p>열은 2개이다.</p> -</div> -<p>여기 안내서는 간단한 예제만을 다루고 있으며, 그 결과물은 쉽게 예상 가능한 수준이다. 간단한 테이블에서는 모든 셀블럭들은 하나의 행/열만을 차지한다. 셀이 하나 이상의 행이나 열을 차지하는 복잡한 테이블 구성 방법도 CSS를 통해 표현 가능하다. 그러나 이런 고급기술은 초급 안내서의 범주를 벗어난다.</p> -<h3 id="경계">경계</h3> -<p>셀 블럭은 바깥 여백이 없다.</p> -<p>셀블럭은 바깥 여백과 들여쓰기 공간이 없다. 기본적으로 경계는 테이블 내용과의 같격을 {{ cssxref("border-spacing") }}속성으로 조절 가능하다. 테이블의 {{ cssxref("border-collapse") }}속성을 <code>collapse</code>로 설정하면 이 여백을 없앨 수 있다.</p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>여기 세가지 테이블을 확인 해 보자.</p> - <p>왼쪽 테이블은 0.5 em 경계 여백을 가지고 있다. 가운데는 경계 여백을 0으로 했으며, 오른쪽은 collapse속성을 사용 하였다.</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style=""> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 2em;"> - <table style=""> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="캡션">캡션</h3> -<p>캡션({{ HTMLElement("caption") }}) elemen전체 테이블에 적용되는 라벨이다. 기본적으로 테이블 위쪽에 표시된다.</p> -<p>캡션을 아래쪽에 두고 싶다면 {{ cssxref("caption-side") }}속성 값을 <code>bottom</code>으로 설정하라. 속성은 상속되므로 상속받은 테이블들에 선택적으로 속성값 재설정도 가능하다.</p> -<p>캡션의 텍스트 스타일을 조정 하려면 텍스트 속성을 사용하면 된다.</p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>이 테이블은 아래쪽에 캡션을 가지고 있다.</p> - <pre class="brush: css">#demo-table > caption { - caption-side: bottom; - font-style: italic; - text-align: right; -} -</pre> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table> - <caption> - Suits</caption> - <tbody> - <tr> - <td> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid gray; text-align: center;">Clubs</td> - <td style="border: 1px solid gray; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid gray; text-align: center;">Diamonds</td> - <td style="border: 1px solid gray; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="빈_셀블럭">빈 셀블럭</h3> -<p>테이블 element에 {{ cssxref("empty-cells") }}: show로 설정 함으로 빈 셀블럭을 표시 할 수 있다.</p> -<p><code>empty-cells: hide로 설정하여 해당 셀블럭을 안보이도록 감출 수 있다. 셀의 부모 element가 배경색을 가지고 있다면 그 배경색이 보이게 될 것이다.</code></p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>이 테이블은 옅은 녹색 배경을 가지고 있으며, 셀은 진한 회색의 테두리와 회색 배경을 가지고 이다.</p> - <p>아래 테이블의 왼쪽은 빈 셀을 보여주고, 오른쪽은 셀감추기의 결과를 확인 할 수 있다.</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="background-color: #dfd;"> - <tbody> - <tr> - <td style="border: 1px solid #555; background-color: #eee;"> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="background-color: #dfd;"> - <tbody> - <tr> - <td> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - 자세히</div> - <p>CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">테이블</a>에서 좀더 자세한 테이블에 대한 사항을 확인 하라.</p> - <p>여기에서 보다 더 자세한 테이블에 관한 내용을 확인 할 수 있지만, 브라우저별로 다르게 보여지는 복잡한 테이블에 대한 사항은 포함하고 있지 않다.</p> -</div> -<h2 id="액션_테이블_꾸미기">액션 : 테이블 꾸미기</h2> -<ol> - <li><code>doc3.html파일을 만들어 아래 긴 코드를 전부 복사해 넣고 저장하라.</code> - <div style="height: 36em; overflow: auto;"> - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>Sample document 3</title> - <link rel="stylesheet" href="style3.css"> - </head> - <body> - <table id="demo-table"> - <caption>Oceans</caption> - <thead> - <tr> - <th></th> - <th>Area</th> - <th>Mean depth</th> - </tr> - <tr> - <th></th> - <th>million km<sup>2</sup></th> - <th>m</th> - </tr> - </thead> - <tbody> - <tr> - <th>Arctic</th> - <td>13,000</td> - <td>1,200</td> - </tr> - <tr> - <th>Atlantic</th> - <td>87,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Pacific</th> - <td>180,000</td> - <td>4,000</td> - </tr> - <tr> - <th>Indian</th> - <td>75,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Southern</th> - <td>20,000</td> - <td>4,500</td> - </tr> - </tbody> - <tfoot> - <tr> - <th>Total</th> - <td>361,000</td> - <td></td> - </tr> - <tr> - <th>Mean</th> - <td>72,000</td> - <td>3,800</td> - </tr> - </tfoot> - </table> - </body> -</html> -</pre> - </div> - </li> - <li><code>style3.css</code>를 만들어 아래 긴 내용을 전부 복사해 넣어라. - <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ - -#demo-table { - font: 100% sans-serif; - background-color: #efe; - border-collapse: collapse; - empty-cells: show; - border: 1px solid #7a7; -} - -#demo-table > caption { - text-align: left; - font-weight: bold; - font-size: 200%; - border-bottom: .2em solid #4ca; - margin-bottom: .5em; -} - - -/* basic shared rules */ -#demo-table th, -#demo-table td { - text-align: right; - padding-right: .5em; -} - -#demo-table th { - font-weight: bold; - padding-left: .5em; -} - - -/* header */ -#demo-table > thead > tr:first-child > th { - text-align: center; - color: blue; -} - -#demo-table > thead > tr + tr > th { - font-style: italic; - color: gray; -} - -/* fix size of superscript */ -#demo-table sup { - font-size: 75%; -} - -/* body */ -#demo-table td { - background-color: #cef; - padding:.5em .5em .5em 3em; -} - -#demo-table tbody th:after { - content: ":"; -} - - -/* footer */ -#demo-table tfoot { - font-weight: bold; -} - -#demo-table tfoot th { - color: blue; -} - -#demo-table tfoot th:after { - content: ":"; -} - -#demo-table > tfoot td { - background-color: #cee; -} - -#demo-table > tfoot > tr:first-child td { - border-top: .2em solid #7a7; -} -</pre> - </li> - <li>브라우저에서 열어서 아래와 같이 나오는 지 확인 하라. - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </li> - <li>화면에 보여지는 테이블과 stylesheet에 추가한 규칙과 비교하여 각 규칙이 어떻게 적용되었는지 확인해 보라. 원하는 방향으로 적용되지 않은 규칙이 있다면 해당 규칙을 주석 처리해서 저장한 후 브라우저로 다시 읽어 확인 해 보라. 아래는 위의 테이블에 관해 확인 해볼 사항이다. - <ul> - <li>캡션은 테이블 바깥 경계에 표시된다.</li> - <li>옵션에 최소 포인트 크기 세트가 있다면 km<sup>2</sup>에 있는 '2'처럼 어깨 글자에 적용 될 것이다.</li> - <li>테이블은 세가지 빈 셀 블럭을 가지고 있다. 그중 둘은 테이블 배경색을 그대로 보여줄 수 있도록 설정되어 있다. 세번째 빈 셀블럭은 자체 색상과 위쪽에 경계선을 가지고 있다.</li> - <li>콜론은 Stylesheet에서 추가 되었다.</li> - </ul> - </li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - 도전</div> - <p>아래처럼 보이도록 Stylesheet를 바꿔 보라</p> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> - </div> - </td> - </tr> - </tbody> - </table> - <p> </p> -</div> -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Tables" title="en/CSS/Getting started/Challenge solutions#Tables">정답 확인</a></p> -<h2 id="다음에는">다음에는?</h2> -<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Media", "미디어") }}이 장이 CSS의 속성과 그 변수에 대해 설명하는 마지막 장이다. 전체 속성 및 변수에 대해 확인 하려면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a>를 보라.</p> -<p>다음에는 CSS의 Stylesheet구조와 목적에 대해 <a href="/en-US/docs/CSS/Getting_Started/Media" title="/en-US/docs/CSS/Getting_Started/Media">다시한번 살펴보자</a>.</p> diff --git a/files/ko/web/css/시작하기/텍스트_스타일/index.html b/files/ko/web/css/시작하기/텍스트_스타일/index.html deleted file mode 100644 index 8866132472..0000000000 --- a/files/ko/web/css/시작하기/텍스트_스타일/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: 텍스트 스타일 -slug: Web/CSS/시작하기/텍스트_스타일 -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -<p>{{ CSSTutorialTOC() }}</p> - -<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> - -<p>{{previousPage("/en-US/docs/CSS/Getting_Started/Readable_CSS", "알기 쉬운 CSS")}}<span class="seoSummary"><a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기 </a>안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.</span></p> - -<h2 class="clearLeft" id="정보_텍스트_스타일">정보: 텍스트 스타일</h2> - -<p>CSS는 몇가지 텍스트 스타일에 대한 속성이 있다.</p> - -<p>여러가지에 대해 한번에 편리하게 사용할 수 있는 {{ cssxref("font") }}라는 속성에 대해 알아보자. 예를 들면</p> - -<ul> - <li>굵게, 기울기, 작은 대문자체</li> - <li>크기</li> - <li>라인 높이</li> - <li>글씨체</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">예제</div> - -<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;} -</pre> - -<p>위의 규칙은 모든 단락내용을 italic폰트로 설정 하는 등의 다양한 설정을 한다.</p> - -<p>폰트 크기를 부모 element의 단락 크기의 3/4크기로 하고 라인 크기를 보통보다 좀 큰 125%크기로 한다.</p> - -<p>글자체는 Comic Sans MS이다. 하지만 이 글씨체가 유효하지 않다면 브라우저는 기본 글씨체인 손글씨체를 사용 할 것이다.</p> - -<p>이 규칙에는 굵기와 작은 대문자 속성을 무력화 하는 오류를 포함하고 있다.</p> -</div> - -<h3 id="글씨체">글씨체</h3> - -<p>보통 Document에서 가용한 글씨체에는 어떤 것이 있는지 알고 작성할 수는 없다. 대체 가능한 글씨체를 같이 설정 해 주는 것도 좋은 방법이다.</p> - -<p>맨 마지막에는 기본 글씨체<code>(serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>)를 추가 설정 해 주는 것이 좋다.</p> - -<p>만약 document에서 지원 하지 않는 글씨체라면 브라우저가 다른 글씨체로 대체 할 것이다. 예를 들면, Document내에는 설정된 글씨체에서 지원 되지 않는 특수 문자를 포함 하는 경우 같은 것을 말한다. 브라우저는 자동적으로 다른 글씨체에서 위의 특수문자를 지원 한다면 그 글씨체를 사용하여 표시 할 것이다.</p> - -<p>글씨체를 설정 하기 위해서는 {{ cssxref("font-family") }}속성을 사용 하라.</p> - -<h3 id="글씨_크기">글씨 크기</h3> - -<p>브라우저는 보여지고 있는 페이지의 기본 글씨체의 크기와 텍스트의 크기를 바꿀 수 있어서 사용자에 맞는 것을 사용 할 수 있게 해준다.</p> - -<p><code>폰트 크기는 small, medium, large등 정해진 사이즈도 사용할 수 있다</code>. 또한 부모 글씨체 크기와 비교된(smaller, larger, 150%, 1.5 em) 값으로 설정 가능하다. 'em'은 'm'자의 폭을 말한다. 따라서 부모 element보다 1.5배 크기의 글씨크기를 말한다.</p> - -<p><code>14px</code> (14 pixels)와 같이 표시장치나 출력장치의 실체 크기로 지정 할 수도 있다. 이 경우는 크기를 바꿀수 없으므로 시각장애인들에게 불편할 수 있다. 이런 경우를 위해서는 document의 최 상위 element에서부터 정해진 크기 값중 하나인 'medium'으로 해 놓으면 하위 element는 그와 비교해 상대적인 값으로 크기를 설정 할 수 있다.</p> - -<p>글씨 크기를 설정 하려면 {{ cssxref("font-size") }}를 사용하라.</p> - -<h3 id="줄_높이">줄 높이</h3> - -<p>Line height는 줄간 높이를 말한다. 단락이 여러줄로 구성되었다면 보통보다 큰(larger-than-normal) 간격이 특히 작은 글씨라면 읽기 편하다.</p> - -<p>줄 높이 설정은 {{ cssxref("line-height") }}속성을 사용하라.</p> - -<h3 id="장식(Decoration)">장식(Decoration)</h3> - -<p>별도의 {{ cssxref("text-decoration") }} 속성으로 밑줄, 취소선 같은 다른 스타일 설정 할 수 있다. 설정된 장식(Decoration)속성을 없애기 위해서 값을 none을 쓸 수 있다.</p> - -<h3 id="다른_속성">다른 속성</h3> - -<p>기울기 속성 {{ cssxref("font-style") }}<code>: italic;</code><br> - 굵은 속성 <code>{{ cssxref("font-weight") }}: bold;</code><br> - 작은 대문자 <code>{{ cssxref("font-variant") }}: small-caps;</code></p> - -<p>위의 속성을 해제하려면 <code>normal</code> 또는 <code>inherit</code>로 설정하라.</p> - -<div class="tuto_details"> -<div class="tuto_type">좀더 자세히</div> - -<p>텍스트 스타일은 다양한 방법으로 설정 가능하다.</p> - -<p>예를 들면, 위에 언급한 속성들에 다른 사용 가능한 값들이 더 있다.</p> - -<p>복잡한 stylesheet에서는, 원치 않는 오류(설정 값이 다르게 나타나는 오류) 방지를 위해 약칭 <code>font 속성 사용을 피하라.</code></p> - -<p>글씨체에 관한 모든 속성을 보려면, CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a>부분을 보라. 다양한 텍스트 효과를 위해서는 <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a> 부분을 참고 하라.</p> - -<p>사용자 시스템 환경에 설치된 폰트 외에 다른 폰트를 설정하려면 <a href="/en/css/@font-face" title="https://developer.mozilla.org/en/css/@font-face">@font-face</a>로 온라인에 있는 폰트 설정 할 수 있다. 이를 위해서는 브라우저에서 해당 규칙을 지원해야 한다.</p> -</div> - -<h2 id="액션_글씨체_설정">액션: 글씨체 설정</h2> - -<p>간단한 document에서는, {{ HTMLElement("body") }} element의 글씨체를 설정 할 수 있으며, 그 이후에서는 이 속성을 상속한다.</p> - -<ol> - <li>예제 CSS 편집 해 보자.</li> - <li>예제의 Document에 아래 규칙을 추가 하라. CSS파일의 위쪽은 논리적인 곳(?)이다. 하지만 어디에 추가하든 그 속성은 적용 될 것이다. - <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} -</pre> - </li> - <li>주석을 탭이나 공백과 함께 잘 배치해 보라.</li> - <li>저장하고 브라우저를 다시 읽어보라. 해당 기기에 italic 스타일이 지원되지 않는 Comic Sans MS나 손글씨체 글씨체가 있다면 브라우저는 다음 예제의 첫출과 같이 italic이 지원되는 다른 글씨체로 바꿔서 보여 줄 것이다. - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>브라우저 메뉴에서 <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">도전</div> - -<p>다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.</p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Add the following style declaration to the <code>strong</code> rule:</p> - -<pre class="brush: css"> font: 200% serif; -</pre> -If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div> - -<h2 id="다음에는">다음에는?</h2> - -<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Color", "색상")}}이미 예제에서 몇가지 색상을 사용 해 왔다. <a href="/en-US/docs/CSS/Getting_Started/Color" title="/en-US/docs/CSS/Getting_Started/Color">다음 장에서는</a> 기본 색생과 다른 색상 표현 법에 대해 알아본다.</p> diff --git a/files/ko/web/guide/dom/index.html b/files/ko/web/guide/dom/index.html deleted file mode 100644 index fc26bc0bee..0000000000 --- a/files/ko/web/guide/dom/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -<p>{{draft}}</p> -<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> 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.</p> -<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p> -<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> -<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> -<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p> -<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> -<h2 id="More_about_the_DOM">More about the DOM</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/web/guide/그래픽/index.html b/files/ko/web/guide/graphics/index.html index cb7cd6f873..feb2816351 100644 --- a/files/ko/web/guide/그래픽/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/그래픽 --- <p><span class="seoSummary">웹 사이트 및 응용 프로그램은 종종 그래픽을 보일 필요가 있습니다.</span> 정지 이미지는 {{HTMLElement("img")}} 요소 사용이나 {{cssxref("background-image")}} 속성을 사용한 HTML 요소의 배경 설정으로 쉽게 표시할 수 있습니다. 또한 그래픽을 그때그때 생성하거나 사후에 이미지를 조작할 수도 있습니다. <span class="seoSummary">여기서는 이를 수행할 수 있는 법을 주의 깊게 살펴봅니다.</span></p> diff --git a/files/ko/web/guide/html/content_editable/index.html b/files/ko/web/guide/html/editable_content/index.html index 2e039ea976..583783c87a 100644 --- a/files/ko/web/guide/html/content_editable/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 --- <p><span class="seoSummary">HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.</span></p> diff --git a/files/ko/web/html/html5/index.html b/files/ko/web/guide/html/html5/index.html index 2d64ce56d6..ff48740224 100644 --- a/files/ko/web/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 --- <p><strong>HTML5</strong>는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 명세</a>는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중 많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 및 <a href="/ko/List_of_Mozilla-Based_Applications" title="ko/List of Mozilla-Based Applications">다른 많은 제품</a>으로 사용되어 있는 Mozilla의 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.</p> diff --git a/files/ko/web/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/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 --- <p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.</p> diff --git a/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html index 87cae41ebd..2927a70a19 100644 --- a/files/ko/web/html/html5_문서의_섹션과_윤곽/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_문서의_섹션과_윤곽 --- <div>{{HTMLSidebar}}</div> diff --git a/files/ko/web/guide/xml_파싱_및_직렬화/index.html b/files/ko/web/guide/parsing_and_serializing_xml/index.html index 872dfffaa3..7659099765 100644 --- a/files/ko/web/guide/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_파싱_및_직렬화 --- <p>웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.</p> diff --git a/files/ko/web/html/element/command/index.html b/files/ko/web/html/element/command/index.html deleted file mode 100644 index 8353384f2a..0000000000 --- a/files/ko/web/html/element/command/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: <command> -slug: Web/HTML/Element/command -tags: - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/command ---- -<div>{{obsolete_header()}}</div> - -<p><span class="seoSummary">The <strong>HTML Command element</strong> (<strong><code><command></code></strong>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar.</span> However, they can be used anywhere on the page.</p> - -<div class="note"> -<p>The <code><command></code> element is included in the W3C specification, but not in the WHATWG specification, and browser support is nonexistent. You should use the {{HTMLElement("menuitem")}} element instead, although that element is non-standard and only supported in Edge and Firefox.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, metadata content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>The <span>start tag</span> is mandatory, but, as it is a void element, the <span>use of an end tag</span> is forbidden.</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{HTMLElement("span")}} as child.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLCommandElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Indicates whether the command is selected. Must be omitted unless the <code>type</code> attribute is <code>checkbox </code>or <code>radio</code>.</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Iindicates that the command is not available.</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Gives a picture which represents the command.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>The name of the command as shown to the user.</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>This attribute gives the name of the group of commands, with a <code>type</code> of <code>radio</code>, that will be toggled when the command itself is toggled. This attribute must be omitted unless the <code>type</code> attribute is <code>radio</code>.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>This attribute indicates the kind of command. This can be one of three values. - <ul> - <li> - <p><code>command</code> or empty which is the default state and indicates that this is a normal command.</p> - </li> - <li> - <p><code>checkbox</code> indicates that the command can be toggled using a checkbox.</p> - </li> - <li> - <p><code>radio</code> indicates that the command can be toggled using a radio button.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: html"><command type="command" label="Save" - icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#commands')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.command")}}</p> - -<p>{{ HTMLRef }}</p> diff --git a/files/ko/web/html/element/element/index.html b/files/ko/web/html/element/element/index.html deleted file mode 100644 index be045093a5..0000000000 --- a/files/ko/web/html/element/element/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: <element> -slug: Web/HTML/Element/element -translation_of: Web/HTML/Element/element ---- -<div>{{HTMLRef}}{{obsolete_header}}</div> - -<p><span class="seoSummary">The obsolete <strong>HTML <code><element></code> element</strong> was part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> specification; it was intended to be used to define new custom DOM elements.</span> It was removed in favor of a JavaScript-driven approach for creating new custom elements.</p> - -<div class="warning"> -<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>???</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<p>The <code><element></code> element was formerly in a draft specification of <a href="http://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a> but it has been removed.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.element")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}</li> -</ul> diff --git a/files/ko/web/html/element/figure/index.html b/files/ko/web/html/element/figure/index.html index 3630515211..0d04b0123b 100644 --- a/files/ko/web/html/element/figure/index.html +++ b/files/ko/web/html/element/figure/index.html @@ -68,14 +68,14 @@ translation_of: Web/HTML/Element/figure <pre class="brush: html"><code><!-- Just an image --> <figure> <img - src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + src="https://developer.mozilla.org/static/img/favicon144.png" alt="A robotic monster over the letters MDN."> </figure> <!-- Image with a caption --> <figure> <img - src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + src="https://developer.mozilla.org/static/img/favicon144.png" alt="A robotic monster over the letters MDN."> <figcaption>MDN Logo</figcaption> </figure></code> diff --git a/files/ko/web/html/global_attributes/클래스/index.html b/files/ko/web/html/global_attributes/class/index.html index d0aa89b606..0e063c3f5d 100644 --- a/files/ko/web/html/global_attributes/클래스/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/클래스 --- <div>{{HTMLSidebar("Global_attributes")}}</div> diff --git a/files/ko/web/html/global_attributes/dropzone/index.html b/files/ko/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 15d26aad15..0000000000 --- a/files/ko/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Global_attributes/dropzone -tags: - - Deprecated - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> - -<p><strong><code>dropzone</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:</p> - -<ul> - <li><code>copy</code>, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.</li> - <li><code>move</code>, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.</li> - <li><code>link</code>, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.</li> -</ul> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> -</ul> diff --git a/files/ko/web/http/basics_of_http/evolution_of_http/index.html b/files/ko/web/http/basics_of_http/evolution_of_http/index.html index 827ca42f63..a968ca71d2 100644 --- a/files/ko/web/http/basics_of_http/evolution_of_http/index.html +++ b/files/ko/web/http/basics_of_http/evolution_of_http/index.html @@ -119,7 +119,7 @@ Vary: Cookie, Accept-Encoding GET /static/img/header-background.png HTTP/1.1 -Host: developer.cdn.mozilla.net +Host: developer.mozilla.org User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 Accept: */* Accept-Language: en-US,en;q=0.5 diff --git a/files/ko/web/http/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/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를_이용한_브라우저_감지 --- <div>{{HTTPSidebar}}</div> diff --git a/files/ko/web/http/headers/host/index.html b/files/ko/web/http/headers/host/index.html index 321ec35f49..5991e72b4c 100644 --- a/files/ko/web/http/headers/host/index.html +++ b/files/ko/web/http/headers/host/index.html @@ -40,7 +40,7 @@ translation_of: Web/HTTP/Headers/Host <h2 id="예제">예제</h2> -<pre>Host: developer.cdn.mozilla.net</pre> +<pre>Host: developer.mozilla.org</pre> <h2 id="명세">명세</h2> 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 new file mode 100644 index 0000000000..f8f301aa66 --- /dev/null +++ b/files/ko/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,1039 @@ +--- +title: JavaScript 재입문하기 (JS 튜토리얼) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +tags: + - CodingScripting + - Intermediate + - Intro + - JavaScript + - Learn + - Tutorial +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +original_slug: A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + +<p>어째서 재입문일까요? 왜냐하면, <a href="/ko/docs/Glossary/JavaScript">JavaScript</a>는 <a class="external" href="http://javascript.crockford.com/javascript.html">세계에서 가장 오해받고 있는 프로그래밍 언어</a>로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다.</p> + +<p>이 이야기를 이해하는데는 이 언어의 역사를 먼저 보는 것이 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 1996년 초에 Netscape 2와 함께 처음 릴리즈 되었습니다. 이것은 원래 LiveScript로 불리기로 되어 있었습니다만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 -두 언어 사이의 공통점이 매우 적음에도 불구하고- 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 결정은 역사상 유래가 없는 혼란의 근원이 되어버립니다.</p> + +<p>몇 달 후, Microsoft는 IE3와 함께 JScript를 발표했습니다. 이 JScript는 Javascript를 정말 닮았고 호환성이 좋았습니다. 몇 달 뒤에, Netscape는 1997년에 <a href="/ko/docs/Glossary/ECMAScript">ECMAScript</a> 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 <a class="external" href="http://www.ecma-international.org/">Ecma International</a>에 보냅니다. 이 표준은 1999년에 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a>에 따라 큰 규모의 개정을 거친 후, 유례없이 아주 안정된 상태로 계속 유지되고 있습니다. <span style="line-height: 16.7999992370605px;">4번째 판은 중도 포기되었는데, 언어의 복잡성 증가에 관련한 정치적 문제 때문이었습니다. 이 4번째 판의 많은 파트들은 ECMAScript edition 5 (2009년 12월에 출간)와 6번째 개정판 규격(2015년에 출간)의 근간을 형성하고 있습니다. </span></p> + +<div class="note"> +<p> 이제부터는 ECMAScript를 우리에게 좀 더 친근한 말인 <span style="line-height: 16.7999992370605px;"> "</span>JavaScript"라고 부르겠습니다.</p> +</div> + +<p>대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 이 언어는 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, <a href="http://nodejs.org/">node.js</a> 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, <a href="http://couchdb.apache.org/">Apache CouchDB</a>, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 <a href="http://www.gnome.org/">GNOME</a> 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다.</p> + +<h2 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h2> + +<p>JavaScript는 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러다임, 동적 언어입니다. 구문은 Java 및 C 언어를 기반으로합니다. 이러한 언어의 많은 구조가 JavaScript에도 적용됩니다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원합니다 (<a href="/ko//docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">프로토 타입 상속</a> 및 ES2015 {{jsxref("Classes")}}). JavaScript는 함수형 프로그래밍도 지원합니다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있습니다.</p> + +<p>어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다:</p> + +<ul> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Number">수 (Number)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/String">문자열 (String)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Boolean">부울 (Boolean)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Function">함수 (Function)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Object">객체 (Object)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Symbol">기호 (Symbol)</a> (ES2015에 새롭게 추가)</li> +</ul> + +<p>... 오, 그리고 약간 특별한 타입인 정의되지 않음(Undefined) 과 널(Null) 이 있습니다. 또한 객체의 특별한 종류인 <a href="ko/Web/JavaScript/Reference/Global_Objects/Array">배열(Array) 객체</a>. 그리고 자유롭게 사용할 수 있는 <a href="ko/Web/JavaScript/Reference/Global_Objects/Date">날짜(Date) 객체</a> 와 <a href="ko/Web/JavaScript/Reference/Global_Objects/RegExp">정규식(RegExp) 객체</a>가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다:</p> + +<ul> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Number">수 (Number)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/String">문자열 (String)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Boolean">부울 (Boolean)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Symbol">기호 (Symbol)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Object">객체 (Object)</a> + <ul> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Function">함수 (Function)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Array">배열 (Array)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Date">날짜 (Date)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/RegExp">정규식 (RegExp)</a></li> + </ul> + </li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/null">널 (Null)</a></li> + <li><a href="ko/Web/JavaScript/Reference/Global_Objects/undefined">정의되지 않음 (Undefined)</a></li> +</ul> + +<p>그리고 또 몇 가지 <a href="ko/Web/JavaScript/Reference/Global_Objects/Error">오류</a> 타입이 내장되어 있습니다. 그렇지만 처음 구조도를 기억하고만 있으면 다른 것들도 아주 쉽게 이해할 수 있을 것입니다.</p> + +<h2 id=".EC.88.98_.28Numbers.29" name=".EC.88.98_.28Numbers.29">수 (Numbers)</h2> + +<p>설계 명세서에 의하면 JavaScript에서 수는 "이중정밀도 64비트 형식 IEEE 754 값"으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 <strong>정수와 같은 것이 존재하지 않으므로 </strong>({{jsxref("BigInt")}} 제외), 조금 조심해야 합니다. 이 예제를 보세요:</p> + +<pre class="syntaxbox notranslate">console.log(3 / 2); // 1이 아닌, 1.5 +console.log(Math.floor(3 / 2)); // 1</pre> + +<p><em>명백한 정수</em>는 사실 <em>암묵적으로 실수</em>입니다.</p> + +<p>또한, 다음과 같은 것들을 주의하세요:</p> + +<pre class="brush: js notranslate">0.1 + 0.2 = 0.30000000000000004 +</pre> + +<p>실제로 정수 값은 32 비트 정수로 처리되며 일부 구현은 32 비트 정수가 아닌 숫자에 유효한 명령어를 수행 할 때까지 이러한 방식으로 저장합니다. 이는 비트 단위 작업에 중요 할 수 있습니다.</p> + +<p>덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators">산술 연산자</a>가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Math">수학(Math)</a>으로 불리는 내장 객체가 있습니다:</p> + +<pre class="brush: js notranslate">Math.sin(3.5); +var circumference = 2 * Math.PI * r;</pre> + +<p>내장 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code> 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다:</p> + +<pre class="brush: js notranslate">parseInt('123', 10); // 123 +parseInt('010', 10); // 10</pre> + +<p>구형 브라우저에서 "0"으로 시작하는 문자열은 8 진수 (기수 8)로 가정되지만, 2013 년 이후에는 그렇지 않습니다. 문자열 형식이 확실하지 않으면 이전 브라우저에서 놀라운 결과를 얻을 수 있습니다.</p> + +<pre class="brush: js notranslate">parseInt('010'); // 8 +parseInt('0x10'); // 16</pre> + +<p>이 같은 결과는 <code>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</code> 함수가 0으로 시작되는 문자열을 8진수로, "0x"로 시작하는 문자열은 16진수로 취급하기 때문에 발생합니다. 16진수 표기법이 그대로 유지됩니다. 8진수는 제거되었습니다.</p> + +<p>만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다:</p> + +<pre class="brush: js notranslate">parseInt('11', 2); // 3 +</pre> + +<p>이와 비슷하게, 내장 함수 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}를 사용하여 부동 소수점 숫자를 파싱 할 수 있습니다. {{jsxref("Global_Objects/parseInt", "parseInt()")}}과 달리 parseFloat()는 항상 10진수를 사용합니다.</p> + +<p>단항 연산자 + 를 사용하여 값을 숫자로 변환 할 수도 있습니다:</p> + +<pre class="brush: js notranslate">+ '42'; // 42 ++ '010'; // 10 ++ '0x10'; // 16</pre> + +<p>문자열이 수가 아닌 경우 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/NaN">NaN</a></code> ("Not a Number" (수가 아님)을 줄인 약자)로 불리는 특별한 값을 돌려줍니다:</p> + +<pre class="brush: js notranslate">parseInt('hello', 10); // NaN +</pre> + +<p><code>NaN</code> 는 독성을 가지고 있습니다: 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 <code>NaN</code>가 되기 때문입니다:</p> + +<pre class="brush: js notranslate">NaN + 5; // NaN +</pre> + +<p>내장 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code> 함수를 사용해서 <code>NaN</code> 인지 여부를 검사할 수 있습니다:</p> + +<pre class="brush: js notranslate">isNaN(NaN); // true +</pre> + +<p>JavaScript는 또 특별한 값 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code>와 <code>-Infinity</code>를 가지고 있습니다:</p> + +<pre class="brush: js notranslate"> 1 / 0; // Infinity +-1 / 0; // -Infinity</pre> + +<p>내장 함수 {{jsxref("Global_Objects/isFinite", "isFinite()")}}를 사용하여 Infinity, -Infinity 및 NaN 값을 테스트 할 수 있습니다.</p> + +<pre class="brush: js notranslate">isFinite(1 / 0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false</pre> + +<div class="note"> +<p>{{jsxref("Global_Objects/parseInt", "parseInt()")}} 와 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 함수는 숫자로 아닌 문자가 나올때까지 문자열을 파싱하고, 그 지점까지 파싱된 숫자를 반환합니다. 그런데 "+"연산자는 중간에 유효하지 않은 문자가 있으면 그대로 문자열을 <code>NaN</code> 으로 그냥 변환해버립니다. console에서 "10.2abc"를 파싱해보면 어떤점이 다른지 더 쉽게 이해할 수 있습니다.</p> +</div> + +<h2 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.28Strings.29" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.28Strings.29">문자열 (Strings)</h2> + +<p>JavaScript에서 문자열은 <a href="ko/Core_JavaScript_1.5_Guide/Unicode">유니코드 문자들</a>이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다.</p> + +<p>한 개의 문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다.</p> + +<p>문자열의 길이를 알고싶다면, 해당 문자열의 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code> 속성(해당 객체가 소유하고 있는 성질을 나타내는 값)에 접근하면 됩니다:</p> + +<pre class="brush: js notranslate">'hello'.length; // 5 +</pre> + +<p>우리의 첫 JavaScript 객체입니다! 문자열도 역시 객체로 취급된다고 언급했던적이 있죠? 다음과 같이 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">메소드</a>까지 있는 확실한 녀석입니다:</p> + +<pre class="brush: js notranslate">'hello'.charAt(0); // "h" +'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" +'hello'.toUpperCase(); // "HELLO"</pre> + +<h2 id=".EC.9D.B4.EC.99.B8.EC.9D.98_.ED.83.80.EC.9E.85.EB.93.A4" name=".EC.9D.B4.EC.99.B8.EC.9D.98_.ED.83.80.EC.9E.85.EB.93.A4">이외의 타입들</h2> + +<p>JavaScript는 의도적으로 값이 없음을 가리키는 '객체' 타입의 객체인 <code>null</code>과 초기화되지 않은 값 — 아직 어떤 값도 주어지않은(할당되지않은) 변수임을 가리키는 '정의되지 않음' 타입의 객체인 <code>undefined</code>로 구분됩니다. 값에 대해서 나중에 언급할 것이지만 JavaScript에서 변수에 값을 주지않고 선언하는 것이 가능합니다. 이럴 경우, 변수의 타입은 <code>undefined</code>이 되는 것입니다.</p> + +<p>JavaScript는 <code>true</code> 와 <code>false</code> 값 (둘은 모두 키워드로 예약되어있는 값)을 가질 수 있는 부울 타입을 가지고 있습니다. 다음과 같은 규칙에 따라 어떤 임의의 값을 부울값으로 변환할 수 있습니다:</p> + +<ol> + <li><code>false</code>, <code>0</code>, 빈 문자열 (<code>""</code>), 수가 아님을 뜻하는 <code>NaN</code>, <code>null</code>, 와 <code>undefined</code>은 모두 <code>false</code>가 됩니다.</li> + <li>다른 모든 값은 <code>true</code>가 됩니다.</li> +</ol> + +<p>이 변환은 <code>Boolean()</code> 함수를 써서 명시적으로 이 작업을 수행하실 수 있습니다:</p> + +<pre class="brush: js notranslate">Boolean(''); // false +Boolean(234); // true</pre> + +<p>하지만 반드시 이렇게 할 필요는 거의 없습니다. JavaScript는 이러한 변환 작업을 <code>if</code> 문 (아래를 보세요)과 같이 부울값이 필요한 경우를 만나게되면 자동으로 사용자가 모르는 사이에 처리해버리기 때문입니다. 이러한 이유로 인해 우리는 가끔 부울 타입으로 변환되었을 때, <code>true</code>와 <code>false</code>이 됨을 의미하는 값들을 각각 "참 값"과 "거짓 값"으로 부를 것입니다. 또는 각각 "참으로 취급되다"와 "거짓으로 취급되다"라는 식으로 불릴 수도 있습니다.</p> + +<p>부울 연산자는 <code>&&</code> (논리적<em>와, 그리고</em> ), <code>||</code> (논리적<em>또는</em> ), 그리고 <code>!</code> (논리적<em>부정</em> )이 지원됩니다. 아래에서 다시 언급하겠습니다.</p> + +<h2 id=".EB.B3.80.EC.88.98_.28Variables.29" name=".EB.B3.80.EC.88.98_.28Variables.29">변수 (Variables)</h2> + +<p>JavaScript에서 새로운 변수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="/ko/docs/Web/HTML/Element/var">var</a></code> 키워드로 선언됩니다.</p> + +<p><code>let</code>을 사용하면 블록 유효 범위 변수를 선언 할 수 있습니다. 선언 된 변수는 <em>변수가 포함 된 함수 블록</em>에서 사용할 수 있습니다.</p> + +<pre class="brush: js notranslate">let a; +let name = 'Simon';</pre> + +<p>아래는 let으로 선언한 변수가 가지는 유효 범위의 예제입니다. </p> + +<pre class="brush: js notranslate">// myLetVariable는 여기에서 보이지 *않습니다* + +for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { + // myLetVariable는 여기에서 유효합니다 +} + +// myLetVariable는 여기에서 보이지 *않습니다*</pre> + +<p><code>const</code>는 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. 변수는 <em>변수가 선언 된 함수 블록</em>에서 사용할 수 있습니다.</p> + +<pre class="brush: js notranslate">const Pi = 3.14; // 변수 Pi 설정 +Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생.</pre> + +<p><code>var</code>은 가장 일반적인 변수 선언 키워드입니다. <code>let</code>, <code>const</code> 키워드가 가지는 제한을 <code>var</code>은 갖지 않습니다. 이는 자바스크립트에서 변수를 선언하는 전통적인 유일한 방법이었기 때문입니다. <code>var</code> 키워드로 선언 된 변수는 <em>변수가 선언 된 함수 블록</em>에서 사용 할 수 있습니다.</p> + +<pre class="brush: js notranslate">var a; +var name = 'Simon';</pre> + +<p>var로 선언한 변수의 유효 범위 예제입니다.</p> + +<pre class="brush: js notranslate">// myVarVariable는 여기에서 사용 할 수 *있습니다* + +for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { + // myVarVariable는 함수 전체에서 사용 할 수 있습니다. +} + +// myVarVariable는 여기에서 사용 할 수 *있습니다*</pre> + +<p>변수에 값을 지정하지 않고 변수를 선언하면, 타입은 <code>undefined</code>로 지정 됩니다.</p> + +<p>자바스크립트와 자바 같은 다른 언어 사이의 중요한 차이점은 자바스크립트는 블록에 범위가 없다는 것입니다. 함수에만 범위가 있습니다. 변수가 복합 문에서 (예를 들어 <code>if</code> 제어 구조 내에서) var를 사용하여 정의 된 경우 전체 함수에서 볼 수 있습니다. 그러나 ECMAScript 2015부터 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 및 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/const">const</a></code> 선언을 사용하면 블록 범위 변수를 만들 수 있습니다.</p> + +<h2 id=".EC.97.B0.EC.82.B0.EC.9E.90_.28Operators.29" name=".EC.97.B0.EC.82.B0.EC.9E.90_.28Operators.29">연산자 (Operators)</h2> + +<p>JavaScript의 산술 연산자로는 <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>(나머지 연산자)가 있습니다. 값은 <code>=</code> 연산자로 할당할 수 있고, <code>+=</code> 와 <code>-=</code>처럼 다른 연산자를 같이사용해서 할당할 수 있습니다. 이렇게 쓰인 연산자는 <code>x = x<em>연산자</em> y</code>와 같은 결과를 나타냅니다.</p> + +<pre class="brush: js notranslate">x += 5; +x = x + 5; +</pre> + +<p><code>++</code> 와 <code>--</code> 를 각각 점진적인 증가와 감소에 사용할 수 있습니다. 이들은 또한 전처리 또는 후처리 연산자로 사용될 수 있습니다.</p> + +<p><a href="ko/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> 연산자</a>는 문자열 이어붙이기도 합니다:</p> + +<pre class="brush: js notranslate">'hello' + ' world'; // "hello world" +</pre> + +<p>문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀌게 됩니다. 다음 예를 보시면 무슨 말씀인지 아실 수 있을겁니다:</p> + +<pre class="brush: js notranslate">'3' + 4 + 5; // "345" + 3 + 4 + '5'; // "75"</pre> + +<p>빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령입니다.</p> + +<p>JavaScript에서 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">비교</a>는 <code><</code>, <code>></code>, <code><=</code> 와 <code>>=</code> 를 통해 가능합니다. 이 연산자들은 문자열과 수 양쪽 모두에서 동작합니다. 상동은 약간 직관성이 떨어지는데 이중 등호 (<code>==</code>) 연산자는 서로 다른 타입을 줄 경우 타입 강제 변환을 수행하기 때문에 다음과 같이 때때로 기대하지 않은 결과를 내보내기 때문입니다:</p> + +<pre class="brush: js notranslate">123 == '123'; // true +1 == true; // true +</pre> + +<p>타입 강제 변환을 하지 않게 하려면, 삼중 등호 연산자 (<code>===</code>)를 사용해야합니다:</p> + +<pre class="brush: js notranslate">123 === '123'; // false +1 === true; // false +</pre> + +<p>이와 비슷하게 <code>!=</code> 와 <code>!==</code> 연산자가 있습니다.</p> + +<p>JavaScript는 값을 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators">비트로 취급하는 연산자</a>도 가지고 있습니다. 사용하고 싶을 때 언제라도 사용할 수 있도록 말이죠.</p> + +<h2 id=".EC.A0.9C.EC.96.B4_.EA.B5.AC.EC.A1.B0" name=".EC.A0.9C.EC.96.B4_.EA.B5.AC.EC.A1.B0">제어 구조</h2> + +<p>JavaScript는 C 계열의 다른 언어들과 비슷한 제어 구조를 가지고 있습니다. 조건문은 <code>if</code> 와 <code>else</code>를 지원하는데, 원하시는대로 얼마든지 중첩 시켜서 사용할 수 있습니다:</p> + +<pre class="brush: js notranslate">var name = 'kittens'; +if (name == 'puppies') { + name += ' woof'; +} else if (name == 'kittens') { + name += ' meow'; +} else { + name += '!'; +} +name == 'kittens meow'; +</pre> + +<p>JavaScript는 <code>while</code> 반복문과 <code>do-while</code> 반복문도 사용할 수 있습니다. 첫번째 것은 단순 반복에 유용하게 사용할 수 있고, 두번째 것은 반복문이 반드시 적어도 한번이상 실행 되도록 하고 싶을 때 사용할 수 있습니다:</p> + +<pre class="brush: js notranslate">while (true) { + // 무한루프! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)); +</pre> + +<p>JavaScript의 <code>for</code> 반복문은 C 와 Java의 반복문과 같습니다. 말하자면, 반복문에 필요한 제어 정보를 한 줄에 표현할 수 있다는 이야기지요.</p> + +<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { + // 내부 동작을 5번 반복합니다 +} +</pre> + +<p>JavaScript에는 두개의 중요한 for 반복문 또한 포함됩니다. 첫번째로 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> 입니다.</p> + +<pre class="brush: js notranslate">for (let value of array) { + // value로 작업을 실행합니다 +} +</pre> + +<p>그리고 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for ... in</a> 입니다.</p> + +<pre class="brush: js notranslate">for (let property in object) { + // object의 항목(property)으로 작업을 실행합니다 +} +</pre> + +<p><code>&&</code> 와 <code>||</code> 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용합니다. 이는 다음과 같이 객체에 접근하기 전에 null 객체인지, 아닌지를 검사하는데 유용하게 사용될 수 있습니다:</p> + +<pre class="brush: js notranslate">var name = o && o.getName(); +</pre> + +<p>또는 (틀린값이 유효하지 않은 값일때) 캐싱 값에 대해서도 사용합니다.:</p> + +<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName()); +</pre> + +<p>JavaScript는 한줄로 조건문을 쓸 수 있게 해주는 삼중 연산자도 가지고 있습니다:</p> + +<pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; +</pre> + +<p><code>switch</code> 문은 숫자나 문자열을 기반으로 다중 분기되는 문장을 작성하는데 사용될 수 있습니다:</p> + +<pre class="brush: js notranslate">switch(action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p><code>break</code> 문장을 추가하지 않았다면, 다음 단계로 "넘어가서" 실행합니다. 이렇게 되는 것을 기대하는 것은 매우 드문경우 입니다. 실은 디버깅하는데 용이하도록 하기위해 주석으로서 일부러 붙여놓은 넘어가기 이름표 입니다:</p> + +<pre class="brush: js notranslate">switch(a) { + case 1: // fallthrough + case 2: + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>default 구문의 적용은 선택사항입니다. switch와 case 부분에서 둘다 표현식을 사용할 수도 있습니다. switch부분과 case 부분의 표현식은 <code>===</code> 연산자로 비교됩니다.</p> + +<pre class="brush: js notranslate">switch(1 + 3){ + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id=".EA.B0.9D.EC.B2.B4_.28Objects.29" name=".EA.B0.9D.EC.B2.B4_.28Objects.29">객체 (Objects)</h2> + +<p>JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 그렇기 때문에, JavaScript의 객체의 모임은 다음과 비슷하다고 할 수 있습니다:</p> + +<ul> + <li>Python의 Dictionaries</li> + <li>Perl 과 Ruby의 Hashes</li> + <li>C 와 C++ 의 Hash tables</li> + <li>Java 의 HashMaps</li> + <li>PHP의 Associative arrays</li> +</ul> + +<p>이 데이터 구조가 매우 광범위하게 사용된다는 사실은 활용 방도가 다양함을 입증합니다. JavaScript내 모든 것 (코어 타입들은 제외)은 객체로 취급되기 때문에 어떤 JavaScript 프로그램도 기본적으로 해쉬 테이블을 검색하는데 필요한 출중한 성능을 가지고 있습니다. 매우 빠르기 때문에 장점이 됩니다!</p> + +<p>값은 객체를 포함하여 아무 JavaScript 값이 될 수 있는 반면, "이름" 부분은 JavaScript 문자열 입니다. 이는 무작위적인 복잡성을 가지는 데이터 구조를 만들 수 있도록 해줍니다.</p> + +<p>빈 객체를 생성하는데 두가지 방법이 있습니다:</p> + +<pre class="brush: js notranslate">var obj = new Object(); +</pre> + +<p>와:</p> + +<pre class="brush: js notranslate">var obj = {}; +</pre> + +<p>이들은 의미적으로 동치입니다. 두번째 방법은 객체 리터럴 구문이라고 부르며 더 편리합니다. 객체 리터럴 구문은 JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있습니다.</p> + +<p>객체 리터럴 구문으로 객체의 전체적인 구조를 초기화 할 수 있습니다:</p> + +<pre class="brush: js notranslate">var obj = { + name: "Carrot", + "for": "Max", + details: { + color: "orange", + size: 12 + } +} +</pre> + +<p>속성에 연속적으로 접근할 수 있습니다:</p> + +<pre class="brush: js notranslate">obj.details.color; // orange +obj["details"]["size"]; // 12 +</pre> + +<p>아래 예제는 객체 프로토타입(<code>Person</code>)과 프로토타입의 인스턴스(<code>you</code>)를 생성합니다.</p> + +<pre class="brush: js notranslate">function Person(name, age) { + this.name = name; + this.age = age; +} + +// 객체를 정의한다 +var you = new Person('You', 24); +// "You"라는 이름의 24세인 새로운 사람을 생성중이다. +</pre> + +<p><strong>일단 생성되면</strong>, 객체의 속성에 다음의 두가지 방법들 중 한가지로 접근할 수 있습니다:</p> + +<pre class="brush: js notranslate">// dot 표기법 +obj.name = "Simon" +var name = obj.name; +</pre> + +<p>그리고...</p> + +<pre class="brush: js notranslate">// bracket 표기법 +obj["name"] = "Simon"; +var name = obj["name"]; +// key를 정의하기 위해 변수도 쓸수 있습니다. +var user = prompt('what is your key?') +obj[user] = prompt('what is its value?') +</pre> + +<p>이들은 의미적으로 역시 같습니다. 두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어집니다. 하지만 이방법을 사용하면 일부 JavaScript엔진과 압축기 최적화(minifier optimizations)를 적용할수 없습니다.또한 <a href="ko/Core_JavaScript_1.5_Reference/Reserved_Words">예약된 단어(키워드)</a>로 되어있는 이름으로 객체의 속성을 설정하거나 얻어낼 수 있습니다:</p> + +<pre class="brush: js notranslate">obj.for = "Simon"; // 구문 오류, for 가 예약된 단어(키워드)이기 때문에 +obj["for"] = "Simon"; // 정상 동작 +</pre> + +<div class="blockIndicator note"> +<p>ECMAScript 5 이래로, 예약어는 객체 항목의 이름으로 "덧붙임없이" 사용할수도 있습니다. 이말은 객체 리터럴을 정의할때 따옴표로 "둘러쌀" 필요가 없다는 의미입니다. ES5 <a href="http://es5.github.io/#x7.6.1">Spec</a>을 참고해 보십시오.</p> +</div> + +<p>객체나 프로토타입에 대한 좀더 상세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a> 을 참조하십시오. 객체 프로토타입과 객체 프로토타입 체인에 대한 설명은 <a href="/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">상속과 프로토타입 체인</a> 을 참조하십시오.</p> + +<div class="blockIndicator note"> +<p>ECMAScript 2015 이래로, 객체의 key는 생성시의 대괄호 표기법(bracket notation)으로 정의될수 있습니다. 그냥 <code>var userPhone = {}; userPhone[phoneType] = 12345</code>. 처럼 표기하는 방법 대신 <code>{[phoneType]: 12345}</code> 와 같은 사용법도 가능합니다.</p> +</div> + +<h2 id=".EB.B0.B0.EC.97.B4_.28Arrays.29" name=".EB.B0.B0.EC.97.B4_.28Arrays.29">배열 (Arrays)</h2> + +<p>JavaScript에서 배열은 실제로는 특별한 타입의 객체입니다. (숫자로 나타낸 속성은 자연스럽게 [] 구문만을 사용해서 접근하게 되므로) 일반 객체와 많이 비슷하게 동작하지만, 이 객체는 '<code>length</code>'라는 한가지 마법적인 속성을 가집니다. 이는 항상 배열에서 가장 큰 인덱스보다 하나 더 큰 값으로 존재합니다.</p> + +<p>배열을 생성하는 예전 방법은 다음과 같습니다:</p> + +<pre class="brush: js notranslate">var a = new Array(); +a[0] = "dog"; +a[1] = "cat"; +a[2] = "hen"; +a.length // 3 +</pre> + +<p>한가지 더 편리한 배열 표현 방법은 배열 리터럴을 사용하는 것입니다:</p> + +<pre class="brush: js notranslate">> var a = ["dog", "cat", "hen"]; +> a.length +3 +</pre> + +<p>배열 리터럴 끝에 콤마(",")를 꼬리로 남겨두는 것은 브라우저마다 다르게 처리하므로 그렇게 하지는 마시기 바랍니다.</p> + +<p><code>array.length</code> 는 배열에 들어있는 항목의 수를 반드시 반영하지는 않는다는 점을 주의하시기 바랍니다. 다음과 같은 경우를 고려해보겠습니다:</p> + +<pre class="brush: js notranslate">> var a = ["dog", "cat", "hen"]; +> a[100] = "fox"; +> a.length +101 +</pre> + +<p>기억해두세요 - 배열의 length 속성은 최대 인덱스에 하나를 더한 값일 뿐입니다.</p> + +<p>존재하지 않는 배열 인덱스를 참조하려고하면 다음과 같이 <code>undefined</code> 을 얻게됩니다:</p> + +<pre class="brush: js notranslate">> typeof(a[90]) +undefined +</pre> + +<p><code>[]</code> 와 <code>length</code>에 관한 위의 사항들을 감안하면 배열을 <code>for</code> 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다:</p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + // a[i] 로 뭔가를 수행 +} +</pre> + +<p>ES2015는 배열과 같은 이터러블 객체를 위해 좀더 간결한 for...of 루프를 소개했습니다.</p> + +<pre class="brush: js notranslate">for (const currentValue of a) { + // currentValue 로 뭔가를 수행 +}</pre> + +<p>또한 for...in 루프를 이용하여 배열에 루프를 돌릴수도 있지만, 이 방법은 배열 요소를 반복하는게 아니라 배열 인덱스를 반복합니다. 뿐만 아니라, 누군가 <code>Array.prototype</code>에 새로운 속성을 추가하면, 그 속성들 또한 이런 루프로 반복됩니다. 따라서 이런 반복 형태는 배열에는 추천되지 않습니다.</p> + +<p>배열에 대한 또다른 반복방법은 ECMAScript 5에 추가된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a> 입니다:</p> + +<pre class="brush: js notranslate">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { + // currentValue나 array[index]로 뭔가를 수행 +} +</pre> + +<p>배열에 항목 하나를 추가하길 원한다면 이렇게 하면 됩니다:</p> + +<pre class="brush: js notranslate">a.push(item);</pre> + +<p>배열은 몇가지 메서드가 제공됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">배열 메서드에 대한 전체 문서</a>를 참조하십시오.</p> + +<table> + <thead> + <tr> + <th scope="col">메서드 이름</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td>각 항목에 대한 <code>toString()</code>의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.</td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td>각 항목에 대한 <code>toLocaleString()</code>의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>item들이 덧붙여진 한개의 배열을 반환합니다.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>배열의 값들을 <code>sep</code> 인자로 구분하여 합친 한개의 문자열로 변환합니다.</td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>배열의 마지막 항목을 반환하면서 제거합니다.</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>배열의 끝에 item들을 덧붙입니다.</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>배열의 첫번째 항목을 반환하면서 제거합니다.</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>배열의 앞쪽에 item들을 덧붙입니다.</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>배열의 일부분을 새배열로 반환합니다.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>옵션으로 비교용도의 함수를 입력받습니다.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>배열의 일부분을 제거하고 다른 항목으로 대체하여 배열을 변경합니다..</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>배열의 순서를 거꾸로 배열합니다.</td> + </tr> + </tbody> +</table> + +<h2 id=".ED.95.A8.EC.88.98_.28Functions.29" name=".ED.95.A8.EC.88.98_.28Functions.29">함수 (Functions)</h2> + +<p>객체와 마찬가지로, 함수는 JavaScript를 이해하는데 핵심이 되는 컴포넌트입니다. 가장 기본적인 함수의 예는 다음과 같습니다:</p> + +<pre class="brush: js notranslate">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>이 예는 기본 함수에 대해 알아야 할 모든 것을 보여주고 있습니다. JavaScript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있습니다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있습니다. <code>return</code> 문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용될 수 있습니다. 리턴 문이 없으면 (혹은 값이 없는 리턴이 사용되면), JavaScript는 <code>undefined</code>을 돌려줍니다.</p> + +<p>이름 붙여진 매개변수들은 다른 어떤 것보다도 해당 함수가 어떤 함수인지 설명해주는 좋은 역할을 할 수 있습니다. 해당 함수가 원하는 매개변수를 주지않고 함수를 호출할 수 있지만 그럴 경우 해당 변수들은 <code>undefined</code>로 설정됩니다.</p> + +<pre class="brush: js notranslate">add(); //NaN +// undefined에 대해 덧셈을 수행할 수 없습니다 +</pre> + +<p>함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수도 있습니다:</p> + +<pre class="brush: js notranslate">add(2, 3, 4); // 5 +// 처음의 두 수가 더해집니다. 4는 무시됨 +</pre> + +<p>이 예는 조금 어리석어 보이지만, 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근할수 있습니다. 이 객체는 <a href="ko/Core_JavaScript_1.5_Reference/Functions/arguments"><code>arguments</code></a>라고 하며, 해당 함수에 매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체입니다. 우리가 원하는만큼 값을 취하는 add 함수를 다시 써보겠습니다:</p> + +<pre class="brush: js notranslate">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +</pre> + +<p>확실히 <code>2 + 3 + 4 + 5</code>를 직접쓰는 것보다 유용한 함수는아닙니다. 평균계산 함수를 만들어 보겠습니다:</p> + +<pre class="brush: js notranslate">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<p>이건 매우 유용합니다만, 좀 번잡해보입니다. 코드 크기를 다소 줄이기 위해, arguments 배열의 사용을 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest 파라미터 문법</a>으로 대체해볼 필요가 있습니다. 이 방법으로, 코드 크기는 최소한으로 유지 하면서, 갯수 제한없이 함수로 인자를 전달할수 있습니다. <strong>Rest 파라미터 연산자</strong>는 다음과 같은 포맷(<strong>...variable</strong>)으로 함수 파라미터 목록에 사용됩니다. 이 varaible 인자는 함수가 호출될때 전달되는 모든 인자를 포함합니다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 <strong>for</strong> 루프를 <strong>for..of</strong> 루프로 변경합니다.</p> + +<pre class="brush: js notranslate">function avg(...args) { + var sum = 0; + for (let value of args) { + sum += value; + } + return sum / arr.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<div class="blockIndicator note"> +<p>위 코드에서,변수 <strong>args</strong> 는 함수로 전달된 모든 값을 가지고 있습니다.<br> + <br> + rest 파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치<em> 이후</em>에 모든 인자를 저장하는것이며, 이전이 아니라는 것이 중요합니다. 즉 ,<em> function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>에서 함수로 전달된 첫번째 값은 <strong>firstValue </strong>변수에 저장되며, 남은 변수들은 <strong>args</strong>에 저장됩니다.</p> +</div> + +<p>이건 또다른 유용한 언어 특성입니다만 우리를 새로운 문제점으로 인도합니다. <code>avg()</code> 함수는 콤마로 구분된 인자목록을 받지만, 배열의 평균을 알고싶은 경우라면요? 함수를 다음과 같이 재작성 하면 됩니다 :</p> + +<pre class="notranslate">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5</pre> + +<p>하지만 우리가 이미 만든 함수를 다시 사용할 수 있다면 좋을 것입니다. 운이 좋게도 JavaScript는 함수 객체라면 모두 가지게 되는 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply"><code>apply()</code></a> 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있습니다.</p> + +<pre class="brush: js notranslate">> avg.apply(null, [2, 3, 4, 5]) +3.5 +</pre> + +<p><code>apply()의 </code>두번째 매개변수는 '매개변수들'로 사용하고자 하는 배열입니다. 첫번째 매개변수는 나중에 설명하도록 하겠습니다. 이는 함수가 역시 객체임을 명확히 해주는 사실입니다.</p> + +<div class="blockIndicator note"> +<p>함수 호출시 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개 연산자(spread operator)</a> 를 이용하여 똑같은 결과를 얻을수 있습니다.</p> + +<p>예를 들면: <code>avg(...numbers)</code></p> +</div> + +<p>JavaScript는 익명의 함수를 만들 수 있도록 허용하고 있습니다.</p> + +<pre class="brush: js notranslate">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} +</pre> + +<p>이것은 의미적으로 <code>function avg()</code> 형식과 같습니다. 이 특징은 매우 강력한데, 일반적인 표현식(expression)을 사용할 수있는 어디에서나 완전한 함수 정의를 넣을 수 있도록 허용하는 것이기 때문입니다. 이 특징은 다양한 요령을 부릴 수 있게합니다. 다음 예는 C에서 블록 유효 범위를 적용 시킨 것 처럼 지역 변수를 "숨기는" 요령을 보여줍니다:</p> + +<pre class="brush: js notranslate">var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +</pre> + +<p>JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 볼수 있는 트리 구조를 다루는데 유용합니다.</p> + +<pre class="brush: js notranslate">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>다음의 예는 익명 함수를 사용함에 있어 잠재적인 문제점을 보여줍니다: 이름이 없으면 어떻게 재귀적으로 부를 수 있을까요? JavaScript는 함수 표현식을 이렇게 이름붙이도록 지원합니다. 이름붙은 IIFEs (Immediately Invoked Function Expressions: 즉시 실행 함수 표현) 를 다음과 같이 사용할 수 있습니다:</p> + +<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p>위와 같이 함수 표현식에 제공된 이름은 함수 자체 범위에서만 유효합니다. 이 특징은 엔진에 의한 최적화뿐만 아니라 코드 가독성을 높이는데 도움을 줍니다. 이 이름은 디버거와 스택 추적에서도 나타나므로 디버깅시간을 줄일수 있게합니다.</p> + +<p>JavaScript 함수는 - JavsScript 내의 다른 모든 것들과 마찬가지로 - 그 자체가 객체이며, 객체 섹션에서 이미 확인한 것처럼, 속성을 추가하거나 변경할수 있다는 점을 명심하십시오</p> + +<h2 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EA.B0.9D.EC.B2.B4" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EA.B0.9D.EC.B2.B4">사용자 정의 객체</h2> + +<div class="blockIndicator note"> +<p>JavaScript에서 객체 지향 프로그래밍에 대한 더 자세한 논의는 <a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체 지향 JavaScript 소개</a>를 참조하십시오.</p> +</div> + +<p>고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메소드의 집합이었습니다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 class 구문이 없습니다(이런 이유로 class 구문에 익숙한 프로그래머들이 때때로 혼란을 경험합니다). 그 대신, JavaScrip는 function을 class로 사용합니다. 이름과 성을 필드로 가지고 있는 'person' 객체를 고려해보도록 합시다. 이름을 표시하는 두가지 방법이 있을 수 있습니다. 예를 들어, "이름 성" 또는 "성, 이름" 이런 식으로 말이죠. 이전에 다룬 함수와 객체를 사용해서 이를 표현하면 다음과 같습니다:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last + } +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first +} + +var s = makePerson("Simon", "Willison"); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +</pre> + +<p>이렇게 하면 작동하긴 하지만, 보기 안좋습니다. 이런 방법이라면 전역 이름공간(global namespace)에 관련 함수가 너무 많아집니다. 정말 우리에게 필요한 것은 객체에 함수를 붙여놓는 것입니다. 함수는 객체이기 때문에 이건 별로 어렵지 않습니다.</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +var s = makePerson('Simon', 'Willison'); +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +</pre> + +<p><code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code> 키워드에 주목해 주십시오. 함수 안쪽에서 사용되면서, <code>this</code>는 현재 객체를 참조합니다. 그것이 실제로 의미하는 바는 당신이 부른 바로 그 함수를 지정하는 것입니다. 객체에서 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Member_Operators">dot 표기법이나 bracket 표기법</a>을 사용해서 부른 경우, 해당 객체는 <code>this</code>가 됩니다. 해당 호출에서 dot 표기법을 사용하지 않은 경우, <code>this</code>는 전역 객체를 참조하게 됩니다.</p> + +<p><code>this</code>가 실수의 잦은 원인이 된다는 것을 명심하십시오 . 예를 들면:</p> + +<pre class="brush: js notranslate">var s = makePerson('Simon', 'Willison'); +var fullName = s.fullName; +fullName(); // undefined undefined +</pre> + +<p><code>s.fullName()</code>을 이용하지 않고 <code>fullName()</code>을 단독으로 호출하면, '<code>this</code>'는 전역 객체로 묶이게(bind) 됩니다. <code>first</code> 또는 <code>last</code> 로 명명된 전역 변수가 없기 때문에, 각각에 대해 <code>undefined</code> 결과를 얻게됩니다.</p> + +<p><code>makePerson</code> 함수를 개선하는데 '<code>this</code>' 키워드의 이점을 취할 수 있습니다:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person('Simon', 'Willison'); +</pre> + +<p>여기서 <code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>라는 또다른 키워드를 도입했습니다. <code>new</code>는 <code>this</code>와 깊게 연관되어 있습니다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 <code>this</code> 에 설정합니다. <code>this</code>로 지정된 함수는 값을 반환하지 않고 단지 <code>this</code> 객체를 수정한다는 것을 명심하세요. <code>this</code> 객체를 호출하는 곳으로 반환하는 것은 <code>new</code> 입니다. '<code>new</code>' 에 의해 호출되도록 설계된 함수는 컨스트럭터 함수라고 불립니다. 일반적으로 이러한 함수의 첫자를 대문자로 써서 <code>new</code>로 불릴 컨스트럭터 함수임을 나타냅니다.</p> + +<p>개선된 함수는 여전히 <code>fullName()</code> 을 단독으로 호출할 때의 함정이 존재합니다.</p> + +<p>우리의 person 객체가 점점 개선되고 있지만, 아직 좀 보기 안좋은 면이 있습니다. 매번 person 계열의 객체를 만들 때마다 내부에서 2개의 새로운 함수 객체를 만들고 있습니다. 이 코드가 객체간에 공유된다면 더 낫지 않을까요?</p> + +<pre class="brush: js notranslate">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>더 좋아 보이네요: 메소드 함수를 한번만 만들고, 컨스트럭터 내에 해당 메소드들을 참조하도록 할당합니다. 이보다 더 개선 할 수 있을까요? 네, 그렇게 할 수 있습니다:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +</pre> + +<p><code>Person.prototype</code>은 모든 <code>Person</code> 인스턴스들간에 공유되는 객체입니다. 이는 lookup(찾아보기) 체인의 한 부분을 이룹니다. (이건 "prototype chain"이라는 특수한 이름을 따로 가지고 있습니다) 다시 말해, <code>Person</code> 객체의 설정되지 않은 속성에 접근을 시도할 때마다, 그것의 대체용도로 JavaScript는 <code>Person.prototype</code>에 그 속성이 존재하는지 살펴봅니다.그 결과, <code>Person.prototype</code>에 할당된 모든 것은 <code>this</code> 객체를 통해 해당 컨스트럭터에 속한 모든 인스턴스들간에 사용 가능하게 됩니다.</p> + +<p>이것은 정말 강력한 도구입니다. JavaScript에서는 임의의 prototype을 프로그램 내에서 언제든 변형할 수 있습니다. 이미 존재하는 객체에 추가적인 메소드를 실시간으로 추가가할 수 있다는 이야기입니다:</p> + +<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); +s.firstNameCaps(); //TypeError on line 1: s.firstNameCaps is not a function + +Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase() +}; +s.firstNameCaps(); // "SIMON" +</pre> + +<p>흥미롭게도, JavaScript의 빌트인 객체의 prototype에도 뭔가를 더 추가할 수 있습니다. <code>String</code> 객체에 문자열 순서를 거꾸로 배열하여 돌려주는 메소드를 추가해 봅시다.</p> + +<pre class="brush: js notranslate">var s = "Simon"; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function() { + var r = ""; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +</pre> + +<p>우리가 추가한 새로운 메소드는 심지어 문자열 상수에서도 동작합니다!</p> + +<pre class="brush: js notranslate">"This can now be reversed".reversed(); // desrever eb won nac sihT +</pre> + +<p>기존에 언급한 바와같이, prototype은 체인의 한 부분을 이룹니다. 해당 체인의 루트는 <code>Object.prototype</code> 이며 <code>toString()</code> 메소드를 포함합니다. 이 메소드는 객체를 문자열로 나타내려할 때 호출됩니다. 이 메소드는 우리의 <code>Person</code> 객체의 디버깅에 유용합니다:</p> + +<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); +s.toString(); // [object Object] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +</pre> + +<p><code>avg.apply()</code>의 첫번째 매개변수가 null 이었던걸 기억해봅시다. <code>apply()</code>에 적용되는 첫번째 인자는 당연히 `<code>this</code>'로 간주되는 객체입니다. 여기에 <code>new</code> 의 간단한 구현을 보시죠:</p> + +<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { + var o = {}; // 빈 객체를 생성 + constructor.apply(o, args); + return o; +} +</pre> + +<p>이것은 prototype 체인을 설정하지 않으므로 <code>new</code>의 완벽한 대체물이 될 수 없습니다.(이 부분은 설명하기 어렵습니다). 이 내용은 자주 사용하지는 않겠지만 알아두면 좋습니다. 이 부분에서 <code>...args</code> (생략 부호를 포함해서)는 "<a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" 라고 불립니다. 이름이 암시하는 것처럼 매개변수의 나머지를 포함합니다.</p> + +<p>그러므로 이렇게 호출하는 것은</p> + +<pre class="notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> + +<p>아래와 거의 동일합니다.</p> + +<pre class="notranslate">var bill = new Person('William', 'Orange');</pre> + +<p><code>apply()</code> 와 비슷하게 <code>this</code>를 다시 설정할 수 있게 하는, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>이라는 이름의 자매 함수가 있는데, 인자로 단일 배열이 아니라 확장된 인자 목록을 입력받습니다.</p> + +<pre class="brush: js notranslate">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person('Simon', 'Willison'); +lastNameCaps.call(s); +// 위의 구문은 다음과 같습니다: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); +</pre> + +<h3 id=".EB.82.B4.EC.9E.A5_.ED.95.A8.EC.88.98" name=".EB.82.B4.EC.9E.A5_.ED.95.A8.EC.88.98">내장 함수 (Inner functions)</h3> + +<p>다른 함수의 내부에서 JavaScript 함수를 선언할 수 있습니다. 우리는 <code>makePerson()</code> 함수 초기 버전에서 이것을 한번 본적이 있습니다. JavaScript에서 중첩 함수(nested functions)의 중요한 세부사항은 부모 함수 범위의 변수에 접근할 수 있다는 사실입니다:</p> + +<pre class="brush: js notranslate">function parentFunc() { + var a = 1; + + function nestedFunc() { + var b = 4; // parentFunc은 사용할 수 없는 변수 + return a + b; + } + return nestedFunc(); // 5 +} +</pre> + +<p>좀 더 유지관리가 쉬운 코드를 작성하고자 할때 이 특성이 굉장히 유용합니다. 한개 혹은 두개의 정도의 함수에서만 호출되며 전체 코드중 다른 부분에서는 사용처가 없는 함수라면 그 함수내에 해당 함수를 중첩시키는 것이 좋습니다. 이렇게 전역 범위 함수의 갯수를 늘리지 않도록 하는 것은 언제나 좋은 습관입니다.</p> + +<p>이것은 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 됩니다. 복잡한 코드를 쓸 때, 다양한 함수들간에 값을 공유할 수 있도록 전역 변수를 사용하고 싶어집니다 - 전역 변수는 코드 유지 보수를 어렵게 만듭니다. 중첩 함수는 그 부모 함수의 범위에서 변수를 공유할 수 있으므로, 이 방법을 사용하면 전역 변수 이름공간을 건드리지 않고도 적절한 경우에 함수들을 연동시킬수 있습니다. - '지역 전역'이라고 불러도 괜찮겠네요. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야할 유용한 기술입니다.</p> + +<h2 id=".ED.8F.90.ED.8F.AC_.28Closures.29" name=".ED.8F.90.ED.8F.AC_.28Closures.29">클로져 (Closures)</h2> + +<p>클로져 (역자주: 글자 그대로 한국어로 해석하면 닫힌 주머니)는 JavaScript가 제공해야만 하는 가장 막강한 추상 개념으로 우리를 이끕니다 - 하지만 동시에 잠재적으로 가장 혼란스럽기도 합니다. 다음 함수는 무엇을 하는 걸까요?</p> + +<pre class="brush: js notranslate">function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var add5 = makeAdder(5); +var add20 = makeAdder(20); +add5(6); // ? +add20(7); // ? +</pre> + +<p><code>makeAdder</code> 함수의 이름은 다음과 같은 과정을 거쳐 반드시 없어집니다: 해당 함수가 한 매개변수를 받아 호출됐을 때, 생성될 때 주어진 매개변수를 더하는 새 'adder' 함수를 생성합니다.</p> + +<p>여기서 일어나는 일은 다른 함수의 내에 정의된 어떤 함수가 외부 함수의 변수에 액세스한다는 점에서 앞에 언급한 내장 함수에서 일어나는 일과 매우 비슷합니다. 한가지 다른 점은 외부 함수가 리턴 된다는 점인데, 상식적으로 그것에 들어 있는 변수는 사라진다고 볼 수 있습니다. 하지만 그들은 여전히<em>존재합니다</em> - 그렇지 않으면 adder 함수는 동작하지 않겠지요. 게다가, <code>makeAdder</code> 지역 변수의 서로 다른 두 "복사본"이 존재합니다 - 하나의 <code>a</code>는 5이고, 다른 하나의 <code>a</code>는 20이죠. 따라서 해당 함수를 부른 결과는 다음과 같습니다:</p> + +<pre class="brush: js notranslate">x(6) // 11을 돌려줌 +y(7) // 27을 돌려줌 +</pre> + +<p>이건 실제로 일어나는 일입니다. JavaScript 함수가 실행될 때는 언제나, '범위' 객체가 생성되어 해당 함수내에서 생성된 지역 변수를 여기에 저장하고 있습니다. 함수 매개변수로서 넘겨진 어떤 변수라도 여기에 초기값으로 저장하고 있습니다. 이것은 모든 전역 변수와 함수가 들어있는 전역 객체와 비슷하지만, 두가지 중요한 차이점이 있습니다. 첫번째로, 함수가 실행될 때마다 새로운 범위 객체가 생성된다는 점과, 두번째로, (브라우저에서 window로 접근가능한) 전역 객체와 달리 범위 객체는 JavaScript 코드에서 직접적으로 액세스할 수 없다는 점입니다. 예를 들자면 현재 범위 객체의 속성에 반복 접근할 수 있는 수단이 없습니다.</p> + +<p>따라서 <code>makeAdder</code> 가 호출되면, 범위 객체는 <code>makeAdder</code> 함수에 매개변수로 넘겨진 하나의 속성 <code>a</code>를 가진 상태로 생성됩니다. 일반적으로 JavaScript의 가비지 컬렉터가 이때 <code>makeAdder</code>에 의해 생성된 범위 객체를 청소해야겠지만, 리턴된 함수가 여전히 범위 객체를 참조하고 있습니다. 결과적으로 범위 객체는 <code>makeAdder</code>에 의해 리턴된 함수 객체가 더는 참조되지 않을 때까지 가비지 컬렉터에 의해 정리되지 않게됩니다.</p> + +<p>범위 객체는 JavaScript 객체 체계에서 사용되는 prototype 사슬과 비슷한 범위 사슬이라고 불리는 사슬을 형성합니다.</p> + +<p>클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어입니다.</p> + +<p>또한 클로져는 상태를 저장할 수 있도록 허용합니다 - 그렇기 때문에, 객체의 내부에서 자주 사용될 수 있는 것입니다.</p> + +<h3 id=".EB.A9.94.EB.AA.A8.EB.A6.AC_.EB.88.84.EC.B6.9C" name=".EB.A9.94.EB.AA.A8.EB.A6.AC_.EB.88.84.EC.B6.9C">메모리 누출</h3> + +<p>클로져의 부작용은 Internet Explorer에서 심각하지는 않지만 쉽게 메모리 누출이 된다는 것입니다. JavaScript는 가비지 컬렉트를 하는 언어 입니다. 객체가 생성됨에 따라서 메모리가 할당되고, 사용하고난 메모리는 더 참조하는 다른 객체가 없을 때 되돌아가는 방식으로 동작하는 언어란 말이죠. 호스트 환경에서 제공되는 객체들은 해당 환경에 의해 다뤄집니다.</p> + +<p>브라우저 호스트는 HTML 페이지에 <a href="ko/DOM">DOM</a> 객체로서 표현되어있는 많은 수의 객체를 다뤄야 합니다. 이 객체들을 어떻게 할당하고 다시 거둬들일지는 브라우저 책임이죠.</p> + +<p>Internet Explorer는 이를 위해 자신만의 고유한, JavaScript의 그것과는 다른 가비지 컬렉션 방식을 사용합니다. 두 언어간에 상호작용이 일어날 수 있고 이 과정에서 메모리 누출이 발생할 수 있습니다.</p> + +<p>IE에서 메모리 누출은 JavaScript 객체와 고유 객체간에 참조하는 중 자기 자신을 참조 (circular reference, 순환 참조)하게 되는 일이 발생할 경우라면 언제든지 발생하게 됩니다. 다음을 고려해 보도록 합시다:</p> + +<pre class="brush: js notranslate">function leakMemory() { + var el = document.getElementById('el'); + var o = { 'el': el }; + el.o = o; +} +</pre> + +<p>위의 코드는 순환 참조로서 메모리 누출을 일으킵니다. IE는 완전히 다시 시작되기 전까지는 <code>el</code>와 <code>o</code>에 의해 사용되는 메모리를 반환하지 못합니다.</p> + +<p>위의 경우는 알아채지 못하고 지나갈 확률이 높습니다. 메모리 누출은 사실 오랫동안 실행되거나 큰 데이터 구조나 반복, 순환에 의해 누출된는 메모리 양이 많은 경우에서 실질적으로 고려할만한 가치가 생깁니다.</p> + +<p>누출이 이처럼 명확한 경우는 드뭅니다. 누출을 일으키는 데이터 구조는 수차례에 걸친 참조 구조를 가지고 있어서 순환 참조를 하고있는지 명확하지 않은 경우가 더 많습니다.</p> + +<p>클로져는 그렇게 되도록 하지않아도 간단하게 메모리 누출을 일으킬 수 있습니다. 다음을 고려해 봅시다:</p> + +<pre class="brush: js notranslate">function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } +} +</pre> + +<p>위의 코드는 클릭했을때 배경색이 빨강으로 바뀌는 엘레멘트를 설정합니다. 그리고 메모리 누출도 일으킵니다. 어째서냐고요? <code>el</code>을 참조하면 의도와는 달리 익명 내부 함수 때문에 생성된 클로져 내에 붙잡혀 있게 되기 때문입니다. 이는 JavaScript 객체 (내부 함수)와 원시 객체 (<code>el</code>)간에 순환 참조를 만듭니다.</p> + +<p>이 문제를 피할 수 있는 많은 방법이 있습니다. 가장 간단한 건 이겁니다:</p> + +<pre class="brush: js notranslate">function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } + el = null; +} +</pre> + +<p>이렇게 하면 순환 참조 고리를 끊을 수 있습니다.</p> + +<p>놀랍게도, 클로져에 의해 발생된 순환 참조를 고리를 끊기 위한 한 요령은 또다른 클로져를 추가하는 것입니다:</p> + +<pre class="brush: js notranslate">function addHandler() { + var clickHandler = function() { + this.style.backgroundColor = 'red'; + } + (function() { + var el = document.getElementById('el'); + el.onclick = clickHandler; + })(); +} +</pre> + +<p>내부 함수는 실행되고 바로 사라지므로서, <code>clickHandler</code>와 함께 생성된 클로져로부터 그 내용을 숨깁니다.</p> + +<p>클로져를 피할 수 있는 또다른 좋은 요령은 <code>window.onunload</code> 이벤트가 발생하는 동안 순환 참조를 끊는 것입니다. 많은 이벤트 라이브러리가 이렇게 동작합니다. 주의할 것은 그렇게 하도록하면 <a href="ko/Using_Firefox_1.5_caching">Firefox 1.5의 bfcache</a>를 비활성화 하게 되므로, 별 다른 이유가 없다면 Firefox에서 <code>unload</code> listener를 등록해서는 안 된다는 것입니다.</p> + +<div class="originaldocinfo"> +<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2> + +<ul> + <li>저자: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> + <li>최근 갱신 날짜: March 7, 2006</li> + <li>저작권: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> + <li>추가 정보: For more information about this tutorial (and for links to the original talk's slides), see Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li> +</ul> +</div> + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/A_re-introduction_to_JavaScript", "fr": "fr/Une_reintroduction_a_JavaScript", "it": "it/Una_re-introduzione_a_Javascript", "ja": "ja/A_re-introduction_to_JavaScript", "pl": "pl/JavaScript/Na_pocz?tek", "zh-cn": "cn/A_re-introduction_to_JavaScript" } ) }}</p> diff --git a/files/ko/web/javascript/about/index.html b/files/ko/web/javascript/about_javascript/index.html index c7ec0f9f28..57120431b4 100644 --- a/files/ko/web/javascript/about/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 --- <p>{{JsSidebar}}</p> diff --git a/files/ko/web/javascript/guide/closures/index.html b/files/ko/web/javascript/closures/index.html index b56d843b2b..6a9b8554a8 100644 --- a/files/ko/web/javascript/guide/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 --- <div>{{jsSidebar("Intermediate")}}</div> diff --git a/files/ko/web/javascript/differential_inheritance_in_javascript/index.html b/files/ko/web/javascript/differential_inheritance_in_javascript/index.html deleted file mode 100644 index 70fd4256c3..0000000000 --- a/files/ko/web/javascript/differential_inheritance_in_javascript/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Differential inheritance in JavaScript -slug: Web/JavaScript/Differential_inheritance_in_JavaScript -translation_of: Web/JavaScript/Differential_inheritance_in_JavaScript ---- -<h2 id="Introduction">Introduction</h2> - -<p>차등 상속(Differential Inheritance)은 자바 스크립트와 같은 프로토 타입 기반 프로그래밍 언어에서 사용되는 일반적인 상속 모델입니다. 대부분의 객체는 다른 일반적인 객체에서 파생되고 몇 가지 작은 측면에서만 차이가 있다는 원칙에 따라 동작합니다. 일반적으로 객체가 다른 다른 객체에 대한 포인터 목록을 내부적으로 유지합니다.</p> - -<h2 id="Example">Example</h2> - - - -<p>다음 코드는 개체를 "상속"하는 간단한 메서드 예제입니다.</p> - -<pre class="brush: js notranslate">Object.prototype.inherit = function(){ - // Create a new object with this as its prototype - var p = Object.create(this); - - /* actually not necessary: - // Apply the constructor on the new object - this.constructor.apply(p, arguments); - */ - - return p; -}; -</pre> - -<p>상속(<font face="Consolas, Liberation Mono, Courier, monospace">inherit)</font>을 사용하면 일반 프로토 타입에서보다 구체적인 개체를 간단히 파생시킬 수 있습니다. 다음은 상속 방법 및 차등 상속을 사용하여 점점 더 구체적인 객체를 구성하는 간단한 예입니다.</p> - -<pre class="brush: js notranslate">var root = {}; // Could be any object with any prototype object - -var record = root.inherit(); -record.toString = function(){ return "a Record"; }; - -var person = root.inherit(); -person.firstName = false; -person.lastName = false; -person.toString = function(){ - if (this.firstName) { - if (this.lastName) { - return this.firstName + " " + this.lastName; - } else { - return this.firstName; - } - } else if (this.lastName) { - return this.lastName; - } else { - return "a Person"; - } -}; - -JoePerson = person.inherit(); -JoePerson.firstName = "Joe"; -alert( JoePerson.toString() ); -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">inheritance and the prototype chain</a></li> -</ul> diff --git a/files/ko/web/javascript/guide/객체_모델의_세부사항/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/객체_모델의_세부사항/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/객체_모델의_세부사항 --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> diff --git a/files/ko/web/javascript/guide/함수/index.html b/files/ko/web/javascript/guide/functions/index.html index cf9d928eb3..78f49f7b4f 100644 --- a/files/ko/web/javascript/guide/함수/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/함수 --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> @@ -655,4 +656,4 @@ var p = new Person();</pre> <div class="itanywhere-activator" style="left: 154px; top: 13819.2px; display: none;" title="Google Translator Anywhere"></div> -<div class="itanywhere-activator" style="display: none;" title="Google Translator Anywhere"></div> +<div class="itanywhere-activator" class="hidden" title="Google Translator Anywhere"></div> diff --git a/files/ko/web/javascript/guide/values,_variables,_and_literals/index.html b/files/ko/web/javascript/guide/grammar_and_types/index.html index 629cbd069a..54d51091a9 100644 --- a/files/ko/web/javascript/guide/values,_variables,_and_literals/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 --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> diff --git a/files/ko/web/javascript/guide/소개/index.html b/files/ko/web/javascript/guide/introduction/index.html index cac0779ee0..cac6b40ed4 100644 --- a/files/ko/web/javascript/guide/소개/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/소개 --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> diff --git a/files/ko/web/javascript/guide/메타_프로그래밍/index.html b/files/ko/web/javascript/guide/meta_programming/index.html index fe4fa13f83..9b84db0876 100644 --- a/files/ko/web/javascript/guide/메타_프로그래밍/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/메타_프로그래밍 --- <div>{{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</div> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html deleted file mode 100644 index 05deb2017f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: About -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About ---- -<h3 id=".EC.9D.B4.EB.B2.88_.EB.A6.B4.EB.A6.AC.EC.A6.88.EC.9D.98_.EC.83.88_.EA.B8.B0.EB.8A.A5" name=".EC.9D.B4.EB.B2.88_.EB.A6.B4.EB.A6.AC.EC.A6.88.EC.9D.98_.EC.83.88_.EA.B8.B0.EB.8A.A5"> 이번 릴리즈의 새 기능 </h3> -<p>JavaScript 버전 1.5는 다음과 같은 개선과 새 기능을 제공합니다: -</p><p><b>런타임 오류</b><br> -런타임 오류가 예외로서 보고됩니다. -</p><p><b>숫자 표현 서식 개선</b><br> -숫자를 표현하는 서식이 Number.prototype.toExponential, Number.prototype.toFixed, Number.prototype.toPrecision 메소드를 포함함으로서 개선되었습니다. <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Number_Object">Number 개체</a> 페이지를 보십시오. -</p><p><b>정규 표현식 개선</b><br> -정규표현식이 다음과 같이 개선되었습니다: -</p> -<ul><li> 한정자 — +, *, ?, {} — 뒤에 ?를 붙여서 greedy하지 않도록 할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">정규 표현식 패턴 쓰기</a> 페이지에서 ?에 대한 항목을 보십시오. -</li><li> Non-capturing parentheses, (?:x) can be used instead of capturing parentheses(x). When non-capturing parentheses are used, matched subexpressions are not available as back-references. See the entry for (?:x) on page <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">Writing a Regular Expression Pattern</a>. -</li><li> Positive and negative lookahead assertions are supported. Both assert a match depending on what follows the string being matched. See the entries for x(?=y) and x(?!y) on page <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">Writing a Regular Expression Pattern</a>. -</li><li> The m flag has been added to specify that the regular expression should match over multiple lines. See the <a href="ko/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Executing_a_Global_Search%2c_Ignoring_Case%2c_and_Considering_Multiline_Input">Executing a Global Search, Ignoring Case, and Considering Multiline Input</a> page. -</li></ul> -<p><b>조건부 함수 선언</b><br> -함수를 if 조건안에서 선언할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Defining_Functions">함수 정의</a> 페이지를 참고하세요. -</p><p><b>함수 표현식</b> <br> -함수를 표현식 안에서 선언할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Defining_Functions">함수 정의</a> 페이지를 참고하세요. -</p><p><b>Multiple catch clauses</b><br> -Multiple catch clauses in a try...catch statement are supported. See <a href="ko/Core_JavaScript_1.5_Guide/Exception_Handling_Statements/try...catch_Statement#The_catch_Block">The catch Block</a> page. -</p><p><b>Getters와 Setters</b><br> -JavaScript writers can now add getters and setters to their objects. This feature is available only in the C implementation of JavaScript. See the <a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters">Defining Getters and Setters</a> page. -</p><p><b>상수</b> <br> -읽기전용의 상수가 지원됩니다. This feature is available only in the C implementation of JavaScript. See the <a href="ko/Core_JavaScript_1.5_Guide/Constants">Constants</a> page. -</p> -<h3 id=".EB.AF.B8.EB.A6.AC_.EC.95.8C.EA.B3.A0_.EC.9E.88.EC.96.B4.EC.95.BC_.ED.95.A0_.EA.B2.83" name=".EB.AF.B8.EB.A6.AC_.EC.95.8C.EA.B3.A0_.EC.9E.88.EC.96.B4.EC.95.BC_.ED.95.A0_.EA.B2.83"> 미리 알고 있어야 할 것 </h3> -<p>이 안내서는 당신이 다음과 같은 배경지식을 지녔다고 가정합니다: -</p> -<ul><li> 인터넷과 World Wide Web (WWW)에 대한 상식적인 이해 -</li><li> HyperText Markup Language (HTML)에 대한 충분한 지식<br> -</li></ul> -<p>C 혹은 Visual Basic에 대한 프로그래밍 경험이 있으면 좋지만, 필수사항은 아닙니다. -</p> -<h3 id="JavaScript_.EB.B2.84.EC.A0.84" name="JavaScript_.EB.B2.84.EC.A0.84"> JavaScript 버전 </h3> -<table class="fullwidth-table"> -<tbody><tr> -<th>JavaScript 버전</th> -<th>Navigator 버전</th> -</tr> -<tr> -<td>JavaScript 1.0</td> -<td>Navigator 2.0</td> -</tr> -<tr> -<td>JavaScript 1.1</td> -<td>Navigator 3.0</td> -</tr> -<tr> -<td>JavaScript 1.2</td> -<td>Navigator 4.0-4.05</td> -</tr> -<tr> -<td>JavaScript 1.3</td> -<td>Navigator 4.06-4.7x</td> -</tr> -<tr> -<td>JavaScript 1.4</td> -<td> </td> -</tr> -<tr> -<td>JavaScript 1.5</td> -<td>Navigator 6.0<br>모질라 (오픈소스 브라우저)</td> -</tr> -</tbody></table> -<p><small><b>표1: JavaScript와 Navigator 버전</b></small><br> -<br> -Each version of the Netscape Enterprise Server also supports a different version of JavaScript. To help you write scripts that are compatible with multiple versions of the Enterprise Server, this manual uses an abbreviation to indicate the server version in which each feature was implemented. -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>Abbreviation</th> -<th>Enterprise Server version</th> -</tr> -<tr> -<td>NES 2.0</td> -<td>Netscape Enterprise Server 2.0</td> -</tr> -<tr> -<td>NES 3.0</td> -<td>Netscape Enterprise Server 3.0</td> -</tr> -</tbody></table> -<p><small><b>Table 2: Abbreviations of Netscape Enterprise Server versions</b></small> -</p> -<h3 id="JavaScript_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3" name="JavaScript_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3"> JavaScript 정보를 찾을 수 있는 곳 </h3> -<p>The core JavaScript documentation includes the following books: -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Guide">The Core JavaScript Guide</a> (this guide) provides information about the core JavaScript language and its objects. -</li><li> <a href="ko/Core_JavaScript_1.5_Reference">The Core JavaScript Reference</a> provides reference material for the core JavaScript language. -</li></ul> -<p>If you are new to JavaScript, start with the <a href="ko/Core_JavaScript_1.5_Guide">Core JavaScript Guide</a>. Once you have a firm grasp of the fundamentals, you can use the <a href="ko/Core_JavaScript_1.5_Reference">Core JavaScript Reference</a> to get more details on individual objects and statements. -</p> -<h3 id=".EB.AC.B8.EC.84.9C_.EA.B7.9C.EC.95.BD" name=".EB.AC.B8.EC.84.9C_.EA.B7.9C.EC.95.BD"> 문서 규약 </h3> -<p>JavaScript 응용프로그램은 많은 운영체제에서 실행됩니다. 이 책에 있는 정보는 모든 운영체제에 적용됩니다. 파일과 디렉토리 경로는 Windows 형식(디렉토리 이름을 구분하는데 역슬래시를 사용)으로 썼습니다. Unix에서는 역슬래시를 슬래시로 바꾸어 사용하면 됩니다. -</p><p>이 안내서에서 URL은 다음과 같은 형태로 씁니다. -</p><p><code><span class="nowiki">http://server.domain/path/file.html</span></code> -</p><p>이 URL에서 "server"는 우리가 응용프로그램을 실행하는 서버 이름(research1이나 www 등)이고, "domain"은 인터넷 도메인 이름(netscape.com이나 uiuc.edu 등)입니다. "path"는 서버의 디렉토리 구조를 나타내고, "file.html"은 파일 이름입니다. 일반적으로 URL에서 이탤릭체로 쓴 부분은 알맞은 내용으로 바꿔써야 할 내용(placeholder)이고, 평범한 고정폭 글꼴은 그대로 쓰면 되는 내용입니다. Secure Socket Layer(SSL)을 사용하는 서버라면 http 대신 https를 쓰면 됩니다. -</p><p>이 안내서는 다음과 같은 관례를 따릅니다. -</p> -<ul><li> <code>고정폭 글꼴</code>은 샘플 코드, API, 언어 요소(메소드 이름, 속성 이름 등), 파일 이름, 경로, 디렉토리 이름, HTML 태그, 화면에 입력해야 할 텍스트를 나타내는 데 쓰입니다. (고정폭 이탤릭체는 코드 내용 중에서 적당히 알맞은 내용으로 바꿔써야 할 부분을 나타내는 데 씁니다.) -</li><li> <i>이탤릭체</i>는 책 제목, 강조, 변수, 뜻 그대로 쓰인 단어(words in the literal sense)에 씁니다. -</li><li> <b>굵은 글씨</b>는 용어에 씁니다. -</li></ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide", "Core_JavaScript_1.5_Guide:JavaScript_Overview") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/About", "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos", "ja": "ja/Core_JavaScript_1.5_Guide/About", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html deleted file mode 100644 index 20601a0e81..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Class-Based vs. Prototype-Based Languages -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages ---- -<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">클래스 기반언어와 프로토타입 기반언어</h3> -<p>Java와 C++이라는 클래스 기반의 객체지향언어는 클래스와 인스턴스라는 2개의 다른 실체가 있다는 개념에 기초하고 있습니다.</p> -<ul> <li>클래스는 어떤 객체의 집합을 특징짓는 모든 속성(Java에서는 메소드와 필드를, C++에서는 멤버를 프로퍼티로 간주)을 정의합니다. 클래스란 그것이 나타내는 객체집합의 특정멤버가 아닌, 추상적인것입니다. 예를들어, Employee클래스는 모든 종업원의 집합을 나타냅니다.</li> <li>한편, 인스턴스는 클래스를 실례로 한것입니다. 즉, 그 멤버중 하나인것입니다. 예를들어, Victoria는 Employee클래스의 인스턴스가 될 수 있습니다. 이 클래스는 특정 개인을 종업원으로서 표현하고 있는것입니다. 인스턴스는 그 부모클래스의 속성을 정확하게 유지하고 있습니다.</li> -</ul> -<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p> -<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4> -<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p> -<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p> -<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4> -<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p> -<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p> -<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4> -<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p> -<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4> -<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p> -<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody> -</table> -<div class="noinclude"> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p> -</div> -<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html deleted file mode 100644 index 7b5f5c577c..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Constants -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Constants ---- -<h3 id=".EC.83.81.EC.88.98" name=".EC.83.81.EC.88.98"> 상수 </h3> -<p><code><a href="ko/Core_JavaScript_1.5_Reference/Statements/const">const</a></code> 키워드를 이용하면 읽기 전용의 이름 있는 상수를 만들 수 있습니다. 상수 식별자(const identifier)는 변수의 식별자와 동일합니다. 문자나 밑줄로 시작해야 하고, 알파벳, 숫자, 밑줄 문자를 사용할 수 있습니다. -</p> -<pre class="eval">const prefix = '212'; -</pre> -<p>상수는 스크립트 실행 중에 값을 대입하거나 다시 선언하여 값을 바꿀 수 없습니다. -</p><p>전역 상수인 경우에도 항상 <code>const</code> 키워드를 붙여야 한다는 점만 제외하면, 상수의 범위 규칙은 변수의 경우와 동일합니다. const 키워드가 없으면 변수라고 판정됩니다. -</p><p>같은 범위에 있는 함수나 변수의 이름과 같은 이름으로 상수를 만들 수 없습니다. 예를 들어, -</p> -<pre>//이 코드는 에러를 낼 것입니다 -function f() {}; - const f = 5; - -//이 코드 또한 에러를 냅니다. -function f() { - const g = 5; - var g; - - //그 외 코드... - -}</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Variables", "Core_JavaScript_1.5_Guide:Literals") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Constants", "fr": "fr/Guide_JavaScript_1.5/Constantes", "ja": "ja/Core_JavaScript_1.5_Guide/Constants", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Sta\u0142e" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html deleted file mode 100644 index d969b378f4..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Creating a Regular Expression -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression ---- -<h3 id=".EC.A0.95.EA.B7.9C.ED.91.9C.ED.98.84.EC.8B.9D_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.A0.95.EA.B7.9C.ED.91.9C.ED.98.84.EC.8B.9D_.EB.A7.8C.EB.93.A4.EA.B8.B0">정규표현식 만들기</h3> -<p>정규표현식은 다음의 두 가지 방법으로 만들 수 있습니다.</p> -<ul> - <li>정규표현식 상수값을 이용하여 만들기</li> -</ul> -<pre> re = /ab+c/; </pre> -<dl> - <dd> - <dl> - <dd> - 정규표현식 상수값은 스크립트가 실행될 때 컴파일됩니다. 따라서 정규표현식의 값이 변하지 않을 경우, 이 방법을 사용하면 좀 더 나은 성능을 얻을 수 있습니다.</dd> - </dl> - </dd> -</dl> -<ul> - <li><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">RegExp</a> 객체의 생성자를 호출하여 만들기</li> -</ul> -<pre> re = new RegExp("ab+c"); </pre> -<dl> - <dd> - <dl> - <dd> - 생성자를 이용하면 실행 시간에 정규표현식이 컴파일됩니다. 정규표현식 패턴이 바뀔 것을 알고 있거나, 또는 패턴을 사용자의 입력 등을 통해 외부에서 가져오려고 할 때 이 방법을 사용하십시오.</dd> - </dl> - </dd> -</dl> -<div class="noinclude"> - <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Special_Operators", "Core_JavaScript_1.5_Guide:Writing_a_Regular_Expression_Pattern") }}</p> -</div> -<p> </p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html deleted file mode 100644 index 3238e19b0f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Defining Getters and Setters -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters ---- -<h3 id="getter.2Fsetter_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0" name="getter.2Fsetter_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0">getter/setter 정의하기</h3> - -<p>getter는 속성의 값을 얻어오는 메소드이고, setter는 속성의 값을 설정하는 메소드입니다. 우리는 언어에서 미리 정의한 핵심 개체들과 사용자 정의 개체에 getter/setter를 정의할 수 있습니다. getter와 setter를 정의할 때 쓰이는 문법은 개체 상수값 문법입니다.</p> - -<p>다음의 JS 쉘 세션은 사용자가 정의한 개체 o에 대해서 getter와 setter가 어떻게 동작하는지 보여줍니다. JS 쉘은 JavaScript를 한 번에 실행(batch)하거나 대화식으로(interactively) 실행할 수 있게 해주는 응용프로그램입니다.</p> - -<p><code>o</code> 개체에는 이런 속성이 있습니다.</p> - -<ul> - <li>o.a - 수</li> - <li>o.b - o.a 더하기 1을 반환하는 getter</li> - <li>o.c - 받은 값을 2로 나누어서 o.a에 설정하는 setter</li> -</ul> - -<pre>js> o = new Object; -[object Object] -js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}}; -[object Object] -js> o.a -7 -js> o.b -8 -js> o.c = 50 -js> o.a -25 -js> -</pre> - -<p>다음 JavaScript 쉘 세션은 이미 정의된 <code>Date</code> 모든 인스턴스에 year 속성을 추가하기 위해서 getter/setter가 어떻게 Date 프로토타입을 확장하는지 보여줍니다. 이 세션에서는 year 속성의 getter와 setter를 지원하기 위해서 <code>Date</code>에 있는 <code>getFullYear</code> 메소드와 <code>setFullYear</code> 메소드를 사용하고 있습니다.</p> - -<p>이 문장들은 year 속성에 대한 getter와 setter를 정의합니다.</p> - -<pre>js> var d = Date.prototype; -js> d.__defineGetter__("year", function() { return this.getFullYear(); }); -js> d.__defineSetter__("year", function(y) { this.setFullYear(y); }); -</pre> - -<p>이 문장들은 <code>Date</code>의 getter/setter를 사용합니다.</p> - -<pre>js> var now = new Date; -js> print(now.year); -2000 -js> now.year=2001; -987617605170 -js> print(now); -Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 -</pre> - -<div class="note">JavaScript 1.5를 개발하는 동안 이미 존재하는 개체에 getter/setter를 추가할 때 <code>getter =</code>, <code>setter =</code>이라는 식의 문법을 사용하던 때가 잠깐 있었습니다. 이 문법은 이제 사용하지 말아야 합니다. 현재의 JS 1.5 엔진에서는 경고를 발생시키고, 더 나중의 버전에서는 문법 에러를 발생시키게 될 것입니다.</div> - -<p> </p> - -<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> - -<p>getter/setter를</p> - -<ul> - <li><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자</a>를 이용해서 정의하거나,</li> - <li>개체가 만들어진 이후에 getter/setter 추가 메소드를 이용해서 언제든지 추가할 수 있습니다.</li> -</ul> - -<p><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자</a>를 이용할 때는 단순히 getter 메소드 앞에는 <code>get</code>을 써주고 setter 메소드 앞에는 <code>set</code>을 써주기만 하면됩니다. 물론 getter 메소드에는 매개변수가 없어야 하고 setter에는 정확히 하나만 있어야 합니다. 다음 예제에서와 같이 말입니다.</p> - -<pre class="eval">o = { - a:7, - <strong>get</strong> b() { return this.a+1; }, - <strong>set</strong> c(x) { this.a = x/2; } -}; -</pre> - -<p>개체가 생성된 이후에 어느 때라도 <code>__defineGetter__</code>와 <code>__defineSetter__</code>라는 메소드를 이용하면 getter/setter를 정의할 수 있습니다. 두 메소드 모두 첫 번째 매개변수에 getter/setter 이름을 나타내는 문자열을 받습니다. 두 번째 매개변수는 getter/setter로서 호출될 함수를 받습니다. 예제를 보십시오.</p> - -<pre class="eval">o.__defineGetter__("b", function() { return this.a+1; }); -o.__defineSetter__("c", function(x) { this.a = x/2; }); -</pre> - -<p>두 가지 중에서 어떤 방식을 택할지는 프로그래밍 스타일이나 해야할 작업에 달려있습니다. 프로토타입을 정의하는데 이미 개체 초기화 지정자를 사용하고 있다면 거의 첫 번째 방식을 사용할 것입니다. 첫 번째가 좀 더 단순하고 자연스러운 방식입니다. 그러나 우리가 직접 프로토토입을 만들거나 개체를 생성할 수 없어서 나중에 getter/setter를 추가해야 하는 상황이라면 두 번째 방식을 사용할 수 밖에 없습니다. 두 번째 방식은 JavaScript의 동적인 특성을 잘 보여주는 방식입니다. 하지만 코드를 읽고 이해하기 어렵게 만들 수도 있습니다.</p> - -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html deleted file mode 100644 index 8e91a2007f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Defining Methods -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods ---- -<h3 id=".EB.A9.94.EC.86.8C.EB.93.9C_.EC.A0.95.EC.9D.98" name=".EB.A9.94.EC.86.8C.EB.93.9C_.EC.A0.95.EC.9D.98">메소드 정의</h3> -<p> - <i> - 메소드</i> - 는 개체와 연관되어 있는 함수입니다. 일반적인 함수를 정의하는 것과 같은 방법으로 메소드를 정의합니다. 그 후에, 존재하는 개체와 함수를 연관시키기 위해서 다음과 같은 문법을 사용합니다.</p> -<pre>object.methodname = function_name -</pre> -<p><code>object</code>는 존재하는 개체중에 하나이고, <code>methodname</code>은 지금 추가하려는 메소드 이름이며, <code>function_name</code>은 함수 이름입니다.</p> -<p>이제 우리는 개체의 메소드를 호출할 때 다음과 같이 할 수 있습니다.</p> -<pre>object.methodname(params); -</pre> -<p>개체 생성자 함수에 메소드 정의를 포함시켜서 개체 타입에 대한 메소드를 정의할 수 있습니다. 예를 들어, 미리 정의된 car 개체의 속성을 출력해주는 함수를 정의할 수 있습니다.</p> -<pre>function displayCar() { - var result = "A Beautiful " + this.year + " " + this.make - + " " + this.model; - pretty_print(result); -} -</pre> -<p><code>pretty_print</code>는 가로선과 문자열을 출력하는 함수입니다. 이 메소드가 포함된 개체를 참조하기 위해서 <code>this</code>를 사용하고 있다는 것을 주의해서 보십시오.</p> -<p>아래 문장을 개체 정의에 추가함으로써 이 함수를 car의 메소드로 만들 수 있습니다.</p> -<pre>this.displayCar = displayCar; -</pre> -<p>그러므로 <code>car</code> 개체의 완벽한 정의는 아래와 같은 모습이 될 것입니다.</p> -<pre>function car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; - this.displayCar = displayCar; -} -</pre> -<p>그러면 우리는 모든 car 개체에 대해서 이런 식으로 <code>displayCar</code> 메소드를 호출할 수 있게됩니다.</p> -<pre>car1.displayCar() -car2.displayCar() -</pre> -<p>이 코드는 다음 그림과 같은 내용을 만들어냅니다.</p> -<p><img alt="Image:obja.gif"> <small><b>그림 7.1: 메소드 출력 결과</b></small></p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html deleted file mode 100644 index 17c2aa7de8..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Defining Properties for an Object Type -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type ---- -<h3 id=".EA.B0.9C.EC.B2.B4_.ED.98.95.EC.8B.9D.EC.97.90_.EC.86.8D.EC.84.B1_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EC.B2.B4_.ED.98.95.EC.8B.9D.EC.97.90_.EC.86.8D.EC.84.B1_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0">개체 형식에 속성 정의하기</h3> -<p><code>prototype</code> 속성을 이용하면 이미 정의해 놓은 개체 형식에 속성을 추가할 수 있습니다. 이 방법을 사용하면 개체의 인스턴스 하나에만 속성이 추가되는 것이 아니라 같은 타입의 모든 개체가 공유하는 속성을 정의합니다. 다음 코드는 <code>car</code> 형식의 모든 개체에 <code>color</code> 속성을 추가하고, <code>car1</code> 개체의 <code>color</code> 속성에 값을 할당하는 코드입니다.</p> -<pre>Car.prototype.color=null; -car1.color="black"; -</pre> -<p>더 많은 정보를 얻으려면 <a href="ko/Core_JavaScript_1.5_Reference">기본 JavaScript 레퍼런스</a>에 있는 Function 개체의 <a href="ko/Core_JavaScript_1.5_Reference/Objects/Function#Properties"><code>prototype</code> 속성</a>을 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html deleted file mode 100644 index 1b6f50cc11..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Deleting Properties -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties ---- -<h3 id=".EC.86.8D.EC.84.B1_.EC.A0.9C.EA.B1.B0" name=".EC.86.8D.EC.84.B1_.EC.A0.9C.EA.B1.B0">속성 제거</h3> -<p><code>delete</code> 연산자를 사용하여 속성을 제거할 수 있습니다. 어떻게 속성을 제거하는지 코드를 보십시오.</p> -<pre>//a와 b라는 속성을 가지는 새 개체를 만듭니다. -myobj = new Object; -myobj.a = 5; -myobj.b = 12; - -//myobj가 속성 b만을 가지도록 속성 a를 지웁니다. -delete myobj.a; -</pre> -<p>전역 변수를 선언할 때 <code>var</code> 키워드를 사용하지 않았다면 그 전역 변수를 제거하는데 <code>delete</code> 연산자를 사용할 수 있습니다.</p> -<pre>g = 17; -delete g; -</pre> -<p>더 많은 정보를 얻으려면 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators#delete">delete</a>를 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html deleted file mode 100644 index 8345ba1478..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Creating New Objects -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/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html deleted file mode 100644 index 84b9df2c2d..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Indexing Object Properties -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties ---- -<h3 id=".EA.B0.9C.EC.B2.B4_.EC.86.8D.EC.84.B1_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EC.B2.B4_.EC.86.8D.EC.84.B1_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0">개체 속성 접근하기</h3> -<p>JavaScript 1.0에서는 개체의 속성을 참조할 때 개체 이름이나 순서 인덱스를 사용할 수 있습니다. 그러나 JavaScript 1.1과 그 이후 버전에서는 처음에 속성을 정의할 때 이름으로 정의했으면 항상 이름으로만 참조해야 하고, 인덱스로 정의했으면 인덱스로만 참조해야 합니다.</p> -<p>이런 제한은 앞 페이지 예제의 car 개체 형식처럼 생성자 함수로 개체와 개체 속성을 만들 때나 명시적으로 개별 속성을 만들 때(예를 들어 <code>myCar.color = "red"</code> 같은 식으로 속성을 추가할 때) 모두 적용됩니다. 그러므로 <code>myCar{{ mediawiki.external(5) }} = "25 mpg"</code>라고 인덱스를 이용해서 속성을 정의하면 그 이후로는 항상 <code>myCar{{ mediawiki.external(5) }}</code>로 참조할 수 있습니다.</p> -<p>이 규칙은 <code>forms</code> 배열 같이 HTML을 반영하여 생성된 개체에는 예외입니다. 이 배열에 있는 개체를 참조할 때는 순서(문서에 기록된 순서)를 나타내는 숫자나 이름(이름을 정의한 경우에만)을 이용하여 참조할 수 있습니다. 예를 들어, 문서에 있는 두 번째 <code><FORM></code> 태그가 "myForm"이라는 값을 가진 <code>NAME</code> 속성을 갖고 있다면 이 폼은 <code>document.forms{{ mediawiki.external(1) }}</code>, <code>document.forms{{ mediawiki.external('\"myForm\"') }}</code>, <code>document.myForm</code>으로 접근할 수 있습니다. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html deleted file mode 100644 index 552347b70e..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Using a Constructor Function -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function ---- -<h3 id=".EC.83.9D.EC.84.B1.EC.9E.90_.ED.95.A8.EC.88.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.83.9D.EC.84.B1.EC.9E.90_.ED.95.A8.EC.88.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">생성자 함수 사용하기</h3> -<p>다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다.</p> -<ol> - <li>생성자 함수를 작성함으로써 개체를 정의합니다.</li> - <li>new 키워드를 사용하여 개체의 인스턴스를 만듭니다.</li> -</ol> -<p>개체 형식을 정의하기 위해서, 개체의 이름, 속성, 메소드를 지정하는 함수를 만듭니다. 자동차를 나타내기 위한 개체를 만들고 싶다고 해봅시다. 그렇다면 이 형식이 <code>car</code>라고 불리길 원할 것이고, make, model, year라는 속성이 있기를 원할 것입니다. 원하는 것을 이루기 위해서 이런 함수를 작성합니다.</p> -<pre>function car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> -<p>함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해서 <code>this</code>를 사용했다는 것을 명심하십시오.</p> -<p>이제 우리는 <code>mycar</code>라는 개체를 이렇게 만들 수 있습니다.</p> -<pre>mycar = new car("Eagle", "Talon TSi", 1993); -</pre> -<p>이 문장은 <code>mycar</code>를 만들고, 지정된 값을 mycar의 속성에 할당합니다. 그러면 <code>mycar.make</code>는 "Eagle"이라는 문자열 값을 가지고, <code>mycar.year</code>는 1993이라는 정수를 가질 것입니다.</p> -<p>우리는 <code>new</code>를 써서 <code>car</code> 개체를 몇 개라도 만들 수 있습니다.</p> -<pre>kenscar = new car("Nissan", "300ZX", 1992); -vpgscar = new car("Mazda", "Miata", 1990); -</pre> -<p>개체는 다른 개체를 속성으로 가질 수 있습니다. 예를 들어, <code>person</code> 개체를 다음과 같이 정의했다고 합시다.</p> -<pre>function person(name, age, sex) { - this.name = name; - this.age = age; - this.sex = sex; -} -</pre> -<p>그리고나서 person 개체의 인스턴스 두 개를 만듭니다.</p> -<pre>rand = new person("Rand McKinnon", 33, "M"); -ken = new person("Ken Jones", 39, "M"); -</pre> -<p>이제 우리는 car가 owner라는 속성으로 <code>person</code> 개체를 가지도록 car의 정의를 바꿀 수 있습니다.</p> -<pre>function car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; -} -</pre> -<p>새 개체 인스턴스를 만들 때 이렇게 쓸 수 있습니다.</p> -<pre>car1 = new car("Eagle", "Talon TSi", 1993, rand); -car2 = new car("Nissan", "300ZX", 1992, ken); -</pre> -<p>위 문장에서 owner 인자로 문자열 상수값이나 정수값을 전달하는 대신 <code>rand</code>와 <code>ken</code>이라는 개체를 전달했다는 사실에 주의하십시오. 이제 car2의 소유자 이름을 알고 싶으면 이런식으로 접근할 수 있습니다.</p> -<pre>car2.owner.name -</pre> -<p>정의된 개체에 아무때나 속성을 추가할 수 있다는 사실을 기억하십시오.</p> -<pre>car1.color = "black" -</pre> -<p>이 문장은 car1에 <code>color</code> 속성을 추가하고 "black"이라는 값을 할당합니다. 그러나 이 문장이 다른 개체에 영향을 미치지는 않습니다. 같은 형식을 가지는 모든 개체에 새 속성을 추가하고 싶으면 car 개체 형식의 정의에 속성을 추가해야 합니다.</p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_Object_Initializers", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html deleted file mode 100644 index 0ed663ae1f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Using this for Object References -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References ---- -<h3 id="this.EB.A5.BC_.EC.82.AC.EC.9A.A9.ED.95.9C_.EA.B0.9C.EC.B2.B4_.EC.B0.B8.EC.A1.B0" name="this.EB.A5.BC_.EC.82.AC.EC.9A.A9.ED.95.9C_.EA.B0.9C.EC.B2.B4_.EC.B0.B8.EC.A1.B0">this를 사용한 개체 참조</h3> -<p>JavaScript에는 <code>this</code>라는 키워드가 있는데, 메소드 안에서 현재 개체를 참조하기 위해서 이 키워드를 사용할 수 있습니다. 예를 들어, 개체의 값 속성을 검증하는 <code>validate</code>라는 함수가 있다고 해봅시다.</p> -<pre>function validate(obj, lowval, hival) { - if ((obj.value < lowval) || (obj.value > hival)) - alert("Invalid Value!"); -} -</pre> -<p>그러면 폼의 각 요소의 <code>onchange</code> 이벤트 핸들러에서 <code>validate</code>를 호출할 때, 다음 예제와 같은 방법으로 this를 사용해서 폼 요소를 <code>validate</code>에 전달할 수 있습니다.</p> -<pre><input type="text" name="age" size="3" - onChange="validate(this, 18, 99)"> -</pre> -<p><code>form</code> 속성과 같이 사용하면, <code>this</code>는 현재 개체의 부모 폼을 참조할 수 있습니다. 다음 예제에서, <code>myForm</code>이라는 폼은 <code>Text</code> 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 <code>Text</code> 개체의 값을 폼 이름으로 바꿉니다. 버튼의 <code>onclick</code> 이벤트 핸들러에서 부모 폼인 <code>myForm</code>을 참조하기 위해서 <code>this.form</code>을 사용하고 있습니다.</p> -<pre><form name="myForm"> -<p><label>Form name:<input type="text" name="text1" value="Beluga"></label> -<p><input name="button1" type="button" value="Show Form Name" - onclick="this.form.text1.value=this.form.name"> -</p> -</form> -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html deleted file mode 100644 index d9f8bb0bf9..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Expressions -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions ---- -<h3 id=".ED.91.9C.ED.98.84.EC.8B.9D" name=".ED.91.9C.ED.98.84.EC.8B.9D"> 표현식 </h3> -<p><i>표현식</i>은 상수(literals), 변수, 연산자 그리고 단일값을 반환하는 계산식(값은 숫자, 문자열, 논리값이 가능)이 알맞게 조합된 집합체다. -</p><p>개념적으로 보면 표현식에는 두가지 타입이 있다: 하나는 변수에 값을 할당하는 것이고 다른 하나는 단순히 값을 가지고 있는 것이다. 예를 들어, x = 7 이라는 표현식은 x 에 7이라는 값을 할당하는 표현식이다. 이 표현식은 스스로 7이라는 값을 부여한다. 이런 표현식들은 <i>할당 연산자</i>를 사용한다. 반면에, 3 + 4 라는 표현식은 단순히 7이라는 값을 계산할 뿐이다; 할당하지 않는다. 이런 표현식에서 사용되는 연산자는 그냥 단순히 <i>연산자</i>라고만 한다. -</p><p>JavaScript에는 다음과 같은 타입의 표현식이 있다: -</p> -<ul><li> 산술형 : 3.14159와 같이 숫자를 표현(evaluate). (일반적으로 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">산술 연산자</a>를 사용) -</li><li> 문자열형: "Fred"나 "234"와 같이 문자열을 표현(evaluate). (일반적으로 <a href="ko/Core_JavaScript_1.5_Guide/Operators/String_Operators">문자열 연산자</a>를 사용) -</li><li> 논리형: 참(true) 혹은 거짓(false)을 표현(evaluate). (종종 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">논리 연산자</a>와 함께 사용) -</li><li> 객체형: 객체를 표현(evaluate). (객체표현식에 사용하는 다양한 연산자는 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators">특수 연산자</a>를 참고) -</li></ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Unicode", "Core_JavaScript_1.5_Guide:Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wyra\u017cenia" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html deleted file mode 100644 index 310ab25c67..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: JavaScript Overview -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview ---- -<h3 id="JavaScript.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name="JavaScript.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">JavaScript란 무엇인가?</h3> -<p>JavaScript는 크로스 플랫폼, 객체 지향 스크립트 언어입니다. JavaScript는 작고, 가벼운 언어입니다; JavaScript는 단독으로 쓰이는 언어로는 유용하지 않지만, 웹 브라우져 같은 다른 제품이나 프로그램에 포함하기 쉽습니다. 호스트 환경에서 JavaScript는 그 환경의 다른 개체(object)들을 프로그램적으로 제어하기 위해서 그들과 연결될 수 있습니다.</p> -<p>기본 JavaScript(core JavaScript)는 <code>Array</code>, <code>Date</code>, <code>Math</code>등 기본이 되는 개체들(core set of objects)과 연산자, 제어 구조, 문장등 언어의 기본 요소들(core set of language elements)을 포함하고 있습니다. 기본 JavaScript는 다른 개체를 추가함으로써 다양한 목적을 위해 확장될 수 있습니다. 예를 들면 다음과 같은 것들입니다.</p> -<ul> <li>"클라이언트쪽 JavaScript"는 브라우저(Navigatore 또는 다른 브라우저들)와 브라우저의 Document Object Model(DOM)을 제어할 수 있는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 클라이언트쪽 확장 기능은 응용프로그램이 HTML 폼에 요소를 두어 마우스 클릭이나 폼 입력, 페이지 이동 같은 사용자 이벤트에 반응할 수 있게 합니다.</li> <li>"서버쪽 JavaScript"는 서버에서 JavaScript를 실행하는 데 연관되는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 서버쪽 확장 기능은 응용프로그램이 관계형 데이터베이스와 통신할 수 있게 하고, 응용프로그램의 호출들 사이에 연속성을 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.</li> -</ul> -<p>JavaScript의 LiveConnect 기능을 통해서, Java와 JavaScript 코드가 서로 통신할 수 있습니다. JavaScript에서 Java 개체를 초기화하여 개체의 공개 메소드와 필드에 접근할 수 있습니다. Java에서 JavaScript 개체, 속성(property), 메소드에 접근할 수 있습니다.</p> -<p>Netscape가 JavaScript를 개발했고 Netscape 브라우저에서 JavaScript가 가장 먼저 사용되었습니다.</p> -<h3 id="JavaScript.EC.99.80_Java" name="JavaScript.EC.99.80_Java">JavaScript와 Java</h3> -<p>JavaScript 와 Java 는 여러가지 면에서 비슷하지만 본질적으로 다릅니다. JavaScript는 Java 와 공통점이 있지만 Java 처럼 형(type)을 검사하지 않습니다. JavaScript는 Java 문법의 대부분과 제어흐름의 기본적인 개념들을 지원합니다.</p> -<p>Java의 클래스 선언으로 이루어지는 컴파일 타임 시스템에 대조적으로, JavaScript는 수, 불리언, 문자열 값을 나타내는 작은 규모의 자료형에 기반한 런타임 시스템을 지원합니다. JavaScript는 클래스 기반 개체 모델이 아닌 프로토타입 기반(prototype-based) 개체 모델을 갖고 있습니다. 프로토타입 기반 개체 모델은 동적인 상속을 제공합니다. 즉, 각각의 개체를 상속할 수 있는 것입니다. JavaScript는 또 특별히 선언시의 요구사항이 없는 함수도 지원합니다. 함수는 느슨하게 타입된 메소드로 실행됨으로써 개체의 속성이 될 수 있습니다.(Functions can be properties of objects, executing as loosely typed methods.)</p> -<p>Java에 비해 JavaScript는 형식이 자유로운 언어입니다. 모든 변수, 클래스, 메소드들을 꼭 선언 할 필요는 없습니다. 메소드가 public, private, protected 인지 고민해야할 필요가 없고, interface를 구현할 필요도 없습니다. 변수, 매개변수(parameter), 함수의 반환 형식도 명시적으로 지정할 필요가 없습니다.</p> -<p>Java는 클래스 기반 프로그래밍 언어로서, 빠른 실행과 형 안정성(type safety)을 위해 설계되었습니다. 형 안정성이란 예를 들면 Java에서 정수를 개체 참조로 변환할 수 없고, Java 바이트코드에 오류를 일으켜서 사적인(private) 메모리 공간에 접근할 수 없다는 말입니다. 자바의 클래스 기반 모델은 프로그램이 클래스와 클래스의 메소드로만 이루어진다는 의미입니다. Java의 클래스 상속과 엄격한 형 검사(strong typing)는 일반적으로 단단히 결합된 개체의 계층 구조를 필요로 합니다. 이런 요구사항이 JavaScript 프로그래밍에 비해 Java 프로그래밍을 더 복잡하게 만듭니다.</p> -<p>반면 JavaScript는 HyperTalk나 dBASE 같이 적은 줄수의 동적 타입 언어를 계승한 것입니다. 이런 스크립트 언어는 더 많은 사람들을 위한 프로그래밍 도구로서 제공되는데, 이 언어들이 문법이 쉽고, 내장되기에 쉬우며, 개체 생성에 요구 사항이 단순하기 때문입니다.</p> -<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript</th> <th>Java</th> </tr> <tr> <td>개체 지향. 개체의 형식 사이에 구분이 없음. 프로토타입 메커니즘을 통해 상속을 지원하고, 어떤 개체에든지 동적으로 속성과 메소드를 추가할 수 있습니다.</td> <td>클래스 기반. 개체는 클래스 계층 구조를 관통하는 상속을 통해서 클래스와 인스턴스(instance)로 나뉩니다. 클래스와 인스턴스에는 동적으로 속성과 메소드를 추가할 수 없습니다.</td> </tr> <tr> <td>변수의 자료형을 선언하지 않음(동적 형 검사)</td> <td>변수의 자료형을 반드시 선언해야 함(정적 형 검사)</td> </tr> <tr> <td>Cannot automatically write to hard disk.</td> <td>Cannot automatically write to hard disk.</td> </tr> </tbody> -</table> -<p><small><strong>표(Table) 1.1: JavaScript 와 Java 비교</strong></small><br> -<br> -Java와 JavaScript 사이의 차이점에 대해서 더 알고 싶으시면 <a href="/ko/Core_JavaScript_1.5_Guide#.EA.B0.9C.EC.B2.B4_.EB.AA.A8.EB.8D.B8.EC.9D.98_.EC.83.81.EC.84.B8_.EB.82.B4.EC.9A.A9" title="ko/Core_JavaScript_1.5_Guide#.EA.B0.9C.EC.B2.B4_.EB.AA.A8.EB.8D.B8.EC.9D.98_.EC.83.81.EC.84.B8_.EB.82.B4.EC.9A.A9">개체 모델의 상세 내용</a>을 보시기 바랍니다.</p><h3 id="JavaScript.EC.99.80_ECMAScript_.EB.AA.85.EC.84.B8" name="JavaScript.EC.99.80_ECMAScript_.EB.AA.85.EC.84.B8">JavaScript와 ECMAScript 명세</h3> -<p>Netscape가 JavaScript를 개발했고, Netscape 브라우저에서 가장 처음으로 사용되었습니다. 그러나 <a class="external" href="http://www.ecma-international.org/">Ecma International</a> - 정보와 통신 시스템을 표준화하기 위한 유럽 기구(공식적으로 ECMA - the European Computer Manufacturers Association으로 알려짐) - 과 Netscape가 공동으로 작업하여 기본 JavaScript에 기반하여 표준화되고 국제적인 프로그래밍 언어를 만들어냈습니다. JavaScript의 표준화된 버전은 ECMAScript라고 부르고, 표준을 지원하는 응용프로그램에서는 모두 동일하게 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해서 공개된 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세에 문서화되어 있습니다.</p> -<p>ECMA-262 표준은 <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization, 국제 표준화기구)의 승인을 받아 ISO-16262가 되었습니다. Mozilla 웹사이트에서 <a class="external" href="http://www.mozilla.org/js/language/E262-3.pdf">ECMA-262의 PDF 문서</a>를 얻을 수 있습니다. <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International 웹사이트</a> 에서도 명세를 찾을 수 있습니다. ECMAScript 명세는 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>에서 표준화 한 Document Object Model(DOM)에 대해서는 설명하지 않습니다. DOM은 HTML 문서 개체들이 스크립트에 노출되는 방식을 정의합니다.</p> -<h4 id="JavaScript_.EB.B2.84.EC.A0.84.EA.B3.BC_ECMAScript_.ED.8C.90.EB.B3.B8_.EC.82.AC.EC.9D.B4.EC.9D.98_.EA.B4.80.EA.B3.84" name="JavaScript_.EB.B2.84.EC.A0.84.EA.B3.BC_ECMAScript_.ED.8C.90.EB.B3.B8_.EC.82.AC.EC.9D.B4.EC.9D.98_.EA.B4.80.EA.B3.84">JavaScript 버전과 ECMAScript 판본 사이의 관계</h4> -<p>Netscape는 ECMA와 밀접하게 작업하여 ECMAScript Specification(ECMA-262)를 만들었습니다. JavaScript 버전과 ECMAScript 판본(edition)들 사이의 관계가 아래 표에 설명되어 있습니다.</p> -<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript 버전</th> <th>ECMAScript 판본과의 관계</th> </tr> <tr> <td>JavaScript 1.1</td> <td>ECMA-262, 1판은 JavaScript 1.1에 기초합니다.</td> </tr> <tr> <td>JavaScript 1.2</td> <td>JavaScript 1.2가 발표됐을 때 ECMA-262가 아직 완성되지 않았습니다. 다음과 같은 이유때문에 JavaScript 1.2는 ECMA-262 1판과 완벽하게 호환되지 않습니다. <ul> <li>Netscape는 JavaScript 1.2에 몇 가지 기능을 추가했으나, ECMA-262에서 고려하지 못했습니다.</li> <li>ECMA-262는 두 가지 새 기능을 추가했습니다. 유니코드를 이용한 국제화, 모든 플랫폼에서의 동일한 동작. Date 개체 같은 JavaScript 1.2의 몇 가지 기능이 플랫폼에 의존적이었습니다.</li> </ul> </td> </tr> <tr> <td> <p>JavaScript 1.3</p> </td> <td> <p>JavaScript 1.3은 ECMA-262 1판과 완벽하게 호환됩니다.</p> <p>JavaScript 1.3은 ==와 !=연산자를 제외하고는 JavaScript 1.2의 추가적인 기능을 그대로 유지하면서 JavaScript 1.2가 ECMA-262와 어긋나던 점들을 해결했습니다. ==, != 연산자는 ECMA-262에 맞추기 위해 수정되었습니다.</p> </td> </tr> <tr> <td> <p>JavaScript 1.4</p> </td> <td> <p>JavaScript 1.4는 ECMA-262 1판과 완벽하게 호환됩니다.</p> <p>JavaScript 1.4가 발표되었을 때 ECMAScript 명세의 세 번째 버전이 아직 완성되지 않았습니다.</p> </td> </tr> <tr> <td>JavaScript 1.5</td> <td>JavaScript 1.5는 ECMA-262 3판과 완벽하게 호환됩니다.</td> </tr> </tbody> -</table> -<p><small><strong>표 1.2: JavaScript 버전과 ECMAScript 판본</strong></small><br> -<br> -참고: ECMA-262 2판은 1판에 편집상 사소한 변경과 버그 수정을 가한 판본입니다. 현재 ECMA의 TC39 워킹그룹에서 ECMAScript 4판을 작업하고 있습니다. 4판은 JavaScript 2.0과 대응될 것입니다.</p> -<p><a href="/ko/Core_JavaScript_1.5_Guide" title="ko/Core_JavaScript_1.5_Guide">JavaScript 기본 레퍼런스</a>에서 ECMAScript 호환 기능을 보여줍니다.</p> -<p>JavaScript는 항상 ECMAScript Specification에 포함되지 않은 기능들을 포함할 것입니다. JavaScript는 추가적인 기능을 제공하지만 ECMAScript와 호환됩니다.</p> -<h4 id="JavaScript_.EB.AC.B8.EC.84.9C_vs_ECMAScript_.EB.AA.85.EC.84.B8.EC.84.9C" name="JavaScript_.EB.AC.B8.EC.84.9C_vs_ECMAScript_.EB.AA.85.EC.84.B8.EC.84.9C">JavaScript 문서 vs ECMAScript 명세서</h4> -<p>ECMAScript 명세는 ECMAScript를 구현하는데 필요한 요구사항을 모아놓은 것입니다. 이것은 우리가 JavaScript의 한 기능이 다른 ECMAScript 구현에서도 지원될 것인지 결정하는데 유용합니다. ECMAScript에서 지원하는 기능만을 사용하는 JavaScript 코드를 작성할 계획이라면 ECMAScript 명세를 살펴볼 필요가 있을 것입니다.</p> -<p>ECMAScript 문서는 스크립트 프로그래머를 돕기위해 작성된 것이 아닙니다. 스크립트 작성에 대한 정보를 얻으려면 JavaScript 문서를 보십시오.</p> -<h4 id="JavaScript.EC.99.80_ECMAScript_.EC.9A.A9.EC.96.B4" name="JavaScript.EC.99.80_ECMAScript_.EC.9A.A9.EC.96.B4">JavaScript와 ECMAScript 용어</h4> -<p>ECMAScript 명세는 JavaScript 프로그래머에게는 친숙하지 않은 용어와 문법을 사용하여 작성되었습니다. 비록 ECMAScript의 언어 설명이 다르긴 하지만 언어는 똑같습니다. JavaScript는 ECMAScript 명세에서 설명하는 모든 기능을 지원합니다.</p> -<p>JavaScript 문서는 JavaScript 프로그래머에게 적당한 언어의 측면을 설명합니다. 예를 들면 이렇습니다.</p> -<ul> <li>전역 개체(Global Object)는 JavaScript 문서에서는 논의되지 않는데, 그것은 우리가 그 개체를 직접 사용할 일이 없기 때문입니다. 전역 개체에서 우리가 사용할 만한 메소드와 속성은 JavaScript 문서에서 논의되고 있기는 하지만 최상위(top-level) 함수와 속성이라고 부릅니다.</li> <li>JavaScript 문서에서 매개변수가 없는 <code>Number</code>와 <code>String</code> 개체 생성자는 논의되지 않고 있는데, 그것은 거의 사용할 일이 없기 때문입니다. <code>Number</code>의 인자없는 생성자는 +0을 반환하고, <code>String</code>의 인자없는 생성자는 ""(빈 문자열)을 반환합니다.</li> -</ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:About", "Core_JavaScript_1.5_Guide:Values") }}</p> -<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/JavaScript_Overview", "fr": "fr/Guide_JavaScript_1.5/Aper\u00e7u_de_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/JavaScript_Overview", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_JavaScriptu" } ) }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html deleted file mode 100644 index ee62d0cecf..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Literals -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Literals ---- -<h3 id=".EC.83.81.EC.88.98.EA.B0.92.28Literal.29" name=".EC.83.81.EC.88.98.EA.B0.92.28Literal.29">상수값(Literal)</h3> -<p>JavaScript에서 값을 표현하기 위해 상수값을 사용할 수 있습니다. 그것은 변수가 아니라 고정된 값으로서 "문자 그대로(literally)" 스크립트에 값을 제공하는 것입니다. 이 절에서 다음과 같은 상수값에 대해서 설명하겠습니다.</p> -<ul> - <li>{{ Anch("배열 상수값") }}</li> - <li>{{ Anch("불리언 상수값") }}</li> - <li>{{ Anch("소수 상수값") }}</li> - <li>{{ Anch("정수") }}</li> - <li>{{ Anch("개체 상수값") }}</li> - <li>{{ Anch("문자열 상수값") }}</li> -</ul> -<h4 id=".EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">배열 상수값</h4> -<p>배열 상수값은 대괄호([])안에 배열의 원소(element)를 0개 이상 나열한 것입니다. 배열 상수값으로 배열을 만드면 배열은 지정된 원소를 가지도록 초기화되고, 지정된 원소의 개수만큼의 길이를 갖게 됩니다.</p> -<p>다음 예제는 세 개의 원소를 가지고 길이가 3인 <code>coffees</code> 배열을 만드는 예제입니다.</p> -<pre>coffees = ["French Roast", "Colombian", "Kona"]</pre> -<p><b>참고</b> 배열 상수값은 개체 초기화지정자(object initializer) 중의 하나입니다. <a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화지정자 사용하기</a>를 보십시오.</p> -<p>최상위 스크립트에서 상수값을 이용하여 배열을 만들면 JavaScript는 배열 상수값을 포함하는 표현식을 평가(evaluate)할 때마다 배열을 만듭니다. 또한, 함수 안에서 사용된 상수값은 함수가 호출될 때마다 생성됩니다.</p> -<p>배열 상수값은 Array 개체입니다. Array 개체에 대한 상세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object">Array 개체</a>를 보십시오.</p> -<p><b>배열 상수값의 추가적인 쉼표</b></p> -<p>배열 상수값에 모든 원소를 지정할 필요는 없습니다. 쉼표만 찍어 두면 값이 할당되지 않은 빈 공간을 가진 배열이 만들어집니다. 다음 예제는 <code>fish</code> 배열을 만듭니다.</p> -<pre>fish = ["Lion", , "Angel"]</pre> -<p>이 배열은 값을 가진 원소 두 개와 빈 원소 하나를 갖게됩니다. (<code>fish{{ mediawiki.external(0) }}</code>은 "Lion", <code>fish{{ mediawiki.external(1) }}</code>은 <code>undefined</code>, <code>fish{{ mediawiki.external(2) }}</code>는 "Angel"이라는 값을 가집니다.)</p> -<p>원소 목록 끝에 남겨둔 쉼표는 무시됩니다. 다음 예제에서 배열 길이는 3입니다. <code>myList{{ mediawiki.external(3) }}</code>은 만들어지지 않습니다. 그외에 목록에 있는 다른 쉼표들은 각각 새로운 원소를 나타냅니다.</p> -<pre>myList = ['home', , 'school', ];</pre> -<p>다음 예제에서 배열 길이는 4이고, <code>myList{{ mediawiki.external(0) }}</code>과 <code>myList{{ mediawiki.external(2) }}</code>는 비게 됩니다.</p> -<pre>myList = [ , 'home', , 'school'];</pre> -<p>다음 예제에서 배열 길이는 4이고 <code>myList{{ mediawiki.external(1) }}</code>과 <code>myList{{ mediawiki.external(3) }}</code>이 비게 됩니다. 오직 마지막 쉼표만 무시됩니다.</p> -<pre>myList = ['home', , 'school', , ];</pre> -<h4 id=".EB.B6.88.EB.A6.AC.EC.96.B8_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.B6.88.EB.A6.AC.EC.96.B8_.EC.83.81.EC.88.98.EA.B0.92">불리언 상수값</h4> -<p>불리언 형은 두 가지 상수값을 가질 수 있는데, 그것은 <code>true</code>와 <code>false</code>입니다.</p> -<p><code>true</code>, <code>false</code>라는 기본(primitive) 불리언 값과 true, false 값의 불리언 개체를 혼동하지 마십시오. 불리언 개체는 기본 불리언 데이터 형을 감싸는 역할을 할 뿐입니다. 더 많은 정보는 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Boolean_Object">불리언 개체</a>를 참조하십시오.</p> -<h4 id=".EC.A0.95.EC.88.98" name=".EC.A0.95.EC.88.98">정수</h4> -<p>10진수, 16진수, 8진수 정수를 쓸 수 있습니다. 10진수 정수 상수값은 0(영)으로 시작하지 않는 숫자의 나열입니다. 0(영)으로 시작하는 정수 상수값은 8진수입니다. 0x(또는 0X)로 시작하면 16진수입니다. 16진수는 0부터 9까지의 숫자와 a부터 f나 A부터 F까지의 문자를 포함할 수 있습니다. 8진수에는 0부터 7까지만 쓸 수 있습니다.</p> -<p>8진수 정수 상수값은 사용하지 말기를 추천하고 있으며, ECMA-262 표준 3판에서는 아예 제거되었습니다. 하위 호환성을 위해 JavaScript 1.5에서는 여전히 8진수 정수 상수값을 지원하고 있습니다.</p> -<p>몇 가지 정수 상수값을 예를 보여드리겠습니다.</p> -<pre class="eval">0, 117, -345 (10진수) -015, 0001, -077 (8진수) -0x1123, 0x00111, -0xF1A7 (16진수 또는 "hex") -</pre> -<h4 id=".EC.86.8C.EC.88.98_.EC.83.81.EC.88.98.EA.B0.92" name=".EC.86.8C.EC.88.98_.EC.83.81.EC.88.98.EA.B0.92">소수 상수값</h4> -<p>소수 상수값은 이런 부분으로 이뤄집니다.</p> -<ul> - <li>부호를 가질 수 있는(즉, "+"나 "-"로 시작할 수 있는) 10진수 정수,</li> - <li>소수점("."),</li> - <li>소수 부분(10진수),</li> - <li>지수 부분</li> -</ul> -<p>지수 부분은 "e"나 "E" 뒤에 숫자가 붙은 형태입니다. 숫자 앞에는 부호("+"나 "-")를 붙일 수도 있습니다. 소수 상수값은 적어도 하나의 숫자에 소수점 또는 지수 부분을 가져야 합니다.</p> -<p>소수 상수값의 몇 가지 예제를 보여드리겠습니다. 3.1415, -3.1E12, .1e12, 2E-12</p> -<h4 id=".EA.B0.9C.EC.B2.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EA.B0.9C.EC.B2.B4_.EC.83.81.EC.88.98.EA.B0.92">개체 상수값</h4> -<p>개체 상수값은 중괄호({}) 안에 특성(property) 이름과 그에 해당하는 값의 쌍을 나열한 것입니다. 문장(statement)의 시작 부분에 개체 상수값을 사용해서는 안됩니다. { 가 블럭의 시작을 나타내기 때문에, 에러가 나거나 의도하지 않은 동작을 보일 것입니다.</p> -<p>다음은 개체 상수값의 예입니다. <code>car</code> 개체의 첫 번째 원소는 <code>myCar</code>라는 특성을 정의하고 있습니다. 두 번째 원소는 <code>getCar</code> 특성을 정의하는데, <code>(CarTypes("Honda"));</code>라는 함수를 호출하고 있습니다. 세 번째 원소는 <code>special</code> 특성을 정의하는데에 <code>Sales</code>라는 변수를 사용합니다.</p> -<pre>var Sales = "Toyota"; - -function CarTypes(name) { - if(name == "Honda") - return name; - else - return "Sorry, we don't sell " + name + "."; -} - -car = {myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales} - -document.write(car.myCar); // Saturn -document.write(car.getCar); // Honda -document.write(car.special); // Toyota</pre> -<p>개체 특성 이름에 정수 상수값이나 문자열 상수값을 사용할 수 있고, 개체 안에 다른 개체를 포함시킬 수도 있습니다. 다음 예제를 보십시오.</p> -<pre>car = {manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda"} - -document.write(car.manyCars.b); // Jeep -document.write(car[7]); // Mazda -</pre> -<p>다음 사항을 참고하십시오.</p> -<pre class="eval">foo = {a: "alpha", 2: "two"} -document.write (foo.a) // alpha -document.write (foo[2]) // two -//document.write (foo.2) // Error: missing ) after argument list -//document.write (foo[a]) // Error: a is not defined -document.write (foo["a"]) // alpha -document.write (foo["2"]) // two -</pre> -<h4 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">문자열 상수값</h4> -<p>문자열 상수값은 큰따옴표(")나 작은따옴표(')로 둘러싸인 0개 이상의 문자들 입니다. 문자열은 같은 종류의 따옴표로 묶어야 합니다. 즉, 작은따옴표 둘로 묶거나, 큰따옴표 둘로 묶어야 한다는 말입니다. 문자열 상수값의 예를 보여드리겠습니다.</p> -<ul> - <li>"blah"</li> - <li>'blah'</li> - <li>"1234"</li> - <li>"one line \n another line"</li> - <li>"John's cat"</li> -</ul> -<p>우 리는 문자열 상수값에 String 개체의 모든 메소드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 상수값을 임시 String 개체로 만들어서 메소드를 호출한 후, 임시 String 개체를 제거합니다. 문자열 상수값에 <code>String.length</code> 특성을 사용할 수도 있습니다. 이렇게 말입니다.</p> -<ul> - <li>"John's cat".length</li> -</ul> -<p>우리가 특별하게 String 개체를 필요로 하는 경우가 아니라면 문자열 상수값을 사용해야만 합니다. String 개체에 대한 자세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/String_Object">String 개체</a>를 보십시오.</p> -<h5 id=".EB.AC.B8.EC.9E.90.EC.97.B4.EC.97.90.EC.84.9C_.ED.8A.B9.EC.88.98.EB.AC.B8.EC.9E.90_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EB.AC.B8.EC.9E.90.EC.97.B4.EC.97.90.EC.84.9C_.ED.8A.B9.EC.88.98.EB.AC.B8.EC.9E.90_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">문자열에서 특수문자 사용하기</h5> -<p>다음 예제에서 볼 수 있듯이 일반적인 문자뿐만 아니라 특수문자도 문자열에 쓸 수 있습니다.</p> -<pre>"one line \n another line"</pre> -<p>JavaScript 문자열에 사용할 수 있는 특수문자를 표로 나타낸 것입니다.</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>문자</th> - <th>의미</th> - </tr> - <tr> - <td>\b</td> - <td>Backspace</td> - </tr> - <tr> - <td>\f</td> - <td>Form feed</td> - </tr> - <tr> - <td>\n</td> - <td>New line</td> - </tr> - <tr> - <td>\r</td> - <td>Carriage return</td> - </tr> - <tr> - <td>\t</td> - <td>Tab</td> - </tr> - <tr> - <td>\v</td> - <td>Vertical tab</td> - </tr> - <tr> - <td>\'</td> - <td>Apostrophe or single quote</td> - </tr> - <tr> - <td>\"</td> - <td>Double quote</td> - </tr> - <tr> - <td>\\</td> - <td>Backslash character (\).</td> - </tr> - <tr> - <td>\<i>XXX</i></td> - <td>세 자리 까지의 8진수 "XXX"로 지정하는 Latin-1 인코딩의 문자. 0부터 377 사이. 예를 들어, \251은 저작권 기호의 8진수 표현입니다.</td> - </tr> - <tr> - <td>\x<i>XX</i></td> - <td>두 자리 까지의 16진수 "XX"로 지정하는 Latin-1 인코딩의 문자. 00부터 FF 사이. 예를 들어, \xA9는 저작권 기호의 16진수 표현입니다.</td> - </tr> - <tr> - <td>\u<i>XXXX</i></td> - <td>네 자리의 16진수 "XXXX"로 지정하는 유니코드 문자. 예를 들어, \u00A9는 저작권 기호의 유니코드 표현입니다. <a href="ko/Core_JavaScript_1.5_Guide/Unicode#.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4">유니코드 이스케이프 시퀀스</a>를 보십시오.</td> - </tr> - </tbody> -</table> -<p><small><b>표 2.1: JavaScript 특수문자</b></small></p> -<h5 id=".EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84" name=".EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84">문자 이스케이프</h5> -<p>표 2.1에 없는 문자에 대해서는 역슬래시가 무시됩니다. 그러나 이러한 기능은 사용하지 않기를 권장하므로 사용을 피해야만 합니다.</p> -<p>역슬래시를 앞에 붙이면 문자열 안에 따옴표를 넣을 수 있습니다. 이것은 따옴표 "이스케이프(escaping)"라고 알려져 있습니다.</p> -<pre>var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." -document.write(quote) -</pre> -<p>이 코드의 결과는 다음과 같습니다.</p> -<pre>He read "The Cremation of Sam McGee" by R.W. Service. -</pre> -<p>문자열 안에 역슬래시 문자를 넣고 싶으면 역슬래시 문자를 이스케이프시켜야 합니다. 예를 들어, <code>c:\temp</code> 라는 경로를 문자열에 할당하고 싶으면 다음과 같이 하면 됩니다.</p> -<pre>var home = "c:\\temp" -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Constants", "Core_JavaScript_1.5_Guide:Unicode") }}</p> -<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Literals", "fr": "fr/Guide_JavaScript_1.5/Constantes_litt\u00e9rales", "ja": "ja/Core_JavaScript_1.5_Guide/Literals", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Litera\u0142y" } ) }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html deleted file mode 100644 index abe9ff83f4..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Objects and Properties -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties ---- -<h3 id=".EA.B0.9D.EC.B2.B4.EC.99.80_.EC.86.8D.EC.84.B1" name=".EA.B0.9D.EC.B2.B4.EC.99.80_.EC.86.8D.EC.84.B1"> 객체와 속성 </h3> -<p>자바스크립트 객체는 객체를 구성하는 속성을 가지고 있습니다. 속성에는 간단한 방법으로 접근할 수 있습니다.: -</p> -<pre>객체이름.속성이름 -</pre> -<p>객체 이름과 속성 이름 두 가지 모두에 대해 알기쉬운 예가 있습니다. 속성은 값을 지정하여 정의합니다. 예를 들어 <code>myCar</code>라는 객체가 있다면(객체가 이미 존재한다고 가정합니다.), <code>make</code>, <code>model</code>, <code>year</code>라는 속성에 다음과 같이 값을 지정할 수 있습니다. -</p> -<pre>myCar.make = "Ford"; -myCar.model = "Mustang"; -myCar.year = 1969; -</pre> -<p>배열은 한 가지 변수 이름으로 결합되어 있는 연속된 값의 집합입니다. 자바스크립트에서 속성과 배열은 밀접한 관련이 있습니다; 말하자면 그 두 가지는 같은 데이터 구조에 다른 인터페이스라는 뜻입니다. 예를 들면 <code>myCar</code> 객체에 다음과 같이 접근할 수도 있습니다: -</p> -<pre>myCar["make"] = "Ford"; -myCar["model"] = "Mustang"; -myCar["year"] = 1967; -</pre> -<p>이러한 배열의 종류는 <i>연관 배열</i>이라고 부릅니다. 왜냐하면 각각의 인덱스 요소가 문자열 값과 연관되어 있기 때문입니다. 이러한 방식에 대한 설명은 다음의 함수에 객체와 객체의 이름을 입력했을 때 객체의 속성을 표시해주는 다음과 같은 함수에서 알아볼 수 있습니다: -</p> -<pre>function show_props(obj, obj_name) { - var result = ""; - for (var i in obj) - result += obj_name + "." + i + " = " + obj[i] + "\n"; - return result; -} -</pre> -<p>결과적으로 <code>call show_props(myCar, "myCar")</code>라는 함수 호출은 다음과 같은 값을 반환합니다: -</p> -<pre>myCar.make = Ford -myCar.model = Mustang -myCar.year = 1967 -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Functions:escape_and_unescape_Functions", "Core_JavaScript_1.5_Guide:Creating_New_Objects") }} -</p>{{ languages( { "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_i_w\u0142a\u015bciwo\u015bci" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html deleted file mode 100644 index f8793b4cbc..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Arithmetic Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Arithmetic_Operators ---- -<h3 id=".EC.82.B0.EC.88.A0_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.82.B0.EC.88.A0_.EC.97.B0.EC.82.B0.EC.9E.90"> 산술 연산자 </h3> -<p>산술 연산자는 수(상수값이든지 변수든지)를 받아서 하나의 수를 반환합니다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어에서 처럼 동작합니다. 예외적으로 / 연산자는 JavaScript에서 소수를 반환합니다. C나 Java 같은 다른 언어에서는 / 연산자가 소수 부분은 잘라버립니다. 예를 들면 이렇습니다. -</p> -<pre>1/2 //returns 0.5 in JavaScript -1/2 //returns 0 in Java -</pre> -<p>JavaScript는 다음 표에 나오는 산술 연산자를 제공합니다. -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>연산자</th> -<th>설명</th> -<th>예제</th> -</tr> -<tr> -<td>%<br>(나머지)</td> -<td>2항(binary) 연산자. 두 피연산자의 나눗셈에서 나온 나머지를 반환합니다.</td> -<td>12 % 5 returns 2.</td> -</tr> -<tr> -<td>++<br>(증가)</td> -<td>단항(unary) 연산자. 피연산자에 1을 더함. 전위 연산자(++x)를 사용하면 피연산자에 1을 더한 후 그 값을 반환합니다. 후위 연산자(x++)를 사용하면 피연산자에 1을 더하기 전에 피연산자의 값을 반환합니다.</td> -<td><code>x</code>가 3일 때, <code>++x</code>는 <code>x</code>를 4로 만들고 4를 반환합니다. 반면 <code>x++</code>는 <code>x</code>를 4로 만들고 3을 반환합니다.</td> -</tr> -<tr> -<td>--<br>(감소)</td> -<td>단항 연산자. 피연산자에서 1을 뺌. 반환값은 증가 연산자와 동일한 방식으로 결정됩니다.</td> -<td><code>x</code>가 3일 때, <code>--x</code>는 <code>x</code>를 2로 만들고 2를 반환합니다. 반면 <code>x--</code>는 <code>x</code>를 2로 만들고 3을 반환합니다.</td> -</tr> -<tr> -<td>-<br>(단항 부정)</td> -<td>단항 연산자. 피연산자의 부호를 바꾼 값을 반환합니다.</td> -<td><code>x</code>가 3이면 <code>-x</code>는 -3을 반환합니다.</td> -</tr> -</tbody></table> -<p><small><b>표 3.4: 산술 연산자</b></small> -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Comparison_Operators", "Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_arithm\u00e9tiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html deleted file mode 100644 index dbc284f12f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Assignment Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators ---- -<h3 id=".ED.95.A0.EB.8B.B9_.EC.97.B0.EC.82.B0.EC.9E.90" name=".ED.95.A0.EB.8B.B9_.EC.97.B0.EC.82.B0.EC.9E.90">할당 연산자</h3> -<p>할당 연산자는 왼쪽 피연산자에 오른쪽 피연산자의 값을 할당합니다. 가장 기본적인 할당 연산자에는 등호(=)가 있는데, 왼쪽 피연산자의 값을 오른쪽 연산자에 할당합니다. 즉, x = y 라고 하면 y의 값이 x에 할당되는 것입니다.</p> -<p>다른 할당 연산자는 다음 표에서 보듯이 표준연산을 약식으로 쓰는 것입니다.</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>약식 연산자</th> - <th>의미</th> - </tr> - <tr> - <td>x += y</td> - <td>x = x + y</td> - </tr> - <tr> - <td>x -= y</td> - <td>x = x - y</td> - </tr> - <tr> - <td>x *= y</td> - <td>x = x * y</td> - </tr> - <tr> - <td>x /= y</td> - <td>x = x / y</td> - </tr> - <tr> - <td>x %= y</td> - <td>x = x % y</td> - </tr> - <tr> - <td>x <<= y</td> - <td>x = x << y</td> - </tr> - <tr> - <td>x >>= y</td> - <td>x = x >> y</td> - </tr> - <tr> - <td>x >>>= y</td> - <td>x = x >>> y</td> - </tr> - <tr> - <td>x &= y</td> - <td>x = x & y</td> - </tr> - <tr> - <td>x ^= y</td> - <td>x = x ^ y</td> - </tr> - <tr> - <td>x |= y</td> - <td>x = x | y</td> - </tr> - </tbody> -</table> -<p><small><b>표: 할당 연산자</b></small></p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators", "Core_JavaScript_1.5_Guide:Operators:Comparison_Operators") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html deleted file mode 100644 index 3aed13da65..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Bitwise Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Bitwise_Operators ---- -<p><br> -</p> -<h3 id=".EB.B9.84.ED.8A.B8_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.B9.84.ED.8A.B8_.EC.97.B0.EC.82.B0.EC.9E.90"> 비트 연산자 </h3> -<p>비트 연산자는 피연산자를 10진수나 16진수, 8진수로 다루지 않고 32개의 비트 집합으로 다룹니다. 예를 들어, 10진수 9는 2진수로 1001입니다. 비트 연산자는 2진수 표현으로 연산을 하지만 반환값은 JavaScript 표준 수 값으로 반환합니다. -</p><p>JavaScript의 비트 연산자를 다음 표에 요약했습니다. -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>연산자</th> -<th>사용법</th> -<th>설명</th> -</tr> -<tr> -<td>비트 AND</td> -<td><code>a & b</code></td> -<td>두 피연산자의 대응되는 비트가 모두 1이면 1을 반환.</td> -</tr> -<tr> -<td>비트 OR</td> -<td><code>a | b</code></td> -<td>두 피연산자의 대응되는 비트에서 둘 중 하나가 1이거나 모두 1인 경우 1을 반환.</td> -</tr> -<tr> -<td>비트 XOR</td> -<td><code>a ^ b</code></td> -<td>두 피연산자의 대응되는 비트에서 둘 중 하나가 1이고, 둘 다 1이 아닐 경우 1을 반환.</td> -</tr> -<tr> -<td>비트 NOT</td> -<td><code>~ a</code></td> -<td>피연산자의 비트를 뒤집음.</td> -</tr> -<tr> -<td>왼쪽으로 이동</td> -<td><code>a << b</code></td> -<td>a의 2진수 표현을 b 비트만큼 왼쪽으로 이동함. 오른쪽은 0으로 채움.</td> -</tr> -<tr> -<td>부호 비트로 채우는 오른쪽 이동</td> -<td><code>a >> b</code></td> -<td>a의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버림.</td> -</tr> -<tr> -<td>0으로 채우는 오른쪽 이동</td> -<td><code>a >>> b</code></td> -<td>a의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버리고, 왼쪽은 0으로 채움.</td> -</tr> -</tbody></table> -<p><small><b>표 3.5: 비트 연산자</b></small> -</p> -<h4 id=".EB.B9.84.ED.8A.B8_.EB.85.BC.EB.A6.AC_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.B9.84.ED.8A.B8_.EB.85.BC.EB.A6.AC_.EC.97.B0.EC.82.B0.EC.9E.90"> 비트 논리 연산자 </h4> -<p>개념적으로 비트 논리 연산자는 다음과 같이 동작합니다. -</p> -<ul><li> 피연산자는 32비트 정수로 변환되어 비트의 나열로 표현됩니다. -</li><li> 두 피연산자의 비트를 같은 위치에 있는 것 끼리 짝을 짓습니다. -</li><li> 짝 지어진 각각의 쌍에 대해서 연산자를 적용하여 결과를 만들어냅니다. -</li></ul> -<p>예를 들어, 9를 2진수로 쓰면 1001이고 15를 2진수로 표현하면 1111입니다. 두 값에 비트 연산을 적용하면 결과는 다음과 같습니다. -</p> -<ul><li> 15 & 9 yields 9 (1111 & 1001 = 1001) -</li><li> 15 | 9 yields 15 (1111 | 1001 = 1111) -</li><li> 15 ^ 9 yields 6 (1111 ^ 1001 = 0110) -</li></ul> -<h4 id=".EB.B9.84.ED.8A.B8_.EC.9D.B4.EB.8F.99_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.B9.84.ED.8A.B8_.EC.9D.B4.EB.8F.99_.EC.97.B0.EC.82.B0.EC.9E.90"> 비트 이동 연산자 </h4> -<p>비트 이동 연산자는 피연산자 두 개를 받습니다. 첫 번째는 이동하려는 수이고, 두 번째는 첫 번째 피연산자를 몇 비트나 이동시킬지 나타내는 비트 수입니다. 이동 방향은 사용된 연산자에 따라 다릅니다. -</p><p>이동 연산자는 피연산자를 32비트 정수로 변환하여 연산하고, 왼쪽 연산자와 같은 자료형으로 반환합니다. -</p><p>이동 연산자는 다음 표에 있습니다. -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>연산자</th> -<th>설명</th> -<th>예제</th> -</tr> -<tr> -<td><<<br> -(왼쪽 이동)</td> -<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수만큼 왼쪽으로 옮깁니다. 왼쪽으로 넘친 비트는 버립니다. 오른쪽 빈 자리는 0으로 채웁니다.</td> <td>9<<2는 36을 반환합니다. 1001을 왼쪽으로 2비트 이동하면 100100이 되고 이것은 36이기 때문입니다.</td> -</tr> -<tr> -<td>>><br> -(부호 비트로 채우는 오른쪽 이동)</td> -<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 원래 가장 왼쪽에 있던 비트 값으로 채웁니다.</td> -<td>9>>2는 2를 반환합니다. 1001을 2비트 오른쪽으로 이동하면 10이 되는데 이것은 2이기 때문입니다. 비슷하게 -9>>2는 -3을 반환하는데, 부호가 유지되기 때문입니다.</td> -</tr> -<tr> -<td>>>><br> -(0으로 채우는 오른쪽 이동)</td> -<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 0으로 채웁니다.</td> -<td>19>>>2는 4를 반환합니다. 10011을 2비트 오른쪽으로 이동하면 100이 되기 때문입니다. 음수가 아닌 수에 대해서는 0을 채우는 오른쪽 이동이나 부호 비트로 채우는 오른쪽 이동이 똑같은 결과를 반환합니다.</td> -</tr> -</tbody></table> -<p><small><b>표 3.6: 비트 이동 연산자</b></small> -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators", "Core_JavaScript_1.5_Guide:Operators:Logical_Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_bit-\u00e0-bit", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_bitowe" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html deleted file mode 100644 index 53b8e67492..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Operators -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators ---- -<h3 id=".EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.97.B0.EC.82.B0.EC.9E.90"> 연산자 </h3> -<p>JavaScript에는 다음과 같은 연산자 타입이 있습니다. 이 섹션은 연산자에 대해 기술하고 연산자 우선순위에 대한 정보를 제공합니다. -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators">할당 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators">비교 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">산술 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">비트 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">논리 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/String_Operators">문자열 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators">특수 연산자</a> -</li></ul> -<p>JavaScript는 이항연산자와 단항연산자를 모두 사용할 수 있습니다. 이항연산자는 두개의 피연산자(operand)를 가지며, 하나의 피연산자는 연산자 앞에 나머지 하나는 뒤에 위치합니다: -</p> -<pre>operand1 operator operand2 -</pre> -<p>예를 들자면, <code>3+4</code> 혹은 <code>x*y</code>와 같은 것입니다. -</p><p>단항연산자는 연산자 앞 혹은 뒤쪽에 하나의 피연산자만 있으면 됩니다: -</p> -<pre>operator operand -</pre> -<p>혹은 -</p> -<pre>operand operator -</pre> -<p>예를 들자면, <code>x++</code> 혹은 <code>++x</code>와 같은 것입니다. -</p><p>덧붙여, JavaScript는 한개의 삼항연산자, 조건 연산자를 가지고 있습니다. 삼항 연산자는 세개의 피연산자가 필요합니다. -</p> -<h4 id=".EC.97.B0.EC.82.B0.EC.9E.90_.EC.9A.B0.EC.84.A0.EC.88.9C.EC.9C.84" name=".EC.97.B0.EC.82.B0.EC.9E.90_.EC.9A.B0.EC.84.A0.EC.88.9C.EC.9C.84"> 연산자 우선순위 </h4> -<p><small><i><a>관련된 논의</a>에 따라서, 아래의 표는 우선순위 순으로 <b>내림차순</b> 정렬되었습니다.</i></small> -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>연산자 타입</th> -<th>사용하는 연산자</th> -</tr> -<tr> -<td>멤버 </td> -<td>. []</td> -</tr> -<tr> -<td>호출 / 인스턴스 생성 </td> -<td>() new</td> -</tr> -<tr> -<td>부정/증감 </td> -<td>! ~ - + ++ -- typeof void delete</td> -</tr> -<tr> -<td>곱하기/나누기 </td> -<td>* / %</td> -</tr> -<tr> -<td>더하기/빼기 </td> -<td>+ -</td> -</tr> -<tr> -<td>비트 이동 </td> -<td><< >> >>></td> -</tr> -<tr> -<td>관계 </td> -<td>< <= > >= in instanceof</td> -</tr> -<tr> -<td>같음 </td> -<td>== != === !==</td> -</tr> -<tr> -<td>비트연산-and </td> -<td>&</td> -</tr> -<tr> -<td>비트연산-xor </td> -<td>^</td> -</tr> -<tr> -<td>비트연산-or </td> -<td>|</td> -</tr> -<tr> -<td>논리연산-and </td> -<td>&&</td> -</tr> -<tr> -<td>논리연산-or </td> -<td>||</td> -</tr> -<tr> -<td>조건 </td> -<td>?:</td> -</tr> -<tr> -<td>할당 </td> -<td>= += -= *= /= %= <<= >>= >>>= &= ^= |=</td> -</tr> -<tr> -<td>컴마</td> -<td>,</td> -</tr> -</tbody></table> -<p><small><b>표: 연산자 우선순위</b></small> -</p><p>이 표의 보다 자세한 버전은 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Operator_Precedence#Table">레퍼런스 섹션</a>에 있는 각 연산자별 상세한 추가 설명 링크를 참고하세요. -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Expressions", "Core_JavaScript_1.5_Guide:Operators:Assignment_Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html deleted file mode 100644 index edf5f640a5..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Logical Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Logical_Operators ---- -<h3 id=".EB.85.BC.EB.A6.AC_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.85.BC.EB.A6.AC_.EC.97.B0.EC.82.B0.EC.9E.90"> 논리 연산자 </h3> -<p>논리 연산자는 주로 불리언(논리적) 값과 함께 사용됩니다. 그때 논리 연산자는 불리언 값을 반환합니다. 그러나 &&와 || 연산자는 실제로는 피연산자 중에 하나의 값을 반환하기 때문에, 이 연산자가 불리언 값이 아닌 값과 함께 사용되면 불리언 값이 아닌 값을 반환할 것입니다. 다음 표에 논리 연산자에 대해서 설명했습니다. -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>연산자</th> -<th>사용법</th> -<th>설명</th> -</tr> -<tr> -<td>&&</td> -<td>expr1 && expr2</td> -<td>(논리적 AND) expr1이 false로 변환될 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 피연산자 둘 모두가 true일 때 &&는 true를 반환하고 그렇지 않을 때는 false를 반환합니다.</td> -</tr> -<tr> -<td>||</td> -<td>expr1 || expr2</td> -<td>(논리적 OR) expr1이 true로 변환될 수 있으면 expr1을 반환하고 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 ||는 피연산자 중에서 하나만 true이면 true를 반환합니다. 둘 다 false이면 false를 반환합니다.</td> -</tr> -<tr> -<td>!</td> -<td>!expr</td> -<td>(논리적 NOT) 피연산자가 true로 변환될 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.</td> -</tr> -</tbody></table> -<p><small><b>표 3.7: 논리 연산자</b></small> -</p><p>false로 변환될 수 있는 표현식은 null, 0, 빈 문자열(""), undefined로 평가될 수 있는 표현식들입니다. -</p><p>다음 코드는 && 연산자를 사용하는 예를 보여줍니다. -</p> -<pre>a1=true && true // t && t returns true -a2=true && false // t && f returns false -a3=false && true // f && t returns false -a4=false && (3 == 4) // f && f returns false -a5="Cat" && "Dog" // t && t returns Dog -a6=false && "Cat" // f && t returns false -a7="Cat" && false // t && f returns false -</pre> -<p>다음 코드는 || 연산자를 사용하는 예를 보여줍니다. -</p> -<pre>o1=true || true // t || t returns true -o2=false || true // f || t returns true -o3=true || false // t || f returns true -o4=false || (3 == 4) // f || f returns false -o5="Cat" || "Dog" // t || t returns Cat -o6=false || "Cat" // f || t returns Cat -o7="Cat" || false // t || f returns Cat -</pre> -<p>다음 코드는 ! 연산자를 사용하는 예를 보여줍니다. -</p> -<pre>n1=!true // !t returns false -n2=!false // !f returns true -n3=!"Cat" // !t returns false -</pre> -<h4 id=".EB.8B.A8.EC.B6.95_.ED.8F.89.EA.B0.80" name=".EB.8B.A8.EC.B6.95_.ED.8F.89.EA.B0.80"> 단축 평가 </h4> -<p>논리 표현식이 왼쪽부터 오른쪽으로 평가되기 때문에 다음 규칙을 이용해서 "단축(short-circuit)" 평가를 할 수 있습니다. -</p> -<ul><li> <code>false</code> && <i>아무 표현식</i>은 false로 단축 평가 됩니다. -</li><li> <code>true</code> || <i>아무 표현식</i>은 true로 단축 평가 됩니다. -</li></ul> -<p>이 규칙을 따라 평가를 수행한다고 해서 피연산자를 모두 평가할 때와 결과가 달라지지 않습니다. <i>아무 표현식</i> 부분은 평가되지 않기 때문에 아무런 부수 효과(side effect)도 일어나지 않는다는 것에 주의하십시오. -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators", "Core_JavaScript_1.5_Guide:Operators:String_Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_logiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_logiczne" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html deleted file mode 100644 index f238901cab..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Special Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Special_Operators ---- -<h3 id=".ED.8A.B9.EC.88.98_.EC.97.B0.EC.82.B0.EC.9E.90" name=".ED.8A.B9.EC.88.98_.EC.97.B0.EC.82.B0.EC.9E.90"> 특수 연산자 </h3> -<p>JavaScript 다음과 같은 특별한 연산자를 제공합니다. -</p> -<ul><li> {{ Anch("조건 연산자") }} -</li><li> {{ Anch("쉼표 연산자") }} -</li><li> {{ Anch("delete") }} -</li><li> {{ Anch("in") }} -</li><li> {{ Anch("instanceof") }} -</li><li> {{ Anch("new") }} -</li><li> {{ Anch("this") }} -</li><li> {{ Anch("typeof") }} -</li><li> {{ Anch("void") }} -</li></ul> -<h4 id=".EC.A1.B0.EA.B1.B4_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.A1.B0.EA.B1.B4_.EC.97.B0.EC.82.B0.EC.9E.90"> 조건 연산자 </h4> -<p>조건 연산자는 JavaScript에서 유일하게 세 개의 피연산자를 사용하는 연산자입니다. 연산자는 조건에 따라 둘 중에 하나의 값을 가질 수 있습니다. 문법은 이렇습니다. -</p> -<pre>condition ? val1 : val2 -</pre> -<p><code>condition</code>이 true이면 연산자는 <code>val1</code>의 값을 갖습니다. 그렇지 않으면 <code>val2</code>의 값을 갖습니다. 다른 표준 연산자를 사용할 수 있는 곳이면 어디든지 조건 연산자를 사용할 수 있습니다. -</p> -<pre>status = (age >= 18) ? "adult" : "minor" -</pre> -<p>이 문장은 <code>age</code>가 18이거나 더 큰 경우에 <code>status</code> 변수에 "adult"라는 값을 할당합니다. 그렇지 않으면 "minor"라는 값을 할당합니다. -</p> -<h4 id=".EC.89.BC.ED.91.9C_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.89.BC.ED.91.9C_.EC.97.B0.EC.82.B0.EC.9E.90"> 쉼표 연산자 </h4> -<p>쉼표 연산자(,)는 단순히 피연산자 둘을 모두 평가하고 두 번째 피연산자의 값을 반환하는 연산자입니다. 이 연산자는 주로 <code>for</code> 반복문에서 변수 여러 개가 매번 업데이트 되게 하는데 쓰입니다. -</p><p>예를 들어 <code>a</code>가 각각 10줄의 원소를 가지는 2차원 배열일 때, 다음 코드에서는 변수 두 개를 한 번에 바꾸기 위해서 쉼표 연산자를 사용하고 있습니다. 이 코드는 배열의 대각선 원소를 출력합니다. -</p> -<pre>for (var i=0, j=9; i <= 9; i++, j--) - document.writeln("a["+i+"]["+j+"]= " + a[i][j]) -</pre> -<h4 id="delete" name="delete"> delete </h4> -<p>delete는 개체(object), 개체의 속성(property), 배열의 특정 인덱스에 있는 원소(element)를 지우는 연산자입니다. 문법은 이렇습니다. -</p> -<pre>delete objectName -delete objectName.property -delete objectName[index] -delete property // with 문장 안에서만 유효합니다 -</pre> -<p><code>objectName</code>은 개체 이름이고, <code>property</code>는 개체에 존재하는 속성이고, <code>index</code>는 배열의 원소 위치를 나타내는 정수입니다. -</p><p>네 번째 형식은 개체의 속성을 지우는 코드인데, <code>with</code> 문장 안에서만 사용할 수 있습니다. -</p><p>암시적으로 선언된 변수를 지울 때는 <code>delete</code> 연산자를 사용할 수 있지만 <code>var</code> 문장을 이용해서 선언된 변수는 지울 수 없습니다. -</p><p><code>delete</code> 연산자 실행이 성공하면, 속성이나 원소가 <code>undefined</code>로 설정됩니다. <code>delete</code> 연산자는 실행이 가능하면 true를 반환하고, 불가능하면 false를 반환합니다. -</p> -<pre>x=42 -var y= 43 -myobj=new Number() -myobj.h=4 // h라는 속성을 만듭니다 -delete x // returns true (암시적으로 선언된 변수는 지울 수 있습니다) -delete y // returns false (var로 선언한 변수는 지울 수 없습니다) -delete Math.PI // returns false (미리 정의된 속성은 지울 수 없습니다) -delete myobj.h // returns true (사용자 정의 속성은 지울 수 있습니다) -delete myobj // returns true (암시적으로 선언되었으므로 지울 수 있습니다) -</pre> -<p><b>배열의 원소를 지우기</b><br> -배열의 원소를 지울 때, 배열의 길이에는 변화가 없습니다. 예를 들어, a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }}를 지우더라도 a{{ mediawiki.external(4) }}와 a{{ mediawiki.external(3) }}은 여전히 정의되지 않습니다. -</p><p><code>delete</code> 연산자가 배열 원소를 제거할 때 원소는 더이상 배열에 존재하지 않습니다. 아래 예제에서 trees{{ mediawiki.external(3) }}은 <code>delete</code>로 제거되었습니다. -</p> -<pre>trees=new Array("redwood","bay","cedar","oak","maple") -delete trees[3] -if (3 in trees) { - // 이 블록은 실행되지 않습니다. -} -</pre> -<p>배열 원소가 존재하긴 하지만 정의되지 않은 값을 가지도록 하고 싶다면 <code>delete</code> 연산자 대신 <code>undefined</code> 키워드를 사용하십시오. 다음 예제에서 <code>trees{{ mediawiki.external(3) }}</code>에 <code>undefined</code> 값을 할당했지만 배열 요소는 여전히 존재합니다. -</p> -<pre>trees=new Array("redwood","bay","cedar","oak","maple") -trees[3]=undefined -if (3 in trees) { - // 이 블록은 실행됩니다. -} -</pre> -<h4 id="in" name="in"> in </h4> -<p><code>in</code> 연산자는 지정된 속성이 지정된 개체에 있으면 true를 반환합니다. 문법은 이렇습니다. -</p> -<pre>propNameOrNumber in objectName -</pre> -<p><code>propNameOrNumber</code>은 속성 이름을 나타내는 문자열이나 배열 인덱스를 나타내는 수이고, <code>objectName</code>은 개체 이름입니다. -</p><p>다음 예제는 <code>in</code> 연산자의 몇 가지 사용법을 보여줍니다. -</p> -<pre>// 배열 -trees=new Array("redwood","bay","cedar","oak","maple") -0 in trees // returns true -3 in trees // returns true -6 in trees // returns false -"bay" in trees // returns false (원하는 인덱스를 지정해야 하는데, - // 그 인덱스에 있는 값을 지정하면 안됩니다.) -"length" in trees // returns true (length는 배열의 속성입니다.) - -// 미리 정의된 개체 -"PI" in Math // returns true -myString=new String("coral") -"length" in myString // returns true - -// 사용자 개체 -mycar = {make:"Honda",model:"Accord",year:1998} -"make" in mycar // returns true -"model" in mycar // returns true -</pre> -<h4 id="instanceof" name="instanceof"> instanceof </h4> -<p><code>instanceof</code>는 지정된 개체가 지정된 개체 형식이면 true를 반환합니다. 문법은 이렇습니다. -</p> -<pre>objectName instanceof objectType -</pre> -<p><code>objectName</code>은 <code>objectType</code>과 비교할 개체의 이름이고, <code>objectType</code>은 개체 형식으로 <code>Date</code>나 <code>Array</code> 같은 것입니다. -</p><p>실행중에 개체의 형식을 알고 싶으면 <code>instanceof</code>를 사용하면 됩니다. 예를 들어 예외를 처리할 때, 발생한 예외의 형식에 따라 서로 다른 예외 처리 코드를 실행할 수 있습니다. -</p><p>다음 코드에서 <code>theDay</code>가 <code>Date</code> 개체인지 결정하기 위해서 <code>instanceof</code>를 사용합니다. <code>theDay</code>는 <code>Date</code> 개체이기 때문에 <code>if</code>문 안에 있는 문장이 실행됩니다. -</p> -<pre>theDay=new Date(1995, 12, 17) -if (theDay instanceof Date) { - // 실행할 문장 -} -</pre> -<h4 id="new" name="new"> new </h4> -<p>사용자 정의 개체 형식이나 <code>Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, String</code> 같이 미리 정의된 개체 형식의 인스턴스를 만들 때 <code>new</code> 연산자를 사용합니다. 서버에서는 <code>DbPool, Lock, File, SendMail</code> 등을 만들 때 사용할 수 있습니다. <code>new</code>는 다음과 같이 사용합니다. -</p> -<pre>objectName = new objectType ( param1 [,param2] ...[,paramN] ) -</pre> -<p><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자 사용하기</a>에 설명한 것처럼 개체 초기화 지정자를 이용해서 개체를 만들 수도 있습니다. -</p><p>더 많은 정보를 얻으려면 JavaScript 레퍼런스의 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new 연산자</a> 페이지를 보시기 바랍니다. -</p> -<h4 id="this" name="this"> this </h4> -<p>현재 개체를 참조할 때 <code>this</code> 키워드를 사용합니다. 일반적으로 <code>this</code>는 메소드를 호출하는 개체를 참조합니다. 다음과 같이 사용하면 됩니다. -</p> -<pre>this[.propertyName] -</pre> -<p><b>예제 1.</b><br> -개체의 <code>value</code> 속성이 높거나 낮은 값을 가지는지 검증하는 <code>validate</code>라는 함수가 있다고 가정합시다. -</p> -<pre>function validate(obj, lowval, hival) { - if ((obj.value < lowval) || (obj.value > hival)) - alert("Invalid Value!") -} -</pre> -<p>이제 우리는 폼의 각 요소의 <code>onChange</code> 이벤트 핸들러에서 <code>validate</code> 함수를 호출하면서, <code>this</code>를 이용하여 스스로를 함수에 전달할 수 있습니다. -</p> -<pre><B>Enter a number between 18 and 99:</B> -<INPUT TYPE = "text" NAME = "age" SIZE = 3 - onChange="validate(this, 18, 99)"> -</pre> -<p><b>예제 2.</b><br> -<code>form</code> 속성과 결합되면, <code>this</code>는 현재 개체가 포함된 폼을 참조할 수 있습니다. 다음 예제에서 <code>myForm</code> 폼은 <code>Text</code> 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 <code>Text</code> 개체의 값이 폼 이름으로 설정됩니다. 버튼의 <code>onClick</code> 이벤트 핸들러는 부모 폼인 <code>myForm</code>을 참조하기 위해서 <code>this.form</code>을 사용하고 있습니다. -</p> -<pre><FORM NAME="myForm"> -Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> -<P> -<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" - onClick="this.form.text1.value=this.form.name"> -</FORM> -</pre> -<h4 id="typeof" name="typeof"> typeof </h4> -<p><code>typeof</code> 연산자는 둘 중 한 가지 방법으로 사용할 수 있습니다. -</p> -<pre>1. typeof operand -2. typeof (operand) -</pre> -<p><code>typeof</code> 연산자는 피연산자의 평가되지 않은 형식을 나타내는 문자열을 반환합니다. <code>피연산자</code>는 string, variable, keyword, object 등의 타입을 반환하게 됩니다. 괄호는 선택적입니다. -</p><p>우리가 이런 변수를 정의했다고 해봅시다. -</p> -<pre>var myFun = new Function("5+2") -var shape="round" -var size=1 -var today=new Date() -</pre> -<p><code>typeof</code>는 이 변수들에 대해서 다음과 같은 결과를 반환할 것입니다. -</p> -<pre>typeof myFun is function -typeof shape is string -typeof size is number -typeof today is object -typeof dontExist is undefined -</pre> -<p><code>true</code>와 <code>null</code> 키워드에 대해서 <code>typeof</code> 연산자는 다음과 같은 결과를 반환합니다. -</p> -<pre>typeof true is boolean -typeof null is object -</pre> -<p>수와 문자열에 대해서 <code>typeof</code> 연산자는 다음과 같은 결과를 반환합니다. -</p> -<pre>typeof 62 is number -typeof 'Hello world' is string -</pre> -<p>속성 값에 대해서 <code>typeof</code> 연산자는 속성이 포함하고 있는 값의 형식을 반환합니다. -</p> -<pre>typeof document.lastModified is string -typeof window.length is number -typeof Math.LN2 is number -</pre> -<p>메소드와 함수에 사용하면 <code>typeof</code> 연산자는 다음과 같은 결과를 반환합니다. -</p> -<pre>typeof blur is function -typeof eval is function -typeof parseInt is function -typeof shape.split is function -</pre> -<p>미리 정의된 개체들에 대해서 <code>typeof</code> 연산자는 다음과 같은 결과를 반환합니다. -</p> -<pre>typeof Date is function -typeof Function is function -typeof Math is function -typeof Option is function -typeof String is function -</pre> -<h4 id="void" name="void"> void </h4> -<p><code>void</code> 연산자는 다음과 같이 사용할 수 있습니다. -</p> -<pre>1. void (expression) -2. void expression -</pre> -<p><code>void</code> 연산자는 표현식이 값을 반환하지 않으면서 평가되어야 한다고 지정하는데 사용됩니다. <code>expression</code>은 평가하려는 JavaScript 표현식입니다. 표현식을 감싸는 괄호는 선택적이지만 사용하는 쪽이 더 좋은 스타일입니다. -</p><p>표현식을 하이퍼텍스트 링크로 지정하기 위해서 <code>void</code> 연산자를 사용할 수 있습니다. 표현식이 평가되기는 하지만 현재 문서 대신 로드되지는 않습니다. -</p><p>아래 코드는 사용자가 클릭할 때 아무 동작도 하지 않는 하이퍼텍스트 링크를 만듭니다. 사용자가 링크를 클릭하면 <code>void(0)</code>는 정의되지 않은 것(undefined)으로 평가되고 JavaScript에서 아무런 효과가 없습니다. -</p> -<pre><A HREF="javascript:void(0)">Click here to do nothing</A> -</pre> -<p>다음 코드는 클릭하면 폼을 제출하는 하이퍼텍스트 링크를 만듭니다. -</p> -<pre><A HREF="javascript:void(document.form.submit())"> -Click here to submit</A> -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:String_Operators", "Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_specjalne" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html deleted file mode 100644 index fc39b5a34f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: String Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/String_Operators ---- -<h4 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.97.B0.EC.82.B0.EC.9E.90"> 문자열 연산자 </h4> -<p>문자열 값에 사용할 수 있는 비교 연산자 외에도 연결 연산자(+)가 있는데, 이 연산자는 두 문자열 값을 연결한 새로운 문자열 값을 반환합니다. 예를 들어, <code>"my " + "string"</code>는 <code>"my string"</code>라는 문자열을 반환합니다. -</p><p>축약된 할당 연산자인 += 또한 문자열 연결에 사용할 수 있습니다. 예를 들어 <code>mystring</code> 변수가 "alpha"라는 값을 가지고 있을 때, <code>mystring += "bet"</code>은 "alphabet"으로 평가되고, 그 값이 <code>mystring</code>에 할당됩니다. -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Logical_Operators", "Core_JavaScript_1.5_Guide:Operators:Special_Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/String_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_li\u00e9s_aux_cha\u00eenes", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/String_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operacje_na_\u0142a\u0144cuchach" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html deleted file mode 100644 index 1f6ef48f3a..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Array Object -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object ---- -<h3 id="Array_.EA.B0.9C.EC.B2.B4" name="Array_.EA.B0.9C.EC.B2.B4">Array 개체</h3> -<p>JavaScript에는 명시적인 배열 자료형이 없습니다. 하지만 배열을 다루기 위해서 <code>Array</code> 개체와 그 개체의 메소드를 이용할 수 있습니다. <code>Array</code> 개체에는 다양한 방법으로 배열을 다루기 위한 메소드들이 있는데, 배열을 합치거나, 순서를 뒤집거나, 정렬하는 등의 작업을 할 수 있습니다. 배열 길이를 알 수 있는 속성과 정규 표현식에 사용할 수 있는 속성들이 있습니다. - <i> - 배열</i> - 은 이름이나 색인으로 참조할 수 있는 값들을 모아놓은, 값의 순서가 유지되는 집합입니다. 예를 들어, 우리는 고용 번호로 색인된 고용인의 이름을 담고 있는 <code>emp</code>라는 배열을 만들 수 있습니다. 이 때 <code>emp{{ mediawiki.external(1) }}</code>는 1번 고용인, <code>emp{{ mediawiki.external(2) }}</code> 2번 고용인이 되는 것입니다.</p> -<p> </p> -<h4 id=".EB.B0.B0.EC.97.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.B0.B0.EC.97.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">배열 만들기</h4> -<p><code>Array</code> 개체는 이렇게 만들 수 있습니다.</p> -<pre>1. arrayObjectName = new Array(element0, element1, ..., elementN) -2. arrayObjectName = new Array(arrayLength) -</pre> -<p><code>arrayObjectName</code>은 새 개체의 이름이거나 존재하는 다른 개체의 속성 이름입니다. <code>Array</code> 개체의 속성이나 메소드를 이용할 때는 arrayObjectName은 존재하는 <code>Array</code> 개체 이름이거나 존재하는 다른 개체의 속성입니다.</p> -<p><code>element0, element1, ..., elementN</code>는 배열의 원소(element)가 될 값들입니다. 이런 식으로 지정하면, 나열한 값들을 원소로 가지고, 길이는 값의 개수인 배열이 만들어집니다.</p> -<p><code>arrayLength</code>는 배열의 초기 길이입니다. 다음 코드는 원소 다섯 개를 가지는 배열을 만듭니다.</p> -<pre>billingMethod = new Array(5) -</pre> -<p>배열 상수값 또한 <code>Array</code> 개체입니다. 예를 들어, 다음과 같은 상수값은 <code>Array</code> 개체입니다. 배열 상수값에 대한 자세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Literals#.EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">배열 상수값</a>을 보시기 바랍니다.</p> -<pre>coffees = ["French Roast", "Columbian", "Kona"] -</pre> -<h4 id=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.9B.90.EC.86.8C_.EB.84.A3.EA.B8.B0" name=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.9B.90.EC.86.8C_.EB.84.A3.EA.B8.B0">배열에 원소 넣기</h4> -<p>원소에 값을 할당함으로써 배열에 값을 넣을 수 있습니다.</p> -<pre>emp[1] = "Casey Jones" -emp[2] = "Phil Lesh" -emp[3] = "August West" -</pre> -<p>배열을 만들 때 값을 넣을 수도 있습니다.</p> -<pre>myArray = new Array("Hello", myVar, 3.14159) -</pre> -<h4 id=".EB.B0.B0.EC.97.B4_.EC.9B.90.EC.86.8C_.EC.B0.B8.EC.A1.B0.ED.95.98.EA.B8.B0" name=".EB.B0.B0.EC.97.B4_.EC.9B.90.EC.86.8C_.EC.B0.B8.EC.A1.B0.ED.95.98.EA.B8.B0">배열 원소 참조하기</h4> -<p>배열 원소의 순서를 나타내는 숫자로 원소를 참조할 수 있습니다. 예를 들어 다음과 같은 배열을 만들었다고 해봅시다.</p> -<pre>myArray = new Array("Wind","Rain","Fire") -</pre> -<p>그러면 첫 번째 원소는 <code>myArray{{ mediawiki.external(0) }}</code>으로 참조할 수 있고, 두 번째 원소는 <code>myArray{{ mediawiki.external(1) }}</code>로 참조할 수 있습니다.</p> -<p>원소의 색인은 영(0)부터 시작하지만 배열 길이(예를 들면 <code>myArray.length</code>)는 배열의 원소 개수를 나타냅니다.</p> -<p> </p> -<h4 id="Array_.EA.B0.9C.EC.B2.B4.EC.9D.98_.EB.A9.94.EC.86.8C.EB.93.9C" name="Array_.EA.B0.9C.EC.B2.B4.EC.9D.98_.EB.A9.94.EC.86.8C.EB.93.9C">Array 개체의 메소드</h4> -<p><code>Array</code> 개체는 다음과 같은 메소드들을 가지고 있습니다.</p> -<ul> - <li><code>concat</code> 메소드는 두 배열을 합쳐서 새 배열 하나를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1","2","3") -myArray = myArray.concat("a", "b", "c"); // myArray는 ["1", "2", "3", "a", "b", "c"]이 되었습니다. -</pre> -<ul> - <li><code>join(deliminator = ",")</code> 메소드는 배열의 모든 원소를 문자열로 바꿔서 하나의 문자열을 만들어줍니다.</li> -</ul> -<pre>myArray = new Array("Wind","Rain","Fire") -list = myArray.join(" - "); // list는 "Wind - Rain - Fire"입니다. -</pre> -<ul> - <li><code>pop</code> 메소드는 배열의 마지막 원소를 배열에서 제거하고 그 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1", "2", "3"); -last=myArray.pop(); // MyArray는 ["1", "2"], last = "3"이 되었습니다. -</pre> -<ul> - <li><code>push</code> 메소드는 하나 또는 그 이상의 원소를 배열 끝에 추가하고, 추가된 마지막 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1", "2"); -myArray.push("3"); // MyArray는 ["1", "2", "3"]이 되었습니다. -</pre> -<ul> - <li><code>reverse</code> 메소드는 원소의 순서를 뒤집어서 첫 번째 원소가 마지막 원소가 되고, 마지막 원소가 첫 번째 원소가 되도록 합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3"); -myArray.reverse(); // myArray = [ "3", "2", "1" ]이 되었습니다. -</pre> -<ul> - <li><code>shift</code> 메소드는 첫 번째 요소를 배열에서 제거하고, 그 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3"); -first=myArray.shift(); // MyArray는 ["2", "3"], first는 "1"이 되었습니다. -</pre> -<ul> - <li><code>slice (start_index, upto_index)</code> 메소드는 배열의 일부분을 추출하여 새 배열을 반환합니다.</li> -</ul> -<pre>myArray = new Array ("a", "b", "c", "d", "e"); -myArray = myArray.slice(1,4); //색인 1부터 색인 4 바로 앞까지의 원소를 추출해서 [ "b", "c", "d" ]를 반환합니다. -</pre> -<ul> - <li><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code> 메소드는 배열에 원소를 추가하거나 배열에서 원소를 제거합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3", "4", "5"); -myArray.splice(1,3,"a","b","c", "d"); // MyArray는 ["1", "a", "b", "c", "d", "5"]가 되었습니다. -// 이 코드는 색인 1(즉 "2")부터 원소 세 개를 제거하고, 그 자리에 원소를 추가합니다. -</pre> -<ul> - <li><code>sort</code> 메소드는 원소를 정렬합니다.</li> -</ul> -<pre>myArray = new Array("Wind","Rain","Fire") -myArray.sort(); // 배열을 정렬했으므로 myArrray = [ "Fire", "Rain", "Wind" ]가 되었습니다. -</pre> -<p><code>sort</code> 메소드에 배열을 어떻게 정렬할지 결정하는 콜백 함수를 전해줄 수 있습니다. 그 함수는 두 값을 비교해서 다음 셋 중 하나를 반환해야 합니다.</p> -<ul> - <li>정렬할 때 a가 b보다 작다면 -1(또는 임의의 음수)를 반환</li> - <li>정렬할 때 a가 b보다 크다면 1(또는 임의의 양수)를 반환</li> - <li>a와 b가 같으면 0을 반환</li> -</ul> -<p>예를 들어 다음 코드는 원소의 마지막 글자를 기준으로 배열을 정렬합니다.</p> -<pre>var sortFn = function(a,b){ - if (a[a.length - 1] < b[b.length - 1]) return -1; - if (a[a.length - 1] > b[b.length - 1]) return 1; - if (a[a.length - 1] == b[b.length - 1]) return 0; - } -myArray.sort(sortFn); // 배열을 정렬했으므로 myArray = ["Wind","Fire","Rain"]가 되었습니다. -</pre> -<ul> - <li><code>unshift</code> 메소드는 하나 또는 그 이상의 원소를 배열 앞에 추가하고 배열의 새 길이를 반환합니다.</li> -</ul> -<h4 id="2.EC.B0.A8.EC.9B.90_.EB.B0.B0.EC.97.B4" name="2.EC.B0.A8.EC.9B.90_.EB.B0.B0.EC.97.B4">2차원 배열</h4> -<p>다음 코드는 2차원 배열을 만듭니다.</p> -<pre>a = new Array(4) -for (i=0; i < 4; i++) { - a[i] = new Array(4) - for (j=0; j < 4; j++) { - a[i][j] = "["+i+","+j+"]" - } -} -</pre> -<p>바로 위 코드는 이런 배열을 만들어냅니다.</p> -<pre>Row 0:[0,0][0,1][0,2][0,3] -Row 1:[1,0][1,1][1,2][1,3] -Row 2:[2,0][2,1][2,2][2,3] -Row 3:[3,0][3,1][3,2][3,3] -</pre> -<h4 id=".EB.B0.B0.EC.97.B4.EA.B3.BC_.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D" name=".EB.B0.B0.EC.97.B4.EA.B3.BC_.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D">배열과 정규 표현식</h4> -<p>배열이 정규 표현식과 문자열을 매치한 결과로 생성되었을 때, 그 배열은 매치에 대한 정보를 제공하는 속성과 원소를 포함하고 있습니다. <code>RegExp.exec</code>, <code>String.match</code>, <code>String.split</code>의 반환 값은 배열입니다. 정규 표현식과 관련된 배열 사용에 대한 정보를 얻으려면 4장 <a href="ko/Core_JavaScript_1.5_Guide#.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D">정규 표현식</a>을 보십시오.</p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Boolean_Object") }}</p> diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html deleted file mode 100644 index d8d0156dc2..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Predefined Core Objects -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects -translation_of: Web/JavaScript/Guide -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects ---- -<h3 id=".EB.AF.B8.EB.A6.AC_.EC.A0.95.EC.9D.98.EB.90.9C_.EA.B8.B0.EB.B3.B8_.EA.B0.9C.EC.B2.B4" name=".EB.AF.B8.EB.A6.AC_.EC.A0.95.EC.9D.98.EB.90.9C_.EA.B8.B0.EB.B3.B8_.EA.B0.9C.EC.B2.B4"> 미리 정의된 기본 개체 </h3> -<p>이 절에서는 기본 JavaScrip에 미리 정의된 개체에 대해서 설명하겠습니다. -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object">Array 개체</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Boolean_Object">Boolean 개체</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Date_Object">Date 개체</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Function_Object">Function 개체</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Math_Object">Math 개체</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Number_Object">Number 개체</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/RegExp_Object">RegExp 개체</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/String_Object">String 개체</a> -</li></ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "fr": "fr/Guide_JavaScript_1.5/Objets_pr\u00e9d\u00e9finis", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_predefiniowane" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html deleted file mode 100644 index 9c97d9cf82..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Unicode -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Unicode ---- -<h3 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C"> 유니코드 </h3> -<p>유니코드는 세계의 주요한 문자 언어를 교환하고 표현하기 위한 문자-코딩 표준입니다. 유니코드는 아메리카, 유럽, 중동, 아프리카, 인도, 아시아, 태평양 지역(Pacifica)의 언어를 포함하며 고문자와 기술 분야 기호들도 포함합니다. 유니코드는 공통적인 기술 분야, 수학 분야 기호 뿐만 아니라 여러 언어를 포함한 텍스트의 교환, 처리, 표현을 지원합니다. 유니코드는 나라마다 서로 다른 문자 표준으로 인해서 여러 언어를 포함했을 때 발생하는 국제화 문제를 해결할 수 있기를 희망합니다. 하지만 아직은 모든 현대 문자, 고대 문자를 지원하지는 못합니다. -</p><p>유니코드 문자 집합은 알려진 모든 인코딩을 위해 사용될 수 있습니다. 유니코드는 ASCII (American Standard Code for Information Interchange, 정보 교환을 위한 미국 표준 코드) 문자 집합을 본떠 만들어졌습니다. 각각의 문자에 숫자와 이름을 부여한 것입니다. 문자 인코딩은 문자의 정체성(identity)과 숫자 값(코드 위치)와 함께 숫자 값의 비트 표현을 명시합니다. 16비트 숫자 값(코드 값)은 U+0041처럼 접두어 U뒤에 16진수를 붙여서 표시합니다. 이 값의 유일한 이름은 LATIN CAPITAL LETTER A입니다. -</p><p><b>JavaScript 1.3 이전 버전은 유니코드를 지원하지 않습니다.</b> -</p> -<h4 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EC.99.80_ASCII_.EB.B0.8F_ISO_.EC.82.AC.EC.9D.B4.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EC.99.80_ASCII_.EB.B0.8F_ISO_.EC.82.AC.EC.9D.B4.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1"> 유니코드와 ASCII 및 ISO 사이의 호환성 </h4> -<p>유니코드는 ISO 10646의 부분집합인 국제 표준 ISO/IEC 10646-1; 1993과 완벽하게 호환됩니다. -</p><p>몇몇 인코딩 표준(UTF-8, UTF-16, ISO UCS-2를 포함하는)들이 실제 비트 값으로 유니코드를 표현하기 위해 사용됩니다. -</p><p>UTF-8 인코딩은 ASCII 문자와 호환되며 많은 프로그램이 UTF-8을 지원합니다. 앞쪽 128개의 유니코드 문자는 ASCII 문자에 대응되며 같은 바이트 값을 가지고 있습니다. U+0020부터 U+007E 까지의 유니코드 문자는 ASCII 문자 0x20 부터 0x7E 까지와 동일합니다. 라틴 알파벳을 지원하고 7비트 문자 집합을 사용하는 ASCII와는 달리, UTF-8은 한 문자를 위해서 한 개부터 네 개 사이의 8진수(octet)를 사용합니다. ("8진수"는 바이트 또는 8비트를 의미합니다.) 이 방법으로 수백만개의 문자를 표현할 수 있습니다. 다른 인코딩 표준인 UTF-16은 유니코드 문자를 표현하기 위해 2바이트를 사용합니다. 이스케이프 시퀀스를 이용하여 UTF-16은 4바이트를 써서 모든 유니코드 범위를 표현합니다. ISO UCS-2 (Universal Character Set, 세계 문자 집합)은 2바이트를 사용합니다. -</p><p>JavaScript와 Navigator가 UTF-8/유니코드를 지원한다는 것은 우리가 비 라틴 문자와 국제화되고 지역화된 문자에다 특수한 기술 분야 기호까지 JavaScript 프로그램에 쓸 수 있다는 것을 의미합니다. 유니코드는 여러 언어를 포함한 텍스트를 인코딩할 수 있는 표준적인 방법을 제공합니다. UTF-8 인코딩이 ASCII와 호환되기 때문에, ASCII 문자를 프로그램에 사용할 수 있습니다. 우리는 JavaScript의 주석, 문자열 리터럴, 식별자(identifier), 정규 표현식에 비 ASCII 유니코드 문자를 쓸 수 있습니다. -</p> -<h4 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4"> 유니코드 이스케이프 시퀀스 </h4> -<p>우리는 문자열 리터럴, 정규 표현식, 식별자에 유니코드 이스케이프 시퀀스를 사용할 수 있습니다. 이스케이프 시퀀스는 ASCII 문자 여섯 개로 이루어지는데, \u 뒤에 16진수를 표현하는 숫자 네 개가 붙은 모양입니다. 예를 들어 \u00A9는 저작권 기호를 나타냅니다. JavaScript에서 모든 유니코드 이스케이프 시퀀스는 문자 한 개로 인식됩니다. -</p><p>다음의 코드는 저작권 문자와 "Netscape Communications"라는 문자열을 반환합니다. -</p> -<pre>x="\u00A9 Netscape Communications"</pre> -<p>다음의 표는 자주 사용되는 특수 문자의 유니코드 값을 모은 것입니다. -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>분류</th> -<th>유니코드 값</th> -<th>이름</th> -<th>형식화된 이름(Format name)</th> -</tr> -<tr> -<td>공백 문자</td> -<td>\u0009</td> -<td>Tab</td> -<td><TAB></td> -</tr> -<tr> -<td> </td> -<td>\u000B</td> -<td>Vertical Tab</td> -<td><VT></td> -</tr> -<tr> -<td> </td> -<td>\u000C</td> -<td>Form Feed</td> -<td><FF></td> -</tr> -<tr> -<td> </td> -<td>\u0020</td> -<td>Space</td> -<td><SP></td> -</tr> -<tr> -<td>줄 끝 문자</td> -<td>\u000A</td> -<td>Line Feed</td> -<td><LF></td> -</tr> -<tr> -<td> </td> -<td>\u000D</td> -<td>Carriage Return</td> -<td><CR></td> -</tr> -<tr> -<td>그 외 유니코드 이스케이프 시퀀스</td> -<td>\u0008</td> -<td>Backspace</td> -<td><BS></td> -</tr> -<tr> -<td> </td> -<td>\u0009</td> -<td>Horizontal Tab</td> -<td><HT></td> -</tr> -<tr> -<td> </td> -<td>\u0022</td> -<td>Double Quote</td> -<td>"</td> -</tr> -<tr> -<td> </td> -<td>\u0027</td> -<td>Single Quote</td> -<td>'</td> -</tr> -<tr> -<td> </td> -<td>\u005C</td> <td>Backslash</td> -<td>\</td> -</tr> -</tbody></table> -<p><small><b>표 2.2: 특수 문자의 유니코드 값</b></small> -</p><p>JavaScript에서 유니코드 이스케이프 시퀀스는 Java와 다릅니다. JavaScript에서, 이스케이프 시퀀스가 특수 문자로 먼저 해석되지 않습니다. 예를 들어, 줄 끝 이스케이프 시퀀스가 문자열에 포함되어 있어도 함수에 의해 해석되기 전까지는 문자열을 자르지 않습니다. 주석에 포함된 이스케이프 시퀀스는 모두 무시됩니다. Java에서는 한 줄 주석에 이스케이프 시퀀스가 있으면 유니코드 문자로 해석됩니다. 문자열 리터럴에서 Java 컴파일러는 이스케이프 시퀀스를 먼저 해석합니다. 예를 들어 줄 끝 이스케이프 문자(즉 \u000A)가 Java에서 사용되면 문자열 리터럴을 끝나게 합니다. Java에서는 줄 끝 문자가 문자열 리터럴에 포함될 수 없으므로, 에러가 발생합니다. 문자열 리터럴에 개행 문자를 넣으려면 반드시 \n을 사용해야 합니다. JavaScript에서 이스케이프 시퀀스는 \n과 같은 방식으로 동작합니다. -</p> -<div class="note">참고: 긴 문자열을 변환하는 웹 프로그램 <a class="external" href="http://www.hot-tips.co.uk/useful/unicode_converter.HTML">Hot-Tips' Unicode Converter</a>, by Bob Foley.</div> -<h4 id="JavaScript_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EB.AC.B8.EC.9E.90" name="JavaScript_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EB.AC.B8.EC.9E.90"> JavaScript 파일에서 유니코드 문자 </h4> -<p>초기 버전의 <a href="ko/Gecko">Gecko</a>는 XUL에서 로드되는 JavaScript 파일의 인코딩이 Latin-1일 것이라고 가정했습니다. Gecko 1.8부터는 XUL 파일의 인코딩으로 부터 JavaScript 파일의 인코딩을 유추하도록 변경되었습니다. 더 많은 정보는 <a href="ko/International_characters_in_XUL_JavaScript">International characters in XUL JavaScript</a> 페이지를 참고하시기 바랍니다. -</p> -<h4 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EB.A1.9C_.EB.AC.B8.EC.9E.90_.ED.91.9C.EC.8B.9C.ED.95.98.EA.B8.B0" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EB.A1.9C_.EB.AC.B8.EC.9E.90_.ED.91.9C.EC.8B.9C.ED.95.98.EA.B8.B0"> 유니코드로 문자 표시하기 </h4> -<p>우리는 다른 언어나 기술 분야 기호를 표시하기 위해서 유니코드를 사용할 수 있습니다. 문자를 제대로 표시하기 위해서는 Mozilla Firefox나 Netscape 같은 클라이언트가 유니코드를 지원해야 합니다. 게다가 클라이언트에서 사용할 수 있는 적절한 유니코드 글꼴이 필요하고, 클라이언트 플랫폼이 유니코드를 지원해야 합니다. 종종 유니코드 글꼴이 모든 유니코드 문자를 표시하지 못하는 경우가 있습니다. Windows 95 같은 몇몇 플랫폼은 유니코드를 부분적으로만 지원합니다. -</p><p>비 ASCII 문자 입력을 받기 위해서는 클라이언트가 유니코드로 입력을 보내야 합니다. 표준 확장 키보드(standard enhanced keyborad)를 사용하면 클라이언트에서 유니코드가 지원하는 추가적인 문자를 쉽게 입력할 수 없습니다. 때때로 유니코드 문자를 입력하려면 유니코드 이스케이프를 사용하는 방법 밖에 없을 때도 있습니다. -</p><p>유니코드에 대한 더 많은 정보를 얻으려면 <a class="external" href="http://www.unicode.org/">유니코드 홈페이지</a>나 The Unicode Standard, Version 2.0, published by Addison-Wesley, 1996 를 보시기 바랍니다. -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Literals", "Core_JavaScript_1.5_Guide:Expressions") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Unicode", "fr": "fr/Guide_JavaScript_1.5/Unicode", "ja": "ja/Core_JavaScript_1.5_Guide/Unicode", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Unicode" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html deleted file mode 100644 index e5c40d23bf..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Values -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Values ---- -<h3 id=".EA.B0.92" name=".EA.B0.92"> 값 </h3> -<p>JavaScript는 다음과 같은 값 형식을 인식합니다. -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Number">수</a>, 42나 3.14159 -</li><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">논리적(불리언)</a> 값, <code>true</code>와 <code>false</code> -</li><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String">문자열</a>, "안녕!" -</li><li> <code>null</code>, null 값을 나타내는 특별한 키워드. <code>null</code>은 또한 기본(primitive) 값이기도 합니다. JavaScript는 대소문자를 구분하므로, <code>null</code>은 <code>Null</code>이나 <code>NULL</code>과는 다릅니다. -</li><li> <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a></code>, 값이 정의되지 않은 최상위 속성. <code>undefined</code>도 기본(primitive) 값입니다. -</li></ul> -<p>이렇게 조금 적어보이는 값 형식 또는 "자료형"이지만 훌륭한 기능을 작성할 수 있습니다. 정수와 실수 사이에 엄격한 구분은 없습니다. JavaScript에는 명시적인 날짜 자료형은 없습니다. 하지만 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Date">Date</a></code> 개체를 이용하면 됩니다. -<a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a>와 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Function">함수</a>는 언어의 또다른 기초 요소입니다. 개체는 값을 포함할 수 있는 이름 붙은 어떤 것이라고 생각하면 되고, 함수는 프로그램이 수행할 수 있는 실행 절차라고 생각하면 됩니다. -</p> -<h4 id=".EC.9E.90.EB.A3.8C.ED.98.95_.EB.B3.80.ED.99.98" name=".EC.9E.90.EB.A3.8C.ED.98.95_.EB.B3.80.ED.99.98"> 자료형 변환 </h4> -<p>JavaScript는 동적 타입 언어입니다. 이 말은 변수를 선언할 때 타입을 지정하지 않아도 되고, 스크립트 실행중에 필요에 따라 자동으로 자료형이 바뀐다는 말입니다. 예를 들어 다음과 같이 변수를 선언할 수 있습니다. -</p> -<pre class="eval">var answer = 42 -</pre> -<p>그 후에 이 변수에 문자열 값을 할당할 수 있습니다. -</p> -<pre class="eval">answer = "Thanks for all the fish..." -</pre> -<p>JavaScript는 동적 타입 언어이기 때문에, 이렇게 대입하더라도 에러를 내지 않습니다. -</p><p>숫자와 문자열 값을 + 연산자로 계산하는 표현식에서, JavaScript는 숫자를 문자열로 변환합니다. 예를 들어 다음과 같은 문장을 생각해봅시다. -</p> -<pre class="eval">x = "The answer is " + 42 // returns "The answer is 42" -y = 42 + " is the answer" // returns "42 is the answer" -</pre> -<p>다른 연산자를 사용하는 문장에서는 숫자를 문자열로 변환하지 않습니다. -</p> -<pre class="eval">"37" - 7 // returns 30 -"37" + 7 // returns "377" -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:JavaScript_Overview", "Core_JavaScript_1.5_Guide:Variables") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Values", "fr": "fr/Guide_JavaScript_1.5/Valeurs", "ja": "ja/Core_JavaScript_1.5_Guide/Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Warto\u015bci" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html deleted file mode 100644 index c9260414d3..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Variables -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Variables ---- -<h3 id=".EB.B3.80.EC.88.98" name=".EB.B3.80.EC.88.98"> 변수 </h3> -<p>우리는 프로그램 내에서 값에 이름을 부여하기 위해서 변수를 사용할 수 있습니다. 변수의 이름은 "식별자(identifier)"라고 불리며, 몇 가지 규칙을 따라야 합니다. -</p><p>JavaScript 의 식별자는 문자(letter)나 밑줄(_)이나 달러 기호($)로 시작해야 합니다. 그 뒤에는 숫자(0-9)도 올 수 있습니다. JavaScript는 대소문자를 구별하기 때문에, 문자는 대문자 "A"부터 "Z"까지와 소문자 "a"부터 "z"까지를 사용할 수 있습니다. -</p><p>JavaScript 1.5부터, 식별자에 å나 ü같은 ISO 8859-1이나 유니코드 문자를 사용할 수 있습니다. 또한 <a href="ko/Core_JavaScript_1.5_Guide/Unicode#.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4">유니코드 이스케이프 시퀀스</a> 페이지에 나열된 \uXXXX 형식 유니코드 이스케이프 시퀀스를 식별자에 쓸 수도 있습니다. -</p><p>규칙에 맞는 이름 몇 가지는 이런 것입니다. <code>Number_hits</code>, <code>temp99</code>, <code>_name</code>. -</p> -<h4 id=".EB.B3.80.EC.88.98_.EC.84.A0.EC.96.B8" name=".EB.B3.80.EC.88.98_.EC.84.A0.EC.96.B8"> 변수 선언 </h4> -<p>변수를 선언하는 방법에는 두 가지가 있습니다. -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Reference/Statements/var">var</a> 키워드를 이용하는 방법. 예를 들면 <code>var x = 42</code> 같은 식입니다. 이 문법은 <a href="#.EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84">지역, 전역</a> 변수를 선언하는데 모두 사용할 수 있습니다. -</li><li> 그냥 값을 대입하는 방법. <code>x = 42</code> 같은 식입니다. 이 방법은 항상 <a href="#.EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98">전역 변수</a>를 선언하고, strict JavaScript 경고를 냅니다. 이 방법은 절대 사용하지 맙시다. -</li></ul> -<h4 id=".EB.B3.80.EC.88.98.EB.A5.BC_.ED.8F.89.EA.B0.80.ED.95.98.EA.B8.B0.28Evaluating.29" name=".EB.B3.80.EC.88.98.EB.A5.BC_.ED.8F.89.EA.B0.80.ED.95.98.EA.B8.B0.28Evaluating.29"> 변수를 평가하기(Evaluating) </h4> -<p>초기값을 지정하지 않고 <code>var</code> 문장을 이용해서 선언한 변수는 <a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a>라는 값을 갖습니다. -</p><p>선언하지 않은 변수에 접근하려고 하면 ReferenceError 예외가 발생합니다. -</p> -<pre class="eval">var a; -print("The value of a is " + a); // prints "The value of a is undefined" -print("The value of b is " + b); // throws ReferenceError exception -</pre> -<p>변수가 값을 갖고 있는지 결정하기 위해서 <code>undefined</code>를 사용할 수 있습니다. 다음 코드에서 <code>input</code>에는 값을 할당하지 않아서 <code><a href="ko/Core_JavaScript_1.5_Reference/Statements/if...else">if</a></code>문은 <code>true</code>로 평가됩니다. -</p> -<pre>var input; -if(input === undefined){ - doThis(); -} else { - doThat(); -}</pre> -<p><span class="comment">Not sure how the following is related to "Variables" section</span> -<code>undefined</code>값을 참/거짓을 판별하는 구문에 쓰면 <code>false</code>로 평가됩니다. 예를 들어 다음 코드에서는 <code>myArray</code>의 원소가 정의되지 않았기 때문에 <code>myFunction</code> 함수가 실행됩니다. -</p> -<pre>myArray=new Array() -if (!myArray[0]) - myFunction();</pre> -<p>숫자가 필요한 문맥에서 null 변수를 평가하면 null 값은 0으로 평가되고, 참/거짓이 필요한 문맥에서는 false로 평가됩니다. -When you evaluate a null variable, the null value behaves as 0 in numeric contexts and as false in boolean contexts. For example: -</p> -<pre>var n = null; -n * 32; //0을 반환합니다</pre> -<h4 id=".EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84" name=".EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84"> 변수 범위 </h4> -<p>함 수 외부에서 선언한 변수는 "전역(global)" 변수라고 부릅니다. 그 변수는 현재 문서의 모든 코드에서 접근할 수 있기 때문입니다. 함수 안에서 선언한 변수는 "지역(local)" 변수라고 부릅니다. 그 변수는 함수 안에서만 접근할 수 있기 때문입니다. -</p><p>JavaScript에는 <a href="ko/Core_JavaScript_1.5_Guide/Block_Statement#.EB.B8.94.EB.A1.9D_.EB.AC.B8.EC.9E.A5">블록 문장</a> 범위가 없습니다. 대신 그 블록이 포함된 코드의 지역 범위에 포함됩니다. 예를 들어 다음 코드에서는 <code>condition</code>이 <code>false</code>이면 예외를 발생시키는 대신 0을 출력합니다. -</p> -<pre class="eval">if (condition) { - var x = 5; -} -print(x ? x : 0); -</pre> -<p>JavaScript의 변수와 관련해서 또다른 색다른 점은 나중에 선언될 변수에 예외 발생없이 접근할 수 있다는 것입니다. -</p> -<pre class="eval">print(x === undefined); // prints "true" -var x = 3; -</pre> -<h4 id=".EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98" name=".EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98"> 전역 변수 </h4> -<p><span class="comment">need links to pages discussing scope chains and the global object</span> -전역 변수는, 실제로는 "전역 개체(global object)"의 속성(property)입니다. 웹 페이지에서 전역 개체는 <a href="ko/DOM/window">window</a>이므로, <code>window.<i>variable</i></code> 문장을 이용해서 전역 변수에 접근할 수 있습니다. -</p><p>그러므로, window나 frame 이름을 이용하면 다른 window나 frame에 정의된 전역 변수에 접근할 수 있습니다. 예를 들어 <code>phoneNumber</code>라는 변수를 <code>FRAMESET</code> 문서에 정의했다면, 자식 frame에서 <code>parent.phoneNumber</code>로 그 변수에 접근할 수 있습니다. -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Values", "Core_JavaScript_1.5_Guide:Constants") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Variables", "fr": "fr/Guide_JavaScript_1.5/Variables", "ja": "ja/Core_JavaScript_1.5_Guide/Variables", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Zmienne" } ) }} diff --git a/files/ko/web/javascript/guide/정규식/assertions/index.html b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html index 350c50f8f9..6a7cd8b8f1 100644 --- a/files/ko/web/javascript/guide/정규식/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 --- <p>{{jsSidebar("JavaScript Guide")}}</p> diff --git a/files/ko/web/javascript/guide/정규식/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/정규식/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 --- <p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> diff --git a/files/ko/web/javascript/guide/정규식/index.html b/files/ko/web/javascript/guide/regular_expressions/index.html index 5fbbcef0a0..84f1ce7bc4 100644 --- a/files/ko/web/javascript/guide/정규식/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/정규식 --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> diff --git a/files/ko/web/javascript/guide/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/guide/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 --- <p>{{jsSidebar("Advanced")}}</p> diff --git a/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index 03015b1407..0000000000 --- a/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: 객체지향 자바스크립트 개요 -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<p>비록 다른 객체지향적인 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, JavaScript는 강력한 객체지향 프로그래밍 능력들을 지니고 있다.</p> - -<p>이 글에서는 객체지향 프로그래밍에 대해 소개하는 것으로 시작해서 자바스크립트의 객체 모델, 그리고 자바스크립트에서의 객체지향 프로그래밍 개념에 대해 간단한 예제로 살펴볼 것이다.</p> - -<h2 id="JavaScript_Review" name="JavaScript_Review">자바스크립트 리뷰(JavaScript review)</h2> - -<p>만약 변수, 형, 함수, 스코프 등 자바스크립트의 개념에 대해 명확히 이해하고 있지 못하다면, <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a>를 참고해 보자. <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Core JavaScript 1.5 Guide</a>라는 글도 도움이 될 것이다.</p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming">객체지향 프로그래밍(Object-oriented programming)</h2> - -<p>객체지향 프로그래밍은 실제 세계에 기반한 모델을 만들기 위해 추상화를 사용하는 프로그래밍 패러다임이다. 객체지향 프로그래밍은 modularity, polymorphism, encapsulation을 포함하여 이전에 정립된 패러다임들부터 여러가지 테크닉들을 사용한다. 오늘날 많은 유명한 프로그래밍 언어(자바, 자바스크립트, C#, C++, 파이썬, PHP, 루비, 오브젝트C)는 객체지향 프로그래밍을 지원한다.</p> - -<p>객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록 이라는 기존의 프로그래밍에 대한 전통적인 관점에 반하여, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. 객체지향 프로그래밍에서, 각 객체는 메시지를 받을 수도 있고, 데이터를 처리할 수도 있으며, 또다른 객체에게 메시지를 전달할 수도 있다. 각 객체는 별도의 역할이나 책임을 갖는 작은 독립적인 기계로 볼 수 있는 것이다.</p> - -<p>객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었고, 대규모 소프트웨어 공학에서 널리 알려져 있다. 객체지향 프로그래밍이 갖는 modularity에 기반한 강력한 힘에 의해, 객체지향적인 코드는 개발을 보다 단순하게 했고, 시간이 흐른 뒤에도 보다 쉽게 이해할 수 있도록 했으며, 복잡한 상황이나 절차들을 덜 모듈화된 프로그래밍 방법들보다 더 직접적으로 분석하고, 코딩하고, 이해할 수 있도록 만들었다.<sup><a href="#Reference">2</a></sup></p> - -<h2 id="Terminology" name="Terminology">용어(Terminology)</h2> - -<dl> - <dt>Class</dt> - <dd>객체의 특성을 정의</dd> - <dt>Object</dt> - <dd>Class의 인스턴스</dd> - <dt>Property</dt> - <dd>객체의 특성(예: 색깔)</dd> - <dt>Method</dt> - <dd>객체의 능력(예: 걷기)</dd> - <dt>Constructor</dt> - <dd>인스턴스화 되는 시점에서 호출되는 메서드</dd> - <dt>Inheritance</dt> - <dd>클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.</dd> - <dt>Encapsulation</dt> - <dd>클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)</dd> - <dt>Abstraction</dt> - <dd>복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.</dd> - <dt>Polymorphism</dt> - <dd>다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.</dd> -</dl> - -<p>객체지향 프로그래밍에 대한 보다 확장된 설명은 <a class="external" href="http://en.wikipedia.org/wiki/Object_oriented_programming">Object-oriented programming</a>를 참고하면 된다.</p> - -<h2 id="프로토타입기반_프로그래밍(Prototype-based_programming)">프로토타입기반 프로그래밍(Prototype-based programming)</h2> - -<p>프로토타입 기반 프로그래밍은 클래스가 존재하지 않는 객체지향 프로그래밍의 한가지 스타일로, 동작 재사용(behavior reuse, 클래스기반 언어에서는 상속이라고함)은 프로토타입으로서 존재하는 객체를 데코레이팅하는 과정을 통해 수행된다.</p> - -<p>프로토타입 기반 언어의 원형적인 예는 David Ungar과 Randall Smith가 개발한 'Self'라는 프로그래밍 언어이다. 그러나 클래스가 없는 프로그래밍 스타일이 최근 인기를 얻으며 성장하였고, 자바스크립트, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak 등의 언어에서 채택되어 왔다.<sup><a href="#Reference">2</a></sup></p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">자바스크립트 객체지향 프로그래밍(JavaScript Object Oriented Programming)</h2> - -<h3 id="Core_Objects" name="Core_Objects">Core Objects</h3> - -<p>자바스크립트는 코어(core)에 몇 개의 객체를 갖고 있다. 예를들면, Math, Object, Array, String과 같은 객체가 있다. 아래의 예제는 Math 객체를 사용해서 무작위 숫자를 만들어내는 것을 보여준다.</p> - -<pre class="brush: js">alert(Math.random()); -</pre> - -<div class="note"><strong>Note:</strong> <span style="color: #333333; line-height: inherit;">여기와 다른 예제들 모두 alert 이라는 함수가 전역에 선언되어 있다고 가정하고 있다. alert 함수는 실제로 자바스크립트 그 자체에 포함되진 않았지만, 대부분의 브라우저에서 지원하고 있다.</span></div> - -<p>자바스크립트의 core object들의 리스트는 <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core_JavaScript_1.5_Reference/Global_Objects">Core JavaScript 1.5 Reference:Global Objects</a>라는 글을 참고하면 자세히 알 수 있다.</p> - -<p>자바스크립트의 모든 객체는 Object 객체의 인스턴스이므로 Object의 모든 속성과 메서드를 상속받는다.</p> - -<h3 id="Custom_Objects" name="Custom_Objects">Custom Objects</h3> - -<h4 id="The_Class" name="The_Class">The Class</h4> - -<p>class문을 흔하게 볼 수 있는 C++이나 자바와는 달리 자바스크립트는 class문이 포함되지 않은 프로토타입 기반 언어이다. 이로인해 때때로 class 기반 언어에 익숙한 프로그래머들은 혼란을 일으킨다. 자바스크립트에서는 function을 class로서 사용한다. 클래스를 정의하는 것은 function을 정의하는 것만큼 쉽다. 아래 예제에서는 Person이라는 이름의 클래스를 새로 정의하고 있다.</p> - -<pre class="brush: js">function Person() { } -</pre> - -<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">The Object (Class Instance)</h4> - -<p>obj라는 이름의 객체의 새로운 인스턴스를 만들 때에는 new obj라는 statement를 사용하고, 차후에 접근할 수 있도록 변수에 결과를 받는다.</p> - -<p>아래의 예제에서 Person이라는 이름의 클래스를 정의한 후에, 두 개의 인스턴스를 생성하고 있다.</p> - -<pre class="brush: js">function Person() { } -var person1 = new Person(); -var person2 = new Person(); -</pre> - -<div class="note"><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> 메서드 역시 새로운 인스턴스를 만들 때 사용할 수 있다.</div> - -<h4 id="The_Constructor" name="The_Constructor">The Constructor</h4> - -<p>생성자는 인스턴스화되는 순간(객체 인스턴스가 생성되는 순간) 호출된다. 생성자는 해당 클래스의 메서드이다. 자바스크립트에서는 함수 자체가 그 객체의 생성자 역할을 하기 때문에 특별히 생성자 메서드를 정의할 필요가 없다. 클래스 안에 선언된 모든 내역은 인스턴스화되는 그 시간에 실행된다. 생성자는 주로 객체의 속성을 설정하거나 사용하기 위해 객체를 준비시키는 메서드를 호출할 때 주로 사용된다. 클래스 메서드를 추가하고 정의하는 것은 나중에 설명한다.</p> - -<div>아래의 예제에서, Person 클래스의 생성자는 Person 이 인스턴스화되었을 때 alert 을 보여주게 된다.</div> - -<pre class="brush: js">function Person() { - alert('Person instantiated'); -} - -var person1 = new Person(); -var person2 = new Person(); -</pre> - -<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">The Property (object attribute)</h4> - -<div>속성은 클래스 안에 있는 변수들을 말한다. 객체의 모든 인스턴스는 그 인스턴스의 속성을 갖는다. 속성들의 상속이 바르게 이루어지려면 해당 클래스(function)의 프로토타입에 선언되어 있어야 한다.</div> - -<div> </div> - -<div>클래스 내에서 속성 작업은 현재 객체를 가리키는 this 키워드에 의해 이루어진다. 클래스의 외부에서 속성에 접근(읽기 혹은 쓰기)하는 것은 "인스턴스명.속성명" 의 형식으로 이루어진다. 이러한 문법은 C++, 자바나 다른 수많은 언어에서와 동일한 방식이다. (클래스 내부에서 "this.속성명" 은 해당 속성의 값을 읽거나 쓸 때 주로 사용된다)</div> - -<div> </div> - -<div>아래의 예제에서 Person 클래스에 gender라는 속성을 정의하고 인스턴스화할 때 그 값을 설정한다.</div> - -<pre class="brush: js">function Person(gender) { - this.gender = gender; - alert('Person instantiated'); -} - -var person1 = new Person('Male'); -var person2 = new Person('Female'); - -//display the person1 gender -alert('person1 is a ' + person1.gender); // person1 is a Male -</pre> - -<h4 id="The_methods" name="The_methods">메서드(The methods)</h4> - -<p>메서드는 앞서 살펴본 속성과 같은 방식을 따른다. 차이점이 있다면 메서드는 function이기 때문에 function 형태로 정의된다는 것입니다. 메서드를 호출하는 것은 속성에 접근하는 것과 매우 유사한데 단지 끝에 ()를 추가하면 된다. argument가 있다면 괄호 안에 입력해준다. 메서드를 정의하기 위해서는 클래스의 prototype에 명명된 속성에 함수를 할당하면 된다. 이때 할당된 이름은 해당 객체의 메서드를 호출할 때 사용되는 이름이다.</p> - -<p>아래의 예에서는 Person 클래스에 sayHello()라는 메서드를 정의하고 사용하고 있다.</p> - -<pre class="brush: js">function Person(gender) { - this.gender = gender; - alert('Person instantiated'); -} - -Person.prototype.sayHello = function() -{ - alert ('hello'); -}; - -var person1 = new Person('Male'); -var person2 = new Person('Female'); - -// call the Person sayHello method. -person1.sayHello(); // hello -</pre> - -<p>자바스크립트에서 메서드는 "컨텍스트에 관계 없이" 호출될 수 있는 속성으로서 클래스/객체에 연결되어 있다. 다음 예제의 코드를 살펴보자.</p> - -<pre class="brush: js">function Person(gender) { - this.gender = gender; -} - -Person.prototype.sayGender = function() -{ - alert(this.gender); -}; - -var person1 = new Person('Male'); -var genderTeller = person1.sayGender; - -person1.sayGender(); // alerts 'Male' -genderTeller(); // alerts undefined -alert(genderTeller === person1.sayGender); // alerts true -alert(genderTeller === Person.prototype.sayGender); // alerts true -</pre> - -<p>위의 예제는 많은 개념들을 한꺼번에 보여주고 있다. </p> - -<div>먼저 이 예제는 자바스크립트에 "per-object methods" 가 존재하지 않는다는 것을 보여준다. JavaScript는 메서드에 대한 레퍼런스가 모두 똑같은 (프로토타입에 처음 정의한) 함수를 참조하고 있기 때문이다.</div> - -<div> </div> - -<div>자바스크립트는 어떤 객체의 메서드로서 함수가 호출될 때 현재 "객체의 컨텍스트"를 특별한 "this" 변수에 "연결한다". 이는 아래와 같이 function 객체의 call 메서드를 호출하는 것과 동일하다.</div> - -<div> </div> - -<div>(역자주: 참고로, genderTeller() 만 호출했을 때 undefined 가 나타난 것은 해당 메서드가 호출될 때 컨텍스트가 window 로 잡혔기 때문에 window.gender 는 존재하지 않으므로 undefined 가 나타난 것이다.)</div> - -<div> </div> - -<pre class="brush: js">genderTeller.call(person1); //alerts 'Male' -</pre> - -<div class="note">더 자세한 것은 <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function.call</a> 과 <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function.apply</a> 를 참고하자.</div> - -<h4 id="Inheritance" name="Inheritance">상속(Inheritance)</h4> - -<p>상속은 하나 이상의 클래스를 특별한 버전의 클래스로 생성하는 하나의 방법이다. (다만 자바스크립트는 오직 하나의 클래스를 상속받는 것만 지원한다.) 이 특별한 클래스는 흔히 자식 클래스(child)라고 불리우고 원본 클래스는 흔히 부모 클래스(parent)라고 불리운다. 자바스크립트에서는 부모 클래스의 인스턴스를 자식 클래스에 할당함으로써 상속이 이루어진다. 최신 브라우저에서는 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> 메서드를 사용해서 상속을 수행할 수도 있다.</p> - -<div class="note"> -<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a> 에 나와있는 설명과 같이 자바스크립트는 자식 클래스의 prototype.constructor 를 검색하지 않으므로 직접 명시해주어야 한다.</p> -</div> - -<p>아래의 예제에서는, Student라는 클래스를 Person 클래스의 자식 클래스로 정의한다. 그 후에 우리는 sayHello() 메서드를 재정의하고 sayGoodBye() 메서드를 추가한다.</p> - -<pre class="brush: js">// define the Person Class -function Person() {} - -Person.prototype.walk = function(){ - alert ('I am walking!'); -}; -Person.prototype.sayHello = function(){ - alert ('hello'); -}; - -// define the Student class -function Student() { - // Call the parent constructor - Person.call(this); -} - -// inherit Person -Student.prototype = new Person(); - -// correct the constructor pointer because it points to Person -Student.prototype.constructor = Student; - -// replace the sayHello method -Student.prototype.sayHello = function(){ - alert('hi, I am a student'); -} - -// add sayGoodBye method -Student.prototype.sayGoodBye = function(){ - alert('goodBye'); -} - -var student1 = new Student(); -student1.sayHello(); -student1.walk(); -student1.sayGoodBye(); - -// check inheritance -alert(student1 instanceof Person); // true -alert(student1 instanceof Student); // true -</pre> - -<p>Object.create 를 사용하면 상속을 아래와 같이 수행할 수 있다.</p> - -<pre class="brush: js">Student<code class="js plain">.prototype = Object.create(</code>Person<code class="js plain">.prototype);</code></pre> - -<h4 id="Encapsulation" name="Encapsulation">캡슐화(Encapsulation)</h4> - -<p>이전의 예제에서, Student 클래스는 Person 클래스의 walk() 메서드가 어떻게 실행되는지에 대해 알 필요가 없고, walk() 메서드를 사용하는데에도 전혀 문제가 없다. 또 Student 클래스에서는 walk() 메서드의 내용을 바꾸려는게 아니라면 walk() 메서드를 특별히 정의할 필요도 없다. 자식 클래스는 부모 클래스의 모든 메서드를 상속받고, 상속받은 메서드중 일부를 수정하고 싶은 경우에만 해당 메서드를 정의하는 것을 우리는 캡슐화(encapsulation)이라고 부른다.</p> - -<h4 id="Abstraction" name="Abstraction">추상화(Abstraction)</h4> - -<p>추상화는 작업 문제의 현재 부분을 모델링할 수 있도록 하는 매커니즘이다. 추상화는 상속(specialization, 추상의 수준을 낮추는 것)과 합성으로 구현할 수 있다. 자바스크립트는 상속에 의해 특별화(specialization)를, 클래스들의 인스턴스를 다른 객체의 속성값이 되게 함으로써 합성을 구현한다.</p> - -<p>자바스크립트 Function 클래스는 Object 클래스를 상속받고(이는 모델의 특별화를 보여준다), Function.prototype 속성은 Object의 인스턴스이다(이는 합성을 보여준다).</p> - -<pre class="brush: js">var foo = function(){}; -alert( 'foo is a Function: ' + (foo instanceof Function) ); -alert( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) ); -</pre> - -<h4 id="Polymorphism" name="Polymorphism">다형성(Polymorphism)</h4> - -<p>모든 메서드와 속성들은 prototype 속성에 선언되어 있고, 클래스가 다르다면 같은 이름의 메서드도 선언할 수 있다. 메서드들은 메서드가 선언된 클래스로 그 실행 영역이 한정된다. 물론 이건 두 개의 클래스들이 서로 부모-자식 관계가 아닐때에만 성립한다. 즉 다시 말해 부모-자식 관계의 상속 관계로 하나가 다른 하나에게서 상속받지 않았을 때에만 성립한다.</p> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p>객체지향 프로그래밍을 구현하는데 있어서 자바스크립트는 매우 유연하기 때문에, 이 글에서 선보인 테크닉들은 자바스크립트에서 객체지향을 구현하는 유일한 방법들 중 일부일 뿐이다.</p> - -<p>또, 여기에서 선보인 테크닉들은 어떤 hack도 사용하지 않았고 또한 다른 언어의 객체 이론 구현물들을 모방하지도 않았다.</p> - -<p>자바스크립트의 객체지향 프로그래밍에 있어서 다른 보다 깊이있는 테크닉들이 많이 있지만, 소개하는 글이라는 이 글의 특성상 다루지 않기로 한다.</p> - -<h2 id="References" name="References">References</h2> - -<ol> - <li>Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide</li> - <li>Wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li> -</ol> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information">Original Document Information</h2> - -<ul> - <li>Author(s): Fernando Trasviña <f_trasvina at hotmail dot com></li> - <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> -</ul> -</div> - -<p> </p> diff --git a/files/ko/web/javascript/언어_리소스/index.html b/files/ko/web/javascript/language_resources/index.html index 5743a54e24..c10436fe6e 100644 --- a/files/ko/web/javascript/언어_리소스/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/언어_리소스 --- <div>{{JsSidebar}}</div> diff --git a/files/ko/web/javascript/reference/classes/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/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 --- <div>{{JsSidebar("Classes")}}</div> diff --git a/files/ko/web/javascript/reference/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/애로우_펑션/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/애로우_펑션 --- <div>{{jsSidebar("Functions")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html deleted file mode 100644 index 6ba56eb37e..0000000000 --- a/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: BigInt.prototype -slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype -tags: - - BigInt - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>BigInt.prototype</code></strong> 속성은 {{jsxref("BigInt")}} 생성자의 프로토타입을 나타냅니다.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="설명">설명</h2> - -<p>모든 {{jsxref("BigInt")}} 인스턴스는 <code>BigInt.prototype</code>을 상속합니다. <code>BigInt</code> 생성자의 프로토타입 객체를 변형해 모든 <code>BigInt</code> 인스턴스에 영향을 줄 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>BigInt.prototype.constructor</code></dt> - <dd>이 객체의 인스턴스를 만들 때 사용한 함수를 반환합니다. 기본값은 {{jsxref("BigInt")}} 객체입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt><code>BigInt.prototype.toLocaleString()</code></dt> - <dd>BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd> - <dt><code>BigInt.prototype.toString()</code></dt> - <dd><code>BigInt</code>의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> - <dt><code>BigInt.prototype.valueOf()</code></dt> - <dd><code>BigInt</code> 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - </tr> - <tr> - <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype">BigInt.prototype</a></td> - <td>Stage 3</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html deleted file mode 100644 index 6e90207661..0000000000 --- a/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -tags: - - Boolean - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Boolean.prototype</code></strong> 속성은 {{jsxref("Boolean")}} 생성자의 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> - - - -<h2 id="설명">설명</h2> - -<p>{{jsxref("Boolean")}} 인스턴스는 <code>Boolean.prototype</code>을 상속받습니다. 생성자의 프로토타입 객체를 사용해 모든 <code>Boolean</code> 인스턴스에 속성이나 메서드를 추가할 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Boolean.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 기본값은 {{jsxref("Boolean")}} 함수입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>{{jsxref("Boolean")}} 객체의 소스를 포함한 문자열을 반환합니다. 반환 문자열을 사용해 동일한 객체를 생성할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.</dd> - <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> - <dd>객체의 값에 따라 문자열 <code>"true"</code> 또는 <code>"false"</code>를 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> - <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> - <dd>{{jsxref("Boolean")}} 객체의 원시 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/date/prototype/index.html b/files/ko/web/javascript/reference/global_objects/date/prototype/index.html deleted file mode 100644 index 06e1bba5f7..0000000000 --- a/files/ko/web/javascript/reference/global_objects/date/prototype/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Date.prototype -slug: Web/JavaScript/Reference/Global_Objects/Date/prototype -tags: - - Date - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Date.prototype</code></strong> 속성은 {{jsxref("Date")}} 생성자의 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0, 0, 1)}}</div> - -<h2 id="설명">설명</h2> - -<p>JavaScript {{jsxref("Date")}} 인스턴스는 <code>Date.prototype</code>을 상속합니다. 생성자의 프로토타입을 변경해 모든 <code>Date</code> 인스턴스의 속성과 메서드를 수정할 수 있습니다.</p> - -<p>2000년대 달력과의 호환성을 위해 연도는 언제나 완전하게 네 자리 숫자로 작성해야 합니다. 즉 98 대신 1998이 올바른 작성법입니다. <code>Date</code>는 완전한 연도 설정에 도움이 될 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}}, {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}} 메서드를 가지고 있습니다.</p> - -<p>ECMAScript 6부터 <code>Date.prototype</code>은 {{jsxref("Date")}} 인스턴스가 아닌 평범한 객체입니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Date.prototype.constructor</code></dt> - <dd>인스턴스 생성에 사용한 생성자를 반환합니다. 기본값은 {{jsxref("Date")}}입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<h3 id="접근자">접근자</h3> - -<dl> - <dt>{{jsxref("Date.prototype.getDate()")}}</dt> - <dd>주어진 날짜의 일(1-31)을 현지 시간에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getDay()")}}</dt> - <dd>주어진 날짜의 요일(0-6)을 현지 시간에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> - <dd>주어진 날짜의 연도(4자리 수)를 현지 시간에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getHours()")}}</dt> - <dd>주어진 날짜의 시(0-23)를 현지 시간에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> - <dd>주어진 날짜의 밀리초(0-999)를 현지 시간에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> - <dd>주어진 날짜의 분(0-59)을 현지 시간에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> - <dd>주어진 날짜의 월(0-11)을 현지 시간에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> - <dd>주어진 날짜의 초(0-59)를 현지 시간에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getTime()")}}</dt> - <dd>주어진 날짜와 1970년 1월 1일 0시 0분(UTC)의 차이를 밀리초로 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> - <dd>현재 로케일의 시간대 차이를 분으로 환산해 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> - <dd>주어진 날짜의 일(1-31)을 UTC에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> - <dd>주어진 날짜의 요일(0-6)을 UTC에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> - <dd>주어진 날짜의 연도(4자리 수)를 UTC에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> - <dd>주어진 날짜의 시(0-23)를 UTC에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> - <dd>주어진 날짜의 밀리초(0-999)를 UTC에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> - <dd>주어진 날짜의 분(0-59)을 UTC에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> - <dd>주어진 날짜의 월(0-11)을 UTC에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> - <dd>주어진 날짜의 초(0-59)를 UTC에 맞춰 반환합니다.</dd> - <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt> - <dd>주어진 날짜의 연도(주로 두세자리 숫자)를 현지 시간에 맞춰 반환합니다. {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}를 사용하세요.</dd> -</dl> - -<h3 id="설정자">설정자</h3> - -<dl> - <dt>{{jsxref("Date.prototype.setDate()")}}</dt> - <dd>Sets the day of the month for a specified date according to local time.</dd> - <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> - <dd>Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to local time.</dd> - <dt>{{jsxref("Date.prototype.setHours()")}}</dt> - <dd>Sets the hours for a specified date according to local time.</dd> - <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> - <dd>Sets the milliseconds for a specified date according to local time.</dd> - <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> - <dd>Sets the minutes for a specified date according to local time.</dd> - <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> - <dd>Sets the month for a specified date according to local time.</dd> - <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> - <dd>Sets the seconds for a specified date according to local time.</dd> - <dt>{{jsxref("Date.prototype.setTime()")}}</dt> - <dd>Sets the {{jsxref("Date")}} object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC, allowing for negative numbers for times prior.</dd> - <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> - <dd>Sets the day of the month for a specified date according to universal time.</dd> - <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> - <dd>Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to universal time.</dd> - <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> - <dd>Sets the hour for a specified date according to universal time.</dd> - <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> - <dd>Sets the milliseconds for a specified date according to universal time.</dd> - <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> - <dd>Sets the minutes for a specified date according to universal time.</dd> - <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> - <dd>Sets the month for a specified date according to universal time.</dd> - <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> - <dd>Sets the seconds for a specified date according to universal time.</dd> - <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt> - <dd>Sets the year (usually 2-3 digits) for a specified date according to local time. Use {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} instead.</dd> -</dl> - -<h3 id="변환_접근자">변환 접근자</h3> - -<dl> - <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> - <dd>Returns the "date" portion of the {{jsxref("Date")}} as a human-readable string like 'Thu Apr 12 2018'</dd> - <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> - <dd>Converts a date to a string following the ISO 8601 Extended Format.</dd> - <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> - <dd>Returns a string representing the {{jsxref("Date")}} using {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Intended for use by {{jsxref("JSON.stringify()")}}.</dd> - <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt> - <dd>Returns a string representing the {{jsxref("Date")}} based on the GMT (UT) time zone. Use {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} instead.</dd> - <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> - <dd>Returns a string with a locality sensitive representation of the date portion of this date based on system settings.</dd> - <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt> - <dd>Converts a date to a string, using a format string.</dd> - <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> - <dd>Returns a string with a locality sensitive representation of this date. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> - <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> - <dd>Returns a string with a locality sensitive representation of the time portion of this date based on system settings.</dd> - <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Returns a string representing the source for an equivalent {{jsxref("Date")}} object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> - <dt>{{jsxref("Date.prototype.toString()")}}</dt> - <dd>Returns a string representing the specified {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> - <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> - <dd>Returns the "time" portion of the {{jsxref("Date")}} as a human-readable string.</dd> - <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> - <dd>Converts a date to a string using the UTC timezone.</dd> - <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> - <dd>Returns the primitive value of a {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("javascript.builtins.Date.prototype")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html deleted file mode 100644 index 6e13afb6db..0000000000 --- a/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: InternalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---- -<div>{{JSRef}} {{non-standard_header}}</div> - -<p><code><strong>InternalError.prototype </strong></code>속성은 {{jsxref("InternalError")}} 생성자의 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="설명">설명</h2> - -<p>모든 {{jsxref("InternalError")}} 인스턴스는 <code>InternalError.prototype</code> 으로부터 상속받습니다. 프로토타입은 모든 인스턴스에 속성이나 메소드를 추가하거나 하는 데에 사용할 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>InternalError.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 생성하는 함수를 명시합니다. </dd> - <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> - <dd>에러 메시지. {{jsxref("Error")}} 로부터 상속받습니다. </dd> - <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> - <dd>에러명. {{jsxref("Error")}} 로부터 상속받습니다.</dd> - <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> - <dd>에러를 발생시킨 파일의 경로. {{jsxref("Error")}} 로부터 상속받습니다.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> - <dd>에러를 발생시킨 파일의 라인 넘버. {{jsxref("Error")}} 로부터 상속받습니다.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> - <dd>에러를 발생 시킨 라인의 컬럼 넘버. {{jsxref("Error")}} 로부터 상속받습니다.</dd> - <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> - <dd>스택 트레이스. {{jsxref("Error")}} 로부터 상속받습니다. </dd> -</dl> - -<h2 id="메소드">메소드</h2> - -<p>비록 {{jsxref("InternalError")}}의 프로토타입 객체는 고유의 메소드를 가지고 있지는 않습니다. 하지만, {{jsxref("InternalError")}} 인스턴스는 프로토타입 체인을 통해 몇 가지의 메소드를 상속 받습니다.</p> - -<h2 id="스펙">스펙</h2> - -<p>Not part of any specifications.</p> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="참조">참조</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html deleted file mode 100644 index 2f1b031b39..0000000000 --- a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype -tags: - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DateTimeFormat.prototype</code></strong> 속성은 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 생성자의 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="설명">설명</h2> - -<p><code>Intl.DateTimeFormat</code> 인스턴스에 대한 설명은 {{jsxref("DateTimeFormat")}} 문서를 참고하세요.</p> - -<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스는 <code>Intl.DateTimeFormat.prototype</code>을 상속합니다. 프로토타입 객체를 변경하면 모든 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스가 영향을 받습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> - <dd>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}에 대한 참조입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}</dt> - <dd>주어진 날짜에 {{jsxref("DateTimeFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.</dd> -</dl> - -<dl> - <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> - <dd>서식을 적용한 날짜 문자열의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.</dd> - <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> - <dd>객체 인스턴스 생성 때 주어진 로케일과 서식 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p> -</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html deleted file mode 100644 index fcbaa6c247..0000000000 --- a/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype -tags: - - Internationalization - - Intl - - JavaScript - - NumberFormat - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.NumberFormat.prototype</code></strong> 속성은 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 생성자의 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="설명">설명</h2> - -<p><code>Intl.NumberFormat</code> 인스턴스에 대한 설명은 {{jsxref("NumberFormat")}} 문서를 참고하세요.</p> - -<p>{{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스는 <code>Intl.NumberFormat.prototype</code>을 상속합니다. 프로토타입 객체를 변형하면 모든 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스가 영향을 받습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Intl.NumberFormat.prototype.constructor</code></dt> - <dd><code>Intl.NumberFormat</code>에 대한 참조입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format()")}}</dt> - <dd>주어진 숫자에 {{jsxref("NumberFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.</dd> -</dl> - -<dl> - <dt>{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}</dt> - <dd>서식을 적용한 숫자의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.</dd> - <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt> - <dd>객체 인스턴스 생성 때 주어진 로케일과 콜레이션 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}</p> -</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/map/prototype/index.html b/files/ko/web/javascript/reference/global_objects/map/prototype/index.html deleted file mode 100644 index 3445bf2847..0000000000 --- a/files/ko/web/javascript/reference/global_objects/map/prototype/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Property - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> property는 {{jsxref("Map")}}의 프로토 타입을 나타낸다.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>{{jsxref("Map")}} instance는 {{jsxref("Map.prototype")}}를 상속한다. Constructor의 프로토타입에 property와 method를 추가함으로써 모든 <code>Map</code> 인스턴스에서 사용 가능하게끔 만들 수 있다.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 만드는 함수를 반환한다. 이것 {{jsxref("Map")}} 함수의 기본 값이다.</dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd><code>Map</code> 객체에 들어있는 key/value pair의 수를 반환한다.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd><code>Map</code> 객체의 모든 key/value pair를 제거한다.</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> - <dd>주어진 키(Key)와 해당되는 값(Value)를 제거하고 제거하기 전에 <code>Map.prototype.has(key)가 반환했던 값을 반환한다.</code> 그 후의 <code>Map.prototype.has(key)<font face="Open Sans, arial, sans-serif">는 </font></code><code>false를 반환한다.</code></dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd><code>Map</code> 객체 안의 모든 요소들을 <strong><code>[key, value] 형태의 </code>array </strong>로 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd><code>Map</code> 객체 안에 존재하는 각각의 key/value pair에 집어넣은 순서대로 callbackFn을 부른다. 만약 thisArg 매개변수가 제공되면, 이것이 각 callback의 this 값으로 사용된다.</dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> - <dd>주어진 키(Key)에 해당되는 값(value)을 반환하고, 만약 없으면 <code>undefined를 반환한다.</code></dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> - <dd><code>Map 객체 안에 주어진 </code>key/value pair가 있는지 검사하고 Boolean 값을 반환한다.</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd><code>Map</code> 객체 안의 모든 <strong>키(Key)</strong>들을 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> - <dd><code>Map 객체에 주어진 키</code>(Key)에 값(Value)를 집어넣고, <code>Map 객체를 반환한다.</code></dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd><code>Map</code> 객체 안의 모든 <strong>값</strong><strong>(Value)</strong>들을 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd><code>Map</code> 객체 안의 모든 요소들을 <strong><code>[key, value] 형태의 </code>array </strong>로 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("javascript.builtins.Map.prototype")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/prototype/index.html b/files/ko/web/javascript/reference/global_objects/number/prototype/index.html deleted file mode 100644 index 2bf39d20f9..0000000000 --- a/files/ko/web/javascript/reference/global_objects/number/prototype/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype -tags: - - JavaScript - - Number - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Number.prototype</code></strong> 속성은 {{jsxref("Number")}} 생성자의 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="설명">설명</h2> - -<p>모든 {{jsxref("Number")}} 인스턴스는 <code>Number.prototype</code>을 상속합니다. {{jsxref("Number")}} 생성자의 프로토타입 객체는 모든 {{jsxref( "Number")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Number.prototype.constructor</code></dt> - <dd>이 객체의 인스턴스를 생성한 함수를 반환합니다. 기본적으로 {{jsxref("Number")}} 객체 입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> - <dd>숫자의 지수표기법 표현을 문자열로 반환합니다.</dd> - <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> - <dd>숫자의 고정소수점 표현을 문자열로 반환합니다.</dd> - <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> - <dd>숫자의 표현을 특정 언어에 맞춘 형식의 문자열로 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 오버라이드 합니다.</dd> - <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> - <dd>지정한 정밀도로 숫자를 나타내는 문자열을 반환합니다. 고정소수점 혹은 지수표기법으로 표현합니다.</dd> - <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>지정한 {{jsxref("Number")}} 객체를 나타내는 객체 리터럴을 반환합니다. 이 값을 사용하여 새 객체를 만들 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 오버라이드 합니다.</dd> - <dt>{{jsxref("Number.prototype.toString()")}}</dt> - <dd>지정된 기수(기본 10진수)로 지정된 객체를 문자열로 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 오버라이드 합니다.</dd> - <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> - <dd>지정한 객체의 기본 자료형(primitive) 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 오버라이드 합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("javascript.builtins.Number.prototype")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Number")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/prototype/index.html b/files/ko/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index 8f7b08793f..0000000000 --- a/files/ko/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -tags: - - JavaScript - - Object - - Property - - Reference - - 프로토타입 -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Object.prototype</strong></code> 속성은 {{jsxref("Object")}} 프로토타입(원형) 객체를<br> - 나타냅니다.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="설명">설명</h2> - -<p>JavaScript에서 거의 모든 객체는 {{jsxref("Object")}}의 인스턴스입니다. 일반적인 객체는 <code>Object.prototype</code> 에서 속성과 메서드를 상속받으며, 그 중 일부는 (오버라이드 등으로 인해) 숨겨질 수 있습니다. 그러나, 의도적으로 <code>Object</code>를 생성할 때 ({{jsxref("Object.create", "Object.create(null)")}} 처럼) 이를 피할 수도 있고, {{jsxref("Object.setPrototypeOf")}} 등을 통해 나중에 무효화할 수도 있습니다.</p> - -<p><code>Object</code> 프로토타입에 가하는 변경은 프로토타입 체인을 통해, 더 아래쪽 체인에서 덮어 쓴 경우가 아니라면 <strong>모든</strong> 객체에서 관측할 수 있습니다. 이는 객체를 확장하거나 행동을 바꿀 수 있는 매우 강력하면서도 위험한 방법을 제공합니다.</p> - - - -<h2 id="속성">속성</h2> - -<dl> - <dt>{{jsxref("Object.prototype.constructor")}}</dt> - <dd>객체의 프로토타입을 생성하는 함수를 지정합니다.</dd> - <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> - <dd>객체가 초기화될 때 프로토타입으로 사용된 객체를 가리킵니다.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__noSuchMethod__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">정의되지 않은 객체 멤버가 메소드로서 호출될 때 실행되는 함수를 정의하는 데 쓰였지만 제거되었습니다.</s></dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">사용자 정의 객체 상에 직접 있는 열거가능 속성의 수를 반환하는 데 쓰였지만 제거되었습니다.</s></dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">객체 문맥을 가리키는 데 쓰였지만 제거되었습니다.</s></dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>함수를 속성에 연결합니다, 접근했을 때 그 함수를 실행해 그 결과값을 반환하는.</dd> - <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>함수를 속성에 연결합니다, 설정했을 때 그 속성을 수정하는 함수를 실행하는.</dd> - <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>{{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.</dd> - <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>{{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.</dd> - <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> - <dd>객체가 지정된 속성을 프로토타입 체인을 통해 상속되지 않은 그 객체의 직접 속성으로 포함하는지를 나타내는 boolean을 반환합니다.</dd> - <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> - <dd>지정된 객체가 이 메소드가 호출된 객체의 프로토타입 체인 내에 있는지를 나타내는 boolean을 반환합니다.</dd> - <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> - <dd>내부 <a href="/ko/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] attribute</a>가 설정된 경우를 나타내는 boolean을 반환합니다.</dd> - <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>이 메소드가 호출된 객체를 나타내는 객체 리터럴의 출처를 포함하는 문자열을 반환합니다; 새로운 객체를 만들기 위해 이 값을 쓸 수 있습니다.</dd> - <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> - <dd>{{jsxref("Object.toString", "toString()")}}을 호출합니다.</dd> - <dt>{{jsxref("Object.prototype.toString()")}}</dt> - <dd>객체의 문자열 표현을 반환합니다.</dd> - <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> - <dd>객체 속성에서 감시점을 제거합니다.</dd> - <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> - <dd>지정된 객체의 원시값을 반환합니다.</dd> - <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> - <dd>객체 속성에 감시점을 추가합니다.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">지정된 객체의 문맥에서 JavaScript 코드 문자열을 평가하는 데 쓰였지만 제거되었습니다.</s></dd> -</dl> - -<h2 id="예제">예제</h2> - -<p><code>Object.prototype</code>의 기본 메서드를 변경할 때, 기존 조직의 앞 또는 후에 확장(extension) 을 포장하여 코드를 주입시키는 것을 고려하자. 예를 들어서, 이 (시험받지<br> - 않은) 코드는 내장된 로직 또는 어떤 다른 확장이 실행되기 전에 커스텀 로직을 전제조건적으로 실행시킬 것이다.</p> - -<p>함수가 호출되었을 때, 불러온 매개변수들은 배열과 같은 형태로 '변수' <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>에 보관된다. 예를 들어 myFn(a, b, c) 라는 함수를 부를 때, 이 함수 내부에 배열형태로 매개변수 (a, b, c) 를 담게 된다. prototype을 훅을 이용해 수정할 때, 함수에서 apply()를 호출하여 단순하게 this와 arguments(호출 상태)에 현재 동작을 전달하면 된다. 이 패턴은 Node.prototype, Function.prototype등 prototype에도 사용할 수 있다.</p> - -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> current <span class="operator token">=</span> Object<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>valueOf<span class="punctuation token">;</span> - -<span class="comment token">// 현재 설정한 "-prop-value" 속성은 cross-cutting 이고 </span> -<span class="comment token">// 항상 같은 prototype chain이 아니기 때문에, 이 Object.prototype을 바꾸고 싶다.</span> -Object<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>valueOf <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'-prop-value'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">[</span><span class="string token">'-prop-value'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="comment token">// 이 객체 내 속성(property)이 하나가 아니라면, 현재 동작을 재구성한 것으로부터 - // 기본 동작으로 되돌리자(복구). </span> - <span class="comment token">// apply 동작은 다른 언어에서의 "super"와 유사하다.</span> - <span class="comment token">// 비록 valueOf()가 매개변수를 받지못하더라도, 다른 훅에서 있을 것이다.</span> - <span class="keyword token">return</span> current<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code> -</pre> - -<p>JavaScript는 엄밀히 말해서 하위클래스(sub-class) 객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책입니다. 예를 들어:</p> - -<pre class="brush: js notranslate">var Person = function() { - this.canTalk = true; -}; - -Person.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name); - } -}; - -var Employee = function(name, title) { - Person.call(this); - this.name = name; - this.title = title; -}; - -Employee.prototype = Object.create(Person.prototype); -Employee.prototype.constructor = Employee; - -Employee.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name + ', the ' + this.title); - } -}; - -var Customer = function(name) { - Person.call(this); - this.name = name; -}; - -Customer.prototype = Object.create(Person.prototype); -Customer.prototype.constructor = Customer; - -var Mime = function(name) { - Person.call(this); - this.name = name; - this.canTalk = false; -}; - -Mime.prototype = Object.create(Person.prototype); -Mime.prototype.constructor = Mime; - -var bob = new Employee('Bob', 'Builder'); -var joe = new Customer('Joe'); -var rg = new Employee('Red Green', 'Handyman'); -var mike = new Customer('Mike'); -var mime = new Mime('Mime'); - -bob.greet(); -// Hi, I am Bob, the Builder - -joe.greet(); -// Hi, I am Joe - -rg.greet(); -// Hi, I am Red Green, the Handyman - -mike.greet(); -// Hi, I am Mike - -mime.greet(); -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">스펙</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>초기 정의. JavaScript 1.0에서 구현됨.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.builtins.Object.prototype")}}</p> - -<h2 id="참조">참조</h2> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체지향 JavaScript 소개</a></li> -</ul> - -<div id="dicLayer" style=""> -<div id="dicLayerContents"><dicword style="user-select: text;">Even though valueOf() doesn't take arguments, some other hook may.</dicword><dicword style="user-select: text;"><dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"></dicimg> <input>Eng<dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"></dicimg></dicword><br> -<br> -<br> -<br> -valueOf ()가 인수를받지 않더라도 다른 후크가있을 수 있습니다.</div> - -<div id="dicLayerSub"></div> -</div> - -<div id="dicRawData" style="display: none;">{"mean":["take<br/><br/>[동사]\n\t\t ~ sth (with you) | ~ sth (to sb) | ~ (sb) sth\n\t\t \t\t(어떤 것을 한 곳에서 다른 곳으로) 가지고 가다[이동시키다]","though<br/><br/>[접속사]\n\t\t \t\t(비록) …이긴 하지만[…인데도/…일지라도]\n\n\t\t\t\t\t\t\t\t유의어 although","value<br/><br/>[명사]\n\t\t \t\t(경제적인) 가치\n\n\t\t 참조 market value, street value","other<br/><br/>[형용사, 대명사]\n\t\t \t\t(그 밖의) 다른; 다른 사람[것]\n\n\t\t 참조 another","may<br/><br/>[법조동사]\n\t\t \t\t(가능성을 나타내어) …일지도 모른다[…일 수도 있다]"],"word":"\n\t\t\t\t\t\ttake\n \t\t\t\n\t \t\n\t ","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=3cd8f6567dcc35f67a9d216930e402fa1d2763157705ff3d60620d707b1d60814356971c64e54c7e792964a50a21103d6cc3ad8a5c30e6d7e9205e93c8517e38f8e5b191d1700b6773822766eee45672523cb75822e10196643a3baf5d3dabb04974f799e77e47c4f2db9476dbfb3e4bf612100b4fa8e918f972d80a449bc79c","phoneticSymbol":"[teɪk]"}</div> - -<div id="dicLayerLoader" style="top: 3322px; left: 514px;"></div> diff --git a/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html b/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html deleted file mode 100644 index 2e393d68d3..0000000000 --- a/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype -tags: - - JavaScript - - Promise - - Property - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Promise.prototype</code></strong> 속성은 {{jsxref("Promise")}} 생성자의 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="설명">설명</h2> - -<p>{{jsxref("Promise")}} 인스턴스는 {{jsxref("Promise.prototype")}}을 상속합니다. 모든 <code>Promise</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Promise.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 만드는 함수를 반환합니다. 기본값은 {{jsxref("Promise")}} 함수입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("Promise.prototype.catch()")}}</dt> - <dd>프로미스(promise)에 거부 처리기 콜백을 추가하고 호출된 경우 콜백의 반환값 또는 프로미스가 대신 이행된 경우 그 원래 이행(fulfillment)값으로 결정하는(resolving) 새 프로미스를 반환합니다.</dd> - <dt>{{jsxref("Promise.prototype.then()")}}</dt> - <dd>프로미스에 이행 또는 거부 처리기를 추가하고 호출된 처리기의 반환값 또는 프로미스가 처리되지 않은 경우 그 원래 처리된(settled) 값으로 결정하는 새 프로미스를 반환합니다 (즉 관련 처리기 <code>onFulfilled</code> 또는 <code>onRejected</code>가 <code>undefined</code>인 경우).</dd> - <dt>{{jsxref("Promise.prototype.finally()")}}</dt> - <dd>Appends a handler to the promise, and returns a new promise which is resolved when the original promise is resolved. The handler is called when the promise is settled, whether fulfilled or rejected.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>초기 정의.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("javascript.builtins.Promise.prototype")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/proxy/handler/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/handler/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 --- <div>{{JSRef}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/proxy/handler/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/handler/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 --- <div>{{JSRef}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/set/prototype/index.html b/files/ko/web/javascript/reference/global_objects/set/prototype/index.html deleted file mode 100644 index 8183d348a9..0000000000 --- a/files/ko/web/javascript/reference/global_objects/set/prototype/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Set.prototype -slug: Web/JavaScript/Reference/Global_Objects/Set/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Property - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Set.prototype</strong></code> 속성은 {{jsxref("Set")}} 생성자의 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="설명">설명</h2> - -<p>{{jsxref("Set")}} 인스턴스는 {{jsxref("Set.prototype")}}에서 상속합니다. 모든 <code>Set</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Set.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 {{jsxref("Set")}} 함수입니다.</dd> - <dt>{{jsxref("Set.prototype.size")}}</dt> - <dd><code>Set</code> 객체 내 값의 개수를 반환합니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt> - <dd><code>Set</code> 객체에 주어진 값을 갖는 새로운 요소를 추가합니다. <code>Set</code> 객체를 반환합니다.</dd> - <dt>{{jsxref("Set.prototype.clear()")}}</dt> - <dd><code>Set</code> 객체에서 모든 요소를 제거합니다.</dd> - <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt> - <dd><code>value</code>와 관련된 요소를 제거하고 <code>Set.prototype.has(value)</code>가 이전에 반환했던 값을 반환합니다. <code>Set.prototype.has(value)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> - <dt>{{jsxref("Set.prototype.entries()")}}</dt> - <dd>삽입 순으로 <code>Set</code> 객체 내 각 값에 대한 <strong><code>[value, value]</code> 배열</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다. 이는 <code>Map</code> 객체와 비슷하게 유지되므로 여기서 각 항목은 그 <em>key</em>와 <em>value</em>에 대해 같은 값을 갖습니다.</dd> - <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>삽입 순으로 <code>Set</code> 객체 내에 있는 각 값에 대해 한 번 <code>callbackFn</code>을 호출합니다. <code>thisArg</code> 매개변수가 <code>forEach</code>에 제공된 경우, 이는 각 콜백에 대해 <code>this</code> 값으로 사용됩니다.</dd> - <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt> - <dd><code>Set</code> 객체 내 주어진 값을 갖는 요소가 있는지를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> - <dt>{{jsxref("Set.prototype.keys()")}}</dt> - <dd><strong><code>values()</code></strong> 함수와 같은 함수로 삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 값을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> - <dt>{{jsxref("Set.prototype.values()")}}</dt> - <dd>삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 <strong>값</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> - <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt> - <dd>삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 <strong>값</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>초기 정의.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Set.prototype")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html deleted file mode 100644 index 849b70c1c6..0000000000 --- a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: SharedArrayBuffer.prototype -slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype -tags: - - JavaScript - - SharedArrayBuffer - - TypedArrays - - 공유 메모리 - - 속성 -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>SharedArrayBuffer.prototype</code></strong> 속성은 {{jsxref("SharedArrayBuffer")}} 객체를위한 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="설명">설명</h2> - -<p><code>SharedArrayBuffer</code> 인스턴스는 <code>SharedArrayBuffer.prototype</code> 을 상속합니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 변경하여 모든 <code>SharedArrayBuffer</code> 인스턴스에 변화를 줄 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt>SharedArrayBuffer.prototype.constructor</dt> - <dd>객체의 프로토타입을 생성하는 함수를 지정합니다. 초기 값은 <code>SharedArrayBuffer</code> 생성자에 내장된 표준입니다.</dd> - <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>배열의 바이트 크기입니다. 배열이 생성되고 수정이 불가할 때 지정됩니다. <strong>읽기 전용입니다.</strong></dd> -</dl> - -<h2 id="메소드">메소드</h2> - -<dl> - <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}</dt> - <dd><code>begin</code> 부터 <code>end</code> 까지의 모든 것을 포함하는 <code>SharedArrayBuffer</code> 바이트의 복사본을 컨텐츠로 갖는 새로운 <code>SharedArrayBuffer</code> 를 반환합니다. <code>begin</code> 또는 <code>end</code> 가 음수인 경우, 인덱스는 배열의 끝에서부터이고 반대인 경우 시작부터입니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">코멘트</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>ES2017 에서 초기 정의.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p> - -<h2 id="함께_보기">함께 보기</h2> - -<ul> - <li>{{jsxref("SharedArrayBuffer")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/prototype/index.html b/files/ko/web/javascript/reference/global_objects/string/prototype/index.html deleted file mode 100644 index fa32999954..0000000000 --- a/files/ko/web/javascript/reference/global_objects/string/prototype/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype -tags: - - JavaScript - - Property - - Prototype - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -<div>{{JSRef("Global_Objects", "String")}}</div> - -<h2 id="Summary" name="Summary">요약</h2> - -<p><strong><code>String.prototype</code></strong> 프라퍼티는 {{jsxref("Global_Objects/String", "String")}} 프로토타입 오브젝트를 표현하고 있습니다.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">설명</h2> - -<p>모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들은 <code>String.prototype</code>를 상속합니다. <code>String</code> 프라퍼티 오브젝트를 변경하면, 그 변경은 모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들에 영향을 주게 됩니다.</p> - -<h2 id="Properties" name="Properties">Properties</h2> - -<dl> - <dt><code>String.prototype.constructor</code></dt> - <dd>오브젝트의 프로토타입을 생성하는 함수를 명세합니다.</dd> - <dt>{{jsxref("String.prototype.length")}}</dt> - <dd>문자열의 길이를 반영합니다.</dd> - <dt><code><em>N</em></code></dt> - <dd><em>N</em>번째 위치에 있는 문자에 접근하기 위해 사용합니다. <em>N</em> 은 0과 {{jsxref("String.length", "length")}}보다 작은 값 사이에 있는 양의 정수입니다. 이 퍼라퍼티들은 읽기 전용(read-only) 속성을 가지고 있습니다. </dd> -</dl> - -<h2 id="Methods" name="Methods">메서드</h2> - -<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">HTML과 관련이 없는 메서드</h3> - -<dl> - <dt>{{jsxref("String.prototype.charAt()")}}</dt> - <dd>문자열 내 특정 위치(index)에 있는 문자를 반환합니다.</dd> - <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> - <dd>문자열 내 주어진 위치(index)에 있는 문자의 유니코드 값을 반환합니다.</dd> - <dt>{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}</dt> - <dd>주어진 위치에 있는 UTF-16으로 인코딩된 코드 포인터값인 음수가 아닌 정수값을 반환합니다. </dd> - <dt>{{jsxref("String.prototype.concat()")}}</dt> - <dd>두 문자열의 문자를 합쳐서 새로운 문자열로 만든 다음, 그 새로운 문자열을 반환합니다. </dd> - <dt>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>문자열 내에 찾고자 하는 문자열이 있는지를 확인합니다. </dd> - <dt>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</dt> - <dd>문자열에서 특정 문자열로 끝나는지를 확인할 수 있습니다.</dd> - <dt>{{jsxref("String.prototype.indexOf()")}}</dt> - <dd>{{jsxref("Global_Objects/String", "String")}} 오브젝트에 있는 특정 값이 일치하는 첫 번째 인덱스 값을 반환하며, 일치하는 값이 없을 경우에는 -1을 반환합니다.</dd> - <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> - <dd><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String" title="String 글로벌 오브젝트는 문자열의 생성자, 또는 문자열의 순서입니다."><code>String</code></a> 오브젝트에서 <code>fromIndex</code>로부터 반대방향으로 찾기 시작하여 특정 값이 일치하는 마지막 인덱스를 반환합니다. 문자열에서 일치하는 특정 값이 없으면 <code>-1</code>을 리턴합니다.</dd> - <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> - <dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd> - <dt>{{jsxref("String.prototype.match()")}}</dt> - <dd>Used to match a regular expression against a string.</dd> - <dt>{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}</dt> - <dd>Returns the Unicode Normalization Form of the calling string value.</dd> - <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Wraps the string in double quotes ("<code>"</code>").</s></dd> - <dt>{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}</dt> - <dd>Returns a string consisting of the elements of the object repeated the given times.</dd> - <dt>{{jsxref("String.prototype.replace()")}}</dt> - <dd>Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.</dd> - <dt>{{jsxref("String.prototype.search()")}}</dt> - <dd>Executes the search for a match between a regular expression and a specified string.</dd> - <dt>{{jsxref("String.prototype.slice()")}}</dt> - <dd>Extracts a section of a string and returns a new string.</dd> - <dt>{{jsxref("String.prototype.split()")}}</dt> - <dd>Splits a {{jsxref("Global_Objects/String", "String")}} object into an array of strings by separating the string into substrings.</dd> - <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt> - <dd>Determines whether a string begins with the characters of another string.</dd> - <dt>{{jsxref("String.prototype.substr()")}}</dt> - <dd>Returns the characters in a string beginning at the specified location through the specified number of characters.</dd> - <dt>{{jsxref("String.prototype.substring()")}}</dt> - <dd>Returns the characters in a string between two indexes into the string.</dd> - <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> - <dd>The characters within a string are converted to lower case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> - <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> - <dd>The characters within a string are converted to upper case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd> - <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> - <dd>Returns the calling string value converted to lower case.</dd> - <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Returns an object literal representing the specified object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> - <dt>{{jsxref("String.prototype.toString()")}}</dt> - <dd>Returns a string representing the specified object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> - <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> - <dd>Returns the calling string value converted to uppercase.</dd> - <dt>{{jsxref("String.prototype.trim()")}}</dt> - <dd>Trims whitespace from the beginning and end of the string. Part of the ECMAScript 5 standard.</dd> - <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> - <dd>Trims whitespace from the left side of the string.</dd> - <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> - <dd>Trims whitespace from the right side of the string.</dd> - <dt>{{jsxref("String.prototype.valueOf()")}}</dt> - <dd>Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> - <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Iterator</code> object that iterates over the code points of a String value, returning each code point as a String value.</dd> -</dl> - -<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">HTML wrapper methods</h3> - -<p>These methods are of limited use, as they provide only a subset of the available HTML tags and attributes.</p> - -<dl> - <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("big")}}</dd> - <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("blink")}}</dd> - <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("b")}}</dd> - <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("tt")}}</dd> - <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> - <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> - <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> - <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> - <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("i")}}</dd> - <dt>{{jsxref("String.prototype.link()")}}</dt> - <dd>{{htmlattrxref("href", "a", "<a href=\"rul\">")}} (link to URL)</dd> - <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("small")}}</dd> - <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("strike")}}</dd> - <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sub")}}</dd> - <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sup")}}</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{jsxref("Global_Objects/String", "String")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/startswith/index.html b/files/ko/web/javascript/reference/global_objects/string/startswith/index.html index 41eb064129..19fce8ea97 100644 --- a/files/ko/web/javascript/reference/global_objects/string/startswith/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/startswith/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith <p>문자열이 검색 문자열로 시작하면 <code>true</code>, 아니면 <code>false</code>.</p> -<h2 id="설명"><span style="display: none;"> </span><span style="display: none;"> </span>설명</h2> +<h2 id="설명"><span class="hidden"> </span><span class="hidden"> </span>설명</h2> <p><code>startsWith</code> 메소드로 어떤 문자열이 다른 문자열로 시작하는지 확인 할 수 있습니다. 대소문자를 구분합니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html deleted file mode 100644 index aa38e80799..0000000000 --- a/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>SyntaxError.prototype </strong></code>속성은 {{jsxref("SyntaxError")}} 객체의 생성자 프로토타입을 표현합니다.</p> - -<h2 id="설명">설명</h2> - -<p>모든 {{jsxref("SyntaxError")}} 인스턴스는 <code>SyntaxError.prototype </code>객체로부터<code> </code>상속 받습니다. 또한, 속성이나 메소드를 추가할 때 모든 인스턴스에 프로토타입을 사용 할 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>SyntaxError.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 생성하는 함수를 명시합니다.</dd> - <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> - <dd>에러 메시지. 비록 ECMA-262는 {{jsxref("SyntaxError")}} 가 고유의 <code>message</code> 속성을 제공해야 한다고 명시하고 있지만, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 에서는, {{jsxref("Error.prototype.message")}}를 상속 받습니다. </dd> - <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> - <dd>에러명. {{jsxref("Error")}}로부터 상속 받습니다.</dd> - <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> - <dd>에러를 발생시킨 파일의 경로. {{jsxref("Error")}}로부터 상속 받습니다.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> - <dd>에러가 발생한 파일의 코드 라인 넘버. {{jsxref("Error")}}로부터 상속 받습니다.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> - <dd>에러가 발생된 라인의 컬럼 넘버. {{jsxref("Error")}}로부터 상속 받습니다.</dd> - <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> - <dd>스택 트레이스. {{jsxref("Error")}}로부터 상속 받습니다.</dd> -</dl> - -<h2 id="메소드">메소드</h2> - -<p>비록 {{jsxref("SyntaxError")}} 프로토타입 객체는 고유의 메소드를 가지고 있지는 않지만, {{jsxref("SyntaxError")}} 인스턴스는 몇 가지의 메소드를 프로토타입 체인을 통하여 상속 받습니다.</p> - -<h2 id="스펙">스펙</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>초기 정의.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td><code><em>NativeError</em>.prototype</code>로 정의.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td><code><em>NativeError</em>.prototype</code>로 정의.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td><code><em>NativeError</em>.prototype</code>로 정의.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="참조">참조</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html deleted file mode 100644 index 75f63010bf..0000000000 --- a/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: TypedArray.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype -tags: - - JavaScript - - Property - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong> 속성(property)은 {{jsxref("TypedArray")}} 생성자에 대한 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="설명">설명</h2> - -<p>{{jsxref("TypedArray")}} 인스턴스는 {{jsxref("TypedArray.prototype")}}을 상속합니다. 모든 <em>TypedArray</em> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있으며, <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p> - -<p>상속에 관한 자세한 정보를 위해 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#설명"><em>TypedArray</em></a>에 대한 설명도 참조하세요.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>TypedArray.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 해당 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 함수 중 하나입니다.</dd> - <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt> - <dd>형식화 배열에 의해 참조되는 {{jsxref("ArrayBuffer")}}를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 길이(단위 바이트)를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 오프셋(단위 바이트)을 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> - <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt> - <dd>형식화 배열 내 보유한 요소의 수를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> - <dd>배열 내부 일련의 배열 요소를 복사합니다. {{jsxref("Array.prototype.copyWithin()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> - <dd>배열 내 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다. {{jsxref("Array.prototype.entries()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> - <dd>배열의 모든 요소가 함수로 제공되는 테스트를 통과하는지를 테스트합니다. {{jsxref("Array.prototype.every()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> - <dd>시작 인덱스부터 끝 인덱스까지 배열의 모든 요소를 고정값으로 채웁니다. {{jsxref("Array.prototype.fill()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> - <dd>제공되는 필터링 함수가 true를 반환하는 이 배열의 모든 요소를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.filter()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> - <dd>배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 값 또는 못 찾은 경우 <code>undefined</code>를 반환합니다. {{jsxref("Array.prototype.find()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> - <dd>배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.findIndex()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> - <dd>배열 내 각 요소에 대해 함수를 호출합니다. {{jsxref("Array.prototype.forEach()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>형식화 배열이 특정 요소를 포함하는지를 판단해, 적절히 <code>true</code> 또는 <code>false</code>를 반환합니다. {{jsxref("Array.prototype.includes()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> - <dd>지정된 값과 같은 배열 내부 요소의 첫(최소) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.indexOf()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> - <dd>배열의 모든 요소를 문자열로 합칩니다. {{jsxref("Array.prototype.join()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> - <dd>배열의 각 인덱스에 대한 키를 포함하는 새로운 <code>Array Iterator</code>를 반환합니다. {{jsxref("Array.prototype.keys()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> - <dd>지정된 값과 같은 배열 내부 요소의 끝(최대) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.lastIndexOf()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> - <dd>이 배열의 모든 요소에 제공된 함수를 호출한 결과를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.map()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> - <dd>{{jsxref("TypedArray.prototype.copyWithin()")}}의 이전 비표준 버전.</dd> - <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> - <dd>누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduce()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> - <dd>누산기 및 배열의 각 값(우에서 좌로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduceRight()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> - <dd>배열 요소의 순서를 뒤집습니다 — 처음이 마지막이 되고 마지막이 처음이 됩니다. {{jsxref("Array.prototype.reverse()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> - <dd>형식화 배열에 여러 값을 저장합니다, 지정된 배열에서 입력 값을 읽어.</dd> - <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> - <dd>배열의 한 부분을 추출하여 새로운 배열을 반환합니다. {{jsxref("Array.prototype.slice()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> - <dd>이 배열의 적어도 한 요소가 제공된 테스트 함수를 만족하는 경우 true를 반환합니다. {{jsxref("Array.prototype.some()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> - <dd>배열의 요소를 적소에 정렬해 그 배열을 반환합니다. {{jsxref("Array.prototype.sort()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> - <dd>주어진 시작 및 끝 요소 인덱스로부터 새로운 TypedArray를 반환합니다.</dd> - <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> - <dd>배열의 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다. {{jsxref("Array.prototype.values()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> - <dd>배열 및 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Array.prototype.toLocaleString()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> - <dd>배열 및 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Array.prototype.toString()")}}도 참조.</dd> - <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> - <dd>배열의 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다.</dd> -</dl> - -<h2 id="스펙">스펙</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">스펙</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>초기 정의.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>7.0</td> - <td>{{ CompatGeckoDesktop("2") }}</td> - <td>10</td> - <td>11.6</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("2") }}</td> - <td>10</td> - <td>11.6</td> - <td>4.2</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="참조">참조</h2> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> - <li>{{jsxref("TypedArray")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html deleted file mode 100644 index fa2ad9691d..0000000000 --- a/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: WeakMap.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>WeakMap.prototype</strong></code> 속성(property)은 {{jsxref("WeakMap")}} 생성자에 대한 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="설명">설명</h2> - -<p>{{jsxref("WeakMap")}} 인스턴스는 {{jsxref("WeakMap.prototype")}}에서 상속합니다. 모든 <code>WeakMap</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> - -<p><code>WeakMap.prototype</code>은 그 자체로 그냥 평범한 객체입니다:</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>WeakMap.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakMap")}} 함수입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> - <dd><code>key</code>와 관련된 모든 값을 제거합니다. <code>WeakMap.prototype.has(key)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> - <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> - <dd><code>key</code>와 관련된 값 또는 관련 값이 없는 경우 <code>undefined</code>를 반환합니다.</dd> - <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> - <dd><code>WeakMap</code> 객체 내 <code>key</code>와 관련된 값이 있는지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> - <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> - <dd><code>WeakMap</code> 객체 내 <code>key</code>에 대해 값을 설정합니다. <code>WeakMap</code> 객체를 반환합니다.</dd> - <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement"><code>WeakMap</code> 객체에서 모든 키/값 쌍을 제거합니다. 메서드가 없는 <code>WeakMap</code> 객체를 캡슐화하여 <code>.clear()</code> 메서드가 있는 <code>WeakMap</code> 같은 객체 구현이 가능함을 주의하세요 ({{jsxref("WeakMap")}} 페이지 예 참조)</s></dd> -</dl> - -<h2 id="스펙">스펙</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">스펙</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>초기 정의.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>36</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>11</td> - <td>23</td> - <td>7.1</td> - </tr> - <tr> - <td>Ordinary object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("6.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - <tr> - <td>Ordinary object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="참조">참조</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html b/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html deleted file mode 100644 index 0c75408df5..0000000000 --- a/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: WeakSet.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>WeakSet.prototype</strong></code> 속성(property)은 {{jsxref("WeakSet")}} 생성자에 대한 프로토타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="설명">설명</h2> - -<p>{{jsxref("WeakSet")}} 인스턴스는 {{jsxref("WeakSet.prototype")}}에서 상속합니다. 모든 <code>WeakSet</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> - -<p><code>WeakSet.prototype</code>은 그 자체로 그냥 평범한 객체입니다:</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>WeakSet.prototype.constructor</code></dt> - <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakSet")}} 함수입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}</dt> - <dd><code>WeakSet</code> 객체에 주어진 값을 갖는 새로운 객체를 추가합니다.</dd> - <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}</dt> - <dd><code>value</code>와 관련된 요소를 제거합니다. <code>WeakSet.prototype.has(value)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> - <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}</dt> - <dd><code>WeakSet</code> 객체 내 주어진 값을 갖는 요소가 존재하는 지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> - <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement"><code>WeakSet</code> 객체에서 모든 요소를 제거합니다.</s></dd> -</dl> - -<h2 id="스펙">스펙</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">스펙</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>초기 정의.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>36</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{CompatNo}}</td> - <td>23</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Ordinary object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome for Android</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Ordinary object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="참조">참조</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> - <li>{{jsxref("WeakMap.prototype")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html deleted file mode 100644 index c7c1c54bab..0000000000 --- a/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: WebAssembly.Global.prototype -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>WebAssembly.Global</strong></code><strong><code>.prototype</code></strong> 속성은 {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입을 나타냅니다.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>모든 {{jsxref("WebAssembly.Global")}} 인스턴스는 <code>Global.prototype</code>에서 상속받습니다. {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입 객체는 모든 {{jsxref( "WebAssembly.Global")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt><code>Global.prototype.constructor</code></dt> - <dd>이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Global()")}} 생성자입니다.</dd> - <dt><code>Global.prototype[@@toStringTag]</code></dt> - <dd><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag">@@toStringTag</a> 속성의 초기 값은 String 값인 "WebAssembly.Global"입니다.</dd> - <dt><code>Global.prototype.value</code></dt> - <dd>전역 변수에 포함 된 값 - 전역 값을 직접 설정하고 가져 오는 데 사용할 수 있습니다.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt><code>Global.prototype.valueOf()</code></dt> - <dd>전역 변수에 포함 된 값을 반환하는 Old-style 메서드입니다.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Initial draft definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}</p> -</div> - -<div> - -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("WebAssembly.Global()")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html b/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html deleted file mode 100644 index 3e61415550..0000000000 --- a/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: 산술 연산자 -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><span class="seoSummary"><strong>산술 연산자는</strong> 숫자 값(리터럴 또는 변수)을 피연산자로 받아 하나의 숫자 값을 반환합니다.</span> 표준 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> - - - -<h2 id="덧셈"><a id="Addition" name="Addition">덧셈 (+)</a></h2> - -<p>덧셈 연산자는 숫자 피연산자를 더한 값, 또는 문자열을 연결한 값을 생성합니다.</p> - -<h3 id="구문">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> x + y -</pre> - -<h3 id="예제">예제</h3> - -<pre class="brush: js">// Number + Number -> 합 -1 + 2 // 3 - -// Boolean + Number -> 합 -true + 1 // 2 - -// Boolean + Boolean -> 합 -false + false // 0 - -// Number + String -> 연결 -5 + "foo" // "5foo" - -// String + Boolean -> 연결 -"foo" + false // "foofalse" - -// String + String -> 연결 -"foo" + "bar" // "foobar" -</pre> - -<h2 id="뺄셈_-"><a id="Subtraction" name="Subtraction">뺄셈 (-)</a></h2> - -<p>뺄셈 연산자는 두 개의 피연산자를 뺀 값을 생성합니다.</p> - -<h3 id="구문_2">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> x - y -</pre> - -<h3 id="예제_2">예제</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -"foo" - 3 // NaN</pre> - -<h2 id="나눗셈"><a id="Division" name="Division">나눗셈 (/)</a></h2> - -<p>나눗셈 연산자는 왼쪽 피연산자를 피제수로, 오른쪽 피연산자를 제수로 한 몫을 생성합니다.</p> - -<h3 id="구문_3">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> x / y -</pre> - -<h3 id="예제_3">예제</h3> - -<pre class="brush: js">1 / 2 // JavaScript에선 0.5 -1 / 2 // Java에선 0 -// (양쪽 피연산자 모두 명시적인 부동소수점 숫자가 아님) - -1.0 / 2.0 // JavaScript와 Java 둘 다 0.5 - -2.0 / 0 // JavaScript에서 Infinity -2.0 / 0.0 // 동일하게 Infinity -2.0 / -0.0 // JavaScript에서 -Infinity</pre> - -<h2 id="곱셈_*"><a id="Multiplication" name="Multiplication">곱셈 (*)</a></h2> - -<p>곱셈 연산자는 두 연산자의 곱을 생성합니다.</p> - -<h3 id="구문_4">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> x * y -</pre> - -<h3 id="예제_4">예제</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN -Infinity * Infinity // Infinity -"foo" * 2 // NaN -</pre> - -<h2 id="나머지"><a id="Remainder" name="Remainder">나머지 (%)</a></h2> - -<p>나머지 연산자는 왼쪽 피연산자를 오른쪽 피연산자로 나눴을 때의 나머지를 반환합니다. 결과는 항상 피제수의 부호를 따라갑니다.</p> - -<h3 id="구문_5">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> var1 % var2 -</pre> - -<h3 id="예제_5">예제</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5 -</pre> - -<h2 id="거듭제곱_**"><a name="Exponentiation">거듭제곱 (**)</a></h2> - -<p>거듭제곱 연산자는 첫 번째 피연산자를 밑으로, 두 번째 피연산자를 지수로 한 값을 생성합니다. 즉, <code>var1</code>과 <code>var2</code>가 변수일 때, <code>var1<sup>var2</sup></code>의 값을 생성합니다. 거듭제곱 연산자는 우결합성을 가집니다. 따라서 <code>a ** b ** c</code>는 <code>a ** (b ** c)</code>와 같습니다.</p> - -<h3 id="구문_6">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> var1 ** var2 -</pre> - -<h3 id="참고">참고</h3> - -<p>PHP와 Python 등 거듭제곱 연산자를 가진 대부분의 언어는 거듭제곱 연산자의 우선순위가 +와 - 등 단항 연산자보다 높습니다. 그러나 Bash는 단항 연산자가 거듭제곱 연산자보다 우선순위가 높은 등 일부 예외도 있습니다. JavaScript는 단항 연산자(<code>+/-/~/!/delete/void/typeof</code>)를 왼쪽 피연산자 앞에 배치할 수 없으므로, 모호한 표현도 작성할 수 없습니다.</p> - -<pre class="brush: js">-2 ** 2; -// Bash에서 4, 다른 언어에서는 -4. -// 모호한 표현이므로 JavaScript에서는 유효하지 않음 - - --(2 ** 2); -// JavaScript에서 -4, 작성자의 의도가 명확함 -</pre> - -<h3 id="예제_6">예제</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64 -</pre> - -<p>결과의 부호를 뒤집으려면 다음과 같이 작성합니다.</p> - -<pre class="brush: js">-(2 ** 2) // -4 -</pre> - -<p>거듭제곱의 밑을 음수로 강제하려면 다음과 같이 작성합니다.</p> - -<pre class="brush: js">(-2) ** 2 // 4 -</pre> - -<div class="note"> -<p><strong>참고:</strong> JavaScript는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트 연산자 ^ (논리 XOR)</a>도 가지고 있습니다. <code>**</code>와 <code>^</code>는 다릅니다. (예 : <code>2 ** 3 === 8</code>이지만 <code>2 ^ 3 === 1</code>)</p> -</div> - -<h2 id="증가"><a id="Increment" name="Increment">증가 (++)</a></h2> - -<p>증가 연산자는 피연산자를 증가(1을 덧셈)시키고, 그 값을 반환합니다.</p> - -<ul> - <li>피연산자 뒤에 붙여(예: <code>x++</code>) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다.</li> - <li>피연산자 앞에 붙여(예: <code>++x</code>) 접두사로 사용한 경우 증가한 후의 값을 반환합니다.</li> -</ul> - -<h3 id="구문_7">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> x++ or ++x -</pre> - -<h3 id="예제_7">예제</h3> - -<pre class="brush: js">// 접미사 -var x = 3; -y = x++; // y = 3, x = 4 - -// 접두사 -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="감소_--"><a id="Decrement" name="Decrement">감소 (--)</a></h2> - -<p>감소 연산자는 피연산자를 감소(1을 뺄셈)시키고, 그 값을 반환합니다.</p> - -<ul> - <li>피연산자 뒤에 붙여(예: <code>x--</code>) 접미사로 사용한 경우 감소하기 전의 값을 반환합니다.</li> - <li>피연산자 앞에 붙여(예: <code>--x</code>) 접두사로 사용한 경우 감소한 후의 값을 반환합니다.</li> -</ul> - -<h3 id="구문_8">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> x-- or --x -</pre> - -<h3 id="예제_8">예제</h3> - -<pre class="brush: js">// 접미사 -var x = 3; -y = x--; // y = 3, x = 2 - -// 접두사 -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="단항_부정_-"><a name="Unary_negation">단항 부정 (-)</a></h2> - -<p>단항 부정 연산자는 피연산자의 앞에 위치하며 부호를 뒤집습니다.</p> - -<h3 id="구문_9">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> -x -</pre> - -<h3 id="예제_9">예제</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 - -// 단항 부정 연산자는 숫자가 아닌 값을 숫자로 변환함 -var x = "4"; -y = -x; // y = -4</pre> - -<h2 id="단항_양부호"><a name="Unary_plus">단항 양부호 (+)</a></h2> - -<p>단항 양부호 연산자는 피연산자의 앞에 위치하며 피연산자의 값 그대로 평가되지만, 값이 숫자가 아닐 경우 숫자로 변환을 시도합니다. 단항 부정(-) 연산자도 숫자가 아닌 값을 변환할 수 있지만, 단항 양부호가 속도도 제일 빠르고 다른 연산도 수행하지 않으므로 선호해야 할 방법입니다. 문자열로 표현한 정수 및 부동소수점 실수, 문자열이 아닌 <code>true</code>, <code>false</code>, <code>null</code>도 변환할 수 있습니다. 10진수와 (앞에 "0x"가 붙은) 16진수 정수 모두 지원합니다. 음수도 지원하지만 16진수 음수에는 사용할 수 없습니다. 어떤 값을 분석할 수 없으면 {{jsxref("NaN")}}으로 평가됩니다.</p> - -<h3 id="구문_10">구문</h3> - -<pre class="syntaxbox"><strong>연산자:</strong> +x -</pre> - -<h3 id="예제_10">예제</h3> - -<pre class="brush: js">+3 // 3 -+"3" // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val) { return val } // NaN -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a></li> -</ul> diff --git a/files/ko/web/javascript/reference/operators/assignment_operators/index.html b/files/ko/web/javascript/reference/operators/assignment_operators/index.html deleted file mode 100644 index 93146d63cf..0000000000 --- a/files/ko/web/javascript/reference/operators/assignment_operators/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: 할당 연산자 -slug: Web/JavaScript/Reference/Operators/Assignment_Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>할당 연산자</strong>는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> - - - -<h2 id="개요">개요</h2> - -<p>기본 할당연산자는 등호(<code>=</code>)로, 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 즉, <code>x = y</code>는 <code>y</code>의 값을 <code>x</code>에 할당힙니다. 다른 할당 연산자는 보통 표준 연산의 축약형으로, 다음 표에서 종류와 예시를 확인할 수 있습니다.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>이름</th> - <th>단축 연산자</th> - <th>의미</th> - </tr> - <tr> - <td><a href="#Assignment">할당</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="#Addition_assignment">덧셈 할당</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">뺄셈 할당</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="#Multiplication_assignment">곱셈 할당</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="#Division_assignment">나눗셈 할당</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="#Remainder_assignment">나머지 연산 할당</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="#Exponentiation_assignment">지수 연산 할당</a></td> - <td><code>x **= y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">왼쪽 시프트 할당</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Right_shift_assignment">오른쪽 시프트 할당</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift_assignment">부호없는 오른쪽 시프트 할당</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_AND_assignment">비트 AND 할당</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">비트 XOR 할당</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_OR_assignment">비트 OR 할당</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h2 id="할당"><a name="Assignment">할당</a></h2> - -<p>단순 할당 연산자는 값을 변수에 할당합니다. 할당 연산자는 할당의 결과값으로 평가됩니다. 할당 연산자를 연속해서 사용해, 다수의 변수에 하나의 값을 한꺼번에 할당할 수 있습니다. 예제를 참고하세요.</p> - -<h4 id="구문">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x = y -</pre> - -<h4 id="예제">예제</h4> - -<pre class="brush: js">// 다음과 같은 변수를 가정 -// x = 5 -// y = 10 -// z = 25 - -x = y // x는 10 -x = y = z // x, y, z 모두 25 -</pre> - -<h3 id="덧셈_할당"><a name="Addition_assignment">덧셈 할당</a></h3> - -<p>덧셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 더하고, 그 결과를 변수에 할당합니다. 두 피연산자의 자료형이 덧셈 할당 연산자의 행동을 결정합니다. 덧셈 연산자처럼 합 또는 연결이 가능합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "덧셈 연산자", "#Addition", 1)}}를 참고하세요.</p> - -<h4 id="구문_2">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x += y -<strong>의미:</strong> x = x + y -</pre> - -<h4 id="예제_2">예제</h4> - -<pre class="brush: js">// 다음과 같은 변수를 가정 -// foo = "foo" -// bar = 5 -// baz = true - - -// Number + Number -> 합 -bar += 2 // 7 - -// Boolean + Number -> 합 -baz += 1 // 2 - -// Boolean + Boolean -> 합 -baz += false // 1 - -// Number + String -> 연결 -bar += 'foo' // "5foo" - -// String + Boolean -> 연결 -foo += false // "foofalse" - -// String + String -> 연결 -foo += 'bar' // "foobar" -</pre> - -<h3 id="뺄셈_할당"><a name="Subtraction_assignment">뺄셈 할당</a></h3> - -<p>뺄셈 할당 연산자는 변수에서 오른쪽 피연산자의 값을 빼고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "뺄셈 연산자", "#Subtraction", 1)}}를 참고하세요.</p> - -<h4 id="구문_3">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x -= y -<strong>의미:</strong> x = x - y -</pre> - -<h4 id="예제_3">예제</h4> - -<pre class="brush: js">// 다음과 같은 변수를 가정 -// bar = 5 - -bar -= 2 // 3 -bar -= "foo" // NaN -</pre> - -<h3 id="곱셈_할당"><a name="Multiplication_assignment">곱셈 할당</a></h3> - -<p>곱셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 곱하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "곱셈 연산자", "#Multiplication", 1)}}를 참고하세요.</p> - -<h4 id="구문_4">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x *= y -<strong>의미:</strong> x = x * y -</pre> - -<h4 id="예제_4">예제</h4> - -<pre class="brush: js">// 다음과 같은 변수를 가정 -// bar = 5 - -bar *= 2 // 10 -bar *= "foo" // NaN -</pre> - -<h3 id="나눗셈_할당"><a name="Division_assignment">나눗셈 할당</a></h3> - -<p>나눗셈 할당 연산자는 변수를 오른쪽 피연산자로 나누고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나눗셈 연산자", "#Division", 1)}}를 참고하세요.</p> - -<h4 id="구문_5">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x /= y -<strong>의미:</strong> x = x / y -</pre> - -<h4 id="예제_5">예제</h4> - -<pre class="brush: js">// 다음과 같은 변수를 가정 -// bar = 5 - -bar /= 2 // 2.5 -bar /= "foo" // NaN -bar /= 0 // Infinity -</pre> - -<h3 id="나머지_연산_할당"><a name="Remainder_assignment">나머지 연산 할당</a></h3> - -<p>나머지 연산 할당은 변수를 오른쪽 피연산자로 나눈 나머지를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나머지 연산자", "#Remainder", 1)}}를 참고하세요.</p> - -<h4 id="구문_6">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x %= y -<strong>의미:</strong> x = x % y -</pre> - -<h4 id="예제_6">예제</h4> - -<pre class="brush: js">// 다음과 같은 변수를 가정 -// bar = 5 - -bar %= 2 // 1 -bar %= "foo" // NaN -bar %= 0 // NaN -</pre> - -<h3 id="거듭제곱_할당"><a id="Exponentiation_assignment" name="Exponentiation_assignment">거듭제곱 할당</a></h3> - -<p>거듭제곱 할당 연산자는 변수를 오른쪽 피연산자만큼 거듭제곱한 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "거듭제곱 연산자", "#Exponentiation", 1)}}를 참고하세요.</p> - -<h4 id="구문_7">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x **= y -<strong>의미:</strong> x = x ** y -</pre> - -<h4 id="예제_7">예제</h4> - -<pre class="brush: js">// 다음과 같은 변수를 가정 -// bar = 5 - -bar **= 2 // 25 -bar **= "foo" // NaN</pre> - -<h3 id="왼쪽_시프트_할당"><a name="Left_shift_assignment">왼쪽 시프트 할당</a></h3> - -<p>왼쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 왼쪽으로 이동하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}}를 참고하세요.</p> - -<h4 id="구문_8">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x <<= y -<strong>의미:</strong> x = x << y -</pre> - -<h4 id="예제_8">예제</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar <<= 2; // 20 (00000000000000000000000000010100) -</pre> - -<h3 id="오른쪽_시프트_할당"><a name="Right_shift_assignment">오른쪽 시프트 할당</a></h3> - -<p>오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}}를 참고하세요.</p> - -<h4 id="구문_9">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x >>= y -<strong>의미:</strong> x = x >> y -</pre> - -<h4 id="예제_9">예제</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar >>= 2; // 1 (00000000000000000000000000000001) - -var bar -5; // (-00000000000000000000000000000101) -bar >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h3 id="부호_없는_오른쪽_시프트_할당"><a name="Unsigned_right_shift_assignment">부호 없는 오른쪽 시프트 할당</a></h3> - -<p>부호 없는 오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}}을 참고하세요.</p> - -<h4 id="구문_10">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x >>>= y -<strong>의미:</strong> x = x >>> y -</pre> - -<h4 id="예제_10">예제</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar >>>= 2; // 1 (00000000000000000000000000000001) - -var bar = -5; // (-00000000000000000000000000000101) -bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h3 id="비트_AND_할당"><a name="Bitwise_AND_assignment">비트 AND 할당</a></h3> - -<p>비트 AND 할당 연산자는 양쪽 피연산자의 이진 표현을 AND 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은{{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}}을 참고하세요.</p> - -<h4 id="구문_11">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x &= y -<strong>의미:</strong> x = x & y -</pre> - -<h4 id="예제_11">예제</h4> - -<pre class="brush: js">var bar = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -bar &= 2; // 0 -</pre> - -<h3 id="비트_XOR_할당"><a name="Bitwise_XOR_assignment">비트 XOR 할당</a></h3> - -<p>비트 XOR 할당 연산자는 양쪽 피연산자의 이진 표현을 XOR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}를 참고하세요.</p> - -<h4 id="구문_12">구문</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x ^= y -<strong>의미:</strong> x = x ^ y -</pre> - -<h4 id="예제_12">예제</h4> - -<pre class="brush: js">var bar = 5; -bar ^= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h3 id="비트_OR_할당"><a name="Bitwise_OR_assignment">비트 OR 할당</a></h3> - -<p>비트 OR 할당 연산자는 양쪽 피연산자의 이진 표현을 OR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}를 참고하세요.</p> - -<h4 id="문법">문법</h4> - -<pre class="syntaxbox"><strong>연산자:</strong> x |= y -<strong>의미:</strong> x = x | y -</pre> - -<h4 id="예제_13">예제</h4> - -<pre class="brush: js">var bar = 5; -bar |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="예제_14">예제</h2> - -<h3 id="다른_할당_연산자를_갖는_왼쪽_피연산자">다른 할당 연산자를 갖는 왼쪽 피연산자</h3> - -<p>드물게, 할당 연산자(예: <code>x += y</code>)와 그 의미를 나타낸 표현(<code>x = x + y</code>)이 동일하지 않은 경우가 있습니다. 할당 연산자의 왼쪽 피연산자가 다른 할당 연산자를 포함할 때, 왼쪽 피연산자는 한 번만 평가됩니다. 예를 들면 다음과 같습니다.</p> - -<pre class="brush: js">a[i++] += 5 // i는 한 번만 평가됨 -a[i++] = a[i++] + 5 // i는 두 번 평가됨 -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.operators.assignment")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">산술 연산자</a></li> -</ul> diff --git a/files/ko/web/javascript/reference/operators/bitwise_operators/index.html b/files/ko/web/javascript/reference/operators/bitwise_operators/index.html deleted file mode 100644 index 4cc5ab7b5a..0000000000 --- a/files/ko/web/javascript/reference/operators/bitwise_operators/index.html +++ /dev/null @@ -1,541 +0,0 @@ ---- -title: 비트 연산자 -slug: Web/JavaScript/Reference/Operators/Bitwise_Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>비트 연산자</strong>는 피연산자를 10진수, 16진수, 8진수가 아니라, 32개의 비트(0과 1) 집합으로 취급합니다. 예를 들어, 10진수 9의 2진수 표기법은 1001입니다. 이렇게, 비트 연산자는 값의 2진수 표현을 사용해 연산하지만, 결과는 표준 JavaScript 숫자 값으로 반환합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> - - - -<p>다음은 JavaScript의 비트 연산자를 요약한 표입니다.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>연산자</th> - <th>사용방법</th> - <th>설명</th> - </tr> - <tr> - <td><a href="#Bitwise_AND">비트 AND</a></td> - <td><code>a & b</code></td> - <td>피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이면 그 비트값에 1을 반환.</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">비트 OR</a></td> - <td><code>a | b</code></td> - <td>피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이거나 한 쪽이 1이면 1을 반환.</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">비트 XOR</a></td> - <td><code>a ^ b</code></td> - <td>피연산자를 비트로 바꿨을 때 대응하는 비트가 서로 다르면 1을 반환.</td> - </tr> - <tr> - <td><a href="#Bitwise_NOT">비트 NOT</a></td> - <td><code>~ a</code></td> - <td>피연산자의 반전된 값을 반환.</td> - </tr> - <tr> - <td><a href="#Left_shift">왼쪽 시프트</a></td> - <td><code>a << b</code></td> - <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the left, shifting in zeros from the right.</td> - </tr> - <tr> - <td><a href="#Right_shift">부호 유지 오른쪽 시프트</a></td> - <td><code>a >> b</code></td> - <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the right, discarding bits shifted off.</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">부호 버림 오른쪽 시프트</a></td> - <td><code>a >>> b</code></td> - <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the right, discarding bits shifted off, and shifting in zeros from the left.</td> - </tr> - </tbody> -</table> - -<h2 id="부호_있는_32비트_정수">부호 있는 32비트 정수</h2> - -<p>The operands of all bitwise operators are converted to signed 32-bit integers in two's <a href="https://en.wikipedia.org/wiki/Method_of_complements">complement format</a>, except for zero-fill right shift which results in an unsigned 32-bit integer.</p> - -<p><em>Two's complement format</em> means that a number's negative counterpart (e.g. <code>5</code> vs. <code>-5</code>) is all the number's bits inverted (bitwise NOT of the number, or <em>ones' complement</em> of the number) plus one.</p> - -<p>For example, the following encodes the integer <code>314</code>:</p> - -<pre>00000000000000000000000100111010 -</pre> - -<p>The following encodes <code>~314</code>, i.e. the one's complement of <code>314</code>:</p> - -<pre>11111111111111111111111011000101 -</pre> - -<p>Finally, the following encodes <code>-314,</code> i.e. the two's complement of <code>314</code>:</p> - -<pre>11111111111111111111111011000110 -</pre> - -<p>The two's complement guarantees that the left-most bit is 0 when the number is positive and 1 when the number is negative. Thus, it is called the <em>sign bit</em>.</p> - -<p>The number <code>0</code> is the integer that is composed completely of 0 bits.</p> - -<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) -</pre> - -<p>The number <code>-1</code> is the integer that is composed completely of 1 bits.</p> - -<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) -</pre> - -<p>The number <code>-2147483648</code> (hexadecimal representation: <code>-0x80000000</code>) is the integer that is composed completely of 0 bits except the first (left-most) one.</p> - -<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) -</pre> - -<p>The number <code>2147483647</code> (hexadecimal representation: <code>0x7fffffff</code>) is the integer that is composed completely of 1 bits except the first (left-most) one.</p> - -<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) -</pre> - -<p>The numbers <code>-2147483648</code> and <code>2147483647</code> are the minimum and the maximum integers representable throught a 32bit signed number.</p> - -<h2 id="비트_논리_연산자">비트 논리 연산자</h2> - -<p>비트 논리 연산자는 다음과 같이 사용됩니다.</p> - -<ul> - <li>피연산자는 32비트 정수로 변환되고, 이진법으로 표현됩니다 (0과 1).</li> - <li>이진법으로 표현된 첫 번째 피연산자는 두 번째 피연산자와 쌍을 이룹니다: 첫 번째는 첫 번째 비트끼리, 두 번째는 두 번째 비트끼리...</li> - <li>연산자는 각각의 비트쌍에 적용되고, 결과 또한 이진법으로 구성됩니다.</li> -</ul> - -<h3 id="비트_AND"><a id="Bitwise_AND" name="Bitwise_AND">& (비트 AND)</a></h3> - -<p>비트 연산자 AND를 비트 쌍으로 실행합니다.</p> - -<p>Performs the AND operation on each pair of bits. <code>a</code> AND <code>b</code> yields 1 only if both <code>a</code> and <code>b</code> are 1. The truth table for the AND operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>Bitwise ANDing any number <code>x</code> with <code>0</code> yields <code>0</code>. <span style="letter-spacing: -0.00278rem;">Bitwise ANDing any number <code>x</code> with <code>-1</code> yields <code>x</code>.</span></p> - -<h3 id="비트_OR"><a id="Bitwise_OR" name="Bitwise_OR">| (비트 OR)</a></h3> - -<p>Performs the OR operation on each pair of bits. <code>a</code> OR <code>b</code> yields 1 if either <code>a</code> or <code>b</code> is 1. The truth table for the OR operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Bitwise ORing any number x with 0 yields x.</p> - -<p>Bitwise ORing any number x with -1 yields -1.</p> - -<h3 id="비트_XOR"><a id="Bitwise_XOR" name="Bitwise_XOR">^ (비트 XOR)</a></h3> - -<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the XOR operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Bitwise XORing any number x with 0 yields x.</p> - -<p>Bitwise XORing any number x with -1 yields ~x.</p> - -<h3 id="비트_NOT"><a id="Bitwise_NOT" name="Bitwise_NOT">~ (비트 NOT)</a></h3> - -<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the NOT operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p>Bitwise NOTing any number x yields -(x + 1). For example, ~5 yields -6.</p> - -<h2 id="비트_시프트_연산자">비트 시프트 연산자</h2> - -<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p> - -<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p> - -<h3 id="<<_Left_shift"><a id="Left_shift" name="Left_shift"><< (Left shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p> - -<p>For example, <code>9 << 2</code> yields 36:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Bitwise shifting any number <strong>x</strong> to the left by <strong>y</strong> bits yields <strong>x * 2^y</strong>.</p> - -<h3 id=">>_Sign-propagating_right_shift"><a id="Right_shift" name="Right_shift">>> (Sign-propagating right shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p> - -<p>For example, <code>9 >> 2</code> yields 2:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Likewise, <code>-9 >> 2</code> yields -3, because the sign is preserved:</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_Zero-fill_right_shift"><a id="Unsigned_right_shift" name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p> - -<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields -3):</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="예제">예제</h2> - -<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> - -<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p> - -<p>Suppose there are 4 flags:</p> - -<ul> - <li>flag A: we have an ant problem</li> - <li>flag B: we own a bat</li> - <li>flag C: we own a cat</li> - <li>flag D: we own a duck</li> -</ul> - -<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> - -<pre class="brush: js">var flags = 5; // binary 0101 -</pre> - -<p>This value indicates:</p> - -<ul> - <li>flag A is true (we have an ant problem);</li> - <li>flag B is false (we don't own a bat);</li> - <li>flag C is true (we own a cat);</li> - <li>flag D is false (we don't own a duck);</li> -</ul> - -<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> - -<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeros (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> - -<pre class="brush: js">// if we own a cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> - -<pre class="brush: js">// if we own a bat or we own a cat -if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true - // do stuff -} -</pre> - -<pre class="brush: js">// if we own a bat or cat -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // do stuff -} -</pre> - -<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> - -<pre class="brush: js">// yes, we own a cat and a duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> - -<pre class="brush: js">// no, we don't have an ant problem or own a cat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> - -<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> - -<pre class="brush: js">// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat -// same thing for cats -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Finally, the flags can all be flipped with the NOT operator:</p> - -<pre class="brush: js">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Conversion_snippets">Conversion snippets</h3> - -<p>Convert a binary <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code> to a decimal <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code>:</p> - -<pre class="brush: js">var sBinString = "1011"; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // prints 11, i.e. 1011 -</pre> - -<p>Convert a decimal <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code> to a binary <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code>:</p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // prints 1011, i.e. 11 -</pre> - -<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> - -<p>If you have to create many masks from some <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code> values, you can automatize the process:</p> - -<pre class="brush: js">function createMask () { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 -var mask2 = createMask(false, false, true); // 4, i.e.: 0100 -var mask3 = createMask(true); // 1, i.e.: 0001 -// etc. - -alert(mask1); // prints 11, i.e.: 1011 -</pre> - -<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> - -<p>If you want to create an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">array</a></code> of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">booleans</a></code> from a mask you can use this code:</p> - -<pre class="brush: js">function arrayFromMask (nMask) { - // nMask must be between -2147483648 and 2147483647 - if (nMask > 0x7fffffff || nMask < -0x80000000) { throw new TypeError("arrayFromMask - out of range"); } - for (var nShifted = nMask, aFromMask = []; nShifted; aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var array1 = arrayFromMask(11); -var array2 = arrayFromMask(4); -var array3 = arrayFromMask(1); - -alert("[" + array1.join(", ") + "]"); -// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 -</pre> - -<p>You can test both algorithms at the same time…</p> - -<pre class="brush: js">var nTest = 19; // our custom mask -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>For didactic purpose only (since there is the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code> containing the binary representation of a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code>, rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">array</a></code> of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">booleans</a></code>:</p> - -<pre class="brush: js">function createBinaryString (nMask) { - // nMask must be between -2147483648 and 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = createBinaryString(11); -var string2 = createBinaryString(4); -var string3 = createBinaryString(1); - -alert(string1); -// prints 00000000000000000000000000001011, i.e. 11 -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-not-operator', 'Bitwise NOT Operator')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-bitwise-operators', 'Binary Bitwise Operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.operators.bitwise")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90(Logical_Operators)">논리 연산자</a></li> -</ul> diff --git a/files/ko/web/javascript/reference/operators/comparison_operators/index.html b/files/ko/web/javascript/reference/operators/comparison_operators/index.html deleted file mode 100644 index cf5ae3afa2..0000000000 --- a/files/ko/web/javascript/reference/operators/comparison_operators/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: 비교 연산자 -slug: Web/JavaScript/Reference/Operators/Comparison_Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있습니다. 엄격(일치) 비교(<code>===</code>)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참입니다. 추상(동등) 비교(<code>==</code>)는 비교 전에 두 피연산자를 동일한 자료형으로 변환합니다. 관계 추상 비교(<code><=</code>)의 경우 {{glossary("primitive", "원시값")}}으로 바꾸고, 같은 자료형으로 다시 바꾼후 비교를 수행합니다.</p> - -<p>문자열의 경우 {{glossary("unicode", "유니코드")}} 값을 사용한 사전순으로 비교합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> - - - -<p>비교 연산의 특징은 다음과 같습니다.</p> - -<ul> - <li>두 문자열이 같은 문자 시퀀스로 구성되고, 같은 길이를 가지며, 같은 위치에 같은 문자가 존재하면 일치합니다.</li> - <li>두 숫자는 숫자로서 같은 값(같은 숫자 값)이면 일치합니다. {{jsxref("NaN")}}은 자기 자신을 포함한 그 무엇과도 동등하지 않습니다. <code>+0</code>과 <code>-0</code>은 서로 일치합니다.</li> - <li>두 불리언은 둘 다 <code>true</code>거나 <code>false</code>이면 일치합니다.</li> - <li>서로 다른 두 객체는 절대 일치하지도, 동등하지도 않습니다.</li> - <li>객체를 비교하는 표현식은 두 피연산자가 동일한 객체를 참조하는 경우에만 참입니다.</li> - <li>{{jsxref("null")}}과 {{jsxref("undefined")}}는 자기 자신과 일치하며, 서로 동등합니다.</li> -</ul> - -<h2 id="동치_연산자">동치 연산자</h2> - -<h3 id="동등_연산자"><a name="Equality">동등 연산자 (==)</a></h3> - -<p>동등 연산자는 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후, 엄격 비교를 수행합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보고 있는지 판별합니다.</p> - -<h4 id="구문">구문</h4> - -<pre class="syntaxbox">x == y -</pre> - -<h4 id="예제">예제</h4> - -<pre class="brush: js"> 1 == 1 // true - "1" == 1 // true - 1 == '1' // true - 0 == false // true - 0 == null // false - - 0 == undefined // false -null == undefined // true -</pre> - -<h3 id="부등_연산자_!"><a name="Inequality">부등 연산자 (!=)</a></h3> - -<p>부등 연산자는 두 피연산자가 같지 않은 경우 참을 반환합니다. 피연산자의 자료형이 일치하지 않는 경우 적절한 자료형으로의 변환을 시도합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 서로 메모리의 다른 객체를 바라보고 있는지 판별합니다.</p> - -<h4 id="구문_2">구문</h4> - -<pre class="syntaxbox">x != y</pre> - -<h4 id="예제_2">예제</h4> - -<pre class="brush: js">1 != 2 // true -1 != "1" // false -1 != '1' // false -1 != true // false -0 != false // false -</pre> - -<h3 id="일치_연산자"><a name="Identity">일치 연산자 (===)</a></h3> - -<p>일치 연산자는 자료형 변환 없이 두 연산자가 엄격히 같은지 판별합니다.</p> - -<h4 id="구문_3">구문</h4> - -<pre class="syntaxbox">x === y</pre> - -<h4 id="예제_3">예제</h4> - -<pre class="brush: js ">3 === 3 // true -3 === '3' // false</pre> - -<h3 id="불일치_연산자_!"><a name="Nonidentity">불일치 연산자 (!==)</a></h3> - -<p>일치 연산자는 두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환합니다.</p> - -<h4 id="구문_4">구문</h4> - -<pre class="syntaxbox">x !== y</pre> - -<h4 id="예제_4">예제</h4> - -<pre class="brush: js">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="관계_연산자">관계 연산자</h2> - -<p>이 항목의 모든 연산자는 비교 전에 피연산자를 {{glossary("primitive", "원시값")}}으로 <a href="/ko/docs/Glossary/Type_coercion">변환</a>합니다. 둘 다 문자열이 되는 경우 사전순으로 비교하고, 그렇지 않으면 숫자로 변환합니다. {{jsxref("NaN")}}과의 비교는 항상 <code>false</code>를 반환합니다.</p> - -<h3 id="초과_연산자_>"><a name="Greater_than_operator">초과 연산자 (>)</a></h3> - -<p>초과 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우 참을 반환합니다.</p> - -<h4 id="구문_5">구문</h4> - -<pre class="syntaxbox">x > y</pre> - -<h4 id="예제_5">예제</h4> - -<pre class="brush: js">4 > 3 // true -</pre> - -<h3 id="이상_연산자_>"><a name="Greater_than_or_equal_operator">이상 연산자 (>=)</a></h3> - -<p>이상 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 참을 반환합니다.</p> - -<h4 id="구문_6">구문</h4> - -<pre class="syntaxbox"> x >= y</pre> - -<h4 id="예제_6">예제</h4> - -<pre class="brush: js">4 >= 3 // true -3 >= 3 // true -</pre> - -<h3 id="미만_연산자_<"><a name="Less_than_operator">미만 연산자 (<)</a></h3> - -<p>미만 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작은 경우 참을 반환합니다.</p> - -<h4 id="구문_7">구문</h4> - -<pre class="syntaxbox">x < y</pre> - -<h4 id="예제_7">예제</h4> - -<pre class="brush: js">3 < 4 // true</pre> - -<h3 id="이하_연산자_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">이하 연산자 (<=)</a></h3> - -<p>이하 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 참을 반환합니다.</p> - -<h4 id="구문_8">구문</h4> - -<pre class="syntaxbox"> x <= y</pre> - -<h4 id="예제_8">예제</h4> - -<pre class="brush: js">3 <= 4 // true -</pre> - -<h2 id="동치_연산자_사용하기">동치 연산자 사용하기</h2> - -<p>표준 동치, 동등 연산자(<code>==</code>, <code>!=</code>)는 두 피연산자를 비교하기 위해 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">추상 동치 비교 알고리즘</a>(Abstract Equlity Comparison Algorithm)을 사용합니다. 피연산자 간 자료형이 일치하지 않으면 우선 변환을 시도합니다. 예를 들어 표현식 <code>5 == '5'</code>에서는 비교 전 오른쪽 문자열을 {{jsxref("Number")}}로 변환합니다.</p> - -<p>엄격 동치, 일치 연산자(<code>===</code>, <code>!==</code>)는 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">엄격 동치 비교 알고리즘</a>(Strict Equality Comparison Algorithm)을 사용하며, 같은 자료형을 가진 피연산자를 비교하기 위해 사용합니다. 피연산자 간 자료형이 일치하지 않으면 항상 <code>false</code>이므로, <code>5 !== '5'</code>입니다.</p> - -<p>피연산자의 값은 물론 특정 자료형이어야 하는 경우 일치 연산자를 사용하세요. 그렇지 않은 경우 형변환을 자동으로 해주는 동등 연산자를 사용할 수도 있습니다.</p> - -<p>비교 과정에 자료형 변환이 필요한 경우 JavaScript는 {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 자료형을 다음과 같이 변환합니다.</p> - -<ul> - <li>숫자와 문자열을 비교할 땐 문자열을 숫자로 변환합니다. 우선, 문자열에서 수학적 값을 도출합니다. 그 후 가장 가까운 <code>Number</code> 자료형 값으로 반올림합니다.</li> - <li>하나의 연산자가 <code>Boolean</code>인 경우, <code>true</code>는 <code>1</code>, <code>false</code>는 <code>0</code>으로 변환합니다.</li> - <li>객체를 문자열이나 숫자와 비교하는 경우, JavaScript는 객체의 기본값을 사용합니다. 연산자는 우선 객체의 <code>valueOf()</code> 또는 <code>toString()</code> 메서드를 사용해 문자열 혹은 숫자 값을 받으려 시도합니다. 실패할 경우 런타임 오류가 발생합니다.</li> - <li>객체를 원시값과 비교하는 경우에만 객체의 변환이 발생합니다. 두 연산자가 모두 객체인 경우 변환하지 않으며, 둘 다 같은 객체를 참조하는 경우 참을 반환합니다.</li> -</ul> - -<div class="note"><strong>참고:</strong> <code>String</code> 객체는 자료형 객체지, 문자열이 아닙니다! <code>String</code> 객체는 거의 쓰이지 않으며, 이런 성질로 인해 아래의 결과는 예상치 못한 값일 수 있습니다.</div> - -<pre class="brush:js">// true as both operands are type String (i.e. string primitives): -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// false as a and b are type Object and reference different objects -a == b - -// false as a and b are type Object and reference different objects -a === b - -// true as a and 'foo' are of different type and, the Object (a) -// is converted to String 'foo' before comparison -a == 'foo'</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Status</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">동치 비교와 동일성</a></li> -</ul> diff --git a/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html b/files/ko/web/javascript/reference/operators/operator_precedence/index.html index 7a82346d09..d67711452b 100644 --- a/files/ko/web/javascript/reference/operators/연산자_우선순위/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/연산자_우선순위 --- <div>{{jsSidebar("Operators")}}</div> diff --git a/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html b/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html deleted file mode 100644 index b442b1d7bd..0000000000 --- a/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: 논리 연산자 -slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) -tags: - - JavaScript - - Logic - - Not - - Operator - - Reference - - and - - or - - 논리 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>논리 연산자는 보통 {{jsxref("Boolean")}}(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, <code>&&</code>과 <code>||</code> 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> - - - -<h2 id="설명">설명</h2> - -<p>다음 표는 논리 연산자의 종류입니다. (<code><em>expr</em></code>은 불리언을 포함해서 아무 자료형이나 가능합니다)</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>연산자</th> - <th>구문</th> - <th>설명</th> - </tr> - <tr> - <td>논리 AND (<code>&&</code>)</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td><code>expr1</code>을 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">true</span></font>로 변환할 수 있는 경우 <code>expr2</code>을 반환하고, 그렇지 않으면 <code>expr1</code>을 반환합니다.</td> - </tr> - <tr> - <td>논리 OR (<code>||</code>)</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td> - <p><code>expr1</code>을 <code>true</code>로 변환할 수 있으면 <code>expr1</code>을 반환하고, 그렇지 않으면 <code>expr2</code>를 반환합니다.</p> - </td> - </tr> - <tr> - <td>논리 NOT (<code>!</code>)</td> - <td><code>!<em>expr</em></code></td> - <td>단일 피연산자를 <code>true</code>로 변환할 수 있으면 <code>false</code>를 반환합니다. 그렇지 않으면 <code>true</code>를 반환합니다.</td> - </tr> - </tbody> -</table> - -<p>값을 <code>true</code>로 변환하면 값이 {{Glossary("truthy", "참")}}인 것입니다.<br> - 값을 <code>false</code>로 변환할 수 있으면 값이 {{Glossary("falsy", "거짓")}}인 것입니다.</p> - -<p>거짓으로 변환할 수 있는 표현의 예는 다음과 같습니다.</p> - -<ul> - <li><code>null</code></li> - <li><code>NaN</code></li> - <li><code>0</code></li> - <li>빈 문자열 (<code>"",</code> <code>''</code>, <code>``</code>)</li> - <li><code>undefined</code></li> -</ul> - -<p><code>&&</code> 연산자와 <code>||</code> 연산자를 불리언 값이 아닌 피연산자와 함께 사용될 수 있지만, 반환 값을 항상 <a href="/ko/docs/Web/JavaScript/Data_structures#Boolean_%ED%83%80%EC%9E%85">불리언 원시값</a>으로 변환할 수 있으므로 불리언 연산자로 생각할 수 있습니다. 반환 값을 직접 불리언으로 바꾸려면 {{jsxref("Boolean")}} 함수나 이중 부정 연산자를 사용하세요.</p> - -<h3 id="단락_평가">단락 평가</h3> - -<p>논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행합니다.</p> - -<ul> - <li><code>(거짓 표현식) && expr</code>은 거짓 표현식으로 단락 평가됩니다.</li> - <li><code>(참 표현식) || expr</code>은 참 표현식으로 단락 평가됩니다.</li> -</ul> - -<p>"단락"이란, 위 규칙에서 <code>expr</code>을 평가하지 않는다는 뜻입니다. 따라서 평가 중 발생해야 할 부작용(예: <code>expr</code>이 함수 호출이면 절대 호출하지 않음)도 나타나지 않습니다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문입니다. 다음 예제를 살펴보세요.</p> - -<pre>function A(){ console.log('A 호출'); return false; } -function B(){ console.log('B 호출'); return true; } - -console.log( A() && B() ); -// 함수 호출로 인해 콘솔에 "A 호출" 기록 -// 그 후 연산자의 결과값인 "false" 기록 - -console.log( B() || A() ); -// 함수 호출로 인해 콘솔에 "B 호출" 기록 -// 그 후 연산자의 결과인 "true" 기록 -</pre> - -<h3 id="연산자_우선순위">연산자 우선순위</h3> - -<p>다음 두 식은 똑같아 보이지만, <code>&&</code> 연산자는 <code>||</code> 이전에 실행되므로 서로 다릅니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a>를 참고하세요.</p> - -<pre class="brush: js">true || false && false // returns true, because && is executed first -(true || false) && false // returns false, because operator precedence cannot apply</pre> - -<h3 id="논리_AND_()"><a name="Logical_AND">논리 AND (<code>&&</code>)</a></h3> - -<p>다음은 <code>&&</code>(논리 AND) 연산자의 예제입니다.</p> - -<pre class="brush: js">a1 = true && true // t && t returns true -a2 = true && false // t && f returns false -a3 = false && true // f && t returns false -a4 = false && (3 == 4) // f && f returns false -a5 = 'Cat' && 'Dog' // t && t returns "Dog" -a6 = false && 'Cat' // f && t returns false -a7 = 'Cat' && false // t && f returns false -a8 = '' && false // f && f returns "" -a9 = false && '' // f && f returns false</pre> - -<h3 id="논리_OR_()"><a name="Logical_OR">논리 OR (<code>||</code>)</a></h3> - -<p>다음은 <code>||</code>(논리 OR) 연산자의 예제입니다.</p> - -<pre class="brush: js">o1 = true || true // t || t returns true -o2 = false || true // f || t returns true -o3 = true || false // t || f returns true -o4 = false || (3 == 4) // f || f returns false -o5 = 'Cat' || 'Dog' // t || t returns "Cat" -o6 = false || 'Cat' // f || t returns "Cat" -o7 = 'Cat' || false // t || f returns "Cat" -o8 = '' || false // f || f returns false -o9 = false || '' // f || f returns "" -o10 = false || varObject // f || object returns varObject -</pre> - -<h3 id="논리_NOT_(!)"><a name="Logical_NOT">논리 NOT (<code>!</code>)</a></h3> - -<p>다음은 <code>!</code>(논리 NOT) 연산자의 예제입니다.</p> - -<pre class="brush: js">n1 = !true // !t returns false -n2 = !false // !f returns true -n3 = !'' // !f returns true -n4 = !'Cat' // !t returns false -</pre> - -<h4 id="이중_NOT_(!!)">이중 NOT (<code>!!</code>)</h4> - -<p>NOT 연산자 다수를 연속해서 사용하면 아무 값이나 불리언 원시값으로 강제 변환할 수 있습니다. 변환 결과는 피연산자 값의 "참스러움"이나 "거짓스러움"에 따릅니다. ({{Glossary("truthy", "참")}}과 {{Glossary("falsy", "거짓")}}을 참고하세요)</p> - -<p>동일한 변환을 {{jsxref("Boolean")}} 함수로도 수행할 수 있습니다.</p> - -<pre class="brush: js">n1 = !!true // !!truthy returns true -n2 = !!{} // !!truthy returns true: any object is truthy... -n3 = !!(new Boolean(false)) // ...even Boolean objects with a false .valueOf()! -n4 = !!false // !!falsy returns false -n5 = !!"" // !!falsy returns false -n6 = !!Boolean(false) // !!falsy returns false -</pre> - -<h3 id="불리언_변환_규칙">불리언 변환 규칙</h3> - -<h4 id="AND에서_OR로_변환">AND에서 OR로 변환</h4> - -<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> - -<pre class="brush: js">bCondition1 && bCondition2 -</pre> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="OR에서_AND로_변환">OR에서 AND로 변환</h4> - -<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> - -<pre class="brush: js">bCondition1 || bCondition2 -</pre> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="NOT_간_변환">NOT 간 변환</h4> - -<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> - -<pre class="brush: js">!!bCondition -</pre> - -<pre class="brush: js">bCondition</pre> - -<h3 id="중첩_괄호_제거">중첩 괄호 제거</h3> - -<p>논리 표현식은 항상 왼쪽에서 오른쪽으로 평가되므로, 몇 가지 규칙을 따르면 복잡한 표현식에서 괄호를 제거할 수 있습니다.</p> - -<h4 id="중첩_AND_제거">중첩 AND 제거</h4> - -<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3) -</pre> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="중첩_OR_제거">중첩 OR 제거</h4> - -<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3) -</pre> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.operators.logical")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a></li> - <li>{{jsxref("Boolean")}}</li> - <li>{{Glossary("truthy", "참")}}</li> - <li>{{Glossary("falsy", "거짓")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/statements/default/index.html b/files/ko/web/javascript/reference/statements/default/index.html deleted file mode 100644 index 4fe127b7db..0000000000 --- a/files/ko/web/javascript/reference/statements/default/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Statements/default -tags: - - JavaScript - - Keyword - - Reference -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -<div>{{jsSidebar("Statements")}}</div> - -<p><code><strong>default</strong></code> 키워드는 {{jsxref("Statements/switch", "switch")}} 구문과 {{jsxref("Statements/export", "export")}} 구문에서 사용할 수 있습니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<p>{{jsxref("Statements/switch", "switch")}} 구문 내에서는 다음과 같이 사용합니다.</p> - -<pre class="syntaxbox">switch (expression) { - case value1: - //Statements executed when the result of expression matches value1 - [break;] - default: - //Statements executed when none of the values match the value of the expression - [break;] -}</pre> - -<p>{{jsxref("Statements/export", "export")}} 구문 내에서는 다음과 같이 사용합니다.</p> - -<pre class="syntaxbox">export default <em>nameN</em> </pre> - -<h2 id="설명">설명</h2> - -<p>세부사항을 보려면,</p> - -<ul> - <li>{{jsxref("Statements/switch", "switch")}} 구문,</li> - <li>{{jsxref("Statements/export", "export")}} 구문 페이지를 확인하세요.</li> -</ul> - -<h2 id="예제">예제</h2> - -<h3 id="switch에서_default_사용"><code>switch</code>에서 <code>default</code> 사용</h3> - -<p>아래 예제에서 <code>expr</code> 이 "오렌지" 또는 "사과"일 때, 프로그램은 값을 "오렌지" 또는 "사과"와 일치시키고 해당 명령문을 실행합니다. 기본(<code>default</code>) 키워드는 다른 경우에 도움이 되며 연관된 명령문을 실행합니다.</p> - -<pre class="brush: js">switch (expr) { - case '오렌지': - console.log('오렌지는 1000원입니다.'); - break; - case '사과': - console.log('사과는 500원입니다.'); - break; - default: - console.log('죄송합니다. ' + expr + '의 재고가 다 떨어졌습니다.'); -}</pre> - -<h3 id="export에서_default_사용"><code>export</code>에서 <code>default</code> 사용</h3> - -<p>단일 값을 내보내거나 모듈의 기본 값이 필요한 경우, 기본 내보내기를 사용할 수 있습니다.</p> - -<pre class="brush: js">// module "my-module.js" -let cube = function cube(x) { - return x * x * x; -}; -export default cube;</pre> - -<p>다른 스크립트에서 가져오는 건 간단합니다.</p> - -<pre class="brush: js">// module "my-module.js" -import cube from 'my-module'; //default export gave us the liberty to say import cube, instead of import cube from 'my-module' -console.log(cube(3)); // 27 -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.statements.default")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Statements/export", "export")}}</li> - <li>{{jsxref("Statements/switch", "switch")}}</li> -</ul> diff --git a/files/ko/web/javascript/쉘/index.html b/files/ko/web/javascript/shells/index.html index 718fa8bdc2..106b41621c 100644 --- a/files/ko/web/javascript/쉘/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/쉘 --- <div>{{JsSidebar}}</div> diff --git a/files/ko/web/javascript/시작하기/index.html b/files/ko/web/javascript/시작하기/index.html deleted file mode 100644 index 4eeb42cae2..0000000000 --- a/files/ko/web/javascript/시작하기/index.html +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: 시작하기 (자바스크립트 튜토리얼) -slug: Web/JavaScript/시작하기 -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">왜 자바스크립트인가?</h2> -<p>자바스크립트는 종종 오해할 수 있는 강력하고 복잡한 컴퓨터 언어이다. 사용자가 쉽게 데이터를 입력하고 결과를 볼 수 있게 어플리케이션을 빠르게 개발 할 수 있다.</p> -<p> 웹브라우저를 중심으로 또한 ECMAScript로 알려진 자바스크립트의 주요 장점은 이와 같이 브라우저를 지원하는 모든 플랫폼에 동일한 결과를 만들 수 있다. 이 페이지의 예제는 구글 맵스처럼 맥 OS와 윈도우, 리눅스에서 실행한다. 수많은 자바스크립트 라이브러리의 최근 성장과 함께 AJax 어플리케이션을 개발하거나 이벤트 처리하기, 에니메이션 만들기, DOM 엘리먼트 선택하기, 도큐먼트 탐색하기가 이제 더욱 쉬워졌다. 다양한 소유권의 이익에 의해 추진된 다른 기술의 과대 광고와는 달리 자바스크립트는 모두 무료이면서 보편적으로 채택된 클라이언트 사이드 프로그래밍 언어이면서 정말이지 유일한 크로스 플래폼이다.</p> -<h2 id="What_you_should_already_know" name="What_you_should_already_know">당신이 이미 알아야 하는 것</h2> -<p>자바스크립트는 프로그래밍을 같이 시작하기 위해 매우 쉬운 언어이다. 시작하기 위해서 당신이 필요한 모든 것은 텍스트 에디터와 웹브라우저이다. </p> -<p>이 문서의 범위를 벗어나는 자바스크립트와 함께 개발되고 통합 할 수 있는 다른 기술은 많이 있다. 첫날부터 구글맵스과 같이 완전한 어플리케이션을 만들 것이라고 기대하지 마라!</p> -<p>시작하기</p> -<p>자바스크립트로 시작하기는 매우 쉽다. 당신은 복잡한 개발 프로그램 설치가 필요가 없다. 컴파일러를 사용하거나 프로그램 만들기, 쉘을 어떻게 사용하는지 알 필요가 없다. 자바스크립트는 당신의 웹 브라우저에서 해석 된다. 당신이 해야 할 모든 일은 텍스트 파일에 당신의 프로그램을 저장하고 당신의 웹브라우저를 연다. 단지 그 것이다!</p> -<p>자바스크립트는 입문 컴퓨터 언어로서 최고의 프로그래밍 언어이다. 새로운 학생에게 즉시 피드백 할 수 있게 하고 그들이 아마도 그들의 실생활에 유용한 것을 발견할 수 있는 도구들에 관한 것을 그들에게 가르친다. 이것은 전용 소프트웨어 개발자를 위해 정말 유용한 C, C++, JAVA 와는 뚜렷하게 대조적이다. </p> -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">브라우저 호환성 이슈들</h2> -<p>다른 브라우저에서 사용이 가능한 어떤 기능 중에는 차이가 있다. Mozilla, Chrome, Microsoft IE, Apple Safari, Opera에서 가동하는 것에 따라 변동될 수 있다. 이런 <a href="/en-US/docs/JavaScript/Compatibility">변동사항</a>을 문서화 하려고 한다. 사용 가능한 다양한 크로스 플랫폼 자바스크립트 API 사용하여 이런 이슈들을 완하시킬 수 있다. 이런 API는 공통 기능으로 제공하고 이 브라우저의 변동된 것을 숨긴다. </p> -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">예제를 시도하는 방법</h2> -<p>아래의 예제들은 몇가지 샘플 코드를 가지고 있다. 이 예제들을 시도하는 방법은 여러가지가 있다. 만약 당신이 이미 당신의 웹사이트를 가지고 있다면 당신은 당신의 웹사이트에 새로운 웹 페이지로써 이 예제들을 저장할 수 있어야 한다.</p> -<p>만약 당신이 당신의 웹사이트를 가지고 있지 않다면 당신의 컴퓨터에 파일로써 이 예제들을 저장할 수 있고 당신이 현재 사용하고 있는 웹브라우저를 통해 예제들을 열 수 있다. 자바스크립트는 이런 이유로 시작하려는 프로그래머가 사용하기 매운 쉬운 언어이다. 당신은 컴파일러 또는 개발 환경이 필요하지 않다. 그리고 당신과 당신의 브라우저가 시작하기 위해서 필요한 모든 것이다!</p> -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">예제 : 마우스 클릭 잡기</h2> -<p>이벤트 핸들링(이벤트 타입들, 핸들러 등록, 전파 등)의 특성은 이 간단한 예제들을 완전히 적용하기에는 너무 광범위하다. 그런데 이 예제는 자바스크립트 이벤트 시스템에 대한 조금의 탐구도 없이 마우스 클릭을 잡기를 설명할 수 없다. 이 예제는 자바스크립트 이벤트에 관해 전체 자세한 내용을 가볍게 스쳐 지나 갈 것이고 만약 당신이 여기 설명된 기본 기능의 범위를 넘어서고 싶다면 자바스크립트 이벤트 시스템에 관해 더 자세히 읽어야 함을 명심하라.</p> -<p>'마우스'이벤트들은 사용자 동작에 반응한 웹브라우저에 의해 발생된 전체 이벤트의 집합이다.<span style="line-height: 1.5;">다음은 사용자의 마우스 동작에 대한 응답으로 방출되는 이벤트의 목록이다.</span></p> -<ul> - <li>Click - 사용자가 마우스를 클릭했을 때 발생</li> - <li>DblClick - 사용자가 마우스를 더블 클릭했을 때 발생</li> - <li>MouseDown - 사용자가 마우스 버튼을 눌렀을 때 발생(클릭의 전반부)</li> - <li>MouseUp - 사용자가 마우스 버튼을 해제했을 때 발생(클릭의 후반후)</li> - <li>MouseOut - 마우스 포인터가 객체의 그래픽 범위를 떠나려고 할때 발생</li> - <li>MouseOver - 마우스 포인터가 객체의 그래픽 범위를 진입하려고 할때 발생</li> - <li>MouseMove - 마우스 포인터가 객체의 그래픽 범위 안에서 마우스 포인터를 움직이려 할때 발생</li> - <li>ContextMenu - 사용자가 오른쪽 마우스 버튼을 클릭했을 때 발생</li> -</ul> -<p>인라인 이벤트 핸들러, HTML의 최신버전에서 주의할 것은 다시 말하면 하나가 태그 애트리뷰트들로써 추가 되었다는 것은 모두 소문자 이고 스크립트의 이벤트 핸들러가 항상 모든 소문자이어야 하는 것을 예상된다.</p> -<p>이벤트 핸들러를 등록하려는 이러한 이벤트들을 캡처하기 위해 가장 간단한 방법은 HTML을 사용하여 당신의 엘리먼트의 애트리뷰트들로서 개별적인 이벤트들을 지정하는 것이다.</p> -<p>예제:</p> -<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> -<p>당신이 실행하기 원하는 자바스크립트 코드를 애트리뷰트 값으로서 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 <script> 블록에 정의되어진 함수를 호출 할 수 있다 :</p> -<pre class="brush:js"><script> - function clickHandler() { - alert("Hello, World!"); - } -</script> -<span onclick="clickHandler();">Click Here</span></pre> -<p>또한 발생된 이벤트 객체는 캡처하거나 참조할 수 있으며 <span style="line-height: 1.5;">객체가 이벤트를 받거나 이벤트 타입 그리고 마우스가 클릭됐을 때 그러한 이벤트에 관한 특성을 접근하는 무언가 개발하는 것을 제공할 수 있다. </span><span style="line-height: 1.5;">인라인 예제를 다시 사용 하라:</span></p> -<pre class="brush:js"><script> - function clickHandler(event) { - var eType = event.type; - /* 다음은 호환성을 위한 것이다. */ - /* Moz는 이벤트 객체의 target 프로퍼티로 채운다. */ - /* IE는 <span style="font-size: 1rem;">srcElement 프로퍼티로 채운다.</span><span style="font-size: 1rem;">*/</span> - var eTarget = event.target || event.srcElement; - - alert( "Captured Event (type=" + eType + ", target=" + eTarget ); - } -</script> -<span onclick="clickHandler(event);">Click Here</span></pre> -<p>당신의 HTML안에 이벤트를 수신 등록 이외에 당신은 당신의 자바스크립트에 의해 생성된 어떠한 HTML엘리먼트 객체의 똑같은 이름으로 애트리뷰트들을 마찬가지로 설정할 수 있다. 아래의 예는 span 객체를 인스터트화하고 페이지의 body에 추가하고 mouse-over, mouse-out, mouse-down, mouse-up 이벤트들을 수신하기위해 span 객체를 등록한다. </p> -<pre class="brush:js"><body></body> -<script> - function mouseeventHandler(event) { - /*<span style="font-size: 1rem;">다음은 호환성을 위한 것이다.</span><span style="font-size: 1rem;"> */</span> - /* IE는 기본적으로 이벤트 객체를 전달하지 않는다. */ - if (!event) event = window.event; - - /* 미리 이벤트 타입과 타켓 얻기 */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' event on element with id: '+ eTarget.id); - } - - function onloadHandler() { - /* 페이지의 body 엘리먼트를 참조하여 얻기 */ - var body = document.body; - /* 클릭되기 위한 span 엘리먼트 생성하기 */ - var span = document.createElement('span'); - span.id = 'ExampleSpan'; - span.appendChild(document.createTextNode ('Click Here!')); - - /* 특정 마우스 이벤트를 받기 위해 spna 객체 등록하기 - 이벤트들의 소문자에 유의하라 그러나 당신이 그것을 치환하기 위한 이름의 선택은 자유다. - */ - span.onmousedown = mouseeventHandler; - span.onmouseup = mouseeventHandler; - span.onmouseover = mouseeventHandler; - span.onmouseout = mouseeventHandler; - - /* 페이지에 span 보여주기 */ - body.appendChild(span); -} - -window.onload = onloadHandler; // 우리가 핸들러를 치환한 이후에는 우리는 함수 이름 뒤에 ()을 붙여서는 안된다. -</script></pre> -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">예제: 키보드 이벤트 잡기</h2> -<p>위의 예제인 "마우스 이벤트 잡기"와 유사하게 키보드 이벤트 잡기는 자바스크립트 이벤트 시스템 탐험에 의존한다. 키보드 이벤트들은 어떤 키든 키보드에서 사용될 때마다 발생한다.</p> -<p>키보드 동작에 반응하여 방출 가능한 키보드 이벤트 목록들은 마으스로 사용 가능한 것보다 상당히 작다. </p> -<ul> - <li>KeyPress - 키보드를 누르거나 해제할때 발생</li> - <li>KeyDown - 키보드를 눌렀지만 아직 해제 않지 않았을때 발생</li> - <li>KeyUp - 키보드가 해제 되었을때 발생</li> - <li>TextInput (글을 썼던 시점에는 웹킷 브라우저에서만 가능) - 텍스트에 붙여넣기나 말하기를 하거나 또는 키보드로 입력했을 때 발생. 이 이벤트는 이 문서에 포함하지 않을 것이다.</li> -</ul> -<p><a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> 이벤트는 키를 눌렀을 때의 Unicode값이 keycode나 <a href="/en-US/docs/DOM/event.charCode" rel="internal" style="line-height: 1.5; font-family: 'Courier New', 'Andale Mono', monospace;">charCode</a> 프로퍼티에 둘다 저장되어 있다. 만약 키가 문자로 생성되어 눌러졌을때 (예를 들어 'a') <code style="font-style: normal; line-height: 1.5;">charCode는 문자의 경우를 반영하여 문자의 코드를 설정한다.(즉, charCode은 Shift 키를 누르고 있는지 여부를 고려한다)그렇지 않으면, 누른 키의 코드가 keyCode에 저장된다.</code></p> -<p>키보드 이벤트들을 캡쳐하기 위한 가장 간단한 방법은 당신의 엘리먼트를 애트리뷰트들로써 개별적인 이벤트들을 지정한 HTML안에 이벤트 핸들러들을 다시 저장하는 것이다.</p> -<p>예:</p> -<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"> -</pre> -<p>마우스 이벤트들과 마찬가지로 당신이 실행하기 원하는 자바스크립트 코드는 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 <script> 블록에 정의되어진 함수를 호출 할 수 있다 :</p> -<pre class="brush:js"><script> - function keypressHandler() { - alert ("Hello, World!"); - } -</script> - -<input onkeypress="keypressHandler();" /> -</pre> -<p>타겟을 참조하거나 이벤트를 캡쳐 하는 것은 (즉, 눌러진 실제 키) 마우스 이벤트를 비슷한 방법으로 이룰 수 있다.</p> -<p> <span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 1rem; line-height: 19px; background-color: rgb(246, 246, 242);"><script type="text/javascript"></span></p> -<pre class="brush:js"> function keypressHandler(evt) { - var eType = evt.type; // 이벤트 타입으로써 <span style="font-size: 1rem;">"keypress"를 반환할 것이다.</span></pre> -<pre class="brush:js"> - /* <span style="font-size: 1rem;">여기에 우리는 </span><span style="font-size: 1rem;">which 나 다른 </span><span style="font-size: 1rem;">keyCode로 반환되는 모질라 기반으로 된 브라우저를 크로스 브라우저 방법으로 사용할 필요가 있다. </span><a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" style="font-size: 1rem;" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">조건 연산자</a><span style="font-size: 1rem;"> 또는 삼항식이 </span><span style="font-size: 1rem;">좋은 방법이다.</span> - var keyCode = evt.which?evt.which:evt.keyCode; - var eCode = 'keyCode is ' + keyCode; - var eChar = 'charCode is ' + .fromCharCode(keyCode); // 또는 evt.charCode - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script> -<input onkeypress="keypressHandler(event);" /></pre> -<p>페이지로 부터 어떤 키 이벤트를 캡처하기 위해서는 문서 레벨에서 이벤트를 등록하거나 함수안에서 처리하여 마칠 수 있다. </p> -<pre class="brush:js"><script> - document.onkeypress = keypressHandler; - document.onkeydown = keypressHandler; - document.onkeyup = keypressHandler; -</script></pre> -<p><span style="line-height: 1.5;">여기에 키 이벤트 처리하기 보여주는 완벽한 예제가 있다.</span></p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var exampleKey = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which - var keychar = String.fromCharCode(key); - if (key == exampleKey) { - metaChar = true; - } - if (key != exampleKey) { - if (metaChar) { - alert("Combination of metaKey + " + keychar) - metaChar = false; - } else { - alert("Key pressed " + key); - } - } - } - function metaKeyUp(event) { - var key = event.keyCode || event.which; - if (key == exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> - Try pressing any key! -</body> -</html></pre> -<h3 id="브라우저_버그들과_이상한_점">브라우저 버그들과 이상한 점</h3> -<p>키 이벤트를 통해서 사용 가능하게 만들어진 두개의 프로퍼티들은 keycode와 charCode이다. 단순한 용어로 keyCode는 사용자에 의해 눌러진 실제 키보드 키를 의미하는데 반하여 charCode는 키의 ASCII 값을 반환한다. 이 두 값들은 반드시 동일하지 않을 수 있다. 예를 들어 소문자 'a'와 대문자 'A'는 같은 keyCode를 가지고 있다. 왜냐하면 사용자는 같은 키를 누르기 때문이다. 하지만 다른 charCode를 가지는 것은 왜냐하면 결과 문자가 다르기 때문이다.</p> -<p>charCode가 해석되는 브라우저의 방법은 일관되게 적용되는 방법이 아니다. 예를 들어 Internet Explorer 와 Opera는 charCode를 지원하지 않는다. 그런데 그들은 keyCode안에 문자 정보를 준다. onkeypress만 아니라 onkeydown 와 onkeyup의 keyCode가 키 정보를 가지고 있다. Firefox 는 "which", 문자를 구별하기 위해 다른 단어를 사용한다. </p> -<p>더 나아가 키 이벤트들을 다루는 것에 관해서는 <span style="line-height: 1.5;"> </span><a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" style="line-height: 1.5;" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a>에 대한<span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">Mozilla 문서를 참조하시오.</span></p> -<p>{{ draft() }}</p> -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">예제: 이미지 주변에 드래그하기</h2> -<p>다음 예제는 페이지 근처의 firefox의 이미지를 이동할 수 있다.</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style> -img { position: absolute; } -</style> - -<script> -window.onload = function() { - - movMeId = document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - - document.onmousedown = coordinates; - document.onmouseup = mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - - // <span style="font-size: 1rem;">e.srcElement은 IE에서 타겟 엘리먼트로 가지고 있고 반면 </span><span style="font-size: 1rem;">e.target은 firefox에서 타겟 엘리먼트로 가지고 있다.</span> -// 두 프로퍼티들은 이벤트가 일어난 HTML 엘리먼트를 반환한다. - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove = moveImage; - return false; - } - return false; - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> - <p>Drag and drop around the image in this page.</p> -</body> - -</html></pre> -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">예제: 크기 조정하기</h2> -<div> - <p>이미지 크기 조정하는 예제(실제 이미지가 크기가 조정되는 것이 아니고, 이미지의 랜더링만 되는 것이다.)</p> - <pre class="brush:js"> <!DOCTYPE html> - <html> - <head> - <style> - #resizeImage { - margin-left: 100px; - } - </style> - <script> - window.onload = function() { - - var resizeId = document.getElementById("resizeImage"); - var resizeStartCoordsX, - resizeStartCoordsY, - resizeEndCoordsX, - resizeEndCoordsY; - - var resizeEndCoords; - var resizing = false; - - document.onmousedown = coordinatesMousedown; - document.onmouseup = coordinatesMouseup; - - function coordinatesMousedown(e) { - if (e == null) { - e = window.event; - } - - var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; - - if (element.id == "resizeImage") { - resizing = true; - resizeStartCoordsX = e.clientX; - resizeStartCoordsY = e.clientY; - } - return false; - } - - function coordinatesMouseup(e) { - if (e == null) { - e = window.event; - } - - if (resizing === true) { - var currentImageWidth = parseInt(resizeId.width); - var currentImageHeight = parseInt(resizeId.height); - - resizeEndCoordsX = e.clientX; - resizeEndCoordsY = e.clientY; - - resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; - resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; - - resizing = false; - } - return false; - } - } - </script> - </head> - - <body> - <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" -width="64" height="64"> - <p>Click on the image and drag for resizing.</p> - </body> - - </html></pre> -</div> -<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">예제: 라인 그리기</h2> -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> -<script> -function linedraw(ax,ay,bx,by) -{ - if(ay>by) - { - bx=ax+bx; - ax=bx-ax; - bx=bx-ax; - by=ay+by; - ay=by-ay; - by=by-ay; - } - var calc=Math.atan((ay-by)/(bx-ax)); - calc=calc*180/Math.PI; - var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); - document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" -} -</script> -</head> -<body onload="linedraw(200,400,500,900);"> <!--당신의 좌표 교체하기 --> -</body> -</html></pre> -<p> </p> diff --git a/files/ko/web/media/formats/코덱파라미터/index.html b/files/ko/web/media/formats/codecs_parameter/index.html index 43cce1aa1f..7958c6b652 100644 --- a/files/ko/web/media/formats/코덱파라미터/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/코덱파라미터 --- <div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div> diff --git a/files/ko/web/media/formats/컨테이너/index.html b/files/ko/web/media/formats/containers/index.html index d4e45c294a..1af00ff513 100644 --- a/files/ko/web/media/formats/컨테이너/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/컨테이너 --- <p>오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. <span class="seoSummary">이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.</span></p> diff --git a/files/ko/web/media/formats/index.html b/files/ko/web/media/formats/index.html index 08785a2212..48abc40149 100644 --- a/files/ko/web/media/formats/index.html +++ b/files/ko/web/media/formats/index.html @@ -30,7 +30,7 @@ translation_of: Web/Media/Formats <h3 id="Images">Images</h3> <dl> - <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt> + <dt><span class="hidden"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt> <dd>Covers image file type and content format support across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd> <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt> <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd> diff --git a/files/ko/web/media/formats/비디오코덱/index.html b/files/ko/web/media/formats/video_codecs/index.html index 5cccc89329..4e9701b342 100644 --- a/files/ko/web/media/formats/비디오코덱/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/비디오코덱 --- <p>압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:</p> diff --git a/files/ko/web/performance/중요_렌더링_경로/index.html b/files/ko/web/performance/critical_rendering_path/index.html index 0dd28ed81c..010f6ecfa9 100644 --- a/files/ko/web/performance/중요_렌더링_경로/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/중요_렌더링_경로 --- <p>{{draft}}</p> diff --git a/files/ko/web/performance/브라우저는_어떻게_동작하는가/index.html b/files/ko/web/performance/how_browsers_work/index.html index 473e30980d..346648524a 100644 --- a/files/ko/web/performance/브라우저는_어떻게_동작하는가/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/브라우저는_어떻게_동작하는가 --- <p>Users want web experiences with content that is fast to load and smooth to interact with. Therefore, <span class="seoSummary">a developer should strive to achieve these two goals. </span></p> diff --git a/files/ko/web/progressive_web_apps/소개/index.html b/files/ko/web/progressive_web_apps/introduction/index.html index e253c96ce9..9de0a22e10 100644 --- a/files/ko/web/progressive_web_apps/소개/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/소개 --- <div>{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}</div> diff --git a/files/ko/web/css/시작하기/미디어/index.html b/files/ko/web/progressive_web_apps/responsive/media_types/index.html index 2c9fceaca0..3c907f9c9b 100644 --- a/files/ko/web/css/시작하기/미디어/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/시작하기/미디어 --- <p>{{ CSSTutorialTOC() }}</p> <div class="warning"> diff --git a/files/ko/web/참조/api/index.html b/files/ko/web/reference/api/index.html index 363fa9d3e9..7ce64e1a32 100644 --- a/files/ko/web/참조/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 --- <p><span class="seoSummary">여러분이 알고 있는 웹에는 여러 유용한 작업을 수행할 수 있는 다양한 API가 제공됩니다. 이러한 API는 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 {{domxref("window")}}나 {{domxref("element")}}에 대한 간단한 작업에서부터 <a href="/ko/docs/Web/WebGL">WebGL</a>이나 <a href="/ko/docs/Web_Audio_API">Web Audio</a>와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능합니다.</span></p> diff --git a/files/ko/web/참조/index.html b/files/ko/web/reference/index.html index f8d1a1dc35..5918ed9c1a 100644 --- a/files/ko/web/참조/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/참조 --- <p>{{draft()}}<br> 오픈 웹은 많은 기술을 사용하여 구축됩니다. 이 기술들을 사용하기 위해서는 적절한 지식이 필요합니다.<br> diff --git a/files/ko/web/security/정보_보안_기본/index.html b/files/ko/web/security/정보_보안_기본/index.html deleted file mode 100644 index 48eeaed961..0000000000 --- a/files/ko/web/security/정보_보안_기본/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Information Security Basics -slug: Web/Security/정보_보안_기본 -translation_of: Web/Security/Information_Security_Basics ---- -<p><span class="seoSummary"> 정보 보안에 대한 기본적인 이해는 불안전하거나 취약점으로 인해 생긴 약점이 악의적인 이유로 악용되지 않게 당신을 도와줄 것입니다. 이 기사는 당신이 알아야 할 것을 배우는데 도움을 줄 것 입니다.</span> 이 정보를 이용하면, 웹 개발주기 및 콘텐츠 배포를 넘어 보안의 역할과 중요성을 알게될 것입니다.</p> - -<dl> - <dt><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">신뢰성, 무결성, 가용성</a></dt> - <dd>보안을 이해하기 위해 필수적이고 기본적인 보안의 목적에 대해 설명합니다. </dd> - <dt><a href="/en-US/Learn/Vulnerabilities">취약점</a></dt> - <dd>취약점의 주요 카테고리를 정의하고, 모든 소프트웨어에 있는 취약점에 대해서 논의합니다. </dd> - <dt><a href="/en-US/Learn/Threats">위협</a></dt> - <dd>주요한 위협의 개념에 대해 간단히 소개합니다.</dd> - <dt><a href="/en-US/Learn/Security_Controls">보안 제어</a></dt> - <dd>보안 제어의 주요 카테고리를 정의하고, 잠재적인 단점에 대해서 논의합니다. </dd> - <dt><a href="/en-US/Learn/TCP_IP_Security">TCP/IP 보안</a></dt> - <dd>SSL에 대한 보안 고려 사항에 초점을 맞춘 TCP / IP 모델의 개요.</dd> -</dl> - -<h2 id="참고">참고</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Security">Browser security</a></li> - <li><a href="/en-US/docs/Web/Security">Web security</a></li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a></li> - <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Firefox Security Basics for Developers</a></li> -</ul> diff --git a/files/ko/web/svg/applying_svg_effects_to_html_content/index.html b/files/ko/web/svg/applying_svg_effects_to_html_content/index.html index fc36e06d4c..64610311fc 100644 --- a/files/ko/web/svg/applying_svg_effects_to_html_content/index.html +++ b/files/ko/web/svg/applying_svg_effects_to_html_content/index.html @@ -186,7 +186,7 @@ pre.target:hover { filter:url(#f3); } <p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p> -<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p> +<p class="hidden"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p> <h3 id="Example_Blurred_Text">Example: Blurred Text</h3> diff --git a/files/ko/web/svg/element/사각형/index.html b/files/ko/web/svg/element/rect/index.html index 90a3d08d24..0447978f9b 100644 --- a/files/ko/web/svg/element/사각형/index.html +++ b/files/ko/web/svg/element/rect/index.html @@ -1,7 +1,8 @@ --- title: <rect> -slug: Web/SVG/Element/사각형 +slug: Web/SVG/Element/rect translation_of: Web/SVG/Element/rect +original_slug: Web/SVG/Element/사각형 --- <div>{{SVGRef}}</div> 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 new file mode 100644 index 0000000000..95ecedba2c --- /dev/null +++ b/files/ko/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,846 @@ +--- +title: 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 +--- +<p>Firefox 2는 더욱 폭넓은 <a class="external" href="http://www.w3.org/Graphics/SVG/">Scalable Vector Graphics (SVG)</a> 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 <textPath>입니다. -- 아래 참조.</p> +<p>Firefox SVG는 <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.</p> +<p>우리들의 구현의 특이한 점들이 컨텐츠를 개발함에 있어서 번거로울 수도 있다는 것을 알고 있습니다. 하지만 커다란 스펙의 완전한 구현이 될 때까지 여러분의 인내를 부탁드립니다.</p> +<p>이 문서를 읽을때 이들 구현들의 세부사항들이 언제 바뀔지 궁금해할지도 모릅니다. 불행히도 <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">현재 로드맵</a>에 따르면 Gecko의 다음 버전에 기반한 Firefox의 공식 출시일이 꽤 나중이 되겠지만 2007년 1/4분기라고 나와있습니다. 그러나 새로운 기능을 시험해보고 싶다면 현재 개발중인 <a class="external" href="http://www.mozilla.org/developer/#builds">nightly builds</a>를 사용해볼 수 있습니다.</p> +<h2 id=".EC.84.B1.EB.8A.A5" name=".EC.84.B1.EB.8A.A5">성능</h2> +<p>Firefox가 출시하는 모든 플랫폼은 같은 렌더링 백엔드 <a class="external" href="http://cairographics.org/">cairo</a>를 사용합니다. 그래서 이들 간에 성능에 관한 특징은 일반적으로 유사할 것입니다. Linux에서의 성능은 예측하기가 가장 힘든데 이는 다양한 X서버마다 RENDER 확장의 구현이 다양하기 때문입니다.</p> +<p>Windows에서 SVG 렌더링은 다른 플랫폼상에서 보다도 상당히 빠릅니다.</p> +<h2 id=".EC.A2.8C.ED.91.9C_.EB.B2.94.EC.9C.84" name=".EC.A2.8C.ED.91.9C_.EB.B2.94.EC.9C.84">좌표 범위</h2> +<p>당신의 컨텐츠가 상당히 넓은 범위의 좌표를 가지는 구조를 가지고 있다면 cairo가 내부적으로 계산할 때 수를 16.16비트의 고정 소수점 표현 방식을 사용하기 때문에 발생할 수 있는 문제점들에 대해서 주의 깊게 고려해야 합니다. Cairo는 rasterization하기 전에 primitives들에 대한 클리핑을 하지 않기 때문에 변환과정 후 최종적으로 -32678에서 32677의 범위를 벗어나는 좌표들에 대해서는 렌더링 오류나 아주 느린 성능을 보여주기도 합니다.</p> +<h2 id="Windows_98.EC.97.90.EC.84.9C.EC.9D.98_Text" name="Windows_98.EC.97.90.EC.84.9C.EC.9D.98_Text">Windows 98에서의 Text</h2> +<p>안타깝게도 윈도우즈에서 cairo를 렌더링 엔진으로 사용한다면 Windows 98에서 텍스트 렌더링이 되지않는 버그가 있다. 사실, 그것보다 더 심각한 문제가 있다 : SVG 컨텐츠를 렌더링하는 도중에 텍스트를 만나면 모든 그리기 기능이 정지되어버리는 것이다.</p> +<h2 id=".ED.8F.B0.ED.8A.B8_.EC.84.A0.ED.83.9D" name=".ED.8F.B0.ED.8A.B8_.EC.84.A0.ED.83.9D">폰트 선택</h2> +<p>CSS에 익숙하다면 특정 폰트에서 들어있지 않은 기호들의 경우 폰트 속성에서 예비 폰트들을 지정할수 있다는 것을 알고 있을 것입니다. 현재 SVG 렌더링 백엔드는 단지 지정된 첫번째 폰트를 사용하도록 시도하며 만약 그 폰트가 없다면 플랫폼의 폰트를 사용하게 됩니다. 예비 폰트는 사용되지 않습니다; 그래서 예를 들면 <code>font-family="Arial,LucidaSansUnicode"</code> 이 코드는 Arial 폰트를 사용할 수 없는 경우 LucidaSansUnicode가 사용되게끔 하는 것은 아닙니다.</p> +<h2 id=".EC.9D.B8.EC.87.84" name=".EC.9D.B8.EC.87.84">인쇄</h2> +<p>아쉽지만 현재 인쇄는 SVG의 벡터 속성을 이용해서 매우 선명하게 출력해내도록 하는 부분은 완료되지 않았습니다. 하지만 화면 해상도정도로 그려져서 그 이미지처럼 출력됩니다.</p> +<p>Windows상에서 출력했을 때 폰트의 크기는 SVG에서 지정된 것보다도 훨씬 크게 출력됩니다.</p> +<h2 id=".EA.B7.B8.EB.A3.B9_opacity" name=".EA.B7.B8.EB.A3.B9_opacity">그룹 opacity</h2> +<p>그룹 opacity 속성인 <code>opacity</code>는 SVG 컨테이너 객체들을 부분적으로는 투명한 레이어로 다루어질 수 있도록 해주며, <code>fill-opacity</code>나 <code>stroke-opacity</code>들과는 독립적인 속성입니다. 현재 <code>opacity</code>의 구현은 꽤 느려서, 참으면서 사용을 해야할 겁니다. <code>fill-opacity</code>와 <code>stroke-opacity</code>는 훨씬 빠르며 컨텐츠에 따라서 같은 결과를 만들어 낼 수도 있습니다.</p> +<p>그룹 opacity는 현재 <code> <g></code>에만 구현되어 있으며 <code><text></code>나 <code><svg></code>는 구현되어 있지 않습니다.</p> +<h2 id=".ED.8F.B0.ED.8A.B8_.EA.B8.B0.EC.9A.B8.EC.9D.B4.EA.B8.B0" name=".ED.8F.B0.ED.8A.B8_.EA.B8.B0.EC.9A.B8.EC.9D.B4.EA.B8.B0">폰트 기울이기</h2> +<p>Microsoft Windows나 Mac OSX 플랫폼상에서는 문장의 기울였을때 내부의 채워짐이 정확히 일치하지 않습니다. 이 오차는 보통 매우 작은데 약간 더 기울이거나 함으로써 해결할 수 있습니다. 이 오차에 대한 예입니다:</p> +<p><img alt="그림:그림-text-fill-stroke.png"></p> +<h2 id=".3Cimage.3E" name=".3Cimage.3E"><code><image></code></h2> +<p><code><image></code>는 Firefox 1.5의 SVG 이미지들에는 지원되지 않습니다; 대신에 Firefox에서 사용되는 유일한 raster 이미지 포맷입니다.</p> +<p><code><image></code>의 모든 인스터스들은 사용되는 이미지와는 별도의 복사본을 가지는데 이는 만약 컨텐츠내에 아이콘과 같은 이미지에 대해 다수의 복사본을 사용한다면 새겨두어야 할 부분입니다. 안타깝게도 이 경우에 <code><image></code>의 <code><use></code>는 또 다른 다른 복사본으로 간주합니다.</p> +<p>덧붙여, Firefox 1.5에서는 SVG에서 다수의 raster 이미지를 사용하면 성능히 심각하게 떨어질 수 있습니다.</p> +<h2 id="Events" name="Events">Events</h2> +<p>We support the SVG event attributes with the exception of <code>onfocusin</code>, <code>onfocusout</code>, and <code>onactivate</code>.</p> +<p>Our <code>onload</code> handling is currently somewhat nonstandard, but hopefully not in a way that hurts its use. While the code specified by the <code>onload</code> attribute is called for each element, an <code>SVGLoad</code> event is only fired for the root <code><svg></code> element. Some DOM methods will return garbage or an error if called before the corresponding element has been rendered, which you may need to take into account when writing <code>onload</code> code. Such methods are <code>getBBox</code>, <code>getScreenCTM</code>, etc.</p> +<p>We do not support the Adobe specific key events (<code>onkeydown</code>, <code>onkeyup</code>).</p> +<h2 id="Interoperability" name="Interoperability">Interoperability</h2> +<p>If you're working with current SVG content, you may encounter problems loading it into Firefox. Most of the problems tend to be fairly trivial, and are the result of Firefox being a stricter implementation. Jonathan Watt's <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> explains the common problems.</p> +<h2 id="SVG_usage_situations" name="SVG_usage_situations">SVG usage situations</h2> +<p>Firefox 1.5 handles SVG as entire documents or when referenced by <code>embed</code>, <code>object</code>, or <code>iframe</code>. It cannot currently be used as source for an HTML or XHTML <code>img</code> element or for CSS properties that take an image reference.</p> +<h2 id="Animation" name="Animation">Animation</h2> +<p>Firefox 1.5 does not implement declarative animation, but does support dynamic scripting. Doug Shepers has used this to create <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, a small Javascript library that implements a subset of SVG's declarative animation.</p> +<h2 id="Bugs_fixed_in_Firefox_2" name="Bugs_fixed_in_Firefox_2">Bugs fixed in Firefox 2</h2> +<p>Firefox 2 fixes some bugs in its SVG implementation. This section provides a quick overview of the most interesting ones.</p> +<ul> + <li>A problem filling and stroking text in which the drawing position isn't reset correctly between the two operations has been fixed (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=333615">333615</a>).</li> +</ul> +<ul> + <li>Radial gradients now properly clamp the <code>fx</code> and <code>fy</code> attributes to ensure that they're within the circumference of a circle (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=330682">330682</a>).</li> +</ul> +<ul> + <li>Text spans' and text elements' lengths can now be computed using their <code>getComputedTextLength()</code> methods, which improves compatibility with certain web sites (bugs <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311031">311031</a> and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=264380">264380</a>).</li> +</ul> +<ul> + <li><code><tspan></code> elements now properly support the <code>dx</code> and <code>dy</code> attributes, and work if the <code>x</code> and <code>y</code> attributes aren't specified (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311063">311063</a>).</li> +</ul> +<ul> + <li>Improved invalidation logic on redraws, which prevents dropped pixels in certain cases (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312269">312269</a>).</li> +</ul> +<ul> + <li>Fixed a bug that prevented events from being handled properly for objects exposed by the clip path of another object (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=315861">315861</a>).</li> +</ul> +<ul> + <li>Fixed a bug that would crash if a <code><path></code> element had a <code>d</code> attribute with an empty string (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=318379">318379</a>).</li> +</ul> +<ul> + <li>The <code>overflow</code> attribute now works for the <code>marker</code> element, using the syntax <code>overflow="visible"</code>, which did not previously work correctly (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320623">320623</a>).</li> +</ul> +<ul> + <li>You can now access the <code><style></code> attribute of <code>marker</code> elements without throwing an exception (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323589">323589</a>).</li> +</ul> +<ul> + <li>You can now use percent values for the radius of a radial gradient (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323669">323669</a>).</li> +</ul> +<ul> + <li>The <code>documentElement.createSVGAngle()</code> method is now implemented (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=327437">327437</a>).</li> +</ul> +<ul> + <li>Making a <code><stop></code> element a child of another <code><stop></code> element no longer asserts (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=328137">328137</a>).</li> +</ul> +<ul> + <li>Changes to the height and width of markers, as well as to the orientation of the marker, now work (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=325728">325728</a>).</li> +</ul> +<ul> + <li>Font sizes when printing on Windows are no longer much larger than specified for SVG (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=314707">314707</a>).</li> +</ul> +<h2 id="Element_implementation_status" name="Element_implementation_status">Element implementation status</h2> +<table style="margin: 5px;"> + <tbody> + <tr> + <th><b>Element</b></th> + <th><b>Notes</b></th> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> + <td> + <ul> + <li>Implemented.</li> + <li><code>currentScale</code> and <code>currentTranslate</code> DOM attributes are implemented, but there is no pan and zoom user interface.</li> + <li>SVGSVGElement + <ul> + <li>Unimplemented attributes: contentScriptType, contentStyleType, viewport, useCurrentView, currentView</li> + <li>Unimplemented bindings: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> + <td> + <ul> + <li>Implemented.</li> + <li>Only stored in the DOM, no user interface.</td></li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> + <td> + <ul> + <li>Implemented.</li> + <li>Only stored in the DOM, no user interface.</td></li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> + <td> + <ul> + <li>Implemented.</li> + <li>Only works for internal document references (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>).</li> + <li>Doesn't completely follow <svg:use> cascading rules (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>).</li> + <li>Doesn't deliver events to a SVGElementInstance tree (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> + <td> + <ul> + <li>Implemented.</li> + <li>Only works for raster images (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> + <td> + <ul> + <li>Implemented.</li> + <li>SVGPathElement Interface + <ul> + <li>Unimplemented attributes: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList</li> + <li>Unimplemented bindings: getTotalLength, getPointAtLength, getPathSegAtLength</li> + </ul> + </li> + <li>SVGPathSegList Interface + <ul> + <li>Unimplemented bindings: replaceItem()</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> + <td> + <ul> + <li>Implemented.</li> + <li>SVGTextElement + <ul> + <li>Unimplemented attributes: rotate, textLength, lengthAdjust</li> + <li>Unimplemented bindings: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li> + <li>Bindings not functional at <code>onload</code> time: getExtentOfChar</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> + <td> + <ul> + <li>Implemented.</li> + <li>SVGTSpanElement + <ul> + <li>Unimplemented attributes: rotate, textLength, lengthAdjust</li> + <li>Unimplemented bindings: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> + <td> + <ul> + <li>Implemented in Firefox 2.</li> + <li>Unimplemented attributes: method, spacing, textLength, lengthAdjust</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> + <td> + <ul> + <li>Implemented.</li> + <li>Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> + <td> + <ul> + <li>Implemented as an XBL binding - object is not of type SVGAElement.</li> + <li>Only <code>xlink:href</code>, <code>xlink:show</code>, and <code>xlink:target</code> (as of Firefox 2) attributes implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> + <td> + <ul> + <li>Implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> + <td> + <ul> + <li>Not implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> + <td> + <ul> + <li>Implemented, but not built.</li> + </ul> + </td> + </tr> + </tbody> +</table> +<p>{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}</p> diff --git a/files/ko/web/svg/tutorial/기본_도형/index.html b/files/ko/web/svg/tutorial/basic_shapes/index.html index 8169e4c890..4d0307f57c 100644 --- a/files/ko/web/svg/tutorial/기본_도형/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/기본_도형 --- <p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p> diff --git a/files/ko/web/svg/tutorial/시작하기/index.html b/files/ko/web/svg/tutorial/getting_started/index.html index 8a0b5c82b7..0e4bec9543 100644 --- a/files/ko/web/svg/tutorial/시작하기/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/시작하기 --- <p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> diff --git a/files/ko/web/svg/tutorial/위치/index.html b/files/ko/web/svg/tutorial/positions/index.html index 391765175c..9d2bd8cf0b 100644 --- a/files/ko/web/svg/tutorial/위치/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/위치 --- <p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> diff --git a/files/ko/web/css/getting_started/svg_graphics/index.html b/files/ko/web/svg/tutorial/svg_and_css/index.html index d8ca001fb2..421cb46488 100644 --- a/files/ko/web/css/getting_started/svg_graphics/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 --- <p>이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.</p> <p>SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.</p> 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 new file mode 100644 index 0000000000..9ae214d84b --- /dev/null +++ b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,368 @@ +--- +title: Introduction to using XPath in JavaScript +slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript +tags: + - Add-ons + - DOM + - Extensions + - Transforming_XML_with_XSLT + - Web Development + - XPath +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +original_slug: Introduction_to_using_XPath_in_JavaScript +--- +<p>이 문서는 JavaScript 안, 확장기능, 웹사이트에서 <a href="ko/XPath">XPath</a>를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html">DOM 3 XPath</a>를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.</p> + +<p>XPath를 사용하는 주 인터페이스는 <a href="ko/DOM/document">document</a> 개체의 <a href="ko/DOM/document.evaluate">evaluate</a> 함수입니다.</p> + +<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2> + +<p>이 메소드는 <a href="ko/XML">XML</a>에 기반을 둔 문서(HTML 문서 포함)에 대해 <a href="ko/XPath">XPath</a> 식을 평가하고 단일 노드나 노드 집합일 수 있는 <code>XPathResult</code> 개체를 반환합니다. 이 메소드를 다루는 기존 문서는 <a href="ko/DOM/document.evaluate">여기</a>에 있지만 당장 우리 필요에 좀 부족하여, 더 이해가 빠른 설명을 아래에 제공합니다.</p> + +<pre class="notranslate">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result ); +</pre> + +<h3 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98">매개변수</h3> + +<p><a href="ko/DOM/document.evaluate">evaluate</a> 함수는 매개변수를 총 5개 취합니다.</p> + +<ul> + <li><code>xpathExpression</code>: 평가할 XPath 식을 포함하는 문자열</li> +</ul> + +<ul> + <li><code>contextNode</code>: <code>xpathExpression</code>이 평가될 모든 자식 노드를 포함하는 문서의 노드. <a href="ko/DOM/document">document</a> 노드가 가장 흔히 쓰입니다.</li> +</ul> + +<ul> + <li><code>namespaceResolver</code>: 그 접두사와 관련된 namespace URI를 나타내는 문자열을 반환하는 <code>xpathExpression</code> 내에 포함되는 모든 namespace 접두사를 넘겨주는 함수. 이는 XPath 식에 쓰(이)는 접두사와 문서에 쓰(이)는 아마도 다른 접두사 사이에 변환을 가능하게 합니다. 함수는 어느 한쪽일 수 있습니다. + + <ul> + <li><code><a class="external" href="http://www.xulplanet.com/references/objref/XPathEvaluator.html">XPathEvaluator</a></code> 개체의 <code> <a href="ko/DOM/document.createNSResolver">createNSResolver</a></code> 메소드를 써서 <a href="#Implementing_a_Default_Namespace_Resolver">만듭니다</a>. 항상 가상으로 이를 쓰면 좋습니다.</li> + <li>HTML 문서를 위해서나 namespace 접두사가 없을 때 쓸 수 있는 <code>null</code>. 만약 <code>xpathExpression</code>가 namespace 접두사를 포함하면 이는 <code>NAMESPACE_ERR</code> 코드를 내는 <code>DOMException</code>을 가져옴을 유의하세요.</li> + <li>사용자 정의 맞춤(custom) 함수. 세부 내용은 부록의 <a href="#Implementing_a_User_Defined_Namespace_Resolver">사용자 정의 Namespace Resolver 쓰기</a> 절을 보세요.</li> + </ul> + </li> +</ul> + +<ul> + <li><code>resultType</code>: 평가 결과로 반환되기 바랐던 결과 형을 지정하는 <a href="#XPathResult_Defined_Constants">상수</a>. 가장 흔히 넘겨주는 상수는 가장 자연스러운 형으로 XPath 식의 결과를 반환하는 <code>XPathResult.ANY_TYPE</code>입니다. 부록에 <a href="#XPathResult_Defined_Constants">쓸 수 있는 상수</a> 목록 전체를 포함하는 절이 있습니다. 아래 <a href="#Specifying_the_Return_Type">반환형 지정</a> 절에서 설명합니다.</li> +</ul> + +<ul> + <li><code>result</code>: 결과를 반환하는 데 재사용하는 기존 <code>XPathResult</code> 개체나 새 <code>XPathResult</code> 개체를 만드는 데 쓸 수 있는 <code>null</code> 가운데 하나.</li> +</ul> + +<h3 id=".EB.B0.98.ED.99.98.EA.B0.92" name=".EB.B0.98.ED.99.98.EA.B0.92">반환값</h3> + +<p><code>resultType</code> 매개변수에서 <a href="#Specifying_the_Return_Type">지정한</a> 형의 <code>XPathResult</code> 개체인 <code>xpathResult</code>를 반환합니다. <code>XPathResult</code> 인터페이스는 <a class="external" href="http://lxr.mozilla.org/seamonkey/source/dom/public/idl/xpath/nsIDOMXPathResult.idl">여기</a>에서 정의됩니다.</p> + +<h3 id="Default_Namespace_Resolver_.EA.B5.AC.ED.98.84" name="Default_Namespace_Resolver_.EA.B5.AC.ED.98.84">Default Namespace Resolver 구현</h3> + +<p>우리는 <a href="ko/DOM/document">document</a> 개체의 <code>createNSResolver</code> 메소드를 써서 namespace resolver를 만듭니다.</p> + +<pre class="notranslate">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); +</pre> + +<p><span class="comment">Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre></span> 그리고 나서 <code>document.evaluate</code> 함수에 <code>namespaceResolver</code> 매개변수로 <code>nsResolver</code> 변수를 넘겨줍니다.</p> + +<p>XPath는 null namespace의 단 하나 뿐인 요소와 일치하는 접두사 없는 <code>QNames</code>을 정의함을 유의하세요. XPath에는 기본 namespace를 얻는 방법이 없습니다. null이 아닌 namespace의 요소나 속성을 일치시키려면, 접두사 붙은 이름 검사를 쓰고 접두사를 namespace에 매핑하는 namespace resolver를 만들어야 합니다. 아래 <a href="#Implementing_a_User_Defined_Namespace_Resolver">사용자 정의 namespace resolver 만드는</a> 법을 더 읽으세요.</p> + +<h3 id=".EB.B0.98.ED.99.98.ED.98.95_.EC.A7.80.EC.A0.95" name=".EB.B0.98.ED.99.98.ED.98.95_.EC.A7.80.EC.A0.95">반환형 지정</h3> + +<p><code>document.evaluate</code>로부터 반환하는 변수 <code>xpathResult</code>는 개별 노드 (<a href="#Simple_Types">단순 형</a>)나 노드 모음(collection) (<a href="#Node-Set_Types">node-set 형</a>) 가운데 하나로 구성할 수 있습니다.</p> + +<h4 id=".EB.8B.A8.EC.88.9C_.ED.98.95" name=".EB.8B.A8.EC.88.9C_.ED.98.95">단순 형</h4> + +<p><code>resultType</code>으로 바랐던 결과형을 어느 한쪽으로 지정할 때,</p> + +<ul> + <li><code>NUMBER_TYPE</code> - a double</li> + <li><code>STRING_TYPE</code> - a string</li> + <li><code>BOOLEAN_TYPE</code> - a boolean</li> +</ul> + +<p>우리는 <code>XPathResult</code> 개체의 다음 속성에 각각 접근하여 식의 반환값을 얻습니다.</p> + +<ul> + <li><code>numberValue</code></li> + <li><code>stringValue</code></li> + <li><code>booleanValue</code></li> +</ul> + +<h5 id=".EC.98.88" name=".EC.98.88">예</h5> + +<p>다음은 HTML 문서의 <code><span class="nowiki"><p></span></code> 요소수를 얻기 위해 XPath 식 <code><a href="ko/XPath/Functions/count">count(//p)</a></code>을 씁니다.</p> + +<pre class="notranslate">var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null ); + +alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' ); +</pre> + +<p>비록 Javascript가 표시를 위해 숫자를 문자열로 변환하는 것을 허용하더라도, <code>stringValue</code> 속성(property)을 요청하면 XPath 인터페이스는 자동으로 숫자 결과로 변환하지 않습니다. 그래서 다음 코드는 작동하지 '<strong><big>않</big>'</strong>습니다.</p> + +<pre class="notranslate">var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null ); + +alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' ); +</pre> + +<p>대신 <code>NS_DOM_TYPE_ERROR</code> 코드를 갖는 예외(exception)를 반환합니다.</p> + +<h4 id="Node-Set_.ED.98.95" name="Node-Set_.ED.98.95">Node-Set 형</h4> + +<p><code>XPathResult</code> 개체는 주요한 3가지 서로 다른 형으로 반환될 node-set을 허용합니다.</p> + +<ul> + <li><a href="#Iterators">Iterators</a></li> + <li><a href="#Snapshots">Snapshots</a></li> + <li><a href="#First_Nodes">First Nodes</a></li> +</ul> + +<h5 id=".EB.B0.98.EB.B3.B5.EC.9E.90.28.ED.9B.91.EA.B0.9C.29" name=".EB.B0.98.EB.B3.B5.EC.9E.90.28.ED.9B.91.EA.B0.9C.29">반복자(훑개)</h5> + +<p><code>resultType</code> 매개변수로 지정한 결과형이 어느 한쪽일 때,</p> + +<ul> + <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li> + <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li> +</ul> + +<p>반환되는 <code>XPathResult</code> 개체는 일치하는 노드(<code>XPathResult</code>의 <code>iterateNext()</code> 메소드를 써서 포함될 개별 노드에 접근함을 허용하는 반복자로 행동할)의 노드 집합입니다.</p> + +<p>우리가 모든 일치하는 개별 노드에 반복하고 나면, <code>iterateNext()</code>는 <code>null</code>을 반환합니다.</p> + +<p>그러나 주의하세요, 만약 반복 도중에 문서가 바뀌면 (문서 tree가 변경됨) 그것은 반복을 무효로 만들고(invalidate) <code>XPathResult</code>의 <code>invalidIteratorState</code> 속성을 <code>true</code>로 지정하고 <code>NS_ERROR_DOM_INVALID_STATE_ERR</code> 예외를 냅니다.</p> + +<h6 id=".EB.B0.98.EB.B3.B5.EC.9E.90_.EC.98.88" name=".EB.B0.98.EB.B3.B5.EC.9E.90_.EC.98.88">반복자 예</h6> + +<pre class="notranslate">var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); + +try { + var thisNode = iterator.iterateNext(); + + while (thisNode) { + alert( thisNode.textContent ); + thisNode = iterator.iterateNext(); + } +} +catch (e) { + dump( 'Error: Document tree modified during iteraton ' + e ); +} +</pre> + +<h5 id="Snapshots" name="Snapshots">Snapshots</h5> + +<p><code>resultType</code> 매개변수로 지정한 결과형이 어느 한쪽일 때,</p> + +<ul> + <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li> + <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li> +</ul> + +<p>반환되는 <code>XPathResult</code> 개체는 일치하는 노드의 static node-set이고, 그것은 <code>itemNumber</code>가 검색(retrieve)되는 노드의 index인 <code>XPathResult</code> 개체의 <code>snapshotItem(itemNumber)</code> 메소드를 통해 각 노드에 접근을 허용합니다. 포함되는 노드의 총수는 <code>snapshotLength</code> 속성을 통해 입수할 수 있습니다.</p> + +<p>Snapshot은 변환 문서로 바꾸지 않습니다. 그래서 반복자와는 달리 snapshot은 무효로 만들지는 않지만 현재 문서와 들어맞지 않을지도 모릅니다, 예를 들어 노드가 이동됐을지도 모르고, 더 이상 존재하지 않는 노드나 추가될 수 있는 새 노드를 포함할지도 모릅니다.</p> + +<h6 id="Snapshot_.EC.98.88" name="Snapshot_.EC.98.88">Snapshot 예</h6> + +<pre class="notranslate">var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); + +for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ) +{ + dump( nodesSnapshot.snapshotItem(i).textContent ); +} +</pre> + +<h5 id="First_Node" name="First_Node">First Node</h5> + +<p><code>resultType</code> 매개변수로 지정한 결과형이 어느 한쪽일 때,</p> + +<ul> + <li><code>ANY_UNORDERED_NODE_TYPE</code></li> + <li><code>FIRST_ORDERED_NODE_TYPE</code></li> +</ul> + +<p>반환되는 <code>XPathResult</code> 개체는 XPath 식과 일치하는 오직 처음 발견한 노드입니다. 이는 <code>XPathResult</code> 개체의 <code>singleNodeValue</code> 속성을 통해 접근할 수 있습니다. 이는 노드 집합이 비면 <code>null</code>입니다.</p> + +<p>순서 없는 subtype인 경우 반환되는 단일 노드가 문서 순으로 처음이 아닐지도 모르지만 순서 있는 subtype인 경우 문서 순으로 처음 일치하는 노드임을 보장함을 유의하세요.</p> + +<h6 id="First_Node_.EC.98.88" name="First_Node_.EC.98.88">First Node 예</h6> + +<pre class="notranslate">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ); + +dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent ); +</pre> + +<h4 id="ANY_TYPE_.EC.83.81.EC.88.98" name="ANY_TYPE_.EC.83.81.EC.88.98">ANY_TYPE 상수</h4> + +<p><code>resultType</code> 매개변수에 결과형을 <code>ANY_TYPE</code>으로 지정할 때, 반환되는 <code>XPathResult</code> 개체는, 식 평가에서 자연스럽게 생긴 어떤 형입니다.</p> + +<p>단순 형( <code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code> ) 가운데 하나일 수도 있습니다, <strong><big>하지만</big></strong>, 만약 반환되는 결과형이 node-set이면 <strong><big>오직</big></strong> <code>UNORDERED_NODE_ITERATOR_TYPE</code>입니다.</p> + +<p>평가 뒤 형을 결정하기 위해서, 우리는 <code>XPathResult</code> 개체의 <code>resultType</code> 속성을 씁니다. 이 속성의 <a href="#XPathResult_Defined_Constants">상수</a>값은 부록에서 정의합니다. <span class="comment">None Yet =====Any_Type 예===== <pre> </pre></span></p> + +<h2 id=".EC.98.88_2" name=".EC.98.88_2">예</h2> + +<h3 id="HTML_.EB.AC.B8.EC.84.9C_.EC.95.88.EC.97.90.EC.84.9C" name="HTML_.EB.AC.B8.EC.84.9C_.EC.95.88.EC.97.90.EC.84.9C">HTML 문서 안에서</h3> + +<p>다음 코드는 XPath 식이 평가될 HTML 문서 안에서나 문서에 연결(link)된 어떤 JavaScript 조각(fragment)에 놓을 셈입니다.</p> + +<p>XPath를 써서 HTML의 모든 <code><span class="nowiki"><h2></span></code> heading 요소를 뽑아내면(extract), <code>xpathExpression</code> 문자열은 간단히 '<code>//h2</code>'입니다. 어떤 점에서, <code>//</code>는 요소 트리 어디에서나 노드명 <code>h2</code>와 요소를 일치시키는 재귀 내림 연산자(Recursive Descent Operator)입니다. 이를 위한 자세한 코드입니다. <span class="comment">link to introductory xpath doc</span></p> + +<pre class="notranslate">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null ); +</pre> + +<p>HTML이 namespace가 없기 때문에, 우리는 <code>namespaceResolver</code> 매개변수에 <code>null</code>을 넘겨줌을 유의하세요.</p> + +<p>우리가 문서 전체에서 heading을 찾기를 바라기 때문에, 우리는 <code>contextNode</code>로 <a href="ko/DOM/document">document</a> 개체 자신을 씁니다.</p> + +<p>이 식의 결과는 <code>XPathResult</code> 개체입니다. 우리가 반환되는 결과형을 알고 싶다면, 우리는 반환되는 개체의 <code>resultType</code> 속성을 평가할지도 모릅니다. 이 경우에는 그것은 값이 <code>4</code>인 <code>UNORDERED_NODE_ITERATOR_TYPE</code>로 평가합니다. 이는 XPath 식의 결과가 node-set일 때 기본 반환형입니다. 동시에 단일 노드로 접근을 제공하고 특정 순서로 노드를 반환할지도 모릅니다. 반환되는 개체에 접근하기 위해, 우리는 반환되는 개체의 <code>iterateNext()</code> 메소드를 씁니다.</p> + +<pre class="notranslate">var thisHeading = headings.iterateNext(); + +var alertText = 'Level 2 headings in this document are:\n' + +while (thisHeading) { + alertText += thisHeading.textContent + '\n'; + thisHeading = headings.iterateNext(); +} +</pre> + +<p>우리가 한 노드를 반복하기만 하면, 우리는 그 노드의 모든 표준 <a href="ko/DOM_interfaces">DOM interfaces</a>에 접근할 수 있습니다. 우리 식에서 반환된 모든 <code>h2</code> 요소를 반복한 뒤에, 더 이상의 <code>iterateNext()</code> 호출은 <code>null</code>을 반환합니다.</p> + +<h3 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EC.95.88.EC.97.90.EC.84.9C_XML_.EB.AC.B8.EC.84.9C_.ED.8F.89.EA.B0.80" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EC.95.88.EC.97.90.EC.84.9C_XML_.EB.AC.B8.EC.84.9C_.ED.8F.89.EA.B0.80">확장기능 안에서 XML 문서 평가</h3> + +<p>다음은 예로 <a class="external" rel="freelink">chrome://yourextension/content/peopleDB.xml에</a> 자리한 XML 문서를 씁니다.</p> + +<pre class="notranslate"><?xml version="1.0"?> +<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > + <person> + <name first="george" last="bush" /> + <address street="1600 pennsylvania avenue" city="washington" country="usa"/> + <phoneNumber>202-456-1111</phoneNumber> + </person> + <person> + <name first="tony" last="blair" /> + <address street="10 downing street" city="london" country="uk"/> + <phoneNumber>020 7925 0918</phoneNumber> + </person> +</people> +</pre> + +<p>확장기능 안에서 XML 문서의 컨텐트를 쓸 수 있게, 우리는 문서를 로드하는 동시에 변수 <code>xmlDoc</code>를 우리가 <code>evaluate</code> 메소드를 쓸 수 있는 <code><a href="ko/XMLDocument">XMLDocument</a></code> 개체로 문서에 포함하는 <code><a href="ko/XMLHttpRequest">XMLHttpRequest</a></code> 개체를 만듭니다,</p> + +<p>JavaScript는 확장기능 xul/js 문서에 씁니다.</p> + +<pre class="notranslate">var req = new XMLHttpRequest(); + +req.open("GET", "chrome://yourextension/content/peopleDB.xml", false); +req.send(null); + +var xmlDoc = req.responseXML; + +var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement); + +var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null ); +</pre> + +<h2 id=".EB.B6.80.EB.A1.9D" name=".EB.B6.80.EB.A1.9D">부록</h2> + +<h4 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_Namespace_Resolver_.EA.B5.AC.ED.98.84" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_Namespace_Resolver_.EA.B5.AC.ED.98.84">사용자 정의 Namespace Resolver 구현</h4> + +<p>이는 단지 설명을 위한 예입니다. 이 함수는 <code>xpathExpression</code>에서 namespace 접두사를 취할 필요가 있고 그 접두사와 들어맞는 URI를 반환합니다. 예를 들어, 다음 식은</p> + +<pre class="notranslate">'//xhtml:td/mathml:math' +</pre> + +<p>(X)HTML 표 데이터 셀 요소의 자식인 모든 <a href="ko/MathML">MathML</a> 식을 선택합니다.</p> + +<p><code>mathml:</code> 접두사를 namespace URI '<code><a class="external" href="http://www.w3.org/1998/Math/MathML" rel="freelink">http://www.w3.org/1998/Math/MathML</a></code>'와 <code>html:</code>을 URI <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code>와 관련시키기 위해 우리는 함수 하나를 제공합니다.</p> + +<pre class="notranslate">function nsResolver(prefix) { + var ns = { + 'xhtml' : 'http://www.w3.org/1999/xhtml', + 'mathml': 'http://www.w3.org/1998/Math/MathML' + }; + return ns[prefix] || null; +} +</pre> + +<p>그러면 <code>document.evaluate</code> 호출은 다음과 같습니다.</p> + +<pre class="notranslate">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null ); +</pre> + +<h4 id="XPathResult_.EC.A0.95.EC.9D.98_.EC.83.81.EC.88.98" name="XPathResult_.EC.A0.95.EC.9D.98_.EC.83.81.EC.88.98">XPathResult 정의 상수</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">결과형 정의 상수</td> + <td class="header">값</td> + <td class="header">설명</td> + </tr> + <tr> + <td>ANY_TYPE</td> + <td>0</td> + <td>식 평가에서 자연스럽게 생긴 어떤 형을 포함하는 결과 집합. 만약 결과가 node-set이면 UNORDERED_NODE_ITERATOR_TYPE이 항상 결과형임을 주의하세요.</td> + </tr> + <tr> + <td>NUMBER_TYPE</td> + <td>1</td> + <td>single 숫자를 포함하는 결과. 이는 예를 들어, <code>count()</code> 함수를 쓰는 XPath 식에 쓸모가 있습니다.</td> + </tr> + <tr> + <td>STRING_TYPE</td> + <td>2</td> + <td>single 문자열을 포함하는 결과.</td> + </tr> + <tr> + <td>BOOLEAN_TYPE</td> + <td>3</td> + <td>single boolean 값을 포함하는 결과. 이는 예를 들어, <code>not()</code> 함수를 쓰는 XPath 식에 쓸모가 있습니다.</td> + </tr> + <tr> + <td>UNORDERED_NODE_ITERATOR_TYPE</td> + <td>4</td> + <td>식과 일치하는 모든 노드를 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다.</td> + </tr> + <tr> + <td>ORDERED_NODE_ITERATOR_TYPE</td> + <td>5</td> + <td>식과 일치하는 모든 노드를 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다.</td> + </tr> + <tr> + <td>UNORDERED_NODE_SNAPSHOT_TYPE</td> + <td>6</td> + <td>식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다.</td> + </tr> + <tr> + <td>ORDERED_NODE_SNAPSHOT_TYPE</td> + <td>7</td> + <td>식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다.</td> + </tr> + <tr> + <td>ANY_UNORDERED_NODE_TYPE</td> + <td>8</td> + <td>식과 일치하는 어떤 단일 노드를 포함하는 결과 node-set. 노드는 식과 일치하는 문서의 첫 노드일 필요는 없습니다.</td> + </tr> + <tr> + <td>FIRST_ORDERED_NODE_TYPE</td> + <td>9</td> + <td>식과 일치하는 문서의 첫 노드를 포함하는 결과 node-set.</td> + </tr> + </tbody> +</table> + +<div class="originaldocinfo"> +<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2> + +<ul> + <li>원본 문서 <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath 입문서</a>를 기반으로 함</li> + <li>원본 소스 저자: James Graham.</li> + <li>다른 기여자: James Thompson.</li> + <li>맨 나중 업데이트: 2006-3-25.</li> +</ul> +</div> + +<p>{{ languages( { "en": "en/Introduction_to_using_XPath_in_JavaScript" } ) }}</p> diff --git a/files/ko/web/xslt/apply-imports/index.html b/files/ko/web/xslt/element/apply-imports/index.html index 9377bd2538..a3e2a34f57 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><br> diff --git a/files/ko/web/xslt/apply-templates/index.html b/files/ko/web/xslt/element/apply-templates/index.html index fdb8662849..7e5a800932 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:apply-templates></code> 요소는 입력 트리 안 노드 집합을 선택하고 그 집합에 알맞은 템플릿을 적용하도록 처리기에게 지시합니다.</p> diff --git a/files/ko/web/xslt/attribute-set/index.html b/files/ko/web/xslt/element/attribute-set/index.html index e4b34b6b21..9f9bb349fc 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:attribute-set></code> 요소는 CSS 안에 이름 붙인 스타일과 비슷한 방식으로 이름 붙인 속성 집합을 만듭니다. 그러면, 출력 문서에 전체로서 적용할 수 있습니다.</p> diff --git a/files/ko/web/xslt/attribute/index.html b/files/ko/web/xslt/element/attribute/index.html index 1c348584f7..f4a75657d1 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:attribute></code> 요소는 스타일시트에서 접근할 수 있는 어떤 값을 써서 출력 문서에 속성을 만듭니다. 요소는 속성값을 자리 잡게 하는 출력 문서 요소 안에 정의한 것 가운데 처음이어야 합니다.</p> diff --git a/files/ko/web/xslt/call-template/index.html b/files/ko/web/xslt/element/call-template/index.html index c5aa8c1a53..623ba72623 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:call-template></code> 요소는 이름 붙인 템플릿을 호출합니다.</p> diff --git a/files/ko/web/xslt/choose/index.html b/files/ko/web/xslt/element/choose/index.html index ea615e7e15..cb8162c00a 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:choose></code> 요소는 많은 선택 가운데 하나를 정의합니다. 그리고 절차형 언어(procedural language)의 스위치 문처럼 동작합니다.</p> diff --git a/files/ko/web/xslt/comment/index.html b/files/ko/web/xslt/element/comment/index.html index 56b12a9968..33ab342b71 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:comment></code> 요소는 출력 문서에 주석을 작성합니다. 오직 텍스트만 포함해야 합니다.</p> diff --git a/files/ko/web/xslt/copy-of/index.html b/files/ko/web/xslt/element/copy-of/index.html index cfd00ae443..99619c2bba 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:copy-of></code> 요소는 select 속성이 출력 문서에 무엇을 지정하든지 (자손 노드를 포함하여) 깊게 복사(deep copy)합니다.</p> diff --git a/files/ko/web/xslt/copy/index.html b/files/ko/web/xslt/element/copy/index.html index 7d6e480167..9d88349f6f 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:copy></code> 요소는 출력 문서에 현재 노드의 노드와 어떤 관련 이름공간 노드만을 얕게 복사(shallow copy) 전달합니다. 속성이나 자식은 복사하지 않습니다.</p> diff --git a/files/ko/web/xslt/decimal-format/index.html b/files/ko/web/xslt/element/decimal-format/index.html index 83e51a2e90..3547ebce4f 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:decimal-format></code> 요소는 diff --git a/files/ko/web/xslt/fallback/index.html b/files/ko/web/xslt/element/fallback/index.html index af407f4512..df4ad29dc2 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:fallback></code> 요소는 주어진 확장(이나 결국에는 새 버전) 요소에서 지원하지 않으면 쓸 템플릿을 지정합니다.</p> diff --git a/files/ko/web/xslt/for-each/index.html b/files/ko/web/xslt/element/for-each/index.html index 6beb713190..12e3c53000 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:for-each></code> 요소는 노드 집합을 선택하고 같은 방식으로 각 노드를 처리합니다. 노드 집합을 되풀이하(iterate)거나 현재 노드를 바꾸는데 자주 씁니다. 하나 이상의 <code><xsl:sort></code> 요소가 이 요소의 자식으로 나타나면, 처리에 앞서 정렬을 합니다. 그렇지 않으면, 노드는 문서 순으로 처리합니다.</p> diff --git a/files/ko/web/xslt/if/index.html b/files/ko/web/xslt/element/if/index.html index 2c56b7d218..062d4b661a 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:if></code> 요소는 test 속성과 템플릿을 포함합니다. test 속성을 참으로 평가하면, 템플릿을 처리합니다. 이것은 다른 언어의 if 문과 비슷합니다. 그러나, <tt>if-then-else</tt> 문의 기능을 다하기 위해 <code><xsl:when></code>과 <code><xsl:otherwise></code> 자식이 하나씩 있는 <code><xsl:choose></code> 요소를 씁니다.</p> diff --git a/files/ko/web/xslt/import/index.html b/files/ko/web/xslt/element/import/index.html index 5a469656cb..cc21696d56 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:import></code> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트로 가져오는 역할을 하는 최상위 요소입니다. 대체로, 가져올 스타일시트의 컨텐트는 가져오는 스타일시트의 컨텐트보다 가져오기 우선순위가 낮습니다. 이는 포함되는 스타일시트의 컨텐트가 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같은 <code><xsl:include></code>와는 뚜렷이 다릅니다.</p> diff --git a/files/ko/web/xslt/include/index.html b/files/ko/web/xslt/element/include/index.html index 965d03a15f..c630a24fa9 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:include></code> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트에 합칩니다. <code><xsl:import></code>와는 달리, 포함되는 스타일시트의 컨텐트는 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같습니다.</p> diff --git a/files/ko/web/xslt/key/index.html b/files/ko/web/xslt/element/key/index.html index 733196810d..b90dc027fb 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:key></code> 요소는 <code>key( )</code> 함수가 있는 스타일시트 어디서나 쓸 수 있는 이름 붙은 키를 선언합니다.</p> diff --git a/files/ko/web/xslt/message/index.html b/files/ko/web/xslt/element/message/index.html index d533a2d3c7..da7d0dc5e3 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:message></code> 요소는 (NS에서 자바스크립트 콘솔에) 메시지를 출력하고 선택에 따라 스타일시트 실행을 끝냅니다. 디버깅에 유용할 수 있습니다.</p> diff --git a/files/ko/web/xslt/namespace-alias/index.html b/files/ko/web/xslt/element/namespace-alias/index.html index e085abc4e7..2eecc31677 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:namespace-alias></code> 요소는 스타일시트 이름공간을 출력 트리의 다른 이름공간으로 매기는(map) 데 드물게 쓰는 방안(device)입니다. 이 요소의 가장 평범한 쓰임은 다른 스타일시트로부터 스타일시트를 만드는 것입니다. 보통 <code>xsl:</code>가 접두사로 붙은 (결과 트리에 단순히 복사해도 좋을) LRE(literal result element)를 처리기가 오해하는 것을 막기 위해, 결과 트리의 XSLT 이름공간에 적당하게 도로 다시 바꿀 임시 이름공간을 할당합니다.</p> diff --git a/files/ko/web/xslt/number/index.html b/files/ko/web/xslt/element/number/index.html index b822625a0e..dee0854a78 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:number></code> 요소는 숫자를 연속으로 셉니다. 또한 숫자를 빠르게 구성하는(format) 데도 쓸 수 있습니다.</p> diff --git a/files/ko/web/xslt/otherwise/index.html b/files/ko/web/xslt/element/otherwise/index.html index 50249dc0b4..166fccd78a 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:otherwise></code> 요소는 아무런 <code><xsl:when></code> 조건도 적용하지 않았을 때 취하면 좋을 동작을 정의하는 데 씁니다. 다른 프로그래밍 언어의 <code>else</code>나 <code>default</code> 경우와 비슷합니다.</p> diff --git a/files/ko/web/xslt/output/index.html b/files/ko/web/xslt/element/output/index.html index 97baf3f433..396209b19f 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:output></code> 요소는 출력 문서의 특성을 조절합니다. method 속성이 있는 이 요소가 Netscape에서 정확하게 기능하도록 쓸 수 있어야 합니다. 7.0 현재, <code>method="text"</code>는 기대한 대로 동작합니다.</p> diff --git a/files/ko/web/xslt/param/index.html b/files/ko/web/xslt/element/param/index.html index e1bcf36e19..647bc6de91 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:param></code> 요소는 이름과 선택에 따라 기본값으로 매개변수를 설정합니다. 최상위 요소로 쓸 때, 매개변수는 전역입니다. <code><xsl:template></code> 요소 안에서 쓰면, 매개변수는 그 템플릿에 대해 지역입니다. 이 경우에 요소는 템플릿의 첫 자식 요소여야 합니다.</p> diff --git a/files/ko/web/xslt/preserve-space/index.html b/files/ko/web/xslt/element/preserve-space/index.html index 771ffe81d6..d8f881ca93 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:preserve-space></code> 요소는 공백을 보존하면 좋을 소스 문서의 요소를 정의합니다. 하나 이상의 요소가 있으면, 공백 문자로 이름을 구분하세요. 공백 보존하기가 기본 설정이므로 이 요소는 오직 <code><xsl:strip-space></code> 요소와 거꾸로 동작하기 위해 쓸 필요가 있습니다.</p> diff --git a/files/ko/web/xslt/processing-instruction/index.html b/files/ko/web/xslt/element/processing-instruction/index.html index ad1c6eaaf6..7050401821 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:processing-instruction></code> 요소는 출력 문서에 처리 명령을 씁니다.</p> diff --git a/files/ko/web/xslt/sort/index.html b/files/ko/web/xslt/element/sort/index.html index 22217ec61f..878933a511 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:sort></code> 요소는 <code><xsl:apply-templates></code>나 <code><xsl:for-each></code>가 선택한 노드에 정렬키를 정의하고 노드를 처리할 순서를 결정합니다.</p> diff --git a/files/ko/web/xslt/strip-space/index.html b/files/ko/web/xslt/element/strip-space/index.html index 7bbc485afd..3809c15ef1 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:strip-space></code> 요소는 공백을 지웠으면 하는 소스 문서의 요소를 정의합니다.</p> diff --git a/files/ko/web/xslt/stylesheet/index.html b/files/ko/web/xslt/element/stylesheet/index.html index 0119cec645..14357afada 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:stylesheet></code>(나 동등한 <code><xsl:transform></code>) 요소는 스타일시트의 최외곽 요소입니다.</p> diff --git a/files/ko/web/xslt/template/index.html b/files/ko/web/xslt/element/template/index.html index 1ce4a66d2b..aef6bd013d 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:template></code> 요소는 출력 생성 템플릿을 정의합니다. 이 요소는 match 속성이나 name 속성 집합이 있어야 합니다.</p> diff --git a/files/ko/web/xslt/text/index.html b/files/ko/web/xslt/element/text/index.html index 71bd6eceda..ce02fc6f17 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:text></code> 요소는 출력 트리에 리터럴(literal) 텍스트를 씁니다. <code>#PCDATA</code>, 리터럴 텍스트, 엔티티 참조를 포함할 지도 모릅니다.</p> diff --git a/files/ko/web/xslt/transform/index.html b/files/ko/web/xslt/element/transform/index.html index 8071ebdad3..b1c398999c 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:transform></code> 요소는 <code><a href="ko/XSLT/stylesheet"><xsl:stylesheet></a></code> 요소와 정확히 같습니다.</p> diff --git a/files/ko/web/xslt/value-of/index.html b/files/ko/web/xslt/element/value-of/index.html index 90f1777bed..1020c96edb 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:value-of></code> 요소는 XPath 식을 평가하여 그것을 문자열로 바꾸고 문자열을 결과 트리에 씁니다.</p> diff --git a/files/ko/web/xslt/variable/index.html b/files/ko/web/xslt/element/variable/index.html index 8568f70b20..ba1f44730a 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:variable></code> 요소는 스타일시트에 전역 변수나 지역 변수를 선언하고 그 변수에 값을 줍니다. XSLT가 부작용(side-effect)을 허용하지 않기 때문에, 변수값을 한 번 주면 그 변수는 범위(scope)를 벗어날 때까지 같은 값입니다.</p> diff --git a/files/ko/web/xslt/when/index.html b/files/ko/web/xslt/element/when/index.html index 4d5f52d9c3..7d1d5dcf0b 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:when></code> 요소는 항상 case 문처럼 동작하는 <code><xsl:choose></code> 요소 안에 나타납니다.</p> diff --git a/files/ko/web/xslt/with-param/index.html b/files/ko/web/xslt/element/with-param/index.html index cd96049cc5..78e2dedd60 100644 --- a/files/ko/web/xslt/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 --- <p>{{ XsltRef() }}</p> <p><code><xsl:with-param></code> 요소는 템플릿에 건네는 매개변수 값을 지정합니다.</p> diff --git a/files/ko/web/xslt/the_xslt_javascript_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/the_xslt_javascript_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 --- <ol> <li><a href="ko/The_XSLT%2f%2fJavaScript_Interface_in_Gecko/Introduction">개요</a></li> diff --git a/files/ko/web/xslt/the_xslt_javascript_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/the_xslt_javascript_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 --- <h2 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h2> <p><a href="ko/XSLT_in_Gecko">XSLT</a>를 지원하는 현대의 브라우저를 가지고, 개발자는 XSLT가 제공하는 힘에 접근하기 위해 자바스크립트를 지금 사용할 수 있다. 자바스크립트는 웹 프로그램이 XML자료를 로드하고, XSLT를 통해 표현가능한 형태로 처리하고 존재하는 문서안에 넣는 것을 가능하게 한다. XML자료는 아무런 표현자료 없이 오직 날 정보만을 포함하므로, 다이얼업에서도 빠르게 로드할 수 있다.</p> diff --git a/files/ko/web/xslt/the_xslt_javascript_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/the_xslt_javascript_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 --- <h2 id="Parameter_.EC.84.A4.EC.A0.95" name="Parameter_.EC.84.A4.EC.A0.95">Parameter 설정</h2> <p>이미 코딩된 .xsl과 .xml 파일을 이용하여 변환을 실행하는 것은 꽤 쓸모있는데, .xml파일을 JavaScript로부터 설정하는 것은 좀 더 쓸모있다.예로, JavaScript와 XSLT는 XML데이터를 정렬하여 표시하는 데 쓸 수 있다. 정렬은 오름차순과 내림차순을 바꿀 수 있어야 할 것이다. XSLT는 <code>xsl:param</code> 요소를 제공하는데, 그것은 <code>xsl:stylesheet</code> 요소의 자식이다. <code>XSLTProcessor()</code>는 이 파라메터와 상호작용하기 위해 3가지 JavaScript 메소드를 제공한다: <code>setParameter</code>, <code>getParameter</code>, <code>removeParameter.</code></p> |