diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-07 21:57:08 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-08 10:57:08 +0900 |
| commit | 0d13feed6a627047449d99af02d1fb55bbfad1a9 (patch) | |
| tree | bb7efedc3137bfea1c69f510617b602009d58b3d /files/ko | |
| parent | ff9ea0cf9f0ea6217deefa7ad0dba35bf7f6c45e (diff) | |
| download | translated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.tar.gz translated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.tar.bz2 translated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.zip | |
delete conflicting/orphaned in ko (#1423)
* delete conflicting/orphaned in ko
* forgot the redirects
Diffstat (limited to 'files/ko')
138 files changed, 1 insertions, 15745 deletions
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index b957c957d7..49274088fa 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -23,23 +23,16 @@ /ko/docs/Apps/Progressive/Offline_Service_workers /ko/docs/Web/Progressive_web_apps/Offline_Service_workers /ko/docs/Apps/Progressive/Re-engageable_Notifications_Push /ko/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push /ko/docs/Apps/Progressive/소개 /ko/docs/Web/Progressive_web_apps/Introduction -/ko/docs/Building_an_Extension /ko/docs/conflicting/Mozilla/Add-ons /ko/docs/CSS /ko/docs/Web/CSS /ko/docs/CSS/@font-face /ko/docs/Web/CSS/@font-face /ko/docs/CSS/Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/CSS/Getting_Started/Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks -/ko/docs/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/CSS/Getting_Started/Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/Getting_Started/JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ko/docs/CSS/Getting_Started/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout -/ko/docs/CSS/Getting_Started/Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ko/docs/CSS/Getting_Started/Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types /ko/docs/CSS/Getting_Started/SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/CSS/Getting_Started/Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables -/ko/docs/CSS/Getting_Started/Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/Getting_Started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/Getting_Started/XBL_bindings /ko/docs/Web/CSS/Getting_Started/XBL_bindings @@ -59,7 +52,6 @@ /ko/docs/CSS/Understanding_z-index/Stacking_without_z-index-redirect-1 /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /ko/docs/CSS/Understanding_z-index/The_stacking_context /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /ko/docs/CSS/Using_CSS_animations /ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/ko/docs/CSS/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ko/docs/CSS/Using_CSS_transforms /ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /ko/docs/CSS/animation /ko/docs/Web/CSS/animation /ko/docs/CSS/background /ko/docs/Web/CSS/background @@ -70,7 +62,6 @@ /ko/docs/CSS/cursor /ko/docs/Web/CSS/cursor /ko/docs/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ko/docs/CSS/initial_value /ko/docs/Web/CSS/initial_value -/ko/docs/CSS/linear-gradient /ko/docs/orphaned/Web/CSS/linear-gradient() /ko/docs/CSS/text-shadow /ko/docs/Web/CSS/text-shadow /ko/docs/CSS/transform /ko/docs/Web/CSS/transform /ko/docs/CSS/z-index /ko/docs/Web/CSS/z-index @@ -78,31 +69,19 @@ /ko/docs/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/시작하기/내용물 /ko/docs/Learn/CSS/Howto/Generated_content -/ko/docs/CSS/시작하기/리스트 /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ko/docs/CSS/시작하기/미디어 /ko/docs/Web/Progressive_web_apps/Responsive/Media_types -/ko/docs/CSS/시작하기/배치 /ko/docs/conflicting/Learn/CSS/CSS_layout -/ko/docs/CSS/시작하기/상자 /ko/docs/conflicting/Learn/CSS/Building_blocks /ko/docs/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/CSS/시작하기/종속과_상속 /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/ko/docs/CSS/시작하기/테이블 /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables -/ko/docs/CSS/시작하기/텍스트_스타일 /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/CSS3_Columns /ko/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /ko/docs/CSS:Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/CSS:Getting_Started:Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks -/ko/docs/CSS:Getting_Started:Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/CSS:Getting_Started:Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS:Getting_Started:Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/CSS:Getting_Started:How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS:Getting_Started:JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ko/docs/CSS:Getting_Started:Layout /ko/docs/conflicting/Learn/CSS/CSS_layout -/ko/docs/CSS:Getting_Started:Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ko/docs/CSS:Getting_Started:Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types /ko/docs/CSS:Getting_Started:SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/CSS:Getting_Started:Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/CSS:Getting_Started:Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables -/ko/docs/CSS:Getting_Started:Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/CSS:Getting_Started:What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS:Getting_Started:Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS:Getting_Started:XBL_bindings /ko/docs/Web/CSS/Getting_Started/XBL_bindings @@ -111,64 +90,8 @@ /ko/docs/CSS:background /ko/docs/Web/CSS/background /ko/docs/CSS:initial_value /ko/docs/Web/CSS/initial_value /ko/docs/CSS_Reference /ko/docs/Web/CSS/Reference -/ko/docs/CSS_Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template -/ko/docs/CSS_Reference:Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template /ko/docs/Consistent_List_Indentation /ko/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation /ko/docs/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -/ko/docs/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece -/ko/docs/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 -/ko/docs/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 -/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide -/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f -/ko/docs/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 -/ko/docs/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f -/ko/docs/Core_JavaScript_1.5_Guide:About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/Core_JavaScript_1.5_Guide:Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/Core_JavaScript_1.5_Guide:Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/Core_JavaScript_1.5_Guide:JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/Core_JavaScript_1.5_Guide:Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece -/ko/docs/Core_JavaScript_1.5_Guide:Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 -/ko/docs/Core_JavaScript_1.5_Guide:Operators:String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 -/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide -/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/Core_JavaScript_1.5_Guide:Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f -/ko/docs/Core_JavaScript_1.5_Guide:Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 -/ko/docs/Core_JavaScript_1.5_Guide:Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f /ko/docs/Core_JavaScript_1.5_Reference /ko/docs/Web/JavaScript/Reference /ko/docs/Core_JavaScript_1.5_Reference/About /ko/docs/Web/JavaScript/Reference/About /ko/docs/Core_JavaScript_1.5_Reference/About/Formatting_Conventions /ko/docs/Web/JavaScript/Reference/About @@ -184,14 +107,12 @@ /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Object /ko/docs/Web/JavaScript/Reference/Global_Objects/Object /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String /ko/docs/Web/JavaScript/Reference/Global_Objects/String -/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /ko/docs/Core_JavaScript_1.5_Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Core_JavaScript_1.5_Reference/Global_Properties/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/Core_JavaScript_1.5_Reference/LiveConnect /ko/docs/Web/JavaScript/Reference/LiveConnect /ko/docs/Core_JavaScript_1.5_Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Core_JavaScript_1.5_Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function /ko/docs/Core_JavaScript_1.5_Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators -/ko/docs/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /ko/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator /ko/docs/Web/JavaScript/Reference/Operators/this /ko/docs/Core_JavaScript_1.5_Reference/Operators/this /ko/docs/Web/JavaScript/Reference/Operators/this @@ -234,8 +155,6 @@ /ko/docs/DOM/element.lastChild /ko/docs/Web/API/Node/lastChild /ko/docs/DOM/element.length /ko/docs/Web/API/NodeList/length /ko/docs/DOM/element.scrollIntoView /ko/docs/Web/API/Element/scrollIntoView -/ko/docs/DOM/element.style /ko/docs/orphaned/Web/API/ElementCSSInlineStyle/style -/ko/docs/DOM/element.tabIndex /ko/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /ko/docs/DOM/event /ko/docs/Web/API/Event /ko/docs/DOM/event.cancelable /ko/docs/Web/API/Event/cancelable /ko/docs/DOM/event.preventDefault /ko/docs/Web/API/Event/preventDefault @@ -264,8 +183,6 @@ /ko/docs/DOM:element.firstChild /ko/docs/Web/API/Node/firstChild /ko/docs/DOM:element.lastChild /ko/docs/Web/API/Node/lastChild /ko/docs/DOM:element.length /ko/docs/Web/API/NodeList/length -/ko/docs/DOM:element.style /ko/docs/orphaned/Web/API/ElementCSSInlineStyle/style -/ko/docs/DOM:element.tabIndex /ko/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /ko/docs/DOM:event /ko/docs/Web/API/Event /ko/docs/DOM:form /ko/docs/Web/API/HTMLFormElement /ko/docs/DOM:range /ko/docs/Web/API/Range @@ -317,9 +234,7 @@ /ko/docs/HTML/Element/Video /ko/docs/Web/HTML/Element/Video /ko/docs/HTML/Element/a /ko/docs/Web/HTML/Element/a /ko/docs/HTML/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus -/ko/docs/HTML/HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5 /ko/docs/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element -/ko/docs/HTML/HTML5/Introduction_to_HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ko/docs/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/HTML/Inline_elements /ko/docs/Web/HTML/Inline_elements /ko/docs/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML @@ -328,7 +243,6 @@ /ko/docs/HTML:Element:a /ko/docs/Web/HTML/Element/a /ko/docs/HTML:Inline_elements /ko/docs/Web/HTML/Inline_elements /ko/docs/IndexedDB /ko/docs/Web/API/IndexedDB_API -/ko/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB /ko/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ko/docs/IndexedDB/Using_IndexedDB /ko/docs/Web/API/IndexedDB_API/Using_IndexedDB /ko/docs/Introduction_to_using_XPath_in_JavaScript /ko/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /ko/docs/JSAPI_Reference/Alphabetical_List /ko/docs/JSAPI_Reference @@ -342,36 +256,7 @@ /ko/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /ko/docs/JavaScript/Guide/Obsolete_Pages /ko/docs/Web/JavaScript/Guide /ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f /ko/docs/JavaScript/Guide/Values,_variables,_and_literals /ko/docs/Web/JavaScript/Guide/Grammar_and_types -/ko/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /ko/docs/conflicting/Learn/JavaScript/Objects /ko/docs/JavaScript/Memory_Management /ko/docs/Web/JavaScript/Memory_Management /ko/docs/JavaScript/New_in_JavaScript /ko/docs/Web/JavaScript/New_in_JavaScript /ko/docs/JavaScript/New_in_JavaScript/New_in_JavaScript_1.8 /ko/docs/Web/JavaScript/New_in_JavaScript/1.8 @@ -390,26 +275,22 @@ /ko/docs/JavaScript/Reference/Global_Objects/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/JavaScript/Reference/Global_Objects/Object /ko/docs/Web/JavaScript/Reference/Global_Objects/Object /ko/docs/JavaScript/Reference/Global_Objects/String /ko/docs/Web/JavaScript/Reference/Global_Objects/String -/ko/docs/JavaScript/Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /ko/docs/JavaScript/Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/JavaScript/Reference/LiveConnect /ko/docs/Web/JavaScript/Reference/LiveConnect /ko/docs/JavaScript/Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/JavaScript/Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function /ko/docs/JavaScript/Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators -/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /ko/docs/JavaScript/Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/JavaScript/Reference/Operators/this /ko/docs/Web/JavaScript/Reference/Operators/this /ko/docs/JavaScript/Reference/Operators/void /ko/docs/Web/JavaScript/Reference/Operators/void /ko/docs/JavaScript/Reference/Reserved_Words /ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드 /ko/docs/JavaScript/Reference/Statements /ko/docs/Web/JavaScript/Reference/Statements /ko/docs/JavaScript/Reference/Statements/for...in /ko/docs/Web/JavaScript/Reference/Statements/for...in -/ko/docs/JavaScript/시작하기 /ko/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics /ko/docs/JavaScript/언어_리소스 /ko/docs/Web/JavaScript/Language_Resources /ko/docs/JavaScript_modules /ko/docs/Web/JavaScript/Guide/Modules /ko/docs/JavaScript_technologies_overview /ko/docs/Web/JavaScript/JavaScript_technologies_overview /ko/docs/JavaScript_technologies_overview-redirect-1 /ko/docs/Web/JavaScript/JavaScript_technologies_overview /ko/docs/Learn/CSS/Basics /en-US/docs/Learn/CSS/First_steps -/ko/docs/Learn/CSS/Basics/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout/Introduction /ko/docs/Learn/CSS/Building_blocks/상자_모델 /ko/docs/Learn/CSS/Building_blocks/The_box_model /ko/docs/Learn/CSS/Building_blocks/선택자 /ko/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 /ko/docs/Learn/CSS/CSS_layout/Media_queries @@ -444,11 +325,8 @@ /ko/docs/Learn/HTML/Forms/My_first_HTML_form /ko/docs/Learn/Forms/Your_first_form /ko/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data /ko/docs/Learn/Forms/Sending_and_retrieving_form_data /ko/docs/Learn/HTML/Forms/Your_first_HTML_form /ko/docs/Learn/Forms/Your_first_form -/ko/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable /ko/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting /ko/docs/Learn/HTML/Howto/데이터_속성_사용하기 /ko/docs/Learn/HTML/Howto/Use_data_attributes /ko/docs/Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content /ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/ko/docs/Learn/How_to_contribute /ko/docs/orphaned/Learn/How_to_contribute -/ko/docs/Learn/Infrastructure /ko/docs/conflicting/Learn/Common_questions /ko/docs/Learn/JavaScript/Building_blocks/조건문 /ko/docs/Learn/JavaScript/Building_blocks/conditionals /ko/docs/Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON /ko/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON /ko/docs/Learn/Server-side/Express_Nodejs/개발_환경 /ko/docs/Learn/Server-side/Express_Nodejs/development_environment @@ -462,15 +340,11 @@ /ko/docs/Learn/WebGL/By_example/Scissor_animation /ko/docs/Web/API/WebGL_API/By_example/Scissor_animation /ko/docs/Learn/WebGL/By_example/Simple_color_animation /ko/docs/Web/API/WebGL_API/By_example/Simple_color_animation /ko/docs/Learn/WebGL/By_example/Textures_from_code /ko/docs/Web/API/WebGL_API/By_example/Textures_from_code -/ko/docs/Learn/Web_기술 /ko/docs/conflicting/Learn/Common_questions_139278709439023a85d849385412271e /ko/docs/Learn/접근성 /ko/docs/Learn/Accessibility /ko/docs/Learn/접근성/HTML /ko/docs/Learn/Accessibility/HTML /ko/docs/Learn/접근성/What_is_accessibility /ko/docs/Learn/Accessibility/What_is_accessibility /ko/docs/Learn/접근성/모바일 /ko/docs/Learn/Accessibility/Mobile /ko/docs/Localization /ko/docs/Glossary/Localization -/ko/docs/MDN/Community /ko/docs/orphaned/MDN/Community -/ko/docs/MDN/Community/Conversations /ko/docs/orphaned/MDN/Community/Conversations -/ko/docs/MDN/Community/Working_in_community /ko/docs/orphaned/MDN/Community/Working_in_community /ko/docs/MDN/Contribute/Content /ko/docs/MDN/Guidelines /ko/docs/MDN/Contribute/Content/Best_practices /ko/docs/MDN/Guidelines/Conventions_definitions /ko/docs/MDN/Contribute/Content/Style_guide /ko/docs/MDN/Guidelines/Writing_style_guide @@ -479,15 +353,8 @@ /ko/docs/MDN/Contribute/Guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines /ko/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS /ko/docs/MDN/Guidelines/Code_guidelines/CSS /ko/docs/MDN/Contribute/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines/General -/ko/docs/MDN/Contribute/Howto/Do_a_technical_review /ko/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review -/ko/docs/MDN/Contribute/Howto/Do_an_editorial_review /ko/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/ko/docs/MDN/Contribute/Howto/MDN_계정_생성하기 /ko/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account -/ko/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /ko/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -/ko/docs/MDN/Contribute/Howto/Tag_JavaScript_pages /ko/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -/ko/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /ko/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /ko/docs/MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 /ko/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live /ko/docs/MDN/Contribute/Structures /ko/docs/MDN/Structures -/ko/docs/MDN/Contribute/Structures/API_references /ko/docs/orphaned/MDN/Structures/API_references /ko/docs/MDN/Contribute/Structures/API_references/API_reference_sidebars /ko/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars /ko/docs/MDN/Contribute/Structures/Compatibility_tables /ko/docs/MDN/Structures/Compatibility_tables /ko/docs/MDN/Contribute/Structures/Macros /ko/docs/MDN/Structures/Macros @@ -500,11 +367,7 @@ /ko/docs/MDN/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines/General /ko/docs/MDN/Guidelines/Style_guide /ko/docs/MDN/Guidelines/Writing_style_guide /ko/docs/MDN/Kuma /ko/docs/MDN/Yari -/ko/docs/MDN/Structures/API_references /ko/docs/orphaned/MDN/Structures/API_references /ko/docs/MDN/Structures/API_references/API_reference_sidebars /ko/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars -/ko/docs/MDN/User_guide /ko/docs/conflicting/MDN/Tools -/ko/docs/MDN/커뮤니티 /ko/docs/orphaned/MDN/Community -/ko/docs/MDN/커뮤니티/Conversations /ko/docs/orphaned/MDN/Community/Conversations /ko/docs/MDN/피드백 /ko/docs/MDN/Contribute/Feedback /ko/docs/MDN_at_ten /ko/docs/MDN/At_ten /ko/docs/MathML /ko/docs/Web/MathML @@ -569,7 +432,6 @@ /ko/docs/SVG_in_Firefox /ko/docs/Web/SVG/SVG_1.1_Support_in_Firefox /ko/docs/Scripting_Plugins /ko/docs/Plugins/Guide/Scripting_plugins /ko/docs/Setting_HTTP_request_headers /ko/docs/XPCOM/Setting_HTTP_request_headers -/ko/docs/The_DOM_and_JavaScript /ko/docs/conflicting/Web/JavaScript/JavaScript_technologies_overview /ko/docs/The_Importance_of_Correct_HTML_Commenting /ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments /ko/docs/The_Thread_Manager /ko/docs/XPCOM/The_Thread_Manager /ko/docs/The_XSLT_JavaScript_Interface_in_Gecko /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko @@ -591,26 +453,15 @@ /ko/docs/Using_JSON_in_Firefox /ko/docs/Web/JavaScript/Reference/Global_Objects/JSON /ko/docs/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ko/docs/Using_URL_values_for_the_cursor_property-redirect-1 /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -/ko/docs/Using_XPath /ko/docs/conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript /ko/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations /ko/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations -/ko/docs/Web/API/AbstractWorker /ko/docs/orphaned/Web/API/AbstractWorker -/ko/docs/Web/API/Ambient_Light_Events /ko/docs/orphaned/Web/API/Ambient_Light_Events -/ko/docs/Web/API/Body /ko/docs/orphaned/Web/API/Body -/ko/docs/Web/API/Body/json /ko/docs/orphaned/Web/API/Body/json /ko/docs/Web/API/Boolean /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean /ko/docs/Web/API/Canvas_API/캔버스_튜토리얼 /ko/docs/Web/API/Canvas_API/Tutorial -/ko/docs/Web/API/ChildNode /ko/docs/orphaned/Web/API/ChildNode -/ko/docs/Web/API/ChildNode/before /ko/docs/orphaned/Web/API/ChildNode/before -/ko/docs/Web/API/ChildNode/remove /ko/docs/orphaned/Web/API/ChildNode/remove -/ko/docs/Web/API/Detecting_device_orientation /ko/docs/orphaned/Web/API/Detecting_device_orientation /ko/docs/Web/API/Document/defaultView/popstate_event /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/API/Document/defaultView/resize_event /ko/docs/Web/API/Window/resize_event /ko/docs/Web/API/Document/drag_이벤트 /ko/docs/Web/API/Document/drag_event -/ko/docs/Web/API/DocumentOrShadowRoot /ko/docs/orphaned/Web/API/DocumentOrShadowRoot /ko/docs/Web/API/DocumentOrShadowRoot/activeElement /ko/docs/Web/API/Document/activeElement /ko/docs/Web/API/DocumentOrShadowRoot/getSelection /ko/docs/Web/API/Document/getSelection /ko/docs/Web/API/DocumentOrShadowRoot/styleSheets /ko/docs/Web/API/Document/styleSheets -/ko/docs/Web/API/Document_Object_Model/Events /ko/docs/orphaned/Web/API/Document_Object_Model/Events /ko/docs/Web/API/Document_Object_Model/Preface /ko/docs/Web/API/Document_Object_Model /ko/docs/Web/API/Document_Object_Model/소개 /ko/docs/Web/API/Document_Object_Model/Introduction /ko/docs/Web/API/Document_Object_Model/예제 /ko/docs/Web/API/Document_Object_Model/Examples @@ -618,22 +469,13 @@ /ko/docs/Web/API/Element.getAttribute /ko/docs/Web/API/Element/getAttribute /ko/docs/Web/API/Element/accessKey /ko/docs/Web/API/HTMLElement/accessKey /ko/docs/Web/API/Element/childNodes /ko/docs/Web/API/Node/childNodes -/ko/docs/Web/API/Element/currentStyle /ko/docs/orphaned/Web/API/Element/currentStyle /ko/docs/Web/API/Element/firstChild /ko/docs/Web/API/Node/firstChild -/ko/docs/Web/API/ElementCSSInlineStyle/style /ko/docs/orphaned/Web/API/ElementCSSInlineStyle/style /ko/docs/Web/API/Event/createEvent /ko/docs/Web/API/Document/createEvent /ko/docs/Web/API/Fetch_API/Fetch의_사용법 /ko/docs/Web/API/Fetch_API/Using_Fetch /ko/docs/Web/API/FileReader.result /ko/docs/Web/API/FileReader/result -/ko/docs/Web/API/HTMLElement/dataset /ko/docs/orphaned/Web/API/HTMLOrForeignElement/dataset -/ko/docs/Web/API/HTMLElement/style /ko/docs/orphaned/Web/API/ElementCSSInlineStyle/style -/ko/docs/Web/API/HTMLElement/tabIndex /ko/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex -/ko/docs/Web/API/HTMLHyperlinkElementUtils /ko/docs/orphaned/Web/API/HTMLHyperlinkElementUtils /ko/docs/Web/API/HTMLHyperlinkElementUtils/href /ko/docs/Web/API/HTMLAnchorElement/href -/ko/docs/Web/API/HTMLOrForeignElement/dataset /ko/docs/orphaned/Web/API/HTMLOrForeignElement/dataset -/ko/docs/Web/API/HTMLOrForeignElement/tabIndex /ko/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /ko/docs/Web/API/HTML_드래그_앤_드롭_API /ko/docs/Web/API/HTML_Drag_and_Drop_API /ko/docs/Web/API/HTML_드래그_앤_드롭_API/Drag_operations /ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations -/ko/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ko/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ko/docs/Web/API/Navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.battery/window.navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection @@ -642,14 +484,8 @@ /ko/docs/Web/API/NetworkInformation/connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/Node/innerText /ko/docs/Web/API/HTMLElement/innerText /ko/docs/Web/API/Notification.permission /ko/docs/Web/API/Notification/permission -/ko/docs/Web/API/OffscreenCanvas/toBlob /ko/docs/orphaned/Web/API/OffscreenCanvas/toBlob -/ko/docs/Web/API/ParentNode /ko/docs/orphaned/Web/API/ParentNode -/ko/docs/Web/API/ParentNode/append /ko/docs/orphaned/Web/API/ParentNode/append /ko/docs/Web/API/ParentNode/childElementCount /ko/docs/Web/API/Element/childElementCount -/ko/docs/Web/API/ParentNode/children /ko/docs/orphaned/Web/API/ParentNode/children -/ko/docs/Web/API/ParentNode/prepend /ko/docs/orphaned/Web/API/ParentNode/prepend /ko/docs/Web/API/Position /ko/docs/Web/API/GeolocationPosition -/ko/docs/Web/API/RTCPeerConnection/onidentityresult /ko/docs/orphaned/Web/API/RTCPeerConnection/onidentityresult /ko/docs/Web/API/RandomSource /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/RandomSource/getRandomValues /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/Screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation @@ -663,7 +499,6 @@ /ko/docs/Web/API/WebGL_API/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Creating_3D_objects_using_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -/ko/docs/Web/API/WebGL_API/Cross-Domain_Textures /ko/docs/conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL @@ -682,12 +517,8 @@ /ko/docs/Web/API/window.screen.onorientationchange /ko/docs/Web/API/Screen/onorientationchange /ko/docs/Web/API/window.screen.orientation /ko/docs/Web/API/Screen/orientation /ko/docs/Web/API/window.screen.unlockOrientation /ko/docs/Web/API/Screen/unlockOrientation -/ko/docs/Web/CSS/@viewport/height /ko/docs/conflicting/Web/CSS/@viewport -/ko/docs/Web/CSS/@viewport/viewport-fit /ko/docs/conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f -/ko/docs/Web/CSS/@viewport/zoom /ko/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 /ko/docs/Web/CSS/All_About_The_Containing_Block /ko/docs/Web/CSS/Containing_block /ko/docs/Web/CSS/CSS_Background_and_Borders /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders -/ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/Web/CSS/CSS_Colors /ko/docs/Web/CSS/CSS_Color /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox @@ -703,28 +534,19 @@ /ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃 /ko/docs/Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines /ko/docs/Web/CSS/CSS_Masks /ko/docs/Web/CSS/CSS_Masking /ko/docs/Web/CSS/CSS_Reference /ko/docs/Web/CSS/Reference -/ko/docs/Web/CSS/CSS_Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template /ko/docs/Web/CSS/CSS_User_Interface /ko/docs/Web/CSS/CSS_Basic_User_Interface /ko/docs/Web/CSS/CSS_단위와_값 /ko/docs/Web/CSS/CSS_Values_and_Units /ko/docs/Web/CSS/Common_CSS_Questions /ko/docs/Learn/CSS/Howto/CSS_FAQ /ko/docs/Web/CSS/Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/Web/CSS/Getting_Started/Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks -/ko/docs/Web/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/Web/CSS/Getting_Started/Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/Web/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/Getting_Started/JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ko/docs/Web/CSS/Getting_Started/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout -/ko/docs/Web/CSS/Getting_Started/Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ko/docs/Web/CSS/Getting_Started/Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types /ko/docs/Web/CSS/Getting_Started/SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/Web/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/Web/CSS/Getting_Started/Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables -/ko/docs/Web/CSS/Getting_Started/Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/Web/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/Getting_Started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/Web/CSS/Index /ko/docs/orphaned/Web/CSS/Index -/ko/docs/Web/CSS/Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template /ko/docs/Web/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/Web/CSS/Understanding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index /ko/docs/Web/CSS/Understanding_z-index/Adding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index @@ -735,7 +557,6 @@ /ko/docs/Web/CSS/Understanding_z-index/Stacking_without_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /ko/docs/Web/CSS/Understanding_z-index/The_stacking_context /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /ko/docs/Web/CSS/Using_CSS_animations /ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/ko/docs/Web/CSS/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ko/docs/Web/CSS/Using_CSS_transforms /ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /ko/docs/Web/CSS/Using_CSS_variables /ko/docs/Web/CSS/Using_CSS_custom_properties /ko/docs/Web/CSS/calc /ko/docs/Web/CSS/calc() @@ -744,8 +565,6 @@ /ko/docs/Web/CSS/filter-function/blur /ko/docs/Web/CSS/filter-function/blur() /ko/docs/Web/CSS/filter-function/brightness /ko/docs/Web/CSS/filter-function/brightness() /ko/docs/Web/CSS/filter-function/contrast /ko/docs/Web/CSS/filter-function/contrast() -/ko/docs/Web/CSS/linear-gradient /ko/docs/orphaned/Web/CSS/linear-gradient() -/ko/docs/Web/CSS/linear-gradient() /ko/docs/orphaned/Web/CSS/linear-gradient() /ko/docs/Web/CSS/transform-function/matrix /ko/docs/Web/CSS/transform-function/matrix() /ko/docs/Web/CSS/transform-function/scaleX /ko/docs/Web/CSS/transform-function/scaleX() /ko/docs/Web/CSS/url /ko/docs/Web/CSS/url() @@ -754,16 +573,10 @@ /ko/docs/Web/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/내용물 /ko/docs/Learn/CSS/Howto/Generated_content -/ko/docs/Web/CSS/시작하기/리스트 /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ko/docs/Web/CSS/시작하기/미디어 /ko/docs/Web/Progressive_web_apps/Responsive/Media_types -/ko/docs/Web/CSS/시작하기/배치 /ko/docs/conflicting/Learn/CSS/CSS_layout -/ko/docs/Web/CSS/시작하기/상자 /ko/docs/conflicting/Learn/CSS/Building_blocks /ko/docs/Web/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Web/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/Web/CSS/시작하기/종속과_상속 /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/ko/docs/Web/CSS/시작하기/테이블 /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables -/ko/docs/Web/CSS/시작하기/텍스트_스타일 /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/Web/CSS/인접_형제_선택자 /ko/docs/Web/CSS/Adjacent_sibling_combinator /ko/docs/Web/Events/DOMContentLoaded /ko/docs/Web/API/Window/DOMContentLoaded_event /ko/docs/Web/Events/abort /ko/docs/Web/API/HTMLMediaElement/abort_event @@ -787,16 +600,9 @@ /ko/docs/Web/Guide/CSS/Media_queries /ko/docs/Web/CSS/Media_Queries/Using_media_queries /ko/docs/Web/Guide/CSS/Using_CSS_transitions /ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions /ko/docs/Web/Guide/CSS/Visual_formatting_model /ko/docs/Web/CSS/Visual_formatting_model -/ko/docs/Web/Guide/DOM /ko/docs/conflicting/Web/API/Document_Object_Model /ko/docs/Web/Guide/DOM/Using_full_screen_mode /ko/docs/Web/API/Fullscreen_API -/ko/docs/Web/Guide/Events /ko/docs/orphaned/Web/Guide/Events -/ko/docs/Web/Guide/Events/Creating_and_triggering_events /ko/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events -/ko/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /ko/docs/orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers /ko/docs/Web/Guide/HTML /ko/docs/Learn/HTML /ko/docs/Web/Guide/HTML/Content_Editable /ko/docs/Web/Guide/HTML/Editable_content -/ko/docs/Web/Guide/HTML/HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5 -/ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ko/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ko/docs/Web/Guide/HTML/컨텐트_카테고리 /ko/docs/Web/Guide/HTML/Content_categories /ko/docs/Web/Guide/HTML/폼 /ko/docs/Learn/Forms /ko/docs/Web/Guide/HTML/폼/HTML_폼_구성_방법 /ko/docs/Learn/Forms/How_to_structure_a_web_form @@ -821,8 +627,6 @@ /ko/docs/Web/HTML/Canvas/Tutorial/변형 /ko/docs/Web/API/Canvas_API/Tutorial/Transformations /ko/docs/Web/HTML/Element/Video/canplay_event /ko/docs/Web/API/HTMLMediaElement/canplay_event /ko/docs/Web/HTML/Element/Video/canplaythrough_event /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event -/ko/docs/Web/HTML/Element/command /ko/docs/orphaned/Web/HTML/Element/command -/ko/docs/Web/HTML/Element/element /ko/docs/orphaned/Web/HTML/Element/element /ko/docs/Web/HTML/Element/h1 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/h2 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/h3 /ko/docs/Web/HTML/Element/Heading_Elements @@ -831,15 +635,10 @@ /ko/docs/Web/HTML/Element/h6 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/캔버스 /ko/docs/Web/HTML/Element/canvas /ko/docs/Web/HTML/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus -/ko/docs/Web/HTML/Global_attributes/dropzone /ko/docs/orphaned/Web/HTML/Global_attributes/dropzone /ko/docs/Web/HTML/Global_attributes/클래스 /ko/docs/Web/HTML/Global_attributes/class -/ko/docs/Web/HTML/HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5 /ko/docs/Web/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element -/ko/docs/Web/HTML/HTML5/Introduction_to_HTML5 /ko/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽 /ko/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /ko/docs/Web/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/Web/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML -/ko/docs/Web/HTML/Preloading_content /ko/docs/orphaned/Web/HTML/Preloading_content /ko/docs/Web/HTTP/Access_control_CORS /ko/docs/Web/HTTP/CORS /ko/docs/Web/HTTP/Access_control_CORS/Errors /ko/docs/Web/HTTP/CORS/Errors /ko/docs/Web/HTTP/Access_control_CORS/Errors/CORSDidNotSucceed /ko/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed @@ -847,40 +646,11 @@ /ko/docs/Web/HTTP/User_agent를_이용한_브라우저_감지 /ko/docs/Web/HTTP/Browser_detection_using_the_user_agent /ko/docs/Web/HTTP/상태_코드 /ko/docs/Web/HTTP/Status /ko/docs/Web/JavaScript/About /ko/docs/Web/JavaScript/About_JavaScript -/ko/docs/Web/JavaScript/Differential_inheritance_in_JavaScript /ko/docs/orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript /ko/docs/Web/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/Introduction /ko/docs/Web/JavaScript/Guide/Closures /ko/docs/Web/JavaScript/Closures /ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Guide/Obsolete_Pages /ko/docs/Web/JavaScript/Guide /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 -/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f /ko/docs/Web/JavaScript/Guide/Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide /ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals /ko/docs/Web/JavaScript/Guide/Grammar_and_types /ko/docs/Web/JavaScript/Guide/객체_모델의_세부사항 /ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model @@ -890,7 +660,6 @@ /ko/docs/Web/JavaScript/Guide/정규식/Assertions /ko/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions /ko/docs/Web/JavaScript/Guide/정규식/Groups_and_Ranges /ko/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges /ko/docs/Web/JavaScript/Guide/함수 /ko/docs/Web/JavaScript/Guide/Functions -/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript /ko/docs/conflicting/Learn/JavaScript/Objects /ko/docs/Web/JavaScript/New_in_JavaScript/New_in_JavaScript_1.8 /ko/docs/Web/JavaScript/New_in_JavaScript/1.8 /ko/docs/Web/JavaScript/Reference/About/Formatting_Conventions /ko/docs/Web/JavaScript/Reference/About /ko/docs/Web/JavaScript/Reference/Classes/Class_fields /ko/docs/Web/JavaScript/Reference/Classes/Public_class_fields @@ -898,66 +667,28 @@ /ko/docs/Web/JavaScript/Reference/Global_Functions /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Global_Objects/Array/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Array /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer -/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt/prototype /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /ko/docs/Web/JavaScript/Reference/Global_Objects/Date/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Date /ko/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Date /ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Function -/ko/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/InternalError -/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Locale /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale /ko/docs/Web/JavaScript/Reference/Global_Objects/Locale/language /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/language -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/Map /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/Map -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/clear /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/delete /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/entries /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/get /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/has /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/set /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/size /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object -/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply -/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Set -/ko/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -/ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String -/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError /ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError -/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray -/ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap -/ko/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet -/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global /ko/docs/Web/JavaScript/Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Methods_Index /ko/docs/Web/JavaScript/Reference /ko/docs/Web/JavaScript/Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function -/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators -/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e -/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 -/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 -/ko/docs/Web/JavaScript/Reference/Operators/Pipeline_operator /ko/docs/orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator /ko/docs/Web/JavaScript/Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators/Spread_operator /ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax -/ko/docs/Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) /ko/docs/conflicting/Web/JavaScript/Reference/Operators_13aeb53e31f9cec454ca631cb162449f /ko/docs/Web/JavaScript/Reference/Operators/연산자_우선순위 /ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence /ko/docs/Web/JavaScript/Reference/Properties_Index /ko/docs/Web/JavaScript/Reference /ko/docs/Web/JavaScript/Reference/Reserved_Words /ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드 -/ko/docs/Web/JavaScript/Reference/Statements/default /ko/docs/conflicting/Web/JavaScript/Reference/Statements/switch /ko/docs/Web/JavaScript/Tutorials /ko/docs/Web/JavaScript /ko/docs/Web/JavaScript/쉘 /ko/docs/Web/JavaScript/Shells -/ko/docs/Web/JavaScript/시작하기 /ko/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics /ko/docs/Web/JavaScript/언어_리소스 /ko/docs/Web/JavaScript/Language_Resources /ko/docs/Web/Media/Formats/비디오코덱 /ko/docs/Web/Media/Formats/Video_codecs /ko/docs/Web/Media/Formats/컨테이너 /ko/docs/Web/Media/Formats/Containers @@ -965,8 +696,6 @@ /ko/docs/Web/Performance/브라우저는_어떻게_동작하는가 /ko/docs/Web/Performance/How_browsers_work /ko/docs/Web/Performance/중요_렌더링_경로 /ko/docs/Web/Performance/Critical_rendering_path /ko/docs/Web/Progressive_web_apps/소개 /ko/docs/Web/Progressive_web_apps/Introduction -/ko/docs/Web/Reference /ko/docs/orphaned/Web/Reference -/ko/docs/Web/Reference/API /ko/docs/orphaned/Web/Reference/API /ko/docs/Web/Reference/Events /ko/docs/Web/Events /ko/docs/Web/Reference/Events/DOMContentLoaded /ko/docs/Web/API/Window/DOMContentLoaded_event /ko/docs/Web/Reference/Events/DOMSubtreeModified /ko/docs/Web/Events/DOMSubtreeModified @@ -988,13 +717,11 @@ /ko/docs/Web/SVG/Tutorial/기본_도형 /ko/docs/Web/SVG/Tutorial/Basic_Shapes /ko/docs/Web/SVG/Tutorial/시작하기 /ko/docs/Web/SVG/Tutorial/Getting_Started /ko/docs/Web/SVG/Tutorial/위치 /ko/docs/Web/SVG/Tutorial/Positions -/ko/docs/Web/Security/정보_보안_기본 /ko/docs/orphaned/Web/Security/Information_Security_Basics /ko/docs/Web/WebGL /ko/docs/Web/API/WebGL_API /ko/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/WebGL/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /ko/docs/Web/WebGL/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL /ko/docs/Web/WebGL/Creating_3D_objects_using_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -/ko/docs/Web/WebGL/Cross-Domain_Textures /ko/docs/conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /ko/docs/Web/WebGL/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /ko/docs/Web/WebGL/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL /ko/docs/Web/WebGL/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL @@ -1040,15 +767,10 @@ /ko/docs/Web/XSLT/variable /ko/docs/Web/XSLT/Element/variable /ko/docs/Web/XSLT/when /ko/docs/Web/XSLT/Element/when /ko/docs/Web/XSLT/with-param /ko/docs/Web/XSLT/Element/with-param -/ko/docs/Web/참조 /ko/docs/orphaned/Web/Reference -/ko/docs/Web/참조/API /ko/docs/orphaned/Web/Reference/API -/ko/docs/WebAPI /ko/docs/conflicting/Web/API /ko/docs/WebAPI/Battery_Status /ko/docs/Web/API/Battery_Status_API -/ko/docs/WebAPI/Detecting_device_orientation /ko/docs/orphaned/Web/API/Detecting_device_orientation /ko/docs/WebAPI/Managing_screen_orientation /ko/docs/Web/API/CSS_Object_Model/Managing_screen_orientation /ko/docs/WebAPI/Network_Information /ko/docs/Web/API/Network_Information_API /ko/docs/WebAPI/Proximity /ko/docs/Web/API/Proximity_Events -/ko/docs/WebAPI/Using_Light_Events /ko/docs/orphaned/Web/API/Ambient_Light_Events /ko/docs/WebAPI/Using_Web_Notifications /ko/docs/Web/API/Notifications_API/Using_the_Notifications_API /ko/docs/WebAPI/Using_geolocation /ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API /ko/docs/WebAPI/Vibration /ko/docs/Web/API/Vibration_API @@ -1056,7 +778,6 @@ /ko/docs/WebSockets /ko/docs/Web/API/WebSockets_API /ko/docs/WebSockets/Writing_WebSocket_client_applications /ko/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications /ko/docs/WebSockets/Writing_WebSocket_servers /ko/docs/Web/API/WebSockets_API/Writing_WebSocket_servers -/ko/docs/Web_Development /ko/docs/conflicting/Web/Guide /ko/docs/XHTML /ko/docs/Glossary/XHTML /ko/docs/XMLHttpRequest /ko/docs/Web/API/XMLHttpRequest /ko/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests /ko/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests @@ -1275,3 +996,4 @@ /ko/docs/도구들/WebIDE/문제해결 /ko/docs/Tools/WebIDE/문제해결 /ko/docs/도구들/Web_Console /ko/docs/Tools/Web_Console /ko/docs/호환_모드와_표준_모드 /ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode + diff --git a/files/ko/conflicting/learn/common_questions/index.html b/files/ko/conflicting/learn/common_questions/index.html deleted file mode 100644 index b31ee26f0d..0000000000 --- a/files/ko/conflicting/learn/common_questions/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Infrastructure -slug: conflicting/Learn/Common_questions -translation_of: Learn/Common_questions -translation_of_original: Learn/Infrastructure -original_slug: Learn/Infrastructure ---- -<p><span style="line-height: 1.5;">이 능력은 인터넷 기술 스택에 대해 잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:</span></p> - -<h2 id="기본_스킬" style="line-height: 30px; font-size: 2.14285714285714rem;">기본 스킬</h2> - -<p>웹에 익숙하지 않으시다면 여기서부터 시작하세요. 웹에 관련된 전문용어를 이해하기위해서 <a href="https://developer.mozilla.org/en-US/docs/Glossary">용어사전</a>을 참고하는 것을 추천합니다.</p> - -<h2 id="중급_스킬" style="line-height: 30px; font-size: 2.14285714285714rem;">중급 스킬</h2> - -<p>웹에 익숙해지셨다면, 여기에 더 자세한 것들이 있습니다:</p> - -<h2 id="고급_스킬" style="line-height: 30px; font-size: 2.14285714285714rem;">고급 스킬</h2> - -<p>경험있는 웹 저자라면, 특정 주제나 특별한 기술들에 흥미를 느끼실 것입니다.</p> diff --git a/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html deleted file mode 100644 index cfebc2d59c..0000000000 --- a/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Web 기술 -slug: conflicting/Learn/Common_questions_139278709439023a85d849385412271e -tags: - - Beginner - - WebMechanics -translation_of: Learn/Common_questions -translation_of_original: Learn/Web_Mechanics -original_slug: Learn/Web_기술 ---- -<p><span style="line-height: 1.5;">이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.</span></p> - -<p>{{NoteStart}}<em>Web 기술 </em>은 웹 생태계의 기술적인 측명이 아니라, <a href="/en-US/docs/Learn/skills/Infrastructure"><em>Infrastructure </em></a>범위의 기능에 집중합니다.{{NoteEnd}}</p> - -<h2 id="기본_스킬">기본 스킬</h2> - -<p>만약 웹이 익숙하지 않다면 여기서 시작하세요. 웹 용어의 이해를 돕기 위한 우리의 <a href="/en-US/docs/Glossary" style="line-height: 1.5;">glossary</a> 에 의지하는것도 제안합니다.</p> - -<h2 id="중급_스킬">중급 스킬</h2> - -<p>일단 웹이 익숙해지셨다면, 여러분이 탐구할 몇 가지 세부적인 것이 여기 있습니다:</p> - -<h2 id="고급_스킬">고급 스킬</h2> - -<p>만약 웹 제작을 경험해보셨다면, 여러분은 몇 가지 특수하거나 일반적이지 않은 기술들에 흥미를 가지실 것입니다.</p> diff --git a/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index 73e1decd09..0000000000 --- a/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 종속과 상속 -slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -original_slug: Web/CSS/시작하기/종속과_상속 ---- -<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/conflicting/learn/css/building_blocks/index.html b/files/ko/conflicting/learn/css/building_blocks/index.html deleted file mode 100644 index 04c02d0efe..0000000000 --- a/files/ko/conflicting/learn/css/building_blocks/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: 상자 -slug: conflicting/Learn/CSS/Building_blocks -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes -original_slug: Web/CSS/시작하기/상자 ---- -<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/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index 68fe28a5f0..0000000000 --- a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: 테이블 -slug: conflicting/Learn/CSS/Building_blocks/Styling_tables -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables -original_slug: Web/CSS/시작하기/테이블 ---- -<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/conflicting/learn/css/css_layout/index.html b/files/ko/conflicting/learn/css/css_layout/index.html deleted file mode 100644 index 1b3c4a73ca..0000000000 --- a/files/ko/conflicting/learn/css/css_layout/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: 배치 -slug: conflicting/Learn/CSS/CSS_layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout -original_slug: Web/CSS/시작하기/배치 ---- -<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/conflicting/learn/css/css_layout/introduction/index.html b/files/ko/conflicting/learn/css/css_layout/introduction/index.html deleted file mode 100644 index d8d0dc9b06..0000000000 --- a/files/ko/conflicting/learn/css/css_layout/introduction/index.html +++ /dev/null @@ -1,410 +0,0 @@ ---- -title: Introduction to CSS Layout -slug: conflicting/Learn/CSS/CSS_layout/Introduction -translation_of: Learn/CSS/CSS_layout/Introduction -translation_of_original: Learn/CSS/Basics/Layout -original_slug: Learn/CSS/Basics/Layout ---- -<p>{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}</p> - -<p class="summary"><span class="seoSummary">CSS layout is the art of using various CSS properties to alter the positioning of elements on a document in order to fit the design requirements.</span> CSS provides many layout mechanisms, the more advanced and modern techniques are so complex that they get their own articles. In this article, we will introduce the basic techniques that have been used for years.</p> - -<p>To properly layout a document with CSS, there are a few notions that one must know. The most important of these is {{Glossary("HTML")}} text flow. We will cover it in this article. Articles about other layout mechanisms will, at some point or the other, refer back to what we are discussing here.</p> - -<h2 id="The_flow">The flow</h2> - -<p>At its most basic level an HTML document is a text document structured with {{Glossary("tag","tags")}}. In such a document, the text <em>flows</em>. That means text is displayed in the reading direction (from left to right, for example, in Latin based languages like English or French) and is broken automatically - creating new lines - each time the text reaches an edge of the document.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg" style="height: auto; max-width: 450px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg#large" style="height: auto; max-width: 450px;"></p> - -<p>Each {{Glossary("element","elements")}} in the document alters the flow of text in various ways:</p> - -<ul> - <li>Some elements can simply follow the text flow as if they were non-existent.</li> - <li>Some elements can force a line break at any point in the flow whether it has reached the edge of the document or not.</li> - <li>Some elements can create a new text flow for their inner content independent from the main text flow.</li> -</ul> - -<h3 id="디스플레이_요소_(Elements_display_categories)">디스플레이 요소 (Elements display categories)</h3> - -<p>CSS is used to define how an HTML element behaves within the flow and how it get in and out of that flow. The element behavior is defined using the property {{cssxref('display')}}. This property can take tons of values but let's focus on the four most important:</p> - -<dl> - <dt>none</dt> - <dd>모든 요소를 제거 합니다.</dd> - <dt>inline</dt> - <dd>줄을 바꾸지 않고, 해당 위치에서 다른 요소들과 같은 선상에 위치하려는 성질을 말합니다. </dd> - <dt>block</dt> - <dd>This value is for the element to break the text flow with a forced line break before and after it. Its content is no longer part of the global text flow and flows only within the constraints provided by the element <a href="/en-US/docs/Learn/CSS/Basics/Box_model">box model</a>.</dd> - <dt>inline-block</dt> - <dd>This value makes the element somewhat in between inline and block type display: like <code>inline</code> boxes it flows with the text normally but, like block boxes, it's content is no longer part of the global text.</dd> -</dl> - -<p>Let's see an example.</p> - -<p>HTML:</p> - -<pre class="brush: html"><p class="none"> - 1. I'm a big black cat, - <span>walking under a ladder,</span> - and I can see broken mirrors everywhere. -</p> - -<p class="inline"> - 2. I'm a big black cat, - <span>walking under a ladder,</span> - and I can see broken mirrors everywhere. -</p> - -<p class="block"> - 3. I'm a big black cat, - <span>walking under a ladder,</span> - and I can see broken mirrors everywhere. -</p> - -<p class="inline-block"> - 4. I'm a big black cat, - <span>walking under a ladder,</span> - and I can see broken mirrors everywhere. -</p> -</pre> - -<p>CSS:</p> - -<pre class="brush: css">span { - width: 5em; - background: yellow; -} - -.none span { display: none; } -.inline span { display: inline; } -.block span { display: block; } -.inline-block span { display: inline-block; }</pre> - -<p>Results:</p> - -<p>{{EmbedLiveSample('Elements_display_categories', '100%', '300px')}}</p> - -<h2 id="Altering_the_flow">Altering the flow</h2> - -<p>By setting the display property you're already altering the flow, but you can go further.</p> - -<h3 id="Text_layout">Text layout</h3> - -<p>While an HTML document is nothing more than a long text flow, CSS provides many properties to deal with simple text layout. The text layout is everything that allows changing the text line breaking rules and the way the text is positioned over the natural text line.</p> - -<p>Those properties are: {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}}, and {{cssxref("word-wrap")}}.</p> - -<p>Except for <code>text-align and<font face="Open Sans, Arial, sans-serif">, </font></code><code>text-indent </code>the other properties have subtle effects on the text and <code>vertical-align</code> is often used with inline-block boxes.</p> - -<p>An example will make things clearer.</p> - -<p>HTML:</p> - -<pre class="brush: html"><p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> -<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> -</pre> - -<p>CSS:</p> - -<pre class="brush: css">.format { - /* The first line is "pull" to a 2em distance */ - text-indent: -2em; - - /* We need to compensate the negative indent - to avoid unwanted text clipping and keep - the whole text within the boundary of its - element box */ - padding-left: 2em; - - /* The text is aligned on both edges, adjusting - spacing between words as necessary */ - text-align: justify; - - /* The last line of the block of text is centered */ - -moz-text-align-last: center; - text-align-last: center; - - /* Rather than line break between two words the line - break can occur inside words, according to the rules - defined for the text language. This makes nice word cut - with a clear hyphen dash. If you don care about word - breaking rules, you could just use word-break or - word-wrap instead */ - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -}</pre> - -<div class="note"> -<p>As you might notice, some properties are written multiple times with some prefix. This is because those prefixed properties are still experimental for some browsers and it is considered best practice to use them all with the standard property at the end of the list in order to provide the best backward compatibility possible.</p> -</div> - -<p>Results:</p> - -<p>{{ EmbedLiveSample('Text_layout', '100%', '350') }}</p> - -<div class="note"> -<p>It's worth noting that the trick we used to compensate the negative text indentation is a very common trick. Any property that accepts a length also accepts negative values. By fiddling with negative values and compensating them with other properties, it's possible to produce very clever effects on the layout, especially when it applies to properties of the box model.</p> -</div> - -<h3 id="Floating">Floating</h3> - -<p>Okay, handling text is nice, but at some point what we really want is to move boxes around the document. The first way to handle that is to deal with floating boxes. Floating boxes are still attached to the global text flow, but the text will flow around. Sounds weird, so let's see an example.</p> - -<h4 id="Simple_floating">Simple floating</h4> - -<p>HTML:</p> - -<pre class="brush: html"><div> - <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p> - <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p> -</div></pre> - -<p>CSS:</p> - -<pre class="brush: css">.excerpt { - /* A floating box will act like a block whatever - the value of display we are using */ - display: block; - - /* Our box is floating to the left, which means - it will stack on the left side of the containing - block and the text will flow on its right side. */ - float: left; - - /* It is required to set a width to a floating box. - If we don't its width will be set - automatically, which means that it will grow as much - as possible and nothing will flow around it, like an - ordinary block box */ - width: 40%; - - /* We set some margins on the right and bottom side of - the box to avoid having the text flowing around being - in direct visual contact of our floating box */ - margin: 0 1em 1em 0; - - /* We make our floating box more visible with - a simple background color */ - background: lightgrey; - - /* As we have a solid background color it's a nice idea - to push the content a little bit away from the edges - of the box */ - padding: 1em; -}</pre> - -<p>Results:</p> - -<p>{{ EmbedLiveSample('Simple_floating', '100%', '280') }}</p> - -<h4 id="Layout_with_floating">Layout with floating</h4> - -<p>This is a very simple effect to start tweaking the flow to our wishes. Now it's possible to do better and start performing some true layout. A floating box that floats in a given direction stacks horizontally, it's a very convenient way to create rows of boxes instead of natural columns: In the flow, block boxes stack in columns and floating boxes stack in rows.</p> - -<p>Once again, an example will make things clearer.</p> - -<p>HTML:</p> - -<pre class="brush: html"><div class="layout"> - <div class="row"> - <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p> - <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p> - </div> - <div class="row"> - <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p> - </div> - <div class="row"> - <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p> - <p class="cell size33"> - "Ding, dong!"<br> - "A quarter past," said Scrooge, counting.<br> - "Ding, dong!"<br> - "Half-past!" said Scrooge.<br> - "Ding, dong!"<br> - "A quarter to it," said Scrooge.<br> - "Ding, dong!"<br> - "The hour itself," said Scrooge, triumphantly, "and nothing else!" - </p> - <p class="cell size33"> - He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn. - </p> - </div> -</div></pre> - -<p>CSS:</p> - -<pre class="brush: css">/* This is our main layout container */ -.layout { - /* A background makes it visible */ - background: lightgrey; - - /* We add a small visual spacing to harmonize - the distance between the cells content and - and the layout border */ - padding : 0.5em; -} - -/* A floating box gets somewhat out of - the flow, so if their container is empty - it will have a zero height size and the - floating box will overflow it. To - avoid such a situation, we make sure floating - boxes are not allowed to overflow. In - that specific context, with an overflow - hidden, floating boxes won't be clipped, - the parent box will extend to avoid any - floating box overflow. */ -.row { - overflow: hidden; -} - -/* Each cell is a left floating box */ -.cell { - float : left; - - /* we add padding to our cell to create - some nice visual gutters between them */ - padding : 0.5em; - - /* Because we are adding padding, we need - to be sure that it will not impact - the box width. */ - box-sizing: border-box; - - /* As margins cannot be controlled with the - box-sizing property, we need to be sure - there is none applied to our cell. */ - margin : 0; -} - -/* Those are the sizes we can apply to our boxes */ -.size33 { width: 33%; } /* Not exactly a third, but good enough */ -.size50 { width: 50%; } /* A half */ -.size100 { width: 100%; } /* A full row */</pre> - -<p>Results:</p> - -<p>{{ EmbedLiveSample('Layout_with_floating', '100%', '520') }}</p> - -<p>Using floating boxes this way, is what many CSS frameworks do. It's a robust and well-known technique but it has limits as everything must go with the flow: it's not possible to handle boxes in arbitrary order, variable sizing can be quite tricky to achieve, and vertical centering is impossible. We encourage you to dig deeper as <a href="http://www.positioniseverything.net/articles/onetruelayout/">floating boxes has been studied for long</a> and they are among the most robust solutions for a simple layout that must be compatible with legacy browsers.</p> - -<p>If you want to better understand all the subtleties of floating boxes, we encourage you to read <em><a href="https://css-tricks.com/all-about-floats/">All about float</a></em> by Chris Coyer.</p> - -<h3 id="Positioning">Positioning</h3> - -<p>If floating boxes are still part of the flow, another mechanism exists to perform some layouts by extracting boxes out of the flow: CSS Positioning. Positioning is acheived by defining a positioning context with the {{cssxref("position")}} property and then allows boxes to be positioned using {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties.</p> - -<p>The {{cssxref("position")}} property can take on four different values:</p> - -<dl> - <dt>static</dt> - <dd>This is the default value for all elements: they are part of the flow and don't define any specific positioning context.</dd> - <dt>relative</dt> - <dd>With this value, elements are still part of the flow, but they can be visually moved around their positions with {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. They also define a positioning context for their children elements.</dd> - <dt>absolute</dt> - <dd>With this value, elements are pushed out of the flow and no longer influence it. The position of such blocks is defined by the {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties. The 0,0 position point for the top/left corner of the box is the top/left corner of the closest parent element which defines a positionning context other than <em>static</em>. If there is no parent with a positioning context, then, the 0,0 position point for the top/left corner of the box is the top/left corner of the document.</dd> - <dt>fixed</dt> - <dd>With this value, elements are pushed out of the flow and no longer influence it. The position of such blocks is define by the {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties. The 0,0 position point for the top/left corner of the box is the top/left corner of the browser window {{Glossary("viewport")}}.</dd> -</dl> - -<p>Such positioned boxes can stack on top of each other. In that case, it's possible to change the stacking order by using the {{cssxref("z-index")}} property.</p> - -<p>Okay, let's see an example to visualize it at work.</p> - -<p>HTML:</p> - -<pre class="brush: html"><div class="relative"> - <div class="absolute-one"> - <p>Position:absolute</p></br> - <p>Top Right</p> - </div> - - <div class="absolute-two"> - <p>Position:absolute</p></br> - <p>Bottom Centre</p> - </div> - - <div class="absolute-three"> - <p>Position:static</p></br> - <p>Where it falls</p> - </div> -</div></pre> - -<p>CSS:</p> - -<pre class="brush: css">p { - text-align: centre; - color: #fff; -} - - -/* Setting the position to relative -allows any child elements to be positioned -anywhere, in <em><strong>relation</strong> to its container. */ -</em> -.relative { - position: relative; - width: 95%; - margin: 0 auto; - height: 300px; - background-color: #fff; - border: 3px solid #ADD8E6; -} - -/* Just some styles for text alignment /* -.relative div { - text-align: center; - padding: 5px; - display: block; - width: 125px; - height: 125px; - background-color: #ADD8E6; -} - -/* By setting this div to position absolute -we can position this element anywhere in relation -to the 'relative' div /* -.absolute-one { - position: absolute; - top: 0; - right: 0; -} - -/* Unlike the first div which was positioned at the -top right corner of the container div. '.absolute-two' -is positioned bottom centre. By setting both left and right -to 0, along with margin:auto. -.absolute-two { - position: absolute; - bottom: 0; - right: 0; - left: 0; - margin: auto; -} - -/* Where the div would fall naturally within it's container. -This is also useful for returning elements from a floated -position. E.g. on responsive styles. /* -.absolute-three { - position: static; -} -</pre> - -<p>Results:</p> - -<p>{{ EmbedLiveSample('Positioning', '100%', '400') }}</p> - -<p>If CSS positioning isn't really used for full layout, it is used quite often to deal with trick UX effect such as navigation layout, tooltip and such. This is something you'll see on a regular basis so we encourage you to get into it. Among various resources about it, we suggest you take a look at the article <em><a href="http://alistapart.com/article/css-positioning-101">CSS positioning 101</a></em> by Noah Stokes.</p> - -<h2 id="What's_next">What's next</h2> - -<p>The flow, the floating boxes, and CSS positioning are the basic CSS knowledge that will drive you into CSS layout. Now you are ready to use CSS to its full potential! You should now take some time looking at <a href="/en-US/docs/Learn/CSS/Howto">practical usage of CSS</a>. If you want to dig even deeper into layouts, you should definitely take a look at the other layout mechanism that exists with CSS: Table display, <a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">multiple columns layout</a>, and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">flexible box layout</a>.</p> - -<p>{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}</p> - -<div class="grammarly-disable-indicator"> </div> diff --git a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index ac90109fc1..0000000000 --- a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: 텍스트 스타일 -slug: conflicting/Learn/CSS/Styling_text/Fundamentals -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles -original_slug: Web/CSS/시작하기/텍스트_스타일 ---- -<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/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index b368adde4e..0000000000 --- a/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: 리스트 -slug: conflicting/Learn/CSS/Styling_text/Styling_lists -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists -original_slug: Web/CSS/시작하기/리스트 ---- -<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/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 54ecdbf832..0000000000 --- a/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: 시작하기 (자바스크립트 튜토리얼) -slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started -original_slug: Web/JavaScript/시작하기 ---- -<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/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html deleted file mode 100644 index e67b78e192..0000000000 --- a/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: 약자 표시 및 이해시키는 방법 -slug: conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -tags: - - HTML - - 초보 -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable -original_slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable ---- -<div class="summary"> -<p>HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">먼저:</th> - <td><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">기초적인 HTML 문서 만들기</a>에 익숙해지셔야 합니다.</td> - </tr> - <tr> - <th scope="row">목표:</th> - <td>HTML로 어떻게 약자 및 두음문자를 표시하는지 알아봅시다.</td> - </tr> - </tbody> -</table> - -<h2 id="약자에_대해">약자에 대해</h2> - -<p>항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)</p> - -<p>We have to make sure that our readers can understand our abbreviations. In standard writing, it's really common to spell out the abbreviation only on its first occurrence, then just use the abbreviation everywhere:</p> - -<blockquote>유럽연합(UE)은 28 개의 주로, 합중국(US)은 50 개의 주로 이루어져 있습니다. US는 연방제 공화국, UE는 자치주들이 정치적, 경제적으로 결속한 집단입니다.</blockquote> - -<div> -<p>이렇게 하면 모든 웹 페이지에 완전히 유효하지만, HTML은 독자들에게 약자를 설명하기 위한 부가적인 방법을 제공해줍니다.</p> -</div> - -<h2 id="abbr_요소">abbr 요소</h2> - -<p><em>HTML 약자 요소</em> ({{HTMLElement("abbr")}})는 약자에 익숙하지 않거나 시각장애우같이 스크린 리더를 실행해야 하는 사람들을 돕기 위한 약자나 두음문자를 말합니다. 가장 중요한 규칙은, 가능한 언제든지 쓰라는 것입니다.</p> - -<div class="note"> -<p><strong>알림:</strong> <code><acronym></code> 요소에 대해 들어보셨겠지만, <code><acronym</code><code>></code>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.</p> -</div> - -<pre class="brush: html"><p>I need to talk to you <abbr>ASAP</abbr>.</p></pre> - -<p>이렇게 <code>title</code> 속성으로 약자를 설명할 수도 있습니다:</p> - -<pre class="brush: html"><p>I need to talk to you <abbr title="as soon as possible">ASAP</abbr>.</p></pre> - -<p>언제 <code>title</code> 속성을 적어야 할까요? 마음대로 시면 됩니다. It can be overkill to spell out a very common abbreviation like "ASAP" or an abbreviation used many times in your document. When in doubt, err on the side of providing the full description.</p> - -<div class="note"> -<p><strong>Note: </strong>In languages with grammatical number (especially languages with more than two numbers, like Arabic), use the same grammatical number in your <code>title</code> attribute as inside your <code><abbr></code> element.</p> -</div> - -<p>{{glossary("CSS")}}로 약자를 가리키는 가시적인 정보를 추가, 변경, 제거하실 수 있습니다. 보통 마우스를 대면 브라우저가 <code>title</code> 속성의 콘텐츠를 툴팁으로 보여준다는 것도 기억하십시오. 이전의 예시대로 하면 이렇게 보여집니다:</p> - -<p>{{ EmbedLiveSample('The_abbr_element','100%',90) }}</p> - -<div class="note"> -<p><strong>중요: </strong>만약 사람들이 약자를 이해하는 것을 따진다면, <strong>절대로</strong> <code>title</code> 속성에 의존하지 마세요. Spell your abbreviation out in the text on first occurrence. 툴팁에 접근하려면 마우스가 필요합니다. 이것은 폰이나 키보드, 스크린 리더를 쓰는 사람들을 배제합니다.</p> -</div> - -<h2 id="실전">실전</h2> - -<p>{{HTMLElement('abbr')}}에 대해 알아봅시다. 이 글 바로 밑에 약자를 <code><abbr></code>로 표시하고 <code>title</code> 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. <a href="/en-US/docs/Glossary">용어 사전</a>에서 모든 약자들을 보실 수 있습니다.</p> - -<div class="hidden"> -<pre class="brush: html"><div class="exercise"> - <main> - <div class="instruction">Mark all the abbreviations with the <code>&lt;abbr&gt;</code> element</div> - <div class="playground"><textarea spellcheck="false"></textarea></div> - <div class="checking"> - <button>Show results</button><span class="count"></span> - </div> - <div class="result">Web <abbr title="developers">dev.</abbr> use <abbr title="Hypertext Markup Language">HTML</abbr> to structure documents, <abbr title="Cascading StyleSheet">CSS</abbr> to style them, and JavaScript to add special effects by using some dedicated <abbr title="Application Programming Interface">API</abbr>s.</div> - </main> -</div></pre> - -<pre class="brush: css">body { - font: 1em/100% sans-serif; - padding: 0; - margin: 0; -} - -.exercise { - background: #F9FAFB; - border-radius: 5px; - height: 13em; - overflow: hidden; -} - -.instruction, .count { - padding: .5em; - font-style: italic; - font-size: .95em; -} - -.playground { - padding: 0 .5em; -} - -.playground textarea { - display: block; - font-size : 1em; - line-height: 1.5em; - font-family: monospace; - box-sizing: border-box; - width : 100%; - padding : .5em; - height : 9.7em; -} - -.checking { - padding: .5em; -} - -.checking button { - box-sizing: border-box; - box-shadow:inset 0 1px 0 0 #bcd9a3; - background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%); - background-color:#b4d665; - border-radius:5px; - border:1px solid #8aa164; - cursor:pointer; - font-size:1em; - padding:.5em; - text-decoration:none; -} -.checking button:hover { - background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%); - background-color:#89a646; -} -.checking button:active { - transform: translate(0, 1px); -} - -.result { - height: 10em; - line-height: 1.4em; - padding: .5em; - box-sizing: border-box; -} - -main { - transform: translate(0,0); - transition: transform 300ms; -} - -.next main { - transform: translate(0, -10em); -} - -abbr { - display: inline-block; - white-space: nowrap; -} - -abbr.ok { - color: green; -} - -abbr.ok:after { - content: ' ✔︎'; -} - -abbr.fail { - color: red; -} - -abbr.fail:after { - content: ' ✘'; -} - -abbr.warning { - color: orange; -} - -abbr.warning:after { - content: ' !'; - font-weight: bold; -} -</pre> - -<pre class="brush: js">window.addEventListener('load', function () { - var content = document.querySelector('.exercise'); - var input = document.querySelector('.playground textarea'); - var button = document.querySelector('.checking button'); - var message = document.querySelector('.checking .count'); - var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr')); - var data = { - pass : 0, fail : 0, warning : 0 - }; - - input.value = document.querySelector('.result').textContent; - - function toggleResult(e) { - e.preventDefault(); - var classList = content.className.split(' '); - - if (classList.length === 1 && checkResult()) { - content.className = 'exercise next'; - message.innerHTML = 'Get ' + data.pass + ', ' + - 'Get ' + data.warning + ' without full description, ' + - 'Miss ' + data.fail + '.'; - button.innerHTML = 'Try again'; - } else { - content.className = 'exercise'; - message.innerHTML = ''; - button.innerHTML = 'Show results'; - } - } - - function checkResult() { - var i, j, node = document.createElement('div'); - node.innerHTML = input.value; - data = { pass : 0, fail : 0, warning : 0 }; - - var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr')); - - if (userAbbr.length === 0) { - alert("You haven't marked any abbreviations (there are " + abbr.length + " to find)."); - return false; - } - - for (i in abbr) { - var txt = abbr[i].textContent; - var fail = true; - - for (j in userAbbr) { - var userText = userAbbr[j].textContent; - - if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) { - fail = false; - if (userAbbr[j].title) { - data.pass += 1; - abbr[i].className = 'ok'; - } else { - data.warning += 1; - abbr[i].className = 'warning'; - } - } - } - - if (fail) { - data.fail += 1; - abbr[i].className = 'fail'; - } - } - - return true; - } - - button.addEventListener('click', toggleResult); -}); -</pre> -</div> - -<p>{{ EmbedLiveSample('Exercise','100%',220) }}</p> - -<h2 id="더_알아보기">더 알아보기</h2> - -<ul> - <li>{{HTMLElement("abbr")}} 참고 문서.</li> -</ul> diff --git a/files/ko/conflicting/learn/javascript/objects/index.html b/files/ko/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index c0f51fe532..0000000000 --- a/files/ko/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: 객체지향 자바스크립트 개요 -slug: conflicting/Learn/JavaScript/Objects -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<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/conflicting/mdn/tools/index.html b/files/ko/conflicting/mdn/tools/index.html deleted file mode 100644 index 0de69f5c0d..0000000000 --- a/files/ko/conflicting/mdn/tools/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: MDN 사용자 가이드 -slug: conflicting/MDN/Tools -tags: - - 모질라 개발자 네트워크 - - 사용자 가이드 -translation_of: MDN/Tools -translation_of_original: MDN/User_guide -original_slug: MDN/User_guide ---- -<div>{{MDNSidebar}}</div><p>모질라 개발자 네트워크 (이하 MDN) 사이트는, (파이어폭스 및 파이어폭스 운영체제 개발자 뿐 아니라) 웹 개발자를 위한 문서 및 샘플 코드를 찾고, 읽고, 기여하는 고급 시스템입니다. MDN 사용자 가이드는 필요한 문서를 찾도록 MDN을 이용하는 방법을, 원한다면 좀 더 좋은, 더 광범위하고, 더 완전한 자료를 만들도록 돕는 방법을 열거하는 항목을 제공합니다.</p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/conflicting/mozilla/add-ons/index.html b/files/ko/conflicting/mozilla/add-ons/index.html deleted file mode 100644 index 6c717110d5..0000000000 --- a/files/ko/conflicting/mozilla/add-ons/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Building an Extension -slug: conflicting/Mozilla/Add-ons -tags: - - Add-ons - - Extensions -translation_of: Mozilla/Add-ons -translation_of_original: Building_an_Extension -original_slug: Building_an_Extension ---- -<h2 id=".EB.A8.B8.EB.A6.AC.EB.A7.90" name=".EB.A8.B8.EB.A6.AC.EB.A7.90">시작하기</h2> -<p><a class="link-https" href="https://addons.mozilla.org/en-US/developers/tools/builder" title="https://addons.mozilla.org/en-US/developers/tools/builder">확장기능 마법사</a>를 이용해서 웹으로 간단한 확장기능을 만들 수 있습니다.</p> -<p>MozillaZine Knowledge Base에는 확장기능 마법사를 이용해 만들 수 있는 것과 비슷한 <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip" title="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World 확장기능</a>에 대해 한 줄 한 줄 설명한 <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development" title="http://kb.mozillazine.org/Getting_started_with_extension_development">다른 글</a>도 있습니다.</p> -<h2 id=".EB.A8.B8.EB.A6.AC.EB.A7.90" name=".EB.A8.B8.EB.A6.AC.EB.A7.90">소개</h2> -<p>이 입문서는 여러분을 아주 간단한 <a href="/ko/docs/Extensions" title="Extensions">확장기능</a>(Firefox 브라우저에 텍스트 "Hello, World!"를 담고 있는 상태 표시줄 패널을 추가하는)을 만드는 데 필요한 과정 속으로 안내합니다.</p> -<div class="note"> - <p><strong>주의</strong> 이 입문서는 Firefox 1.5 이상 버전의 확장기능 만들기에 관한 내용입니다. 이전 버전 Firefox용 확장기능 만들기를 다루는 입문서도 있습니다.</p> - <p>썬더버드용 확장기능을 만드는 방법에 대한 입문서는 <a href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="en/Extensions/Thunderbird/Building a Thunderbird extension">Building a Thunderbird extension</a>에서 보실 수 있습니다.</p> -</div> -<h2 id=".EA.B0.9C.EB.B0.9C_.ED.99.98.EA.B2.BD_.EA.B5.AC.EC.B6.95.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EB.B0.9C_.ED.99.98.EA.B2.BD_.EA.B5.AC.EC.B6.95.ED.95.98.EA.B8.B0">개발 환경 구축하기</h2> -<p>확장기능은 파일 확장자가 <code>xpi</code> (<em>“zippy”로 소리 냄</em>)인 ZIP 파일이나 묶음(<a href="/ko/docs/Bundles" title="Bundles">Bundles</a>)으로 배포됩니다.</p> -<p>XPI 파일 안 구조의 예 :</p> -<pre>extension.xpi: - /<a href="/ko/docs/install.rdf" title="install.rdf">install.rdf</a> - <a href="#XPCOM_Components">/components/*</a> - <a href="#Application_Command_Line">/components/cmdline.js</a> - <a href="#Defaults_Files">/defaults/</a> - <a href="#Defaults_Files">/defaults/preferences/*.js</a> - /plugins/* - /<a href="/ko/docs/Chrome.manifest" title="Chrome.manifest">chrome.manifest</a> - /<a href="/ko/docs/Chrome_window_icons" title="Chrome_window_icons">chrome/icons/default/*</a> - /chrome/ - /chrome/content/ - -</pre> -<p>이 글에서도 위와 비슷한 파일 구조를 만들 것입니다. 그러면 이제 하드디스크 어디든지(예컨대, <code style="color: inherit; font-weight: inherit;">C:\extensions\myExtension\</code>이나 <code style="color: inherit; font-weight: inherit;">~/extensions/my_extension/</code>) 확장기능을 위한 폴더를 만들고, 이 폴더 안에 <code style="color: inherit; font-weight: inherit;">chrome</code> 폴더를 만들고, <code style="color: inherit; font-weight: inherit;">chrome</code> 폴더 안에 <code style="color: inherit; font-weight: inherit;">content</code> 폴더를 만드세요.</p> -<p>확장기능 폴더 <strong>루트</strong> 안에, <code>chrome</code> 폴더와 나란히, 빈 텍스트 파일 두 개를 새로 만드세요. 하나는 <code>chrome.manifest</code> 그리고 다른 하나는 <code>install.rdf</code>입니다. 그리고, <strong>chrome/content</strong> 폴더 안에 sample.xul이라는 빈 텍스트 파일을 하나 만드세요.</p> -<p>만들어진 폴더 구조 :</p> -<pre><ext path>\ - install.rdf - chrome.manifest - chrome\ - content\ - sample.xul -</pre> -<h2 id="Install_Manifest_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="Install_Manifest_.EB.A7.8C.EB.93.A4.EA.B8.B0">Install Manifest 만들기</h2> -<p>확장기능 폴더 계층(hierarchy) 상단에 여러분이 만든 <code><a href="/ko/docs/Install_Manifests" title="Install_Manifests">install.rdf</a></code> 파일을 열어 안에 다음을 써넣으세요.</p> -<pre><?xml version="1.0"?> - -<RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>" - xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"> - - <Description about="urn:mozilla:install-manifest"> - <em:id><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong></em:id> - <em:version><strong>1.0</strong></em:version> - <em:type>2</em:type> - - <!-- Target Application this extension can install into, - with minimum and maximum supported versions. --> - <em:targetApplication> - <Description> - <em:id><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></em:id> - <em:minVersion><strong>1.5+</strong></em:minVersion> - <em:maxVersion><strong>2.0.0.*</strong></em:maxVersion> - </Description> - </em:targetApplication> - - <!-- Front End MetaData --> - <em:name><strong>Sample!</strong></em:name> - <em:description><strong>A test extension</strong></em:description> - <em:creator><strong>Your Name Here</strong></em:creator> - <em:homepageURL><strong><span class="nowiki">http://www.foo.com/</span></strong></em:homepageURL> - </Description> -</RDF> -</pre> -<ul> - <li><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong> - 확장기능 ID. 이는 email 주소 형식(<em>여러분의</em> email이 아니어야 함을 주의하세요)으로 확장기능을 식별하는 여러분이 짠 어떤 값입니다. 유일하게 만드세요. GUID를 쓸 수도 있습니다.</li> - <li><code><em:type>2</em:type></code>로 지정 -- 2는 확장기능을 설치함을 선언합니다. 테마를 설치하는 경우에는 4입니다(다른 형 코드는 <a href="/ko/docs/Install_Manifests#type" title="Install_Manifests#type">Install Manifests#type</a>를 보세요).</li> - <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Firefox 응용프로그램 ID.</li> - <li><strong>1.5</strong> - 이 확장기능이 작동하는 Firefox의 최소(minimum)판. 이를 여러분이 시험하고 버그를 고치려는 최소판으로 설정하세요.</li> - <li><strong>2.0.0.*</strong> - 이 확장기능이 작동하는 Firefox의 최대(maximum)판. 현재 이용가능한 최신판보다 더 최신판으로 설정하지 마세요! 위 경우에, "2.0.0.*"은 확장기능이 Firefox 2.0.0.0에서 2.0.0.x 판까지 작동함을 나타냅니다.</li> -</ul> -<p>최신 Firefox 1.5.0.x에서 작동하도록 디자인된 확장기능은 최대판을 "1.5.0.*"로 설정해야 합니다. 완전한 필수와 선택 프로퍼티 목록은 <a href="/ko/docs/Install_Manifests" title="Install_Manifests">Install Manifests</a>를 보세요.</p> -<p>파일을 저장하세요.</p> -<h2 id="XUL.EB.A1.9C_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.ED.99.95.EC.9E.A5.ED.95.98.EA.B8.B0" name="XUL.EB.A1.9C_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.ED.99.95.EC.9E.A5.ED.95.98.EA.B8.B0">XUL로 브라우저 확장하기</h2> -<p>Firefox의 사용자 인터페이스는 XUL과 JavaScript로 작성됩니다. <a href="/ko/docs/XUL" title="XUL">XUL</a>은 button, menu, toolbar, tree 등과 같은 사용자 인터페이스 위젯을 제공하는 XML 문법입니다. 사용자 동작은 JavaScript로 작동됩니다.</p> -<p>브라우저를 확장하기 위해, 우리는 위젯을 추가하거나 수정하여 브라우저의 UI 부분을 수정합니다. 브라우저 창에 새 XUL DOM 요소를 삽입하여 위젯을 추가하고 스크립트 쓰고 이벤트 처리기(handler)를 붙여 위젯을 수정합니다.</p> -<p>브라우저는 <code>browser.xul</code>(<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code>가 <code>content/browser/browser.xul</code>를 포함합니다)로 구현됩니다. browser.xul에서 아래처럼 보이는 상태 표시줄을 찾을 수 있습니다.</p> -<pre><statusbar id="status-bar"> - ... <statusbarpanel>s ... -</statusbar> -</pre> -<p><code><statusbar id="status-bar"></code>는 XUL Overlay를 위한 "병합점(merge point)"입니다.</p> -<h3 id="XUL_Overlay" name="XUL_Overlay">XUL Overlay</h3> -<p><a href="/ko/docs/XUL_Overlays" title="XUL_Overlays">XUL Overlays</a>는 실행 시간(run time)에 XUL 문서에 다른 UI 위젯을 붙이는 한 가지 방법입니다. XUL Overlay는 "주(master)" 문서 안에서 특정 병합점에 삽입되는 XUL 조각(fragment)을 지정하는 .xul 파일입니다. 이 조각은 삽입, 제거, 수정되는 위젯을 지정하기도 합니다.</p> -<p><strong>XUL Overlay 문서 예</strong></p> -<pre><?xml version="1.0"?> -<overlay id="sample" - xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> - <statusbar id="<strong>status-bar</strong>"> - <statusbarpanel id="my-panel" label="Hello, World"/> - </statusbar> -</overlay> -</pre> -<p><code><strong>status-bar</strong></code>로 불리는 <code><statusbar></code>는 우리가 붙쳤으면 하는 브라우저 창 안 "병합점"을 지정합니다.</p> -<p><code><statusbarpanel></code> 자식은 병합점 안에서 삽입하고 싶은 새 위젯입니다.</p> -<p>위에 있는 이 sample 코드를 취해 여러분이 만든 <code>chrome/content</code> 폴더 안에 <code><strong>sample.xul</strong></code> 파일로 저장하세요.</p> -<p>위젯 병합과 Overlay를 쓴 사용자 인터페이스 수정에 관한 더 많은 정보는, 아래를 보세요.</p> -<h2 id="Chrome_URI" name="Chrome_URI">Chrome URI</h2> -<p>XUL 파일은 "<a href="/ko/docs/Chrome_Registration" title="Chrome_Registration">Chrome Packages</a>"(<code>chrome://</code> URI를 거쳐 로드되는 사용자 인터페이스 컴포넌트 묶음)의 부분입니다. <code>file://</code> URI(시스템 위에서 Firefox 위치가 플랫폼과 시스템마다 바뀌기도 하기 때문에)를 써서 디스크에서 브라우저로 로드하기보다는, Mozilla 개발자들은 설치된 응용프로그램이 알고 있는 XUL content에 이르는 URI를 만드는 해결책을 냈습니다.</p> -<p>브라우저 창은 <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code>입니다. Firefox의 location bar에 이 URL을 쳐 보세요!</p> -<p>Chrome URI는 여러 컴포넌트로 구성되어 있습니다.</p> -<ul> - <li>첫째로, <strong>URI scheme</strong> (<code>chrome</code>)은 Firefox 네트워킹 라이브러리에 이것이 Chrome URI임을 알립니다. URI content가 (<code>chrome</code>)으로 처리되어야 함을 나타냅니다. Firefox가 URI를 웹 페이지로 다루도록 하는 (<code>chrome</code>)과 (<code>http</code>)를 비교하세요.</li> - <li>둘째로, 패키지 이름(위 예에서는, <code><strong>browser</strong></code>)은 사용자 인터페이스 컴포넌트 묶음을 식별합니다. 이는 확장기능 사이의 충돌을 피하기 위해 가능하면 응용프로그램에 유일하면 좋습니다.</li> - <li>셋째로, 요청되는 데이터 형. 세 가지 형이 있습니다. <code>content</code> (응용프로그램 UI의 구조(structure)와 behavior를 구성하는 XUL, JavaScript, XBL 바인딩 등.), <code>locale</code> (UI의 <a href="/ko/docs/Localization" title="Localization">지역화</a>를 위한 문자열을 담고 있는 DTD, .properties 파일 등), <code>skin</code>(UI의 <a href="/ko/docs/Theme" title="Theme">테마</a>를 구성하는 CSS와 이미지)</li> - <li>끝으로, 로드하는 파일의 경로.</li> -</ul> -<p>그러므로, <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code>는 <code>foo</code> 테마의 <code>skin</code> section에서 <code>bar.png</code> 파일을 로드합니다.</p> -<p>Chrome URI를 써서 content를 로드할 때, Firefox는 이 URI를 디스크(나 JAR 패키지)의 실제 원본 파일로 번역하기 위해 Chrome 레지스트리를 씁니다.</p> -<h2 id="Chrome_Manifest_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="Chrome_Manifest_.EB.A7.8C.EB.93.A4.EA.B8.B0">Chrome Manifest 만들기</h2> -<p>Chrome Manifest와 지원하는 프로퍼티에 관한 더 많은 정보는, <a href="/ko/docs/Chrome_Manifest" title="Chrome_Manifest">Chrome Manifest</a> 참고 문서를 보세요.</p> -<p>확장기능 원본 폴더 계층의 루트에 <code>chrome</code> 디렉토리와 나란히 만든 <code><strong>chrome.manifest</strong></code> 파일을 여세요.</p> -<p>이 코드를 추가하세요.</p> -<pre>content sample chrome/content/ -</pre> -<p>(<strong>끝에 "<code>/</code>"를 잊지 마세요!</strong> 빠트리면, 확장기능이 로드되지 않습니다.)</p> -<p>주의: Firefox/Thunderbird 1.5가 mixed/camel case를 지원하지 않기 때문에 패키지 이름("sample")에 모두 소문자를 씀을 확인하세요. 2.0과 이전버전에서 대소문자를 섞어쓰는 기능을 지원하지 않습니다. {{ Bug(132183) }}</p> -<p>이는 다음을 지정합니다.</p> -<ol> - <li>chrome 패키지 안에 material 형</li> - <li>chrome 패키지 이름</li> - <li>chrome 패키지 파일의 위치</li> -</ol> -<p>그래서, 이 줄은 chrome 패키지 <strong>sample</strong>의 경우, <code>chrome.manifest</code> 위치와 상대 경로인 <code>chrome/content</code> 위치에서 우리가 패키지의 <strong>content</strong> 파일을 찾을 수 있음을 말합니다.</p> -<p>content, locale, skin 파일은 여러분의 <code>chrome</code> 하위디렉토리 안 content, locale, skin 폴더 안에 놓여야 함을 주의하세요.</p> -<p>파일을 저장하세요. 여러분의 확장기능이 깔린 Firefox를 띄우면, (이 입문서에서 뒤에), 이 줄이 chrome 패키지를 등록합니다.</p> -<h2 id="Overlay_.EB.93.B1.EB.A1.9D" name="Overlay_.EB.93.B1.EB.A1.9D">Overlay 등록</h2> -<p>브라우저를 표시할 때마다 Firefox가 여러분의 overlay를 브라우저 창에 병합할 필요가 있습니다. 그래서 <code>chrome.manifest</code> 파일에 이 줄을 추가하세요:</p> -<pre>overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a> -</pre> -<p>이 줄은 Firefox에게 <code>browser.xul</code>을 로드할 때 <code>browser.xul</code> 안에 <code>sample.xul</code>을 병합하도록 합니다.</p> -<h2 id=".EC.8B.9C.ED.97.98" name=".EC.8B.9C.ED.97.98">시험</h2> -<p>먼저, 우리는 Firefox에 확장기능 정보 알림이 필요합니다. 예전 좋지 않은 Firefox 1.0 때는 이는 확장기능을 XPI로 패키징하고 그것을 사용자 인터페이스를 거쳐 설치함을 뜻합니다. 그것은 실로 고통이었습니다. 이제는, 훨씬 더 간단합니다.</p> -<ol> - <li><a class="external" href="http://kb.mozillazine.org/Profile_folder">Profile 폴더</a>를 여세요.</li> - <li><strong>extensions</strong> 폴더를 여세요(없으면 만드세요).</li> - <li>새 텍스트 파일을 만들어, 그 안에 extension 폴더(예컨대, <code>C:\extensions\myExtension\</code>이나 <code>~/extensions/myExtension</code>)를 써넣으세요. 확장기능 id를 이름(예컨대, <code><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></code>)으로 갖는 파일로 저장하세요.</li> -</ol> -<p>이제 확장기능을 시험할 준비가 됐습니다!</p> -<p>Firefox를 시작하세요. Firefox가 확장기능 디렉토리 텍스트 링크를 감지하고 확장기능을 설치합니다. 브라우저 창이 보이면 여러분은 상태 표시줄 패널의 오른쪽에 텍스트 "Hello, World!"를 봅니다.</p> -<p>이제 돌아가서 .xul 파일에 변화를 주고, Firefox를 닫고 재시작하면 그 변화가 보입니다. <span class="comment">These don't actually match the described extension and confuse people. -Nickolay CENTER> Image:Helloworld_tools_menu.PNG Image:Helloworld_extensions_wnd.PNG </CENTER</span></p> -<h2 id="Package" name="Package">Package</h2> -<p>이제 여러분의 확장기능이 동작하므로, 배치(deployment)와 설치를 위해 그것을 <a href="/ko/docs/Extension_Packaging" title="Extension_Packaging">패키지</a>할 수 있습니다.</p> -<p>여러분의 확장기능 폴더 <strong>내용들</strong>을 Zip 파일로 압축하고 (확장기능 폴더 자체가 아닙니다.) zip 파일 확장자를 .xpi 로 바꾸세요. Windows XP에서는, 여러분의 확장기능 폴더 안 모든 파일과 하위폴더를 고르고 오른쪽 버튼을 누른 뒤 "보내기 -> Compressed (Zipped) Folder"를 골라 이를 쉽게 할 수 있습니다. .zip 파일은 여러분을 위해 만듭니다. 바로 이름을 바꾸면 끝납니다!</p> -<p>Mac OS X에서는, 확장기능 폴더의 <strong>내용들</strong> 위에서 오른쪽 버튼을 누른 뒤 zip 파일로 만들기 위해 "Create Archive of..."를 고를 수 있습니다. 그러나, Mac OS X가 파일 metadata를 추적(track)할 목적으로 숨김 파일을 폴더에 추가하기 때문에, 터미널을 쓰고 숨김 파일(의 이름은 마침표로 시작합니다)을 지워야 합니다. 그리고 나서 zip 파일을 만들기 위해 명령줄에서 <code>zip</code> 명령을 쓰세요.</p> -<p>Linux에서도, 역시 명령줄 Zip 도구를 씁니다.</p> -<p>혹시 여러분이 'Extension Builder' 확장기능을 설치했으면 여러분을 위해 .xpi 파일을 compile할 수 있습니다(도구 -> Extension Developer -> Extension Builder). 단지 여러분의 확장기능(install.rdf 등)이 있는 디렉토리를 탐색하고 Build Extension button을 누르세요. 이 확장기능에 개발을 더 쉽게 하는 많은 도구가 있습니다.</p> -<p>이제 여러분의 서버에 .xpi 파일을 올려주고(upload), <code>application/x-xpinstall</code>로 다뤄지는지 확인하세요. 여러분은 그 파일에 링크할 수 있고 사람들이 내려받고(download) Firefox에 설치하게 할 수 있습니다. .xpi 파일을 시험할 목적으로 우리는 단지 Tools -> Extensions이나 Add-Ons -> Extensions in FireFox 2을 거쳐 확장기능 창 안에 그것을 끌어다 놓을 수 있습니다.</p> -<h3 id="addons.mozilla.org_.EC.9D.B4.EC.9A.A9.ED.95.98.EA.B8.B0" name="addons.mozilla.org_.EC.9D.B4.EC.9A.A9.ED.95.98.EA.B8.B0">addons.mozilla.org 이용하기</h3> -<p>Mozilla Update는 공짜로 확장기능을 host할 수 있는 배포 사이트입니다. 여러분의 확장기능은 비록 매우 유명해지더라도 내려받기를 보장하는 Mozilla의 mirror 네트워크에 host됩니다. Mozilla 사이트는 또한 사용자에게 더 쉬운 설치를 제공하고 여러분이 새 버전을 올려주면 기존 버전 사용자들이 자동으로 이용할 수 있게 합니다. 게다가 Mozilla Update는 사용자들이 여러분의 확장기능에 평(comment)을 하고 feedback을 제공하게 합니다. 여러분이 확장기능을 배포하는 데 Mozilla Update 사용을 강력히 권고합니다!</p> -<p><a class="external" href="http://addons.mozilla.org/developers/" rel="freelink">http://addons.mozilla.org/developers/</a> 에 방문하여 계정을 만든 뒤 확장기능 배포를 시작하세요!</p> -<p><em>주의:</em> 여러분의 확장기능은 좋은 설명과 확장기능 실행 스크린샷(screenshot)이 있으면 더 빨리 퍼지고 더 많이 내려받습니다.</p> -<h3 id="Windows_.EB.A0.88.EC.A7.80.EC.8A.A4.ED.8A.B8.EB.A6.AC.EC.97.90_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0" name="Windows_.EB.A0.88.EC.A7.80.EC.8A.A4.ED.8A.B8.EB.A6.AC.EC.97.90_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0">Windows 레지스트리에 확장기능 등록하기</h3> -<p>Windows에서, 확장기능 정보는 레지스트리에 추가될 수 있고 확장기능은 응용프로그램이 시작하는 다음 번에는 자동으로 pick up됩니다. 이는 응용프로그램 설치프로그램이 쉽게 integration hook을 확장기능에 추가하게 합니다. 더 많은 정보는 <a href="/ko/docs/Adding_Extensions_using_the_Windows_Registry" title="Adding_Extensions_using_the_Windows_Registry">Windows 레지스트리를 써서 확장기능 추가하기</a>를 보세요.</p> -<h2 id="XUL_Overlay_.EB.8D.94_.EB.A7.8E.EC.9D.80_.EC.A0.95.EB.B3.B4" name="XUL_Overlay_.EB.8D.94_.EB.A7.8E.EC.9D.80_.EC.A0.95.EB.B3.B4">XUL Overlay 더 많은 정보</h2> -<p>병합점에 UI 위젯 추가 외에 또, Overlay 안에 XUL 조각을 다음에 쓸 수 있습니다.</p> -<ul> - <li>병합점에 있는 속성 수정, 예컨대 <code><statusbar id="status-bar" hidden="true"/></code> (status bar 숨김)</li> - <li>주 문서에서 병합점 제거, 예컨대 <code><statusbar id="status-bar" removeelement="true"/></code></li> - <li>삽입되는 위젯의 자리 제어:</li> -</ul> -<pre><statusbarpanel position="1" .../> - -<statusbarpanel insertbefore="other-id" .../> - -<statusbarpanel insertafter="other-id" .../> -</pre> -<h2 id=".EC.83.88.EB.A1.9C.EC.9A.B4_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.83.88.EB.A1.9C.EC.9A.B4_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0">새로운 사용자 인터페이스 컴포넌트 만들기</h2> -<p>여러분은 UI 위젯을 조작하는 DOM 메소드를 써서 .js 파일에서 사용자 동작을 구현하여 기능(functionality)을 제공하는 분할한 .xul 파일로 여러분의 창과 대화상자를 만들 수 있습니다. 이미지 붙임, 색 설정 등을 하기 위해 .css 파일에서 스타일 규칙을 쓸 수 있습니다.</p> -<p>XUL 개발자를 위한 더 많은 자원(resource)은 <a href="/ko/docs/XUL" title="XUL">XUL</a> 문서를 보세요.</p> -<h2 id="Defaults_File" name="Defaults_File">Defaults File</h2> -<p>Defaults file은 여러분의 확장기능 폴더 계층의 루트 아래 <code>defaults/</code>에 놓일 사용자 profile을 뿌리는(seed) 데 씁니다. <code>defaults/preferences/</code>에 저장될 Default preferences .js file - .js 파일을 여기에 놓으면 시작할 때 Firefox preferences system에 의해 자동으로 로드되어 <a href="/ko/docs/Preferences_API" title="Preferences_API">Preferences API</a>를 써서 파일에 접근할 수 있습니다.</p> -<h2 id="XPCOM_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8" name="XPCOM_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8">XPCOM 컴포넌트</h2> -<p>Firefox는 확장기능에 <a href="/ko/docs/XPCOM" title="XPCOM">XPCOM</a> 컴포넌트를 지원합니다. 여러분은 JavaScript나 C++(<a href="/ko/docs/Gecko_SDK" title="Gecko_SDK">Gecko SDK</a>를 써서)로 쉽게 자신만의 컴포넌트를 만들 수 있습니다.</p> -<p><code>components/</code> 디렉토리에 모든 .js나 .dll 파일을 두세요 - 여러분의 확장기능이 설치된 뒤 Firefox가 도는 첫 번에 자동으로 등록됩니다.</p> -<p>더 많은 정보는 <a href="/ko/docs/How_to_Build_an_XPCOM_Component_in_Javascript" title="How_to_Build_an_XPCOM_Component_in_Javascript">JavaScript로 XPCOM 컴포넌트 빌드하는 법</a>과 책 <a href="/ko/docs/Creating_XPCOM_Components" title="Creating_XPCOM_Components">XPCOM 컴포넌트 만들기</a>를 보세요.</p> -<h3 id=".EC.9D.91.EC.9A.A9.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EB.AA.85.EB.A0.B9.EC.A4.84" name=".EC.9D.91.EC.9A.A9.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EB.AA.85.EB.A0.B9.EC.A4.84">응용프로그램 명령줄</h3> -<p>사용자 정의(custom) XPCOM 컴포넌트의 가능한 쓰임 가운데 하나는 Firefox 나 Thunderbird 에 명령줄 처리기 추가입니다. 여러분은 확장기능을 응용프로그램으로 실행하는 데 이 기술을 쓸 수 있습니다.</p> -<pre> firefox.exe -myapp -</pre> -<p><span class="comment">I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } 이 함수는 firefox가 시작할 때마다 firefox가 실행합니다. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag().</span> 상세한 내용은 <a href="/ko/docs/Chrome/Command_Line" title="Chrome/Command_Line">Chrome: Command Line</a>과 <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">forum discussion</a>을 보세요.</p> -<h2 id=".EC.A7.80.EC.97.AD.ED.99.94" name=".EC.A7.80.EC.97.AD.ED.99.94">지역화</h2> -<p>하나 이상의 언어를 지원하려면, <a href="/ko/docs/XUL_Tutorial/Localization" title="XUL_Tutorial/Localization">entities</a>와 <a href="/ko/docs/XUL_Tutorial/Property_Files" title="XUL_Tutorial/Property_Files">string bundles</a>을 써서 content에서 문자열을 분리해야 합니다. 돌아와서 나중에 하기보다는 확장기능을 개발하면서 하면 훨씬 더 쉽습니다!</p> -<p>지역화 정보는 그 확장기능을 위한 locale 디렉토리에 저장됩니다. 예를 들어, sample 확장기능에 locale을 추가하려면, chrome 디렉토리("content" 디렉토리가 위치한)에 "locale"로 이름 붙인 디렉토리를 만들고 chrome.manifest 파일에 다음 줄을 추가하세요:</p> -<pre>locale sample sampleLocale chrome/locale/ -</pre> -<p>XUL로 localizable 속성값을 만들려면, <code>.ent</code>(나 <code>.dtd</code>) 파일에 그 값을 써넣으세요, 속성값은 locale 디렉토리에 놓이고 이와 같이 보입니다.</p> -<pre><!ENTITY button.label "Click Me!"> -<!ENTITY button.accesskey "C"> -</pre> -<p>그리고 나서 XUL 문서 상단(하지만 "<?xml version"1.0"?>" 아래)에 이렇게 포함(include)하세요.</p> -<pre><!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.ent</a>"> -</pre> -<p><code><strong>window</strong></code>는 XUL 문서 루트 요소의 <code><a href="/ko/docs/DOM/element.localName" title="DOM/element.localName">localName</a></code>값이고 <code>SYSTEM</code> 프로퍼티 값은 엔티티(entity) 파일의 chrome URI입니다. sample 확장기능에서, 루트 요소는 <code><strong>overlay</strong></code>입니다.</p> -<p>그 엔티티를 쓰려면, XUL을 이렇게 보이도록 수정하세요.</p> -<pre><button label="&button.label;" accesskey="&button.accesskey;"/> -</pre> -<p>Chrome Registry가 선택한 locale과 대응하는 지역화 묶음에서 로드된 엔티티 파일인지 확인합니다.</p> -<p>스크립트에서 쓴 문자열은, 이 형식으로 각 줄에 문자열이 있는 .properties 파일, 텍스트 파일을 만드세요.</p> -<pre>key=value -</pre> -<p>그리고 나서 스크립트에 그 값을 로드하기 위해 <code><a href="/ko/docs/NsIStringBundleService" title="NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/ko/docs/NsIStringBundle" title="NsIStringBundle">nsIStringBundle</a></code>이나 <code><a class="external" href="http://xulplanet.com/references/elemref/ref_stringbundle.html"><stringbundle></a></code> tag을 쓰세요.</p> -<h2 id=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.9D.B4.ED.95.B4.ED.95.98.EA.B8.B0" name=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.9D.B4.ED.95.B4.ED.95.98.EA.B8.B0">브라우저 이해하기</h2> -<p>브라우저 창이나 여러분이 확장하길 원하는 어떤 다른 XUL 창을 검사하려면 <a href="/ko/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> (<strong>Standard</strong> Firefox 설치 부분이 아님, browser의 Tools(도구) 메뉴에 "DOM Inspector" 항목이 없으면 사용자 정의 설치 경로로 재설치하고 <strong>Developer Tools</strong>를 골라야 합니다)를 쓰세요.</p> -<p>노드를 선택하기 위해 XUL 창의 노드를 눈에 보이게 클릭하려면 DOM Inspector toolbar 좌상단에 있는 point-and-click 노드 finder button을 쓰세요. 이렇게 하면 DOM inspector의 DOM 계층 tree view는 여러분이 클릭하는 노드로 건너뜁니다.</p> -<p>overlay에서 여러분의 요소를 삽입하는 데 쓸 수 있는 id 붙은 병합점을 발견하려면 DOM Inspector의 오른쪽 패널을 쓰세요. 병합할 수 있는 id 붙은 요소를 발견할 수 없으면, overlay에 스크립트 붙임과 <code>load</code> 이벤트가 주 XUL 창 위에 발생할 때 요소 삽입이 필요할 지도 모릅니다.</p> -<h2 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EB.94.94.EB.B2.84.EA.B7.B8.ED.95.98.EA.B8.B0" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EB.94.94.EB.B2.84.EA.B7.B8.ED.95.98.EA.B8.B0">확장기능 디버그하기</h2> -<p><strong>디버깅을 위한 분석 도구</strong></p> -<ul> - <li><a href="/ko/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> - 속성, DOM 구조, CSS 스타일 규칙을 검사(예컨대 왜 여러분의 스타일 규칙이 요소에서 작동하지 않는지 찾아냄 - 매우 귀중한 도구!)</li> - <li><a href="/ko/docs/Venkman" title="Venkman">Venkman</a> - JavaScript에서 중단점(breakpoint)을 설정하고 호출 스택(call stack) 검사</li> - <li>JavaScript의 <code><a href="/ko/docs/Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee" title="Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee">arguments.callee</a>.<a href="/ko/docs/Core_JavaScript_1.5_Reference/Objects/Function/caller" title="Core_JavaScript_1.5_Reference/Objects/Function/caller">caller</a></code> - 함수의 호출 스택 접근</li> -</ul> -<p><strong>printf 디버깅</strong></p> -<ul> - <li>명령줄에서 <code>-console</code>을 붙여 Firefox 실행하고 <code><a href="/ko/docs/DOM/window.dump" title="DOM/window.dump">dump</a>("string")</code> 사용(상세한 내용은 링크를 보세요)</li> - <li>JavaScript 콘솔에 log하기 위해 <code><a href="/ko/docs/NsIConsoleService" title="NsIConsoleService">nsIConsoleService</a></code> 사용</li> -</ul> -<p><strong>고급 디버깅</strong></p> -<ul> - <li>디버그 Firefox 빌드를 실행하고 Firefox 자체나 여러분의 C++ 컴포넌트에 중단점 설정. 숙련된 개발자에게, 이는 대부분 문제를 진단(diagnose)하는 가장 빠른 방법입니다. 더 많은 정보는 <a href="/ko/docs/Build_Documentation" title="Build_Documentation">Build Documentation</a>와 <a href="/ko/docs/Developing_Mozilla" title="Developing_Mozilla">Mozilla 개발하기</a>를 보세요.</li> - <li>더 도움이 되는 팁은 <a href="/ko/docs/Debugging_a_XULRunner_Application" title="Debugging_a_XULRunner_Application">XULRunner 응용프로그램 디버그하기</a>를 보세요.</li> -</ul> -<h3 id=".EB.B9.A0.EB.A5.B8_.EC.8B.9C.EC.9E.91" name=".EB.B9.A0.EB.A5.B8_.EC.8B.9C.EC.9E.91">빠른 시작</h3> -<p>여러분은 작동하는 단순 확장기능을 만드는 데 <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> 온라인 도구를 쓸 수 있습니다.</p> -<p>Extension Wizard로 만들 수 있는 것과 비슷한 <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World 확장기능</a>은 <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">MozillaZine Knowledge Base의 다른 입문서</a>에서 한 줄 한 줄 설명합니다.</p> -<h3 id=".EB.B6.80.EA.B0.80_.EC.A0.95.EB.B3.B4" name=".EB.B6.80.EA.B0.80_.EC.A0.95.EB.B3.B4">부가 정보</h3> -<ul> - <li><a href="/ko/docs/Extension_FAQ" title="Extension_FAQ">Extension FAQ</a></li> - <li><a href="/ko/docs/Extensions" title="Extensions">Extensions</a></li> -</ul> diff --git a/files/ko/conflicting/web/api/document_object_model/index.html b/files/ko/conflicting/web/api/document_object_model/index.html deleted file mode 100644 index b9d5d2fc30..0000000000 --- a/files/ko/conflicting/web/api/document_object_model/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: DOM developer guide -slug: conflicting/Web/API/Document_Object_Model -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM -original_slug: Web/Guide/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/conflicting/web/api/index.html b/files/ko/conflicting/web/api/index.html deleted file mode 100644 index 05ac8c1c05..0000000000 --- a/files/ko/conflicting/web/api/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: WebAPI -slug: conflicting/Web/API -tags: - - Apps - - DOM - - Firefox OS - - Mobile - - NeedsTranslation - - TopicStub -translation_of: Web/API -translation_of_original: WebAPI -original_slug: WebAPI ---- -<p><strong>WebAPI</strong>는 웹 앱과 웹 콘텐츠가 기기의 하드웨어에 접근(배터리 상태나 기기의 진동 하드웨어 등)하고 기기의 데이터 저장소에 접근(달력이나 주소록 목록 등)할 수 있도록 해주는 기기 호환과 접근 API의 모음을 나타내는 단어입니다. 이러한 API를 추가함으로써 오늘날 웹이 할 수 있는 일과 과거에 특정 플랫폼에서만 가능했던 일들이 확장되기를 희망합니다.</p> - -<div class="note"> -<p><strong>Note:</strong> More of this documentation has been written than it looks like; links are not all added yet. We're actively working on improving this and expect to see things much better over the next couple of weeks. See the <a href="/ko/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">WebAPI doc status page</a>, where we're tracking work on WebAPI docs.</p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">Communication APIs</h2> - -<dl> - <dt><a href="/ko/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> - <dd>현재 네트워크 연결에 대한 연결 속도와 같은 기본 정보를 알려줍니다.</dd> -</dl> - -<dl> - <dt><a href="/ko/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt> - <dd>WebBluetooth API는 기기의 Bluetooth에 로우레벨 접근을 할 수 있게 해 줍니다.</dd> - <dt><a href="/ko/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> - <dd>Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.</dd> - <dt><a href="/ko/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a></dt> - <dd>Monitors data usage and exposes this data to privileged applications.</dd> - <dt><a href="/ko/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> - <dd>Lets apps place and answer phone calls and use the built-in telephony user interface.</dd> - <dt><a href="/ko/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> - <dd>앱들이 SMS 문자 메시지를 주고 받게 하고, 장치에 저장된 메시지들을 접근하고 관리 하도록 해줍니다.</dd> - <dt><a href="/ko/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> - <dd>A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.</dd> -</dl> - -<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">Hardware access APIs</h2> - -<dl> - <dt><a href="/ko/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> - <dd>광센서에 접근할 수 있게 해서 앱이 기기 주변의 밝기를 감지할 수 있게 해 줍니다.</dd> - <dt><a href="/ko/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> - <dd>배터리의 충전 정보 및 현재 기기가 충전 중인지 여부에 대한 정보를 제공 합니다.</dd> - <dt><a href="/ko/docs/WebAPI/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> - <dd>Provides information about the device's physical location.</dd> - <dt><a href="/ko/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.</dd> - <dt><a href="/ko/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> - <dd>Lets you detect proximity of the device to a nearby object, such as the user's face.</dd> - <dt><a href="/ko/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> - <dd>기기의 방향 변화를 감지하여 알려줍니다.</dd> - <dt><a href="/ko/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a></dt> - <dd>화면의 방향 변화를 감지하여 알려줍니다. 앱이 어떤 방향을 선호하는지 지정하는데에도 사용 할 수 있습니다.</dd> - <dt><a href="/ko/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a></dt> - <dd>Lets apps control the device's vibration hardware for things such as haptic feedback in games. This is <strong>not</strong> intended for things such as notification vibrations. See the <a href="/ko/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> for that.</dd> - <dt><a href="/ko/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt> - <dd>Allows apps to take photographs and/or record video using the device's built-in camera.</dd> - <dt><a href="/ko/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> - <dd>Lets apps turn on and off the screen, CPU, device power, and so forth. Also provides support for listening for and inspecting resource lock events.</dd> -</dl> - -<p><span class="alllinks"><a href="/ko/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">Data management APIs</h2> - -<dl> -</dl> - -<dl> - <dt><a href="/ko/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a></dt> - <dd>Provides support for writable files with locking support.</dd> - <dt><a href="/ko/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>고성능 검색을 지원하는 클라이언트측의 구조화된 데이터 저장소입니다.</dd> -</dl> - -<dl> - <dt><a href="/ko/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> - <dd>Lets apps examine and change system-wide configuration options that are permanently stored on the device.</dd> -</dl> - -<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Other APIs</h2> - -<dl> - <dt><a href="/ko/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt> - <dd>Lets apps schedule notifications. Also provides support for automatically launching an app at a specific time.</dd> - <dt><a href="/ko/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> - <dd>Lets the platform send notification messages to specific applications.</dd> - <dt><a href="/ko/docs/WebAPI/Using_Web_Notifications" title="/ko/docs/WebAPI/Using_Web_Notifications">Web Notifications</a></dt> - <dd>Lets applications send notifications displayed at the system level.</dd> - <dt><a href="/ko/docs/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> - <dd>The Open WebApps API provides support for installing and managing Web apps. In addition, support is provided to let apps determine payment information.</dd> - <dt><a href="/ko/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> - <dd>Lets an app delegate an activity to another app; for example, an app might ask another app to select (or create) and return a photo. Typically the user is able to configure what apps are used for which activities.</dd> - <dt><a href="/ko/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> - <dd>Lets Web content initiate payments and refunds for virtual goods.</dd> - <dt><a href="/ko/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> - <dd>Provides support for building a Web browser completely using Web technologies (in essence, a browser within a browser).</dd> -</dl> - -<dl> - <dt><a href="/ko/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> - <dd>Lets apps receive notifications when the user is not actively using the device.</dd> - <dt><a href="/ko/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> - <dd>Manages app permissions in a centralized location. Used by the Settings app.</dd> - <dt><a href="/ko/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> - <dd>현재 시각을 설정할 수 있게 해 줍니다. 시간대는 <a href="/ko/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>를 이용해서 설정할 수 있습니다.</dd> -</dl> - -<h2 class="Community" id="Community" name="Community">WebAPI community</h2> - -<p>If you need help with these APIs, there are several ways you can talk to other developers making use of them.</p> - -<ul> - <li>Consult the WebAPI forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> - <li>Visit the WebAPI IRC channel: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> -</ul> - -<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> - -<ul> - <li>The <a href="/ko/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">Document Object Model (DOM)</a> is the representation of an HTML document as a tree.</li> - <li><a href="/ko/docs/JavaScript" title="JavaScript">JavaScript</a> - Scripting language for the Web.</li> - <li><a href="/ko/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: A list of WebAPI topics and their documentation status.</li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html deleted file mode 100644 index 7aa22576b3..0000000000 --- a/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: 크로스-도메인 텍스쳐 -slug: conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -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 -original_slug: 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/conflicting/web/css/@viewport/index.html b/files/ko/conflicting/web/css/@viewport/index.html deleted file mode 100644 index 38e7063278..0000000000 --- a/files/ko/conflicting/web/css/@viewport/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: height -slug: conflicting/Web/CSS/@viewport -tags: - - '@viewport' - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height -original_slug: 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> - -{{csssyntax}} - -<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/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html deleted file mode 100644 index eda9ab681d..0000000000 --- a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: viewport-fit -slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit -original_slug: Web/CSS/@viewport/viewport-fit ---- -<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> - -<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/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html deleted file mode 100644 index b5ba15fb81..0000000000 --- a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: zoom -slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 -tags: - - CSS - - CSS Descriptor - - Graphics - - Layout - - NeedsExample - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom -original_slug: 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> - -{{csssyntax}} - -<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/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index 1a8c900e9c..0000000000 --- a/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 여러개의 배경 지정하기 -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_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 -original_slug: 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/conflicting/web/guide/index.html b/files/ko/conflicting/web/guide/index.html deleted file mode 100644 index 56a70887cf..0000000000 --- a/files/ko/conflicting/web/guide/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Web Development -slug: conflicting/Web/Guide -tags: - - Web Development -translation_of: Web/Guide -translation_of_original: Web_Development -original_slug: Web_Development ---- -<div> - <b>웹 개발</b>은 웹 사이트 그리고 웹 응용프로그램 개발을 (양자를 포괄적으로) 포함하고 있습니다.</div> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h4 id=".EB.AC.B8.EC.84.9C" name=".EB.AC.B8.EC.84.9C"><a>문서</a></h4> - <dl> - <dt> - <a href="ko/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a></dt> - <dd> - <small>Doron Rosenberg가 가지고 계신 웹 응용프로그램이 IE와 Mozilla에서 동작하는지 확인하는 법을 알려줍니다.</small></dd> - </dl> - <dl> - <dt> - <a href="ko/Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a></dt> - <dd> - <small><a href="ko/Gecko">Gecko</a> 1.8 (<a href="ko/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0)는 마우스 커서를 마음대로 지정할 수 있게 하는 <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 cursor property</a>를 위한 URL 값을 지원합니다.</small></dd> - </dl> - <p> </p> - <dl> - <dt> - <a href="ko/Using_Firefox_1.5_caching">Using Firefox 1.5 caching</a></dt> - <dd> - <small><a href="ko/Firefox_1.5">Firefox 1.5</a>는 메모리에 JavaScript상태 값을 포함한 웹 페이지 전체를 캐시합니다. 방문한 페이지 사이에 "뒤로", "앞으로"의 이동은 페이지를 중복해서 불러올 필요가 없을 뿐더러 JavaScript상태 값을 보존합니다. 이러한 특징들은 웹 서핑을 매우 빠르게 해줍니다.</small></dd> - </dl> - <p><br> - <span class="alllinks"><a>모두 보기...</a></span></p> - </td> - <td> - <h4 id=".EC.BB.A4.EB.AE.A4.EB.8B.88.ED.8B.B0" name=".EC.BB.A4.EB.AE.A4.EB.8B.88.ED.8B.B0">커뮤니티</h4> - <ul> - <li>Mozilla 포럼 보기...</li> - </ul> - <p>{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}</p> - <ul> - <li><a class="external" href="http://www.whatwg.org/">WHAT Working Group</a></li> - <li><a class="external" href="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> - </ul> - <h4 id=".EB.8F.84.EA.B5.AC" name=".EB.8F.84.EA.B5.AC">도구</h4> - <ul> - <li><a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox">Web Developer extension</a></li> - <li><a href="ko/Venkman">Venkman</a>, the JavaScript debugger</li> - <li><a href="ko/DOM_Inspector">DOM Inspector</a></li> - </ul> - <p><span class="alllinks"><a>모두 보기...</a></span></p> - <h4 id=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C" name=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C">관련 주제</h4> - <dl> - <dd> - <a href="ko/AJAX">AJAX</a>, <a href="ko/CSS">CSS</a>, <a href="ko/HTML">HTML</a>, <a href="ko/JavaScript">JavaScript</a>, <a href="ko/Web_Standards">Web Standards</a>, <a href="ko/XHTML">XHTML</a>, <a href="ko/XML">XML</a></dd> - </dl> - </td> - </tr> - </tbody> -</table> -<p><span class="comment">Categories</span></p> -<p><span class="comment">Interwiki Language Links</span></p> -<p> </p> -<p>{{ languages( { "en": "en/Web_Development" } ) }}</p> diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html deleted file mode 100644 index 621a2cee51..0000000000 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Arithmetic Operators -slug: conflicting/Web/JavaScript/Guide/Expressions_and_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Arithmetic_Operators -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators ---- -<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/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html deleted file mode 100644 index 172de20c73..0000000000 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Logical Operators -slug: >- - conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Logical_Operators -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators ---- -<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/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html deleted file mode 100644 index 7da67ef78a..0000000000 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: String Operators -slug: >- - conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/String_Operators -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators ---- -<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/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html deleted file mode 100644 index 813470385b..0000000000 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Special Operators -slug: >- - conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Special_Operators -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators ---- -<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/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html deleted file mode 100644 index 82af3b32f7..0000000000 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Bitwise Operators -slug: >- - conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Bitwise_Operators -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators ---- -<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/conflicting/web/javascript/guide/grammar_and_types/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html deleted file mode 100644 index ece3da245d..0000000000 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Constants -slug: conflicting/Web/JavaScript/Guide/Grammar_and_types -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Constants -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants ---- -<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/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html deleted file mode 100644 index 014cc159ff..0000000000 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Variables -slug: >- - conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Variables -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables ---- -<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/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html deleted file mode 100644 index 4437362b39..0000000000 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Unicode -slug: >- - conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Unicode -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode ---- -<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/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html deleted file mode 100644 index fa1d8fe3d5..0000000000 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Literals -slug: >- - conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Literals -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals ---- -<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/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html deleted file mode 100644 index cb690bb9be..0000000000 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Values -slug: >- - conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Values -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values ---- -<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/conflicting/web/javascript/guide/index.html b/files/ko/conflicting/web/javascript/guide/index.html deleted file mode 100644 index 38ef567276..0000000000 --- a/files/ko/conflicting/web/javascript/guide/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Predefined Core Objects -slug: conflicting/Web/JavaScript/Guide -translation_of: Web/JavaScript/Guide -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects ---- -<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/conflicting/web/javascript/javascript_technologies_overview/index.html b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html deleted file mode 100644 index ba17dea652..0000000000 --- a/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: The DOM and JavaScript -slug: conflicting/Web/JavaScript/JavaScript_technologies_overview -tags: - - DOM - - JavaScript -original_slug: The_DOM_and_JavaScript ---- -<h3 id=".ED.81.B0_.EA.B7.B8.EB.A6.BC" name=".ED.81.B0_.EA.B7.B8.EB.A6.BC">큰 그림</h3> - -<p>페이지 안 레이어 이동, 레이어, 팝업 메뉴 보이기와 감추기 등과 같은 비주얼 효과는 "<a href="ko/DHTML">DHTML</a>"이나 "Dynamic HTML"로 자주 참조됩니다. 일부 사람들은 표현(presentation)이 아니라 내용(content)을 다루기로 된 웹 페이지에서 이런 기술의 실제 쓰임을 묻습니다. 하지만 오늘날 실제 쓰임은 그 물음에 있습니다.</p> - -<p>내가 이 프로젝트에서 일하고 많은 웹마스터들과 연락한 뒤로, 웹 디자인 커뮤니티 대부분이 그들의 DHTML이 어떻게 동작하는 지 모른다는 사실이 생각났습니다. 대부분의 시간을 그들은 스크립트 저장소(repository) 사이트에 가서, 그들 웹 페이지에 그 코드를 그냥 복사하고 붙여넣습니다. 불행하게도 이들 사이트 대부분은 결코 "<a href="ko/DOM">DOM</a>"에 관해서는 이야기하지 않으면서 "javascript"와 "DHTML"은 이야기합니다. 비록 DOM이 오래된 개념이더라도 DOM이 최근에야 "평균 웹 디자이너 전문어(jargon)"의 부분이 되었다는 사실입니다.</p> - -<p>그 사이트를 W3C DOM을 위해 코딩할 가치가 있다고 사이트 임자에게 납득시키기는 Mozilla 같은 프로젝트를 위한 큰 도전입니다. 이는 때때로 많은 작업과 예전 브라우저를 위한 지원을 중단함을 뜻합니다. 또한 W3C DOM을 위한 지원에 관해 곧바로 참모습을 알아내는 큰 도전입니다. Netscape 6은 Netscape 4와 document.layers와 document.all를 쓰는 Internet Explorer를 위해 그들의 "JavaScript"를 작성했던 어리석은 웹 디자이너들에게 많은 혹평을 받았습니다. 매일 우리는 그들의 사이트를 얻도록 뉴스그룹에서, 개인 email로, Bugzilla로 되도록 공손하게 사람들을 돕기 위해 힘씁니다. 우리가 부딪친 문제 가운데 가장 큰 것은 <a href="ko/JavaScript">JavaScript</a>와 <a href="ko/DHTML">DHTML</a> 그리고 <a href="ko/DOM">DOM</a> 사이의 혼동(confusion)입니다. 이 문서는 이를 정리하고 이 화려하고 쓸모 있는 기술 사이의 관계를 설명하려는 하나의 시도입니다.</p> - -<h3 id="JavaScript.2C_.EC.9B.B9_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8C.85_.EC.96.B8.EC.96.B4" name="JavaScript.2C_.EC.9B.B9_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8C.85_.EC.96.B8.EC.96.B4">JavaScript, 웹 스크립팅 언어</h3> - -<p><a href="ko/JavaScript">JavaScript</a>은 Netscape Communications Corp에서 오늘날 Mozilla 프로젝트의 리더 가운데 한 명인 Brendan Eich가 처음 개발한 "object scripting language"입니다. Mozilla가 쓰는 JavaScript 엔진은 <a href="ko/SpiderMonkey">SpiderMonkey</a>입니다. 이 엔진은 ECMA-262 개정 3 명세(specification)를 따릅니다. JavaScript는 또한 <a href="ko/ECMAScript">ECMAScript</a>로 알려졌습니다(하지만 상세한 설명은 링크된 페이지를 보세요).</p> - -<p>일반인의 오해와는 달리, JavaScript는 "Interpretive Java"가 아닙니다. 줄여 말하면, JavaScript는 개체 생성에 기반을 둔 원형(prototype)을 지원하는 dynamic scripting language입니다. 기본 구문(syntax)은 언어를 배우는 데 필요한 새로운 개념의 수를 줄이기 위해 Java와 C++ 둘 다와 개념에 있어 비슷합니다. JavaScript가 대단한 점은 혹시 여러분이 기본 프로그래밍(간단한 DHTML에서 필요한 것 같은)을 하고 싶은 경우 배우기 정말 쉽다는 점입니다. 불분명한 변수형, 정말 쓰기 쉬운 문자열, 전체 플랫폼 중립성(neutrality) 등. 또한 고급 코더들을 위해 개체 중심(object-oriented) 언어와 절차(procedural) 언어 둘 다로 기능합니다.</p> - -<p>JavaScript에 관한 이 단락 대부분은 <a class="external" href="http://mozilla.org/js">Mozilla JavaScript 페이지</a>에서 가져왔음을 알게 됩니다. 가장 최근 ECMA 명세는 <a class="external" href="http://www.mozilla.org/js/language/">여기</a>에서 찾습니다.</p> - -<h3 id="Document_Object_Model.2C_.EC.96.B8.EC.96.B4_.EC.A4.91.EB.A6.BD_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.A7.91.ED.95.A9" name="Document_Object_Model.2C_.EC.96.B8.EC.96.B4_.EC.A4.91.EB.A6.BD_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.A7.91.ED.95.A9">Document Object Model, 언어 중립 인터페이스 집합</h3> - -<p>JavaScript는 여러분이 DOM 개체를 운영(operate)하고 개체를 프로그램으로 조작(manipulate)하게 하는 프로그래밍 언어이지만, DOM은 여러분이 작업하는 문서의 부분을 검색(retrieve), 수정(modify), 갱신(update), 삭제(delete)하는 메소드(method)와 프로퍼티(property)를 제공합니다. 예를 들어, 여러분이 DOM을 써서 HTML textfield 값을 문자열로 검색할 지도 모릅니다. 그렇다면 여러분은 뜻있는 문장이 되도록 그 문자열을 다른 문자열에 연결(concatenate)하는 JavaScript "+" 연산자를 쓸 수 있습니다. 그리고 나서 여러분은 dialog에서 사용자에게 그 문자열을 표시하기 위해 DOM "alert()" 메소드를 씁니다. 또한 아래 예제를 보세요.</p> - -<p>만약 웹페이지가 수입한 스웨덴 가구 한 점이라면, DOM은 선반, 나사못(bolt), Allen 렌치(wrench)와 드라이버 같은 각 부분의 도해입니다. 각 부분을 서로 조립하는 법과 많은 언어로 각 부분을 쓰는 법에 관한 명령 작성이 가능합니다. 하지만 여러분은 오직 여러분이 이해한 언어로 작성한 부분을 씁니다. 설명서는 실제 개체(브라우저의 렌더링 엔진)를 나타내는 개체의 도해(DOM)를 참조하는 작성 명령(JavaScript)을 써서 함께 가구를 만들기 쉽게 합니다. (유추한 Jonathan에게 감사를 올립니다!)</p> - -<p>DOM에 있는 이 "언어 중립"이란 과대광고(hype)는 무엇일까요? DOM에 접근하는 데 쓰이는 유일한 언어가 JavaScript라면 왜 DOM이 언어 중립성을 띨까요? 글쎄요, 그것은 딱 맞지 않습니다. 예를 들어, Mozilla는 사용자 인터페이스를 위해 내부에 C++와 JavaScript로 작성된 DOM을 씁니다. 이를테면, 편집기는 Composer 모듈로 페이지를 작성(compose)할 때 여러분이 보는 HTML을 삽입(insert), 수정(modify), 삭제(delete)하기 위해 광범위하게 DOM을 씁니다. 다른 알려진 DOM 구현(implementation)은 아마도 <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a>, 그리고 다른 것들을 포함합니다. 물론 이는 오직 DOM의 언어 중립성 덕분에 가능합니다.</p> - -<h3 id="DOM.EA.B3.BC_JavaScript_-_.EB.AC.B4.EC.97.87.EC.9D.B4_.EB.AC.B4.EC.97.87.EC.9D.84_.ED.95.98.EB.8A.94.EA.B0.80.3F" name="DOM.EA.B3.BC_JavaScript_-_.EB.AC.B4.EC.97.87.EC.9D.B4_.EB.AC.B4.EC.97.87.EC.9D.84_.ED.95.98.EB.8A.94.EA.B0.80.3F">DOM과 JavaScript - 무엇이 무엇을 하는가?</h3> - -<p>우리는 이 문서의 본론에 이르렀습니다. 각각 무엇을 할까요? 내 웹 페이지에 끼워 넣은(embed) 스크립트에서, DOM은 무엇이고 JavaScript는 무엇일까요? 간단한 예를 하나 더 자세히 보죠. 예는 우리가 "<code>anchorTags</code>"라고 부르는 NodeList에서 모든 <span class="nowiki"><a></span> tag을 검색합니다. 그리고 나서 각 anchor tag(<code>anchorTags</code> NodeList의 각 요소)의 "href" 속성값을 경고(alert)로 띄웁니다.</p> - -<p>파란색은 JavaScript, 빨간색은 DOM입니다.</p> - -<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>; -for (var i = 0; i < <span class="highlightred">anchorTags.length</span> ; i++) -{ - <span class="highlightred">alert</span>("Href of " + i + "-th element is : " + <span class="highlightred">anchorTags[i].href</span> + "\n"); -}</span> -</pre> - -<h4 id=".EC.84.A4.EB.AA.85" name=".EC.84.A4.EB.AA.85">설명</h4> - -<p>이 코드 조각(snippet)은 기본 JavaScript가 무엇인지, 그리고 DOM이 무엇인지를 보입니다.</p> - -<dl> - <dt><span class="highlightblue">var anchorTags =</span></dt> - <dd>이는 "<code>anchorTags</code>"로 부르는 JavaScript 변수를 만듭니다.</dd> -</dl> - -<dl> - <dt><span class="highlightred">document.getElementsByTagName("a")</span></dt> - <dd><code>Document</code> 인터페이스는 DOM1 Core에서 정의한 첫 번째 인터페이스이고 <code>document</code>는 <code>Document</code> 인터페이스를 구현하는 host 개체입니다. document는 여러분의 페이지에 있는 모든 것을 지닙니다.<br> - DOM1 Core는 <code>Document</code> 인터페이스에 <code>getElementsByTagName()</code> 메소드를 정의합니다. 메소드는 그 함수에 pass되는 매개변수와 일치하는 모든 tag의 NodeList (노드를 지니는 DOM 고유 배열의 한 종류)에서 문서 소스에 나오는 순서대로 검색합니다. 따라서 이제 <code>anchorTags</code> 변수는 NodeList입니다.</dd> -</dl> - -<dl> - <dt><span class="highlightblue">;</span></dt> - <dd>기본 명령 끝(end-of-instruction) 쌍반점(쎄미콜론, semicolon). JavaScript 문법.</dd> -</dl> - -<dl> - <dt><span class="highlightblue">for (var i = 0; i <</span></dt> - <dd>프로그래밍 언어의 특징을 잘 나타내는 "for" 루프(loop). 이는 우리가 <code>anchorTags</code> NodeList에 포함된 각 노드를 샅샅이 거치게 합니다. 변수 "<code>i</code>"의 선언을 주의하세요. 역시 JavaScript.</dd> -</dl> - -<dl> - <dt><span class="highlightred">anchorTags.length</span></dt> - <dd>DOM1 Core는 <code>NodeList</code> 인터페이스의 <code>length</code> 프로퍼티를 정의합니다. 프로퍼티는 NodeList에 포함된 노드수(정수)를 반환합니다. JavaScript 배열은 또한 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Array/length"><code>length</code> 프로퍼티</a>도 있음을 덧붙입니다.</dd> -</dl> - -<dl> - <dt><span class="highlightblue">; i++) {</span></dt> - <dd>1씩 증가하는 전형적인 JavaScript 변수.</dd> -</dl> - -<dl> - <dt><span class="highlightred">alert(</span></dt> - <dd><code>alert()</code>은 여러분이 pass한 매개변수(문자열)을 팝업하는 DOM 메소드입니다. DOM level 0이나 DOM0으로 부르는 것의 일부임을 유의하세요. DOM0은 일부 브라우저에서 지원되는 인터페이스 집합이지만 DOM 명세의 일부는 아닙니다.</dd> -</dl> - -<dl> - <dt><span class="highlightblue">"Href of this a element is : " +</span></dt> - <dd>문자열 리터럴(literal)과 문자열 연결 연산자. JavaScript.</dd> -</dl> - -<dl> - <dt><span class="highlightred">anchorTags{{ mediawiki.external('i') }}.href</span></dt> - <dd>"<code>href</code>"는 DOM1 HTML 명세에 정의된 <code>HTMLAnchorElement</code> 인터페이스의 프로퍼티입니다. 있다면, 프로퍼티는 anchor 요소의 <code>href</code> 속성값을 반환합니다.<br> - 우리는 또한 배열의 <code>i</code> 번째 항목(item)에 접근하기 위해 JavaScript에서 쓰는 구문과 같은 <code>anchorTags{{ mediawiki.external('i') }}</code>를 씁니다. NodeList의 항목에 접근하기 위해 언어 중립성을 띄는 "DOM 방식"은 <code>NodeList</code> 인터페이스에 정의된 <code>item()</code> 메소드(<code>anchorTags.item(1).href</code>)를 씁니다. 하지만 JavaScript 구현 대부분은 더 간단한 배열 방식 구문을 쓰도록 하고 그게 사람들 대부분이 실제로 쓰는 방식입니다.</dd> -</dl> - -<dl> - <dt><span class="highlightblue">+ "\n");</span></dt> - <dd>추가 문자열 연결. 문자열의 끝에 carriage return을 삽입합니다.</dd> -</dl> - -<dl> - <dt><span class="highlightblue">}</span></dt> - <dd>"for" 루프의 끝.</dd> -</dl> - -<div class="originaldocinfo"> -<p><strong>원본 문서 정보</strong></p> - -<ul> - <li>저자: Fabian Guisset <fguisset at softhome dot net></li> - <li>저작권 정보: © 1998-2005 by individual mozilla.org contributors; 내용은 <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a> 아래에서 이용 가능합니다</li> -</ul> -</div> - -<p>{{ languages( { "en": "en/The_DOM_and_JavaScript", "fr": "fr/Le_DOM_et_JavaScript" } ) }}</p> diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html deleted file mode 100644 index f49c3592b0..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Boolean.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -tags: - - Boolean - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html deleted file mode 100644 index 782fc3d9e2..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: InternalError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/InternalError -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html deleted file mode 100644 index 4b5b7f24b8..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -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 -original_slug: 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/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html deleted file mode 100644 index ea9a8820fd..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -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 -original_slug: 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/conflicting/web/javascript/reference/global_objects/map/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 6fef19f59d..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Map.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map -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 -original_slug: 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/conflicting/web/javascript/reference/global_objects/number/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html deleted file mode 100644 index 0f49aaa1e7..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Number.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number -tags: - - JavaScript - - Number - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -<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>{{Compat("javascript.builtins.Number.prototype")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Number")}}</li> -</ul> diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html deleted file mode 100644 index 03786c2910..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Object.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object -tags: - - JavaScript - - Object - - Property - - Reference - - 프로토타입 -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html deleted file mode 100644 index 10ee3d4f58..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Promise.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise -tags: - - JavaScript - - Promise - - Property - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -<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>{{Compat("javascript.builtins.Promise.prototype")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html deleted file mode 100644 index 173883769c..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Set.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Set -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 -original_slug: 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/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html deleted file mode 100644 index b0d86cbb55..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: SharedArrayBuffer.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -tags: - - JavaScript - - SharedArrayBuffer - - TypedArrays - - 공유 메모리 - - 속성 -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/string/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html deleted file mode 100644 index b8c4064d6c..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: String.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/String -tags: - - JavaScript - - Property - - Prototype - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html deleted file mode 100644 index aaf73c5def..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: SyntaxError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html deleted file mode 100644 index f100a49134..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: TypedArray.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray -tags: - - JavaScript - - Property - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html deleted file mode 100644 index 50ee3cd958..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: WeakMap.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html deleted file mode 100644 index e479c2067c..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: WeakSet.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html deleted file mode 100644 index e647badb6a..0000000000 --- a/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: WebAssembly.Global.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype ---- -<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/conflicting/web/javascript/reference/operators/index.html b/files/ko/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index 71373078bf..0000000000 --- a/files/ko/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: 산술 연산자 -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<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/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html deleted file mode 100644 index 7220888794..0000000000 --- a/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: 논리 연산자 -slug: >- - conflicting/Web/JavaScript/Reference/Operators_13aeb53e31f9cec454ca631cb162449f -tags: - - JavaScript - - Logic - - Not - - Operator - - Reference - - and - - or - - 논리 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators -original_slug: 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/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html deleted file mode 100644 index 39a3c0c6c3..0000000000 --- a/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: 비교 연산자 -slug: >- - conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators -original_slug: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<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/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html deleted file mode 100644 index 7f8b67dd78..0000000000 --- a/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ /dev/null @@ -1,543 +0,0 @@ ---- -title: 비트 연산자 -slug: >- - conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators -original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<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/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html deleted file mode 100644 index e0fee1dac4..0000000000 --- a/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: 할당 연산자 -slug: >- - conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators -original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -<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/conflicting/web/javascript/reference/statements/switch/index.html b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html deleted file mode 100644 index 77a82304bd..0000000000 --- a/files/ko/conflicting/web/javascript/reference/statements/switch/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: default -slug: conflicting/Web/JavaScript/Reference/Statements/switch -tags: - - JavaScript - - Keyword - - Reference -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default -original_slug: Web/JavaScript/Reference/Statements/default ---- -<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/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html deleted file mode 100644 index efc1cc940e..0000000000 --- a/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Using XPath -slug: conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript -tags: - - AJAX - - Add-ons - - DOM - - Extensions - - Transforming_XML_with_XSLT - - XPath -translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript -translation_of_original: Using_XPath -original_slug: Using_XPath ---- -<p><a href="ko/XPath">XPath</a>은 XML 문서의 위치 정보를 위한 언어입니다. -</p><p>이 문서는 자바스크립트 코드와 XPath의 관계를 위한 Mozilla 인터페이스에 대해 설명합니다. 이러한 것들은 (이 부분에 대해 W3C 작업 그룹에서 작성한) <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath</a>에 설명되어 있습니다. -</p><p>이 문서는 XPath 자체를 설명하지 않습니다. 기술에 대해 익숙하지 않다면 <a class="external" href="http://www.w3schools.com/xpath/">W3Schools XPath tutorial</a>을 참고하십시오. -</p> -<h3 id="Wrapper_function">Wrapper function</h3> -<p>다음의 함수는 주어진 XML 노드의 XPath 표현을 평가하는데 사용할 수 있습니다. 첫 번째 전달인자는 DOM 노드 혹은 Document 객체이고, 두 번째 전달인자는 XPath 표현에 대한 문자열 정의입니다. -</p> -<pre>// Evaluate an XPath expression aExpression against a given DOM node -// or Document object (aNode), returning the results as an array -// thanks wanderingstan at morethanwarm dot mail dot com for the -// initial work. -function evaluateXPath(aNode, aExpr) { - var xpe = new XPathEvaluator(); - var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ? - aNode.documentElement : aNode.ownerDocument.documentElement); - var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null); - var found = []; - var res; - while (res = result.iterateNext()) - found.push(res); - return found; -} -</pre> -<p>이 함수는 <code>new XPathEvaluator()</code>와 같이 사용할 수 있습니다. 이것의 생성자는 Mozilla에 정의되어 있습니다. 다른 브라우저에서 사용될 웹페이지에서 이 스크립트가 사용된다면 다음과 같이 <code>new XPathEvaluator()</code>를 호출하면 됩니다: -</p> -<pre> // XPathEvaluator is implemented on objects that implement Document - var xpe = aNode.ownerDocument || aNode; -</pre> -<p>이 예에서 <a href="ko/DOM/document.createNSResolver">XPathNSResolver</a>를 생성하는 것은 다음과 같이 간략화할 수 있습니다: -</p> -<pre> var nsResolver = xpe.createNSResolver(xpe.documentElement); -</pre> -<p>그러나 <code>createNSResolver</code>는 XPath 표현에 대한 네임스페이스가 정해져 있고, 그러한 것들이 쿼리를 보낼 문서의 내용과 일치하여야 합니다. 그렇지 않다면 당신 자신만의 XPathNSResolver를 수행하는 부분을 만들어야 합니다. -</p><p>(<a href="ko/Parsing_and_serializing_XML">Parsing and serializing XML</a>에서 설명하는 것과 같은) DOM 트리안에 로컬이나 원격 XML 파일을 읽기 위해 <a href="ko/XMLHttpRequest">XMLHttpRequest</a>를 사용한다면, <code>evaluateXPath()</code>의 첫 번째 전달인자는 <code>req.responseXML</code>가 되어야 합니다. -</p> -<h3 id=".EC.82.AC.EC.9A.A9.EC.98.88">사용예</h3> -<p>다음과 같은 XML 문서가 있다고 가정합니다.(<a href="ko/How_to_Create_a_DOM_tree">How to Create a DOM tree</a>와 <a href="ko/Parsing_and_serializing_XML">Parsing and serializing XML</a>을 참조하십시오.): -</p> -<pre><?xml version="1.0"?> -<people> - <person first-name="eric" middle-initial="H" last-name="jung"> - <address street="321 south st" city="denver" state="co" country="usa"/> - <address street="123 main st" city="arlington" state="ma" country="usa"/> - </person> - - <person first-name="jed" last-name="brown"> - <address street="321 north st" city="atlanta" state="ga" country="usa"/> - <address street="123 west st" city="seattle" state="wa" country="usa"/> - <address street="321 south avenue" city="denver" state="co" country="usa"/> - </person> -</people> -</pre> -<p>XPath 표현으로 문서에 "query"를 보낼 수 있습니다. 비록 DOM 트리를 탐색하는 것이 비슷한 결과를 가져오더라도 XPath를 사용하는 것이 더 빠르고 강력합니다. 만일 <code>id</code> attribute를 사용한다면 <code>document.getElementById()</code>를 사용해도 여전히 강력합니다. 하지만, XPath 만큼 강력하지 않습니다. 몇 가지 예제가 있습니다: -</p> -<pre>// display the last names of all people in the doc -var results = evaluateXPath(people, "//person/@last-name"); -for (var i in results) - alert("Person #" + i + " has the last name " + results[i].value); - -// get the 2nd person node -results = evaluateXPath(people, "/people/person[2]"); - -// get all the person nodes that have addresses in denver -results = evaluateXPath(people, "//person[address/@city='denver']"); - -// get all the addresses that have "south" in the street name -results = evaluateXPath(people, "//address[contains(@street, 'south')]"); -alert(results.length); -</pre> -<h3 id=".EC.A0.95.EB.B3.B4">정보</h3> -<ul> <li><a href="/ko/XPath" title="ko/XPath">XPath</a></li> <li><a class="external" href="http://www.topxml.com/code/default.asp?p=3&id=v20021221025528">XPath Visualizer for Mozilla and Firefox</a></li> <li><a class="external" href="http://www.w3schools.com/xpath/">XPath tutorial</a></li> <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=229106">Forum discussion on this topic</a></li> <li><a class="external" href="http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html">Using the Mozilla JavaScript Interface to XPath</a> - 자바스크립트로 XPath를 사용하는 것에 대한 튜터리얼</li> -</ul> - -<p>{{ languages( { "fr": "fr/Utilisation_de_XPath", "ja": "ja/Using_XPath", "ko": "ko/Using_XPath" } ) }}</p> diff --git a/files/ko/orphaned/learn/how_to_contribute/index.html b/files/ko/orphaned/learn/how_to_contribute/index.html deleted file mode 100644 index 14fa2761a3..0000000000 --- a/files/ko/orphaned/learn/how_to_contribute/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: MDN의 학습 영역에 기여하는 방법 -slug: orphaned/Learn/How_to_contribute -tags: - - Documentation - - MDN Meta - - l10n:priority - - 가이드 - - 배우기 - - 참여 - - 초보자 -translation_of: Learn/How_to_contribute -original_slug: Learn/How_to_contribute ---- -<div>{{LearnSidebar}}</div> - -<p><span id="result_box" lang="ko"><span>처음으로 또는 심도 깊은 검색을 통해 오셨다면 MDN 학습 영역에 참여하는 데 관심이있는 것 같습니다.</span> 그건<span class="alt-edited"> 좋은 소식입니다!</span></span></p> - -<p><span id="result_box" lang="ko"><span>이 페이지에서는 MDN의 학습 콘텐츠를 개선하는 데 필요한 모든 것을 찾을 수 있습니다.</span> <span>얼마나 많은 시간을 가지고 있는지, 초보자이든</span></span><span lang="ko"><span>, 웹 개발자이든</span></span><span lang="ko"><span>, 교사이든</span></span><span lang="ko"><span>, 할 수있는 일이 많이 있습니다.</span></span></p> - -<div class="note"> -<p><strong>Note</strong>: <span id="result_box" lang="ko"><span>새로운 학습 영역 기사를 작성하는 방법에 대한 안내서는 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법(</span></span><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web"><u><font color="#0066cc">How to write an article to help people learn about the Web</font></u></a><span lang="ko"><span>)을 제공합니다.</span></span></p> -</div> - -<h2 id="특정_작업_찾기"><span class="short_text" id="result_box" lang="ko"><span class="alt-edited">특정 작업 찾기</span></span></h2> - -<p><span id="result_box" lang="ko"><span>참여자는 트</span></span>렐<span lang="ko"><span>로 보드(</span></span><a href="https://trello.com/b/LDggrYSV"><u><font color="#0066cc"><strong>Trello board</strong></font></u></a><span lang="ko"><span>)</span></span>를 사용하여 작업을 구성합니다. 이렇게 하면 프로젝트에서 수행할 특정 작업을 찾을 수 있습니다. 참여하려면 트렐로 계정을 만들고 <u><a href="https://developer.mozilla.org/en-US/profiles/chrisdavidmills">Chris Mills</a></u>에게 보드에 대한 쓰기 액세스 권한을 요청하면 됩니다.</p> - -<p>기여는 새로운 것을 즐겁게 배우는 좋은 방법입니다<span lang="ko"><span>. </span></span>만약 당신이 길을 잃거나 질문이 있으면<span lang="ko"><span> </span></span><a href="https://developer.mozilla.org/ko/docs/MDN/%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0"><u><font color="#0066cc">our mailing list</font></u></a> <span lang="ko"><span>또는 </span></span><a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC"><u><font color="#0066cc">IRC channel</font></u></a><span lang="ko"><span> (자세한 내용은 이 페이지 하단 참조)로 문의하십시오.</span> </span><a href="https://developer.mozilla.org/en-US/profiles/chrisdavidmills"><u><font color="#0066cc">Chris Mills</font></u></a><span lang="ko"><span>는 학습 영역의 핵심 드라이버입니다. 직접 디렉토리에 알림을 보내볼 수도 있습니다.</span></span></p> - -<p>다음 섹션에서는 할 수있는 작업 유형에 대한 일반적인 아이디어를 제공합니다.</p> - -<h2 id="초보자"><span class="short_text" id="result_box" lang="ko"><span>초보자</span></span></h2> - -<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr">좋습니다! 초보자는 학습 자료에 대한 피드백을 만들고 제공하는 데 매우 중요하고 가치가 있습니다. 이 기사에 대한 독자적인 시각을 잠재 고객의 구성원으로 확보하면 우리 팀의 소중한 구성원이 될 수 있습니다. 실제로, 만약 당신이 무언가를 배우기 위해 우리의 글 중 하나를 사용하여 곤경에 빠지거나 글을 약간 혼란스럽게 하는 것을 발견한다면, 문제를 해결하거나 문제에 대해 알려줌으로써 해결할 수 있습니다.</div> - -<div class="trans-verified-button-small" dir="ltr"></div> - -<p><span class="short_text" id="result_box" lang="ko"><span>다음은 </span></span>참여<span class="short_text" lang="ko"><span> 할 수있는 몇 가지 제안 방법입니다.</span></span></p> - -<dl> - <dt><span class="short_text" id="result_box" lang="ko"><span>기사에 태그 추가[</span></span><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Add tags to our articles</a>] (<em>5 min</em>)</dt> - <dd><span id="result_box" lang="ko"><span>MDN 컨텐츠에 태그를 지정하는 것은 MDN에 기여하는 가장 쉬운 방법 중 하나입니다.</span> </span>많은 기능이 정보를 제공하기 위해 태그를 사용하므로 태그 지정을 돕는 것은 매우 가치가 있는 공헌입니다.<span lang="ko"> <span>시작하려면 태그가없는 용어집 항목(<u><a href="https://developer.mozilla.org/ko/docs/MDN/Doc_status/Glossary">glossary entries</a></u>) 및 학습 기사(<u><a href="https://developer.mozilla.org/ko/docs/MDN/Doc_status/Learn">learning articles</a></u>) 목록을 살펴보십시오.</span></span></dd> - <dt>용어 사전<span class="short_text" lang="ko"><span> 항목 읽기 및 검토</span></span>[<a href="https://developer.mozilla.org/ko/docs/Glossary">Read and review a glossary entry</a>] (<em>5 min</em>)</dt> - <dd><span id="result_box" lang="ko"><span>우리는 당신이 초보자로서 우리의 콘텐츠를 바라 보는 신선한 눈을 필요로 합니다.</span> <span>용어집을 쉽게 이해할 수 없다면 항목을 개선해야한다는 의미입니다.</span> <span>필요하다고 생각되는 부분은 자유롭게 변경하십시오.</span> <span>자신이 직접 항목을 편집 할 수있는 적절한 기술이 없다고 생각한다면 </span></span><u><a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a></u>로 알려주십시오.</dd> - <dt>새로운 용어집 항목 작성[<a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a>] (<em>20 minutes</em>)</dt> - <dd> - <div id="gt-res-wrap"> - <div id="gt-res-content"> - <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ko"><span>이것은 새로운 것을 배우는 가장 효과적인 방법입니다.</span> <span>이해하려는 개념을 고르고, 그것에 대해 배울 때 그에 관한 용어집 항목을 작성하십시오.</span> <span>다른 사람들에게 무언가를 설명하는 것은 지식을 "시멘트"로 만들고 다른 사람들을 돕는 동안 자신이 이해할 수 있게 하는 훌륭한 방법입니다.</span> 모두에게 이득입니다<span>!</span></span></div> - </div> - </div> - </dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>학습 자료 읽기 및 검토</span></span>[<a href="/en-US/Learn/Index">Read and review a learning article</a>] (<em>2 hours</em>)</dt> - <dd> - <div class="g-unit" id="gt-res-c"> - <div id="gt-res-p"> - <div id="gt-res-data"> - <div id="gt-res-wrap"> - <div id="gt-res-content"> - <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ko"><span>이것은 </span></span>용어 사전 <span lang="ko"><span> 항목을 검토하는 것과 같습니다. (위 참조)</span> <span>이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.</span></span></div> - </div> - </div> - </div> - </div> - </div> - </dd> -</dl> - -<h2 id="웹_개발자">웹 개발자</h2> - -<p><span id="result_box" lang="ko"><span>좋습니다!</span> 당신의 <span>기술 능력은 초보자에게 기술적으로 정확한 내용을 제공하기 위해 필요한 것입니다.</span> <span>MDN의 이 특정 부분은 웹 학습에만 전념하므로 유용한 설명이 아닌 단순하지 않은 설명을 가능한 간단하게 작성하십시오.</span> <span>지나치게 정확한 것보다 이해하는 것이 더 중요합니다.</span></span></p> - -<dl> - <dt><span class="short_text" id="result_box" lang="ko"><span>용어집 항목 읽기 및 검토</span></span>[<a href="https://developer.mozilla.org/ko/docs/Glossary">Read and review a glossary entry</a>] (<em>5 min</em>)</dt> - <dd>웹 개발자로서, 우리의 콘텐츠가 지나치게 규칙적이지 않으면서 기술적으로 정밀한 지 확인해 주길 바랍니다. 필요하다고 생각되는 부분을 자유롭게 변경하십시오. 콘텐츠를 편집하기 전에 논의하기를 원하시면 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a>나 <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>로 알림을 보내주십시오.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>새로운 용어집 항목 작성</span></span>[<a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a>] (<em>20 minutes</em>)</dt> - <dd>기술적인 전문 용어를 명확히 하는 것은 기술적으로 정확하고 간결하게 배우는 좋은 방법이다. 초보자들은 그에 감사할 것입니다. 당신의 도움이 필요한 정의되지 않은 용어(<a href="/en-US/docs/Glossary#Contribute">many undefined terms</a>)가 많이 있습니다. 선택해서 작성하실 수 있습니다. </dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>학습 자료 읽기 및 검토</span></span>[<a href="/en-US/Learn/Index">Read and review a learning article</a>] (<em>2 hours</em>)</dt> - <dd>이것은 용어집을 읽고 검토하는 것과 같습니다. (위 참조) 이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>새로운 학습 기사 작성</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a> ](<em>4 hours or more</em>)</dt> - <dd>MDN는 웹 기술사용에 관한 간단한 기사가 부족합니다. (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, 등)MDN은 다소 오래 된 콘텐츠들이 있고, 그를 검토하고 개정할 필요가 있습니다. 기술을 최대한 초보자에게도 웹 기술을 이용하기 쉽게 작성하십시오.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>연습, 코드 샘플 또는 대화식 학습 도구 만들기</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, code samples or interactive learning tools</a>](<em>? hours</em>)</dt> - <dd>우리의 모든 학습 기사는 “능동적 학습" 자료라고 부르는 것을 요구합니다.<span lang="ko"><span> 왜냐하면 사람들은 스스로 뭔가를 함으로써 최선을 다해 배우기 때문입니다.</span> <span>이러한 자료는 사용자가 기사에 설명 된 개념을 적용하고 조작하는 데 도움이 되는 연습이나 대화형 콘텐츠입니다. </span></span><a href="http://jsfiddle.net/" rel="external"><u><font color="#0066cc">JSFiddle</font></u></a> <span lang="ko"><span>또는 그와 유사한 코드 샘플을 만드는 것에서 </span></span><a href="https://thimble.mozilla.org/" rel="external"><u><font color="#0066cc">Thimble</font></u></a><span lang="ko"><span>을 사용하여 </span></span>완전히 공유된 대화형 콘텐츠를 만드는 것까지 능동적인 학습 콘텐츠를 만드는 방법은 다양합니다. 창의력을 발휘하십시오!</dd> -</dl> - -<h2 id="교육자">교육자</h2> - -<p><span id="result_box" lang="ko"><span>MDN은 기술적 우수성에 대한 오랜 역사를 가지고 있지만 새로 온 사람들에게 개념을 가르치는 가장 좋은 방법에 대한 깊이 있는 이해가 부족합니다.</span> <span>이것은 우리가 교사 또는 교육자로서 당신을 필요로 하는 이유입니다.</span> <span>자료를 통해 독자에게 훌륭한 교육 자료를 제공 할 수 있습니다.</span></span></p> - -<dl> - <dt><span class="short_text" id="result_box" lang="ko"><span>용어집 항목 읽기 및 검토</span></span>[<a href="https://developer.mozilla.org/ko/docs/Glossary">Read and review a glossary entry</a>] (<em>15 min</em>)</dt> - <dd><span id="result_box" lang="ko"><span>용어집 항목을 확인하고 필요하다고 생각되는 부분을 자유롭게 변경하십시오.</span> <span>편집하기 전에 내용을 토론하고 싶다면 </span></span><a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists"><u><font color="#0066cc">our mailing list</font></u></a><span lang="ko"><span> 나 </span></span><a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC"><u><font color="#0066cc">IRC channel</font></u></a><span lang="ko"><span>로 알림을 보내주십시오.</span></span></dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>새로운 용어집 항목 작성</span></span>[<a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a>] (<em>1 hour</em>)</dt> - <dd><span id="result_box" lang="ko"><span>용어의 명확하고 간단한 정의와 용어집의 기본 개념은 초보자의 필요를 충족시키는 데 중요합니다.</span> <span>교육자로서의 경험은 훌륭한 용어집 항목을 만드는 데 도움이 될 수 있습니다.</span> <span>우리는 주의가 필요한 많은 정의되지 않은 용어(</span></span><a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute"><u><font color="#0066cc">many undefined terms</font></u></a><span lang="ko"><span>)를 가지고 있습니다.</span> </span>하나를 선택하고 작성하실 수 있습니다.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>기사에 삽화 또는 도식을 추가</span></span>[<a href="/en-US/docs/tag/needsSchema">Add illustrations and/or schematics to articles]</a> (<em>1 hour</em>)</dt> - <dd><span id="result_box" lang="ko"><span>아시다시피, 삽화는 모든 학습 콘텐츠의 중요한 부분입니다.</span> <span>이것은 종종 MDN에서 부족한 부분이며 당신의 기술이 해당 영역에서 변화를 가져올 수 있습니다.</span> <span>설명이 부족한 기사(</span></span><a href="https://developer.mozilla.org/en-US/docs/tag/needsSchema"><u><font color="#0066cc">articles that lack illustrative content</font></u></a><span lang="ko"><span>)를 확인하고 </span></span>삽화를 삽입하고 싶은 기사를 선택하십시오.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>학습 자료 읽기 및 검토</span></span>[<a href="/en-US/Learn/Index">Read and review a learning article</a>] (<em>2 hours</em>)</dt> - <dd><span id="result_box" lang="ko"><span>이것은 용어집 항목을 검토하는 것과 비슷하지만 (위 참조) 일반적으로 기사가 상당히 길기 때문에 더 많은 시간이 필요합니다.</span></span></dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>새로운 학습 기사 작성</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a>] (<em>4 hours</em>)</dt> - <dd>우리는 웹 생태계와 그 주변의 다른 기능적 주제에 대한 간단하고 직접적인 기사가 필요합니다. 이 학습 기사는 말 그대로 문자 그대로 모두를 다루려고 하기 보다는 교육적일 필요가 있기 때문에 무엇을 알아야하고 어떻게 하면 훌륭한 자산이 될지를 아는 당신의 경험으로 도움을 줄 수 있습니다.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>연습 문제, 퀴즈 또는 대화식 학습 도구 만들기</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, <abbr title="Multiple Choice Tests">quizzes</abbr> or interactive learning tools</a>] (<em>? hours</em>)</dt> - <dd><span id="result_box" lang="ko"><span>우리의 모든 학습 기사에는 "능동적 학습" 자료가 필요합니다.</span> <span>이러한 자료는 사용자가 기사에서 설명하는 개념을 사용하고 확장하는 방법을 배우는 데 도움이 되는 연습 또는 대화형 콘텐츠입니다.</span> </span><a href="https://thimble.mozilla.org/" rel="external"><u><font color="#0066cc">Thimble</font></u></a><span lang="ko"><span>와 함께 </span></span>공유된 양방향 콘텐츠를 만드는 것부터 퀴즈 만들기에 이르기까지 여기에서 할 수 있는 많은 것들이 있습니다. 창의력을 발휘하십시오!</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>학습 경로 만들기</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Create learning pathways</a> ](<em>? hours</em>)</dt> - <dd>진보적이고 이해하기 쉬운 자습서를 제공하려면 콘텐츠를 하나의 경로로 만들어야 합니다. 기존 콘텐츠를 수집하고 누락된 부분을 찾아서 작성할 학습 기사를 만들 수 있습니다.</dd> -</dl> diff --git a/files/ko/orphaned/mdn/community/conversations/index.html b/files/ko/orphaned/mdn/community/conversations/index.html deleted file mode 100644 index 16d0d9bacb..0000000000 --- a/files/ko/orphaned/mdn/community/conversations/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: MDN community conversations -slug: orphaned/MDN/Community/Conversations -tags: - - Community - - Guide - - MDN Meta -translation_of: MDN/Community/Conversations -original_slug: MDN/Community/Conversations ---- -<div>{{MDNSidebar}}</div> - -<p class="summary">MDN "활동"은 MDN 웹사이트에서 발생하지만, "커뮤니티"는 별도의 온라인 토론과 채팅으로 발생합니다.</p> - -<h2 id="비동기적_토론">비동기적 토론</h2> - -<p><span id="result_box" lang="ko"><span>정보를 공유하고 토론을 계속하기 위해, MDN은 <a href="https://discourse.mozilla-community.org/c/mdn">Mozilla Discourse 포럼에 자체 카테고리("MDN")를 가지고 있습니다</a>.</span> 문서 생성-번역-유지관리, MDN 플랫폼 개발, 미래계획, 목표설정, 진행상황 추적 등 MDN과 관련된 모든 글을 MDN 카테고리로 작성할 수 있습니다.</span></p> - -<ul> - <li><span id="result_box" lang="ko"><span>Mozilla Discourse에 가입하려면 <a href="https://discourse.mozilla-community.org/t/signing-up-and-logging-in/16017">가입 및 로그인</a> 주제를 참고하세요.</span> <span>Mozilla LDAP 계정을 가지고 있으면 이메일로 로그인할 수 있습니다.</span></span></li> - <li><span class="short_text" id="result_box" lang="ko"><span>MDN 카테고리를 구독하려면 <a href="https://discourse.mozilla-community.org/t/subscribing-to-categories-and-topics/16024">카테고리 및 주제 구독</a>을 참고하세요.</span></span></li> - <li><span id="result_box" lang="ko"><span>(선택 사항) 주로 이메일을 통해 Discourse를 사용하는 쪽을 선호하신다면 <a href="https://discourse.mozilla-community.org/t/mailman-mode/15279">메일링 리스트 환경 설정</a>을 참고하세요. </span><span>새로운 주제를 시작하려면 <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>로 메일을 보내면 됩니다.</span> 이메일 환경 설정을 마친 경우 메일에 회신함으로써 답글을 달 수 있습니다<span>.</span> <span>회신 메일에서 의견의 문단을 나누려면, Discourse가 올바르게 분석할 수 있도록 </span></span><span lang="ko"><span>앞과 뒤에 새 줄을 2번 추가해주세요,</span></span></li> -</ul> - -<h3 id="보존용_기록"><span class="short_text" id="result_box" lang="ko"><span>보존용 기록</span></span></h3> - -<p><span id="result_box" lang="ko"><span>2017년 6월 이전에는 MDN 관련 토론이 Google 그룹과 함께 게이트웨이되고 보관 된 메일 링리스트에서 진행되었습니다.</span> <span>이전 토론을 검색하려면 이전 메일 링리스트에 해당하는 Google 그룹을 살펴보십시오.</span> <span>(예, 우리는이 이름들이 겹쳐지고 혼동을 일으킨다는 것을 알고 있습니다. 역사적인 사고입니다. 죄송합니다.)</span></span></p> - -<dl> - <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdc">mozilla.dev.mdc</a> a.k.a dev-mdc</dt> - <dd><span class="short_text" id="result_box" lang="ko"><span>이 목록은 MDN의 문서 내용에 대한 토론 용이었습니다.</span></span></dd> - <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdn">mozilla.dev.mdn</a> a.k.a dev-mdn</dt> - <dd><span class="short_text" id="result_box" lang="ko"><span>이 목록은 MDN의 기본 Kuma 플랫폼 개발 작업에 관한 것입니다.</span></span></dd> - <dt><a href="https://groups.google.com/forum/#!forum/mozilla.mdn">mozilla.mdn</a> a.k.a mdn@</dt> - <dd><span id="result_box" lang="ko"><span>이 포럼은 MDN 웹 사이트 및 기타 관련 이니셔티브를위한 높은 수준의 계획 및 우선 순위 토론을위한 것입니다.</span></span></dd> -</dl> - -<h2 id="IRC_채팅하기">IRC 채팅하기</h2> - -<p>IRC(Internet Relay Chat)는 커뮤니티 멤버들끼리 매일 채팅하고 실시간으로 토론하기 위한 방법으로 선호됩니다. 저희는 MDN에 관련된 토론을 위해 irc.mozilla.org 서버에 있는 몇 가지 채널을 사용합니다.</p> - -<dl> - <dt><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">#mdn</a></dt> - <dd>이 채널은 MDN 콘텐츠에 대해 토론하기 위한 기본적인 채널입니다. 저희는 작성, 콘텐츠 구성 등등에 대해 얘기합니다. 또한 저희는 여기서 "water cooler" 대화를 가집니다. 이는 저희의 커뮤니티가 연락을 유지하고 어울리기 위한 방법입니다. 또한 이는 데모 스튜디오, 프로필 등과 같이 MDN의 다른 측면(플래폼 개발이 아닌 부분)에 대해 토론하는 곳입니다.</dd> - <dt> </dt> - <dt><a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></dt> - <dd><font color="#4D4E53" face="Open Sans, Arial, sans-serif">이 채널은 우리의 개발 팀 - MDN이 작동하도록 코드를 작성하는 사람들 - 이 어울리고 그들의 일과를 토론하기 위한 곳입니다. 당신이 이 채널에 합류하고 개발에 참여하거나 혹은 단순히 당신이 소프트웨어에 대한 이슈에 관해 질문을 하는 것을 환영합니다.</font></dd> -</dl> - -<p>이 채널들은 대부분 북미 지역에서 주중에 활발합니다.</p> - -<p>당신은 IRC에 대해서 좀 더 <a href="http://wiki.mozilla.org/IRC">알고 싶어하고</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/">ChatZilla</a>와 같은 설치형 IRC 클라이언트를 사용하고 싶어 할 것입니다. 이는 쉽고 빠르게 설치하고 사용할 수 있는 Firefox add-on에서 실행될 수 있습니다. 만약 IRC에 익숙하지 않다면, 참여하기 쉬운 방법에는 미리 <a href="http://scrollback.io/mozdn/">mdn</a>과 <a href="http://scrollback.io/mdndev/">mdndev </a>채널들에 맞추어 설계된 <a href="https://chat.mibbit.com/">mibit</a>과 같은 웹기반 IRC 클라이언트를 사용하는 것이 있습니다. </p> - -<h2 id="회의_및_기타_행사에_참가"><span class="short_text" id="result_box" lang="ko"><span>회의 (및 기타 행사)에 참가</span></span></h2> - -<p><span id="result_box" lang="ko"><span>MDN 팀은 MDN 커뮤니티에 열려있는 여러 정기 모임을 개최합니다.</span> <span>일정, 의제 및 메모, 참여 방법에 대한 자세한 내용은 Mozilla wiki의 <a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings</a> 페이지를 참조하십시오.</span></span></p> - -<p><span id="result_box" lang="ko"><span>이 회의 및 기타 회의, 지역 회의 및 기타 행사에 대한 <a href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com">MDN 이벤트</a> 달력을보십시오.</span> <span>되풀이 모임은 <a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings wiki</a> 페이지에 요약되어 있습니다.</span></span></p> - -<p> </p> - -<p>If you see a meeting which takes place in the "mdn" channel on our Vidyo videoconferencing system, you can <a href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg">join the conversation on the web</a>.</p> - -<p> </p> diff --git a/files/ko/orphaned/mdn/community/index.html b/files/ko/orphaned/mdn/community/index.html deleted file mode 100644 index ac179cda5b..0000000000 --- a/files/ko/orphaned/mdn/community/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: MDN 커뮤니티 참여하기 -slug: orphaned/MDN/Community -tags: - - Community - - Guide - - Landing - - MDN Meta -translation_of: MDN/Community -original_slug: MDN/Community ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/ko/docs/MDN")}}</div> - -<div class="summary"> -<p>MDN 웹 문서는 위키 그 이상입니다. MDN은 공개 웹 기술을 사용하는 개발자들을 위해 뛰어난 자료를 만드는 사람들이 함께 작업하는 커뮤니티입니다.</p> -</div> - -<p>당신이 MDN에 기여하시는 것도 물론 좋지만, 더 나아가 공식 커뮤니티에 참여하시면 정말 기쁘겠습니다. 참여하시는 방법은 다음 세 단계면 됩니다. </p> - -<ol> - <li><a href="/ko/docs/MDN/Contribute/Howto/Create_an_MDN_account">먼저 MDN 계정 생성을 만들고</a></li> - <li><a href="/ko/docs/MDN/Community/Conversations">토론에 참여하고</a></li> - <li><a href="/ko/docs/MDN/Community/Whats_happening">어떤 일이 일어나는지 지켜보세요.</a></li> -</ol> - -<h2 id="커뮤니티가_돌아가는_방법">커뮤니티가 돌아가는 방법</h2> - -<p>MDN 커뮤니티를 더 자세히 설명하는 글입니다.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="/ko/docs/MDN/Community/Roles">커뮤니티의 역할</a></dt> - <dd>MDN 커뮤니티에는 특정 책임이 주어진 몇가지 역할들이 있습니다. </dd> - <dt><a href="/ko/docs/MDN/Community/Doc_sprints">문서화 스프린트</a></dt> - <dd>문서화 스프린트 운영 가이드입니다. 스프린트를 운영해온 사람들의 유익한 조언과 팁이 포함되어있습니다. </dd> - <dt><a href="/ko/docs/MDN/Community/Whats_happening">어떤일이 일어나는지 지켜보기 </a></dt> - <dd>MDN은 <a href="https://wiki.mozilla.org/MDN">Mozilla Developer Network community</a>가 제공합니다. 하고있는 일에 대한 정보를 공유하는 몇가지 방법을 소개합니다. </dd> - <dt><a href="/ko/docs/MDN/Community/Conversations">MDN 커뮤니티의 토론</a></dt> - <dd>MDN의 "작업"은 MDN 사이트에서 하지만, "소통"은 (비동기) 토론과 (실시간) 온라인 채팅을 통해 일어납니다.</dd> - <dt><a href="/ko/docs/MDN/Community/Working_in_community">커뮤니티에서 작업하기</a></dt> - <dd>규모와 관계 없이 MDN 문서 기여시 반드시 알아야 할 것은 MDN 커뮤니티의 일원으로 어떻게 일할는지를 아는 것입니다. 이 글은 다른 글쓴이, 기술팀과 상호작용을 어떻게 잘 할 수 있는지를 알려줍니다. </dd> - <dt></dt> - <dt></dt> -</dl> -</div> diff --git a/files/ko/orphaned/mdn/community/working_in_community/index.html b/files/ko/orphaned/mdn/community/working_in_community/index.html deleted file mode 100644 index c35f66fe9a..0000000000 --- a/files/ko/orphaned/mdn/community/working_in_community/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: 커뮤니티에서의 활동 -slug: orphaned/MDN/Community/Working_in_community -translation_of: MDN/Community/Working_in_community -original_slug: MDN/Community/Working_in_community ---- -<div>{{MDNSidebar}}</div> - -<p>A major part of contributing to MDN documentation on any significant scale is knowing how to work as part of the MDN community. This article offers tips to help you make the most of your interactions with both other writers and with development teams.</p> - -<h2 id="에티켓_가이드라인">에티켓 가이드라인</h2> - -<p>Mozilla 커뮤니티와 함께 일하면서 지켜주셨으면 하는 사항들입니다.</p> - -<ul> - <li>예의를 지켜주세요! 합의점을 찾기 힘든 사항이더라도 우리 모두는 더 나은 웹을 만들고자하는 공통적인 목표가 있습니다.</li> - <li>요구하기보다는 질문으로 정중하게 물어봐주세요. 요구할 때보다 정중하게 도움을 요청한다면 기대 이상의 좋은 답변을 기대하실 수 있을 것 입니다. 개발 커뮤니티 일원 모두 문서 작업이 중요하다는 사실을 인지하고 있습니다. 그러나 상대방에게 존중심이 부족한 말이나 행동은 그에 걸맞는 대우를 받을 수 있습니다. </li> - <li>정보의 필요성과 긴급성, 그리고 다른 일원분들의 시간 투자를 염두에 두고 균형을 잘 조율해주시길 바랍니다. 정말로 필요한게 아니라면, 대화에 참가하고 있는 분들에게 폐를 끼칠 정도의 많은 정보를 요청하거나 재촉하지 말아주세요.</li> - <li>당신의 요청은 다른 사람들의 소중한 시간을 사용하게 된다는 점을 염두에 두시고, 그 시간을 현명히 사용해주시길 바랍니다.</li> - <li>문화적 차이에 대해 존중심을 보여주세요. Mozilla 는 다국적, 다문화적 팀입니다. 다른 사람과 대화할 때, 상대방의 문화를 염두에 두어주시길 바랍니다.</li> - <li>진행 중인 대화에 끼어들기보다 새로운 대화를 시작해 주세요. Don't inject your questions into an unrelated conversation just because the people you need to talk to are paying attention to it. While convenient for you, this can irritate the people you're trying to talk to, and result in a less than ideal outcome.</li> - <li>{{interwiki("wikipedia", "bikeshedding")}}는 자제해 주세요. 열정이 사소한 것에 대한 집착으로 이어지지 않도록 조심해주세요. 대화가 주제에서 이탈할 수 있고 불편해질 수 있습니다.</li> -</ul> - -<h2 id="Be_tactful">Be tactful</h2> - -<p>Always be tactful and respectful when communicating with others.</p> - -<h3 id="Politely_pointing_out_mistakes">Politely pointing out mistakes</h3> - -<p>If your purpose in contacting someone is to ask them to do something differently, or to point out a mistake they've been making (especially if they repeatedly do it), start your message with a positive comment. This softens the blow, so to speak, and it demonstrates that you're trying to be helpful, rather than setting you up as the bad guy.</p> - -<p>For example, if a new contributor has been creating lots of pages without tags, and you'd like to point out this problem, your message to them might look like this (the stuff you'd need to change for each case is underlined):</p> - -<blockquote> -<p>안녕하세요 홍길동씨, <u>웜홀 API 문서</u> 에 대한 홍길동씨의 기여에 대해 감사드립니다. 저는 특히 홍길동씨께서 <u>가독성과 세부정보를 균형있게 서술한 점을 인상깊게 보았습니다.</u> 아마도 작업하시면서 <u>correct tag를 페이지마다 추가해주신다면 </u>이 문서를 더 유익하고 잘 만들어 나갈 수 있을 것 같습니다.</p> - -<p><u>자세한 사항은 MDN 태그가이드를 이용해 주세요(<a href="/ko/docs/MDN/Contribute?Howto/Tag/">https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag</a>)</u></p> - -<p>다시 한번 감사를 드리며 앞으로의 기여활동도 기대하겠습니다!</p> -</blockquote> - -<h2 id="지식_공유">지식 공유</h2> - -<p>MDN 프로젝트에 참여하면서 무슨 일들이 일어나는지 파악하고 다른 멤버들과 소통하는 것이 본인에게 도움이 됩니다. 커뮤니티 내의 다른 분들과 소통하므로 아이디어를 얻거나 공유할 수 있습니다. 우리는 누가 주체가 되어 무슨 일을 진행하는지 알 수 있는 도구들과 리소스들을 제공하고 있습니다.</p> - -<h3 id="Communication_channels">Communication channels</h3> - -<p>There are several ways you can engage with community members (either developers or writers), each of which has some of its own particular rules of etiquette.</p> - -<h4 id="Discourse">Discourse</h4> - -<p>The <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse forum</a> is a good place to ask general questions about MDN contribution and start discussions.</p> - -<h4 id="Chat">Chat</h4> - -<p>Use the Matrix chat system to reach people in real time. MDN staff members are available in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs room</a>, and are active during work days in Europe and North America. Explore the other chat rooms to find people involved in topics you're interested in.</p> - -<h4 id="GitHub">GitHub</h4> - -<p>If you find a problem on MDN, or want to ask a question, you can file an issue over on our <a href="https://github.com/mdn/sprints/issues">GitHub sprints repo issues</a>! They will then be triaged and actioned at some point in the future.</p> - -<h4 id="Email">Email</h4> - -<p>Sometimes, a private email exchange between you and one or more other people is the way to go, if you have their email address.</p> - -<div class="note"> -<p><strong>Note:</strong> As a general rule, if someone has posted their email address on documents about the technology you're documenting, has given you their email address personally, or generally has a well-known email address, email is an acceptable "first contact" approach. If you have to dig for it, you probably should try to get permission Discourse or a mailing list first, unless you've exhausted all other attempts at getting in touch.</p> -</div> - -<h3 id="Content_status_tools">Content status tools</h3> - -<p>We have several useful tools that provide information about the status of documentation content.</p> - -<dl> - <dt><a href="/dashboards/revisions">Revision dashboard</a></dt> - <dd>The revision dashboard provides a fantastic tool to review changes made to MDN content. You can see recent history, choose a range of time to view, and filter based on things like locale, contributor's name, and topic. Once you're looking at a set of revisions, you can view the changes made in each revision, quickly open the page, see a full history, or even revert the changes (if you have those privileges).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Documentation status overview</a></dt> - <dd>Our <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">documentation status overview</a> page provides a list of all the areas of MDN that have been configured for status tracking, with information about how many pages therein need different types of work done. Click through to a particular topic area to see detailed lists of content that needs work, such as pages that have no tags, or are tagged with indicators that certain types of work need to be done. You can even see lists of pages that haven't been updated in a long time and may be out of date, as well as a list of bugs that have been flagged as impacting the documentation in that area.</dd> - <dt><a href="/en-US/docs/MDN/Plans">Documentation project plans</a></dt> - <dd>We have a number of writing projects that are in the planning stages, or are large and ongoing, for which we have written planning documents to help us keep track of what we need to get done.</dd> - <dt><a href="https://tree.taiga.io/project/viya-mdn-durable-team">MDN Taiga</a></dt> - <dd>The MDN staff writers use a tool called Taiga to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about the agile processes followed by the MDN team, see our <a href="https://wiki.mozilla.org/Engagement/MDN_Durable_Team/Processes">Process page on the Mozilla wiki</a>.</dd> -</dl> - -<h2 id="The_development_community">The development community</h2> - -<p>Possibly the most important relationships to develop and maintain, as a member of the MDN writing community, are those you develop and sustain with the developers. They create the software we're developing, but they're also the most useful source of information we have. It's crucial that we maintain good relations with developers—the more they like you, the more likely they are to answer your questions quickly, accurately, and thoroughly!</p> - -<p>In addition, you represent the MDN writing community. Please help ensure we keep our excellent working relationship with the dev team by making every interaction they have with the writing team be a good one.</p> - -<p>On a related note, a great way to find the right person to talk to is to look at the <a href="https://wiki.mozilla.org/Modules">module owners lists</a>.</p> - -<h2 id="The_writing_community">The writing community</h2> - -<p>The writing community is a large one. While the number of extremely frequent, or large-scale contributors is relatively small, there are many dozens or hundreds of people who contribute at least now and then. Fortunately, these are by and large awesome people with a genuine love of the Web, Mozilla, and/or documentation, and interacting with them is almost always pretty easy.</p> - -<p>See the article <a href="/en-US/docs/MDN/Community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">Join the community</a> for more information about the MDN community.</p> - -<p>The most frequent place you'll directly interact with other writers is in the <a href="https://discourse.mozilla.org/c/mdn">Discourse forum</a>.</p> - -<p>By keeping in mind the {{anch("General etiquette guidelines")}}, you'll find that usually, things go very smoothly.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Contributing to MDN</a></li> - <li><a href="/en-US/docs/Project:MDN/Contributing/Join_the_community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">MDN community</a></li> - <li><a href="http://matt.might.net/articles/how-to-email/" title="http://matt.might.net/articles/how-to-email/">How to send and reply to email</a></li> - <li><a href="http://blog.gerv.net/2012/10/how-to-be-a-mozillia/">How to be a Mozillian</a></li> -</ul> diff --git a/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index ba43bdafe7..0000000000 --- a/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: MDN 계정 생성 -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -tags: - - 가입 - - 계정 - - 시작하기 - - 인증 -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/Howto/MDN_계정_생성하기 ---- -<div>{{MDNSidebar}}</div><p>페이지를 수정하거나 데모에 기여하는 등 MDN의 컨텐츠를 변경하려면 MDN 프로필이 필요합니다. 단지 내용을 읽거나 검색하는 것에는 프로필이 필요없으니 걱정하지 마세요. 아래는 MDN 프로필을 설정하기 위한 가이드입니다.</p> - -<p>MDN에 기여하기로 마음 먹었다면 여러분이 할 일은 다음과 같습니다. :</p> - -<ol> - <li>모든 MDN 페이지의 최상단에는 "Sign in with"(또는 '로그인') 버튼이 있습니다. 마우스를 포인터를 올려 놓으면(모바일 디바이스에서는 탭) MDN에서 사용 가능한 인증 서비스 목록이 나타납니다.</li> - <li>로그인 할 서비스를 선택하세요. Persona 가 아닌 인증 서비스를 선택했다면 여러분의 공개 프로필에 여러분이 어떤 인증 방법으로 인증했는지 표시됩니다.</li> - <li>각 서비스별 인증 단계를 따르십시오.</li> - <li>각 서비스별 인증 단계를 마치고 MDN 페이지로 돌아오면, 이름과 이메일 주소를 입력해야 합니다. <strong>입력한 이름은 모든 작업물에 공개적으로 표시되므로, 메일 주소를 이름으로 사용하지 마십시오.</strong></li> - <li>'MDN 프로필 생성' 버튼을 클릭합니다.</li> - <li>4단계에서 입력한 이메일 주소가 여러분이 인증한 서비스 프로필 상의 이메일 주소와 다르면, 입력한 이메일 주소가 올바른지 확인하게 됩니다. 입력한 이메일 주소로 발송된 확인 메일의 링크를 클릭하세요.</li> -</ol> - -<p>이게 전부입니다! 이제 여러분의 MDN 계정이 생겼으니, 지금 당장 페이지들을 수정하거나 태그를 달 수 있습니다.</p> - -<p>모든 MDN 페이지의 최상단에 있는 여러분의 이름을 클릭하면 여러분의 공개 프로필을 볼 수 있으며, "편집" 버튼을 눌러 새로운 정보를 업데이트 할 수 있습니다. 여러분의 관심사나 블로그 주소, 트위터 계정, 혹은 그 외의 어떤 것이라도 나누어 보세요.</p> - -<div class="note"> -<p><strong>참고:</strong> 새로운 사용자 이름에 공백이나 '@' 문자를 포함할 수 없습니다. 사용자 이름은 당신의 모든 작업물에서 공개적으로 보여진다는 것을 기억하세요!</p> -</div> - -<p> </p> diff --git a/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 9fbae8650b..0000000000 --- a/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 기술 리뷰를 하는 방법 -slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review -translation_of: MDN/Contribute/Howto/Do_a_technical_review -original_slug: MDN/Contribute/Howto/Do_a_technical_review ---- -<div>{{MDNSidebar}}</div><p class="summary">기술 리뷰는 기술적 정확성과 글의 완결성을 검토하는 것, 필요하다면 수정하는 것으로 이루어집니다. 글의 작성자가 다른 사람이 글의 기술적 내용을 확인하는 것을 바란다면, 작성자는 편집을 하는동안 "Technical review" 체크박스에 체크합니다. 작성자는 대개 기술 리뷰를 위해 특정한 엔지니어와 접촉하지만, 해당 주제에 대한 전문가라면 누구라도 가능합니다.</p> -<p><span class="seoSummary">이 글은 기술 리뷰를 어떻게 하는지에 대해 기술하고, 그에 따라서 MDN의 컨텐츠들이 정확하도록 도움을 줍니다.</span></p> -<table class="fullwidth-table"> - <tbody> - <tr> - <td><strong>어떤 부분에 이 일이 필요하나요?</strong></td> - <td><a href="/en-US/docs/needs-review/technical">technical review</a>가 필요하다고 표시된 특정 글</td> - </tr> - <tr> - <td><strong>이 일을 하기 위해 무엇을 알아야 하나요?</strong></td> - <td> - <ul> - <li>리뷰를 하고 있는 글의 주제에 대한 전문 지식.</li> - <li>MDN의 위키 글을 편집할 수 있는 능력.</li> - </ul> - </td> - </tr> - <tr> - <td><strong>어떤 단계를 거쳐야 하나요?</strong></td> - <td> - <ol> - <li><a href="/en-US/docs/needs-review/technical">technical reviews</a>가 필요한 페이지 목록으로 갑니다. 기술 리뷰가 요청된 모든 페이지들이 보여집니다.</li> - <li>친숙한 주제를 가진 페이지를 고르세요.</li> - <li>링크를 클릭하여서 페이지를 부르세요.</li> - <li>페이지가 불려지면, 최상단 근처의 <strong>EDIT</strong> 버튼을 클릭하세요; MDN 에디터로 갑니다. 처음에 고른 페이지가 당신한테 맞지 않는다면 다른 페이지로 바꾸는 것을 주저하지 마세요.</li> - <li>글을 읽으면서 틀린 기술 정보를 고치고 빠진 중요한 정보를 추가하세요.</li> - <li>글 아래에 당신이 한 일에 대해서 기술하는 다음과 같은 코멘트를 입력하세요, '<em>기술 리뷰 완료.</em>' 정보를 수정한다면, 그것을 코멘트에 포함시키세요, 예를 들어 <em>'기술 리뷰: fixed parameter descriptions.'</em></li> - <li><strong>SAVE CHANGES</strong> 버튼을 클릭하세요 .</li> - <li>에디터를 닫고 난 후 올바른 글이 화면에 뜨고 나면, 측면의 <strong>Technical</strong> 엔트리를 체크하여 (<strong>다음</strong><b>의 리뷰가 요청되었습니다 </b>아래) <strong>SUBMIT REVIEW </strong>버튼을 클릭하세요.</li> - <li>끝났습니다!</li> - </ol> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index ebecb25a78..0000000000 --- a/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 편집 검토를 하는 방법 -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/Howto/Do_an_editorial_review ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ko-KR/docs/MDN")}}</div> - -<p class="summary"><strong>편집자 검토</strong>는 글의 오타와 맞춤법, 문법, 단어의 용법, 또는 원문의 오류를 고치는 일입니다. 모든 공헌자분들은 자신의 지식을 사용해 유용하고 가치있는 글을 만드는 데 기여하고 있습니다만, 이분들이 모두 어학전문가는 아닙니다. 따라서 언어적인 측면에서 교열과 교정이 종종 필요해집니다. 이 교열과 교정 작업이 바로 편집자 검토입니다.</p> - -<p><span class="seoSummary">이 글은 어떻게 편집자 검토를 수행하는지, 그리하여 MDN 컨텐츠들의 정확도를 높일 수 있게 되는 지에 대해 설명합니다.</span></p> - -<dl> - <dt>편집자 검토는 어떤 일입니까?</dt> - <dd>편집자 검토가 필요하다고 표시된 글들을 교열하고 교정하는 것.</dd> - <dt>어떤 글에서 편집자 검토가 필요합니까?</dt> - <dd>편집자 검토가 필요하다고 표시된 특별한 글들.</dd> - <dt>편집자 검토를 하기 위해서 알아야 하는 것이 있습니까?</dt> - <dd>괜찮은 문법과 맞춤법 실력이 필요합니다. 예를 들어 편집 검토는 문법과 철자에 대한 확인을 해야합니다.</dd> - <dt>편집자 검토는 어떤 단계를 거칩니까?</dt> - <dd> - <ol> - <li>검토할 글을 선택합니다: - <ol> - <li><a href="/ko-KR/docs/needs-review/editorial">편집자 검토가 필요한 글</a> 목록으로 이동합니다. 이곳에는 편집자 검토가 필요한 페이지들이 나열되어 있습니다.</li> - <li>경로가 <code>Template:</code>으로 시작하지 않는 한국어 제목을 가진 페이지를 선택합니다.(<code>Template:</code>페이지는 MDN 매크로코드를 포함하고 있습니다)</li> - <li>글 링크를 클릭해서 페이지를 불러옵니다.</li> - </ol> - </li> - <li><a id="core-steps" name="core-steps"></a>글의 오탈자, 철자, 문법 및 어법상의 오류에 주의를 기울이며 읽습니다. 만일 선택한 글이 능력에 부친다고 생각되면, 다른 글을 새로 선택하십시오.</li> - <li>만일 살펴본 글에 오류가 없다면, 페이지 왼쪽 사이드바에서 "quick review" 상자를 찾아보십시오:<br> - <img alt="Screenshot of Korean version of the editorial review request sidebar box" src="https://mdn.mozillademos.org/files/14677/Screenshot%20of%20the%20editorial%20review%20request%20sidebar%20box_ko.png" style="height: 90px; width: 281px;"></li> - <li><strong>편집 </strong>상자의 선택을 해제하고, <strong>저장 </strong>버튼을 클릭합니다.</li> - <li>오류를 발견했다면, 수정을 해야합니다: - <ol> - <li>페이지 상단의 <strong>편집 </strong>버튼을 클릭합니다. <a href="/ko-KR/docs/Project:MDN/Contributing/Editor_guide">MDN editor</a>가 열립니다.</li> - <li>발견한 오탈자, 문법, 어법상의 오류를 수정 합니다. 모든 오류를 한번에 다 고치지 않아도 괜찮습니다만, 남은 오류가 없다는 확신을 갖기 어렵다면 편집자 검토 요청 상태를 유지해주십시오.</li> - <li>글 하단의 <strong>리비전 답글 </strong>항목을 입력합니다; '<em>편집자 검토: 오타, 문법, 맞춤법 수정됨.</em>'같은 식으로 적으시면 됩니다. 이 리비전 답글의 내용으로 다른 공헌자들이나 사이트 편집자들이 어떤 것이 수정되었는지, 왜 수정했는 지에 대해 알 수 있습니다.</li> - <li><strong>검토가 필요한가요? </strong>에서 <strong>편집 </strong>체크상자를 해제해주십시오. 이 내용은 리비전 답글 항목의 바로 위에 있습니다.</li> - <li><strong>게시 </strong>버튼을 클릭해주세요</li> - </ol> - </li> - </ol> - - <div class="note"> - <p>수정 내용은 저장 직후에 바로 보이지 않을 수 있습니다. 페이지 내용이 처리되고 저장되기 까지는 약간의 시간지연이 있을 수 있습니다.</p> - </div> - </dd> -</dl> diff --git a/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html b/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html deleted file mode 100644 index 8f706de6a8..0000000000 --- a/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Property Template -slug: orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template -tags: - - CSS - - MDN Meta -translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template -original_slug: Web/CSS/Reference/Property_Template ---- -<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> - -{{CSSSyntax}} - -<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/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 6ab33e31d4..0000000000 --- a/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 페이지에 대한 요약을 설정하는 방법 -slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page -original_slug: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -<div>{{MDNSidebar}}</div> - -<p>MDN의 페이지에 대한 요약을 정의할 수 있습니다. 이 요약은 검색 엔진의 결과, 시사적인 랜딩 페이지와 같은 다른 MDN 페이지 또는 툴팁에서 다양하게 사용됩니다. 요약은 페이지 내용의 나머지가 없이도 페이지의 문맥과 다른 문맥에서 보여졌을 때 모두 의미가 통해야 합니다.</p> - -<p>요약은 한 페이지 이내로 분명하게 정의됩니다. 요약이 분명하게 정의되지 않았다면, 보통 첫 번째 문장 정도가 사용되는데 이는 언제나 목적을 위한 최고의 텍스트가 아닙니다.</p> - -<table class="full-width-table"> - <tbody> - <tr> - <td><strong>어떤 일을 해야 하나요?</strong></td> - <td>다른 문맥에서 요약으로 사용되어야 하는 페이지 내의 텍스트를 표시하기; 필요하다면 이 작업은 적합한 텍스트를 작성하는 것을 포함할 수 있습니다.</td> - </tr> - <tr> - <td><strong>어디서 이 일이 필요하나요?</strong></td> - <td>요약이 부족하거나 미흡한 페이지.</td> - </tr> - <tr> - <td><strong>이 일을 하기 위해 무엇을 알아야 하나요?</strong></td> - <td>MDN 에디터 사용 능력; 좋은 영작문 솜씨; 좋은 요약을 작성하기 위한 주제에 대한 충분한 친숙도</td> - </tr> - <tr> - <td><strong>이 일을 하기 위한 단계는 어떻게 되나요?</strong></td> - <td> - <ol> - <li>요약을 설정할 페이지를 고릅니다: - <ol> - <li><a href="/en-US/docs/MDN/Doc_status">MDN documentation status</a> 페이지에서, <strong>Sections </strong>아래에서 알고 있는 주제의 링크를 클릭합니다.(예를 들어, HTML).</li> - <li>주제의 문서 상태 페이지에서 <strong>Summary </strong>테이블의 <strong>Pages </strong>헤더를 클릭합니다. 해당 주제 섹션의 모든 페이지 인덱스로 이동됩니다.; 왼쪽 열에는 페이지 링크들이, 오른쪽 열에는 태그와 요약들이 보입니다.</li> - <li>요약이 없거나, 좋지 않은 요약을 가진 페이지를 고릅니다.</li> - <li>링크를 클릭하여 해당 페이지로 갑니다.</li> - </ol> - </li> - <li><strong>Edit</strong>를 클릭하여서 MDN 에디터로 페이지를 엽니다.</li> - <li>문맥과 상관없이 요약으로 사용될 한 문장 또는 두 문장을 찾습니다. 필요하다면, 기존의 내용을 수정하여서 문장이 좋은 요약이 되도록 만들거나 수정합니다.</li> - <li>요약으로 사용될 텍스트를 선택합니다.</li> - <li>에디터 툴바의 <em>Styles</em> 위젯에서 <strong>SEO Summary</strong>를 선택합니다. (이것은 페이지 소스에서 선택된 텍스트에 class="seoSummary"를 가진 {{HTMLElement("span")}} 엘레멘트를 추가합니다. )</li> - <li>"페이지 요약 설정"과 같은 수정 코멘트와 함께 변경사항을 저장합니다.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p> </p> - -<p> </p> diff --git a/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html deleted file mode 100644 index a34ae695ef..0000000000 --- a/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: JavaScript tag를 다는 방법 -slug: orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages -original_slug: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -<div>{{MDNSidebar}}</div><p class="summary">태그달기는 페이지에 메타 정보를 추가함을 통해 관련된 내용이 묶여질수 있도록 하는 작업을 포함합니다.</p> - -<dl> - <dt><strong>어디서 필요한가요?</strong></dt> - <dd><a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">태그가 없는 JavaScript에 관련된 특정한 페이지</a>안에서 필요합니다.</dd> - <dt><strong>작업을 위해서 무엇을 알 필요가 있나요?</strong></dt> - <dd>메소드나 변수들과 같은 기본적 JavaScript 코딩 지식이 필요합니다.</dd> - <dt>어떤 절차가 있나요?</dt> - <dd> - <ol> - <li>위에 링크된 페이지들중 하나를 선택하세요</li> - <li>페이지를 로드하기위해 기사링크를 클릭하세요</li> - <li>페이지가 로드됐다면, 맨 위 있는EDIT버튼을 클릭하세요; 이는 당신을 MDN 에디터로 만들어줍니다.</li> - <li>적어도 JavaScript 태그가 추가돼야 합니다. 아래에는 가능한 다른 태그들입니다. - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Tag</th> - <th scope="col">What pages to use it on</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>Method</code></td> - <td>methods</td> - </tr> - <tr> - <td><code>Property</code></td> - <td>properties</td> - </tr> - <tr> - <td><code>prototype</code></td> - <td>prototypes</td> - </tr> - <tr> - <td>Object type name</td> - <td>methods of an object; for example String.fromCharCode should have the tag <code>String</code></td> - </tr> - <tr> - <td><code>ECMAScript6 </code>and <code>Experimental</code></td> - <td>features added in a new ECMAScript version</td> - </tr> - <tr> - <td><code>Deprecated</code></td> - <td>deprecated features (whose use is discouraged but still supported)</td> - </tr> - <tr> - <td><code>Obsolete</code></td> - <td>obsolete features (which are no longer supported in modern browsers)</td> - </tr> - <tr> - <td>others</td> - <td>See <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">MDN tagging standards</a> for other possible tags to apply</td> - </tr> - </tbody> - </table> - </li> - <li>Save with a comment.</li> - <li>You're done!</li> - </ol> - </dd> -</dl> - -<p> </p> diff --git a/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index 72f5ebb56f..0000000000 --- a/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법 -slug: orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -original_slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -<div>{{MDNSidebar}}</div> - -<p>MDN의 학습 영역(<strong><a href="/en-US/docs/Learn">Learning Area</a>)은</strong> 새로운 개발자들에게 웹 개념을 소개하는 글들을 위한 우리의 집입니다. 왜냐하면 학습 영역의 콘텐츠는 대부분 초보자를 위한 것들이고, 당신의 지식을 공유하고 웹에 대해서 알고 싶은 사람들을 돕는 좋은 공간이기 때문입니다. 새로운 개발자들이 이 콘텐츠를 따라 할 수 있도록 하는 것이 중요합니다. 따라서 우리는 특별히 관심을 기울여야 합니다. </p> - -<p><span class="seoSummary">이 글에서는 학습 영역(<a href="/en-US/docs/Learn">Learning Area</a>)을 위한 페이지를 작성하는 방법을 설명합니다.</span></p> - -<h2 id="학습_영역_기사를_작성하는_방법">학습 영역 기사를 작성하는 방법</h2> - -<p>당신의 지식을 공유하려면 아래의 큰 초록색 버튼을 누르세요. 그러면 다섯 단계로 이어집니다. 만약 당신이 아이디어를 찾는다면, 우리의 트렐로 보드(<a href="https://trello.com/b/LDggrYSV">our team Trello board</a>)를 살펴보세요.</p> - -<p></p><div class="align-center"><a class="button ignore-external mega positive" href="/ko/docs/new?parent=111819">새 학습 기사 작성<div></div></a></div><p></p> - -<p>이 기사는 정확한 위치에 도달할 수 없을지도 모르지만, 최소한 그것은 MDN에게 달려 있습니다. 만약 당신이 정확한 위치로 옮기고 싶다면 우리(<a href="/en-US/docs/Learn#Contact_us">Contact us</a>)에게 연락해 주세요.</p> - -<h3 id="1단계_두개의_요약문_작성">1단계 : 두개의 요약문 작성</h3> - -<p>기사의 첫 문장은 당신이 다루고자 하는 주제를 요약해야 하고, 두번째 문장은 당신이 기사에 실린 물건들을 좀 더 구체적으로 다루어야 합니다. 예를 들어 :</p> - -<div class="summary"> -<p>{{glossary("HTML")}} HTML파일에는 정형 콘텐츠, {{Glossary("CSS")}}, 또 다른 주요 웹 기술이 포함되어 있어 콘텐츠를 원하는 대로 바라볼 수 있습니다. 이 기사에서는 이 기술이 어떻게 작동하는지, 어떻게 기본적인 예제를 작성하는지 살펴보겠습니다. </p> -</div> - -<p>예를 들어 CSS가 페이지 스타일에 사용되는 핵심 웹 기술이라고 간단히 설명해 주세요. 그것은 독자들이 기사의 주제가 무엇인지에 대한 꽤 좋은 아이디어를 얻을 수 있는 충분한 근거가 됩니다. </p> - -<p>왜냐하면 학습 영역 기사들은 주로 초보자를 대상으로 하고, 각각의 기사는 너무 많은 새로운 정보로 독자들을 압도하지 않도록 한가지 간단한 주제를 다루어야 하기 때문입니다. 만약 당신이 기사를 한 문장으로 요악하지 못하면, 너무 많은 것을 하나의 기사에서 다뤄야 할 지도 모릅니다.</p> - -<h3 id="2단계_상단_상자_추가">2단계 : 상단 상자 추가</h3> - -<p>그리곤 독자들의 학습 과정에서 어떤 영향이 있는지 파악하는 것을 돕기 위해서 상단 상자를 추가합니다. 하단에 하나의 예로"URL과 그 구조의 이해(<a href="/en-US/docs/Learn/Understanding_URLs">Understanding URLs and their structure</a>)"에 대한 상단 상자가 있습니다. 당신의 기사를 쓰는 데 이 기사를 참고할 수 있습니다.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">필수 조건:</th> - <td>먼저 인터넷이 어떻게 작동하는지(<a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/How_the_Internet_works">how the Internet works</a>), 웹서버가 무엇인지(<a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/What_is_a_Web_server">what a Web server is</a>), 웹에서 링크의 개념(<a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/Understanding_links_on_the_web">the concepts behind links on the web</a>)을 알아야 합니다.</td> - </tr> - <tr> - <th scope="row">목표:</th> - <td>URL에 대해서와 URL이 어떻게 웹에서 작동하는지를 배웁니다.</td> - </tr> - </tbody> -</table> - -<dl> - <dt>필수 조건</dt> - <dd>독자가 이 기사를 이해하기 위해 반드시 알고 있어야 할 것이 무엇인가요? 가능한 한 각 필수 요소에 대한 링크를 해당 개념을 다루는 다른 학습 영역 문서에 연결하세요. (사전 지식이 필요 없는 기초적인 기사가 아니라면)</dd> - <dt>목표</dt> - <dd> - <p>이 섹션에서는 독자가 글을 통해 습득할 내용을 간략하게 설명합니다. 이것은 요약문과는 좀 다릅니다, 요약문에서는 기사의 주제를 요약하지만 목표 부분은 독자들이 기사의 과정을 통해 달성할 수 있는 것을 구체적으로 제시합니다.</p> - </dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> 이 테이블을 생성하려면, 위의 예제 테이블을 복사하여 붙여 넣을 수 있으며, MDN의 editor의 <a href="/en-US/docs/MDN/Contribute/Editor/Tables">table tool</a>을 사용할 수 있습니다. 테이블 도구를 사용하도록 선택한 경우에는 기본 standard-table 클래스 이외에 learn-box CSS 클래스를 추가해야 합니다. 이렇게 하려면 테이블 속성을 생성하거나 편집할 때"Advanced"패널로 이동하여 <strong>스타일시트 클래스</strong> 필드를 "standard-table learn-box"로 설정합니다. </p> -</div> - -<h3 id="3단계_전체_설명_작성">3단계 : 전체 설명 작성</h3> - -<p>다음으로 가장 중요한 개념을 강조하는 기사를 좀 더 자세히 설명하는 더 긴 설명을 작성합니다. 왜 독자들이 이 주제를 배우고 당신의 기사를 읽는 데 시간을 할애해야 하는지 설명하는 것을 잊지 마세요!</p> - -<h3 id="4단계_깊이_들어가기">4단계 : 깊이 들어가기</h3> - -<p>모든 작업을 마친 후, 마침내 주제에 더욱 깊이 들어갈 수 있습니다. 원하는 대로 이 분야의 기사를 작성합니다(우리의 <a href="/en-US/docs/MDN/Contribute/Style_guide">style guide</a>를 자유롭게 참고하셔도 됩니다). 당신이 빛날 수 있는 기회입니다! 작성하는 주제에 대해 자세히 설명합니다. 전체 참조 문서에 대한 링크를 제공하고, 기술이 어떻게 작동하는지 설명하고, 구문 및 사용 상세 내역을 제공하는 방법을 설명합니다. 당신이 하고 싶은 대로 하세요!</p> - -<p>가이드로서, 여기에 초보자들을 위한 몇가지 조언이 있습니다:</p> - -<ul> - <li>하나의 주제에 집중합니다. 만약 다른 주제를 다뤄야 할 필요가 있다고 생각하는 경우, 주제인 기사에서 벗어났거나 둘 이상의 기사를 작성해야 한다는 것을 뜻합니다.</li> - <li>간단한 말로 작성하세요. 가능한 기술 용어를 사용하거나, 해당 용어를 정의하고, 해당 용어의 용어집에 연결할 수 있도록 합니다.</li> - <li>이론적 개념을 쉽게 이해할 수 있도록 간단한 예제를 포함시킨다. 사람들의 최고의 학습법은 예제입니다. 학문적인 논문을 쓰는 대신에, 우리는 초보자들이 원문을 쉽게 따라오기를 원합니다.</li> - <li> - <p>시각적인 보조 장치는 쉽게 소화할 수 있고 추가 정보를 전달하기도 한다. 이미지, 다이어그램, 비디오 및 표를 자유롭게 사용하세요. 텍스트를 포함하는 도표 또는 차트를 사용하는 경우,"SVG"를 사용하여 텍스트를 현지화할 수 있습니다. </p> - </li> -</ul> - -<p>우리 기능의 첫번째 섹션을 살펴보세요. 몇가지 좋은 설명 섹션을 볼 수 있는 코드 문서를 보세요.(<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a>)</p> - -<h3 id="5단계_능동적_학습_자료_제공">5단계 : "능동적 학습" 자료 제공</h3> - -<p>기사에 삽화를 넣는 것은 독자들이 더 쉽게 이해하고 배우는데 도움이 된다. 완수할 수 있는 연습, 튜토리얼 과제를 제공하세요. 여러분의 기사를 적극적으로 사용하고 실험하고 실험하고 실험하는 것을 통해, 여러분은 그들의 뇌에 정보를 "잠금" 하는 것을 도울 수 있습니다.</p> - -<p>직접 예제(<a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">live samples</a>)로 페이지 안에 포함시키거나 직접 예제처럼 제대로 작동하지 않는 경우 링크하는 것(<a href="/en-US/docs/MDN/Contribute/Editor/Links">link to them</a>)을 선택할 수 있습니다. 만약 여러분이 이 가치있는 자료를 만드는데 관심이 있다면, 웹을 배우는 것을 돕기 위한 대화형 연습 만들기(<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create an interactive exercise to help learning the Web</a>) 에 대한 기사를 읽어보세요.</p> - -<p>기존의 능동적인 학습 자료에 대한 링크를 제공할 수 없는 경우(관련 자료에 대해서 모르거나 만들 시간이 없을 경우) "NeedsActiveLearning"를 문서에 태그하세요. 다른 기여자들은 능동적인 학습 자료가 필요한 기사를 찾을 수 있고 당신이 그것들을 고안해 낼 수 있도록 도와 줄 지도 모릅니다.</p> - -<p>실시간 상호적인 학습 연습에 대한 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">Active learning: selecting different elements</a>를 살펴보거나 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">Active learning: Playing with scope</a>를 통해 로컬에서 탬플릿을 다운로드하고 수정하는 다양한 형태의 연습이 제공한 단계를 따라가세요.</p> - -<h3 id="6단계_문서를_검토하고_탐색_영역_메뉴에_추가하세요">6단계 : 문서를 검토하고 탐색 영역 메뉴에 추가하세요</h3> - -<p>기사를 쓰고 난 후, 우리가 보고 검토하고 개선점을 제안할 수 있도록 알려주세요. 연락할 수 있는 가장 좋은 방법은 당사의 연락처(<a href="/en-US/docs/Learn#Contact_us">Contact us</a>) 섹션을 참조하는 것입니다.</p> - -<p>당신의 기사를 마무리하는 또 다른 방법은 학습 영역 기본 탐색 메뉴에 넣는 것입니다. 이 메뉴는 LearnSidebar 매크로에 의해 생성되어 편집할 특별한 권한이 필요합니다. 따라서 팀에서 추가한 내용에 대해 다시 한번 말씀 드리겠습니다.</p> - -<p>당신의 페이지에 기사를 추가해야 합니다. 이것은 당신의 페이지 맨 위에 있는 단락에 매크로(\{{LearnSidebar}})를 추가함으로써 이루어집니다.</p> - -<ul> -</ul> - -<h2 id="추천_기사">추천 기사</h2> - -<p>기여를 하고 싶은데 어떤 것을 써야 할 지를 모르겠나요?</p> - -<p>학습 영역 팀은 글을 쓰기 위한 아이디어가 담긴 트렐로 보드(<a href="https://trello.com/b/LDggrYSV">a Trello board with ideas of articles</a>)를 유지합니다. 하나를 골라서 자유롭게 작성하세요! </p> diff --git a/files/ko/orphaned/mdn/structures/api_references/index.html b/files/ko/orphaned/mdn/structures/api_references/index.html deleted file mode 100644 index 9218476c34..0000000000 --- a/files/ko/orphaned/mdn/structures/api_references/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: API 레퍼런스 -slug: orphaned/MDN/Structures/API_references -tags: - - API - - 가이드 - - 레퍼런스 - - 봉사 -translation_of: MDN/Structures/API_references -original_slug: MDN/Structures/API_references ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p class="summary">웹에서 사용 가능한 기술 중 클라이언트 측 자바스크립트 API가 차지하는 비중은 상당히 높습니다. 그렇기 때문에, MDN은 API의 기능과 사용법을 설명하는 광범위한 참조 자료를 보유하고 있습니다. 이 안내 문서는 이런 API 참고 자료를 MDN에 생성하는 방법을 설명합니다. </p> - -<h2 id="사전_준비">사전 준비</h2> - -<p>API를 문서화 하려면 다음이 가능해야 합니다. </p> - -<ol> - <li>최종 버전의 스팩: 그 API를 다루는 스팩의 단계가 W3C 최종 권고안인지, 초안인지는 관계없지만, 최종 버전의 스팩을 참조해야 합니다. 보통은 웹에서 쉽게 검색할 수 있으며, 그 스팩의 모든 버전의 문서에는 보통 최종 버전으로의 링크가 "lastest draft"등의 제목으로 걸려있습니다. </li> - <li>최신 모던 브라우저: 여러분이 문서화할 기능들은 정식 버전이 아닌 <a href="https://nightly.mozilla.org/">파이어폭스 나이틀리</a>/<a href="https://www.google.com/intl/en/chrome/browser/canary.html">크롬 카나리</a>와 같은 실험 버전에서 지원할 가능성이 높습니다. 앞서가는 실험적인 API를 문서화 한다면 더욱 이런 버전의 브라우저를 사용해야 합니다. </li> - <li>데모/블로그 글/다른 정보: 가능하면 최대한 정보를 찾아보세요. 그 API가 어떻게 동작하는지 스스로 익숙히는 좋은 출발점이 됩니다. 주 인터페이스, 프로퍼티, 메서드가 무엇인지, 주요한 유즈 케이스가 어떻게 되는지 배우고, 어떻게 그 기능을 간단시 서술할지 고민하세요. </li> - <li>기술문의 활용: API 표준화에 참여했거나 브라우저에서 그 스팩을 구현한 누군가에게 기술문의를 할 수 있는 나만의 연락처를 찾을 수 있다면 정말 좋습니다. 다음을 참고하세요. - <ul> - <li>관련 업무를 보는 회사에서 근무한다면 사내 주소록</li> - <li>그 API에 대한 토론 채널에 참여한 공개 메일링 리스트. 모질라의 <a href="https://lists.mozilla.org/listinfo/dev-platform">dev-platform</a>, <a href="https://lists.mozilla.org/listinfo/dev-webapi">dev-webapi</a> 목록, <a href="https://lists.w3.org/Archives/Public/public-webapps/">public-webapps</a> 같은 W3C 목록 참고</li> - <li>스팩 문서. 예를 들면 <a href="https://webaudio.github.io/web-audio-api/">Web Audio API 문서</a> 상단에는 저자들의 연락처가 있음.</li> - </ul> - </li> -</ol> - -<h2 id="문서_구조">문서 구조</h2> - -<dl> - <dt><a href="/ko/docs/MDN/Contribute/Structures/API_references/What_does_an_API_reference_need">API 레퍼런스 문서에 필요한 것은 무엇일까요? </a></dt> - <dd>이 문서는 완벽한 API 레퍼런스 문서에 필요한 것들을 설명합니다. </dd> - <dt><a href="/ko/docs/MDN/Contribute/Structures/Page_types">페이지 타입</a></dt> - <dd>MDN에서 반복적으로 사용되는 페이지 타입들이 있습니다. 이 문서는 그 타입들의 목적을 설명하고 신규 문서를 만들때 사용할 수 있는 템플릿 예제를 제공합니다. </dd> -</dl> - -<h2 id="페이지의_기능">페이지의 기능</h2> - -<p>API 레퍼런스 문서를 위한 페이지 기능을 생성하는 방법을 설명합니다. </p> - -<dl> - <dt><a href="/ko/docs/MDN/Contribute/Structures/API_references/API_reference_sidebars">API 레퍼런스 사이드바</a></dt> - <dd>작성한 MDN API 레퍼런스 문서에 사이드바를 추가할 때, 여러분은 API와 관련된 인터페이스 튜토리얼, 다른 자료 링크를 맘대로 출력할 수 있습니다. 이 문서는 그 방법을 설명합니다. </dd> - <dt><a href="/ko/docs/MDN/Contribute/Structures/Syntax_sections">API 문법 섹션</a></dt> - <dd>MDN 참조 문서에서 문법 섹션은 그 기능이 가지고 있는 정확한 문법을 기술한 박스형태를 띄고 있다. (어떤 매개변수가 사용가능한지, 어떤 것이 옵션인지 등) 그 문서는 레퍼런스 문서를 위한 문법 섹션 작성법에 대해 설명합니다. </dd> - <dt><a href="/ko/docs/MDN/Contribute/Structures/Code_examples">예제 코드</a></dt> - <dd>웹 플랫폼 기능 사용법을 설명하는 페이지에는 어김없이 많은 예제 코드가 있습니다. 이 문서는 페이지에 예제 코드를 추가하기 위한 각각의 가능한 메카니즘을 기술합니다. 무엇을 언제 사용해야 하는지도 함께요.</dd> - <dt><a href="/ko/docs/MDN/Contribute/Structures/Specification_tables">스펙 테이블</a></dt> - <dd>MDN의 모든 레퍼런스 페이지는 API나 기술이 정의된 스팩, 또는 그 스팩에 대한 정보를 제공해야 합니다. 이 문서는 테이블의 형태와 제작 방법을 설명합니다. </dd> - <dt><a href="/ko/docs/MDN/Contribute/Structures/Compatibility_tables">호환성 테이블</a></dt> - <dd>MDN은 오픈 웹 문서, 즉 모든 브라우저에서 공유되는 DOM, HTML, CSS, JavaScript, SVG 등과 같은 기술 문서를 위한 호환성 테이블 표준을 가지고 있습니다. 이 문서는 호환성 데이터를 MDN 페이지에 추가하는 기능 사용법을 다룹니다. </dd> -</dl> diff --git a/files/ko/orphaned/web/api/abstractworker/index.html b/files/ko/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index a0a80f641c..0000000000 --- a/files/ko/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -tags: - - API - - Abstract - - AbstractWorker - - Interface - - Reference - - Web Workers - - Web Workers API - - Worker - - 워커 - - 웹 워커 -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -<div>{{ APIRef("Web Workers API") }}</div> - -<p><a href="/ko/docs/Web/API/Web_Workers_API">Web Workers API</a>의 <strong><code>AbstractWorker</code></strong> 인터페이스는 기본적인 {{domxref("Worker")}}에 더해 {{domxref("ServiceWorker")}}와 {{domxref("SharedWorker")}}까지, 모든 유형의 워커에 공통된 속성과 메서드를 정의하는 추상 인터페이스입니다.</p> - -<h2 id="속성">속성</h2> - -<p><code>AbstractWorker</code> 인터페이스는 어떠한 속성도 상속하지 않습니다.</p> - -<h3 id="이벤트_처리기">이벤트 처리기</h3> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd><span style="line-height: 1.5;"><code>error</code> 유형의 {{domxref("ErrorEvent")}}가 워커로 확산되면 호출할 {{domxref("EventListener")}}입니다.</span></dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<p><code>AbstractWorker</code> 인터페이스는 어떠한 메서드도 구현하거나 상속하지 않습니다.</p> - -<h2 id="예제">예제</h2> - -<p><code>AbstractWorker</code>는 추상 인터페이스므로 코드 내에서 직접 사용할 일은 없습니다. 대신, <code>AbstractWorker</code>를 상속하는 {{domxref("Worker")}} 또는 {{domxref("SharedWorker")}}를 사용할 것입니다.</p> - -<p>다음 코드는 {{domxref("Worker.Worker", "Worker()")}} 생성자를 사용해 새로운 <code>Worker</code>를 생성한 후 워커로 메시지를 전송하는 것을 보입니다.</p> - -<pre class="brush: js notranslate">var myWorker = new Worker('worker.js'); - -first.onchange = function() { - myWorker.postMessage([first.value, second.value]); - console.log('Message posted to worker'); -}</pre> - -<p>위 워커의 코드는 "<code>worker.js</code>" 파일에서 불러오며, <code>first</code>로 표현한 {{htmlelement("input")}} 요소가 존재하는 상황을 가정하여, {{event("change")}} 이벤트 처리기를 부착해 사용자가 <code>first</code>의 값을 바꿀 때마다 워커에 메시지를 전송해 바뀐 값을 알려줍니다.</p> - -<p>MDN 웹 문서 GitHub 저장소에 더 많은 예제가 준비돼있습니다.</p> - -<ul> - <li><a href="https://github.com/mdn/simple-web-worker">기본적인 전용 워커 예제</a> (<a href="http://mdn.github.io/simple-web-worker/">실행</a>)</li> - <li><a href="https://github.com/mdn/simple-shared-worker">기본적인 공유 워커 예제</a> (<a href="http://mdn.github.io/simple-shared-worker/">실행</a>)</li> -</ul> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "#abstractworker", "AbstractWorker")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div>{{Compat("api.AbstractWorker")}}</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{domxref("Worker")}}와 {{domxref("SharedWorker")}} 이런 특징을 물려받고 있습니다.</li> -</ul> diff --git a/files/ko/orphaned/web/api/ambient_light_events/index.html b/files/ko/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 81046f2e85..0000000000 --- a/files/ko/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Using Light Events -slug: orphaned/Web/API/Ambient_Light_Events -tags: - - Ambient Light -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>주변의 빛을 감지하는 이벤트를 활용해서 웹페이지나 어플리케이션이 주변 빛의 세기를 감지할 수 있습니다. 사용자 인터페이스의 색상 대비나 사진의 노출을 변경하는 용도로 사용할 수 있습니다.</p> - -<h2 id="빛_이벤트">빛 이벤트</h2> - -<p>기기의 빛 센서가 빛의 변화를 감지하면 브라우저에 변화를 전달합니다. 브라우저가 이러한 알림을 받으면 정확한 빛의 세기를 알려주는 {{domxref("DeviceLightEvent")}} 이벤트를 발생시킵니다.</p> - -<p>이 이벤트는 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드 ({{event("devicelight")}} 이벤트 이름 사용)를 사용하거나 {{domxref("window.ondevicelight")}} 속성에 이벤트 핸들러를 사용함으로서 <code>window</code> 객체 수준에서 캡춰됩니다.</p> - -<p>캡춰가 되면 이벤트 객체의 {{domxref("DeviceLightEvent.value")}} 속성을 통해서 럭스(lux) 단위의 빛의 세기를 사용할 수 있습니다.</p> - -<h2 id="예제">예제</h2> - -<pre class="brush: js">window.addEventListener('devicelight', function(event) { - var html = document.getElementsByTagName('html')[0]; - - if (event.value < 50) { - html.classList.add('darklight'); - html.classList.remove('brightlight'); - } else { - html.classList.add('brightlight'); - html.classList.remove('darklight'); - } -});</pre> - -<h2 id="Specifications" name="Specifications">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}</td> - <td>{{ Spec2('AmbientLight') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/body/index.html b/files/ko/orphaned/web/api/body/index.html deleted file mode 100644 index 8d315725a1..0000000000 --- a/files/ko/orphaned/web/api/body/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - Reference - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<div>{{ APIRef("Fetch") }}</div> - -<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p> - -<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content">JS Content</h3> - -<pre class="brush: js">const myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') - .then(res => res.blob()) - .then(res => { - const objectURL = URL.createObjectURL(res); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> diff --git a/files/ko/orphaned/web/api/body/json/index.html b/files/ko/orphaned/web/api/body/json/index.html deleted file mode 100644 index c3c0fa14cc..0000000000 --- a/files/ko/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} mixin의 <strong><code>json()</code></strong> 매서드는 {{domxref("Response")}} 스트림을 가져와 스트림이 완료될때까지 읽는다. 이 메서드는 body 텍스트를 {{jsxref("JSON")}}으로 바꾸는 결과로 해결되는 promise를 반환한다.</p> - -<h2 id="구문">구문</h2> - -<pre class="brush: js">response.json().then(function(data) { - // do something with your data -});</pre> - -<h3 id="매개변수">매개변수</h3> - -<p>없음.</p> - -<h3 id="반환값">반환값</h3> - -<p>A promise that resolves with the result of parsing the body text as JSON. This could be anything that can be represented by JSON — an object, an array, a string, a number...</p> - -<h2 id="Example">Example</h2> - -<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), we create a new request using the {{domxref("Request.Request")}} constructor, then use it to fetch a <code>.json</code> file. When the fetch is successful, we read and parse the data using <code>json()</code>, then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.</p> - -<pre class="brush: js">var myList = document.querySelector('ul'); - -var myRequest = new Request('products.json'); - -fetch(myRequest) - .then(function(response) { return response.json(); }) - .then(function(data) { - for (var i = 0; i < data.products.length; i++) { - var listItem = document.createElement('li'); - listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> can be found in ' + - data.products[i].Location + - '. Cost: <strong>£' + data.products[i].Price + '</strong>'; - myList.appendChild(listItem); - } - });</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-json','json()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/childnode/before/index.html b/files/ko/orphaned/web/api/childnode/before/index.html deleted file mode 100644 index e0c01c2a02..0000000000 --- a/files/ko/orphaned/web/api/childnode/before/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: ChildNode.before() -slug: orphaned/Web/API/ChildNode/before -tags: - - API - - DOM - - 노드 - - 레퍼런스 - - 메소드 - - 실험중 -translation_of: Web/API/ChildNode/before -original_slug: Web/API/ChildNode/before ---- -<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> - -<p><code><strong>ChildNode.before</strong></code> 메소드는 <code>ChildNode</code> 의 부모가 가진 자식의 <code>ChildNode</code> 바로 이전에 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 삽입합니다.{{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.</p> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.before((Node or DOMString)... nodes); -</pre> - -<h3 id="파라미터">파라미터</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>삽입할 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합입니다.</dd> -</dl> - -<h3 id="예외">예외</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 노드는 계층 구조의 특정 지점에 삽입될 수 없습니다.</li> -</ul> - -<h2 id="예제">예제</h2> - -<h3 id="엘리먼트_삽입하기">엘리먼트 삽입하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span); - -console.log(parent.outerHTML); -// "<div><span></span><p></p></div>" -</pre> - -<h3 id="텍스트_삽입하기">텍스트 삽입하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.before("Text"); - -console.log(parent.outerHTML); -// "<div>Text<p></p></div>"</pre> - -<h3 id="엘리먼트와_텍스트_삽입하기">엘리먼트와 텍스트 삽입하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span, "Text"); - -console.log(parent.outerHTML); -// "<div><span></span>Text<p></p></div>"</pre> - -<h3 id="ChildNode.before()_는_범위를_지정할_수_없습니다"><code>ChildNode.before()</code> 는 범위를 지정할 수 없습니다</h3> - -<p><code>before()</code> 메소드는 <code>with</code> 구문으로 범위를 지정할 수 없습니다. 자세한 내용은 {{jsxref("Symbol.unscopables")}} 문서를 확인하세요.</p> - -<pre class="brush: js">with(node) { - before("foo"); -} -// ReferenceError: before is not defined </pre> - -<h2 id="폴리필">폴리필</h2> - -<p>다음 코드를 사용해 인터넷 익스플로러 9 이상에서 <code>before() 메소드</code> 를 폴리필링할 수 있습니다.</p> - -<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('before')) { - return; - } - Object.defineProperty(item, 'before', { - configurable: true, - enumerable: true, - writable: true, - value: function before() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.insertBefore(docFrag, this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">코멘트</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>초기 정의.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.ChildNode.before")}}</p> - -<h2 id="함께_보기">함께 보기</h2> - -<ul> - <li>{{domxref("ChildNode")}} 와 {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/childnode/index.html b/files/ko/orphaned/web/api/childnode/index.html deleted file mode 100644 index f02d307e2a..0000000000 --- a/files/ko/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - 노드 - - 실험중 - - 인터페이스 -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>ChildNode</strong></code> 인터페이스는 부모를 가질 수 있는 {{domxref("Node")}} 객체에 고유한 메소드를 포함합니다.</p> - -<p><code>ChildNode</code>는 원시 인터페이스이며 이 타입의 객체는 생성할 수 없습니다. 이는 {{domxref("Element")}}, {{domxref("DocumentType")}} 및 {{domxref("CharacterData")}} 객체로 구현되었습니다.</p> - -<h2 id="프로퍼티">프로퍼티</h2> - -<p><em>상속 및 특정 프로퍼티가 없습니다.</em></p> - -<h2 id="메소드">메소드</h2> - -<p><em>상속된 메소드가 없습니다.</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd><code>ChildNode</code>를 부모의 자식 목록으로부터 제거합니다.</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>{{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 부모의 자식 목록에서 <code>ChildNode</code>의 바로 앞에 삽입합니다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>{{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합을 부모의 자식 목록에서 <code>ChildNode</code>의 바로 뒤에 삽입합니다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>부모의 자식 목록에 있는 <code>ChildNode</code>를 {{domxref("Node")}} 또는 {{domxref("DOMString")}} 객체의 집합으로 대체합니다.{{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입됩니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">코멘트</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> 인터페이스를 {{domxref("ParentNode")}}와 <code>ChildNode</code>로 분리합니다. <code>previousElementSibling</code>과 <code>nextElementSibling</code>은 이제 마지막에 정의됩니다. {{domxref("CharacterData")}}와 {{domxref("DocumentType")}}은 새 인터페이스를 구현했습니다. <code>remove()</code>, <code>before()</code>, <code>after()</code> 및 <code>replaceWith()</code> 메소드가 추가되었습니다.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>프로퍼티의 초기 정의가 <code>ElementTraversal</code> 순수 인터페이스에 추가되었고 {{domxref("Element")}}에서 사용합니다.</td> - </tr> - </tbody> -</table> - -<h2 id="폴리필">폴리필</h2> - -<p>github의 외부 코드: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.ChildNode")}}</p> - -<h2 id="참고">참고</h2> - -<ul> - <li>{{domxref("ParentNode")}} 순수 인터페이스.</li> - <li> - <div class="syntaxbox">순수 인터페이스를 구현한 객체 타입: {{domxref("CharacterData")}}, {{domxref("Element")}} 및 {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/ko/orphaned/web/api/childnode/remove/index.html b/files/ko/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index 2b22e4aaaa..0000000000 --- a/files/ko/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: ChildNode.remove() -slug: orphaned/Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - 메소드 - - 실험중 -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>ChildNode.remove()</strong></code> 메소드는 이를 포함하는 트리로부터 객체를 제거합니다.</p> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox"><em>node</em>.remove(); -</pre> - -<h2 id="예제">예제</h2> - -<h3 id="remove()_사용하기"><code>remove()</code> 사용하기</h3> - -<pre class="brush: html"><div id="div-01">div-01 입니다</div> -<div id="div-02">div-02 입니다</div> -<div id="div-03">div-03 입니다</div> -</pre> - -<pre class="brush: js">var el = document.getElementById('div-02'); -el.remove(); // id가 'div-02' 인 div를 제거합니다 -</pre> - -<h3 id="ChildNode.remove()_는_스코프_지정_불가"><code>ChildNode.remove()</code> 는 스코프 지정 불가</h3> - -<p><code>remove()</code> 메소드는 <code>with</code> 구문으로 스코프를 지정할 수 없습니다. 자세한 내용은 {{jsxref("Symbol.unscopables")}} 을 확인하세요.</p> - -<pre class="brush: js">with(node) { - remove(); -} -// ReferenceError: remove is not defined </pre> - -<h2 id="폴리필">폴리필</h2> - -<p>인터넷 익스플로러 9 이상에서는 다음 코드를 사용해 <code>remove() 메소드</code> 를 폴리필링할 수 있습니다.</p> - -<pre class="brush: js">// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('remove')) { - return; - } - Object.defineProperty(item, 'remove', { - configurable: true, - enumerable: true, - writable: true, - value: function remove() { - if (this.parentNode !== null) - this.parentNode.removeChild(this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">코멘트</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>초기 정의.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("api.ChildNode.remove")}}</p> -</div> - -<h2 id="함께_보기">함께 보기</h2> - -<ul> - <li>{{domxref("ChildNode")}} 순수 인터페이스.</li> - <li> - <div class="syntaxbox">이 순수 인터페이스를 구현하는 객체 타입: {{domxref("CharacterData")}}, {{domxref("Element")}}, {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/ko/orphaned/web/api/detecting_device_orientation/index.html b/files/ko/orphaned/web/api/detecting_device_orientation/index.html deleted file mode 100644 index 1fd9fe3e91..0000000000 --- a/files/ko/orphaned/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: 기기 방향 감지하기 -slug: orphaned/Web/API/Detecting_device_orientation -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation ---- -<div>{{SeeCompatTable}}</div> - -<h2 id="요약">요약</h2> - -<p>웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.</p> - -<p>방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 {{domxref("DeviceOrientationEvent")}}로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다. 이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.</p> - -<p>두 번째 이벤트는 {{domxref("DeviceMotionEvent")}}로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 {{domxref("DeviceOrientationEvent")}}와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로{{domxref("DeviceMotionEvent")}}를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. {{domxref("DeviceOrientationEvent")}}는 모바일 기기에서 주로 더 많이 나타난다.</p> - -<h2 id="방향_이벤트_처리하기">방향 이벤트 처리하기</h2> - -<p>방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:</p> - -<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true); -</pre> - -<p>이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.</p> - -<p>방향 이벤트는 다음 네 개의 값을 가진다:</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li> - <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }}</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li> -</ul> - -<p>이벤트 핸들러 함수는 보통 다음과 같다:</p> - -<pre class="brush: js">function handleOrientation(event) { - var absolute = event.absolute; - var alpha = event.alpha; - var beta = event.beta; - var gamma = event.gamma; - - // Do stuff with the new orientation data -} -</pre> - -<h3 id="방향_값_설명">방향 값 설명</h3> - -<p>각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a> 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.alpha") }} 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }} 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }} 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.</li> -</ul> - -<h3 id="방향_예제">방향 예제</h3> - -<p>이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.</p> - -<p>자 그럼, 정원에 공이 하나 있다고 상상해보자:</p> - -<pre class="brush: html"><div class="garden"> - <div class="ball"></div> -</div> - -<pre class="output"></pre> -</pre> - -<p>이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:</p> - -<pre class="brush: css">.garden { - position: relative; - width : 200px; - height: 200px; - border: 5px solid #CCC; - border-radius: 10px; -} - -.ball { - position: absolute; - top : 90px; - left : 90px; - width : 20px; - height: 20px; - background: green; - border-radius: 100%; -} -</pre> - -<p>이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:</p> - -<pre class="brush: js">var ball = document.querySelector('.ball'); -var garden = document.querySelector('.garden'); -var output = document.querySelector('.output'); - -var maxX = garden.clientWidth - ball.clientWidth; -var maxY = garden.clientHeight - ball.clientHeight; - -function handleOrientation(event) { - var x = event.beta; // In degree in the range [-180,180] - var y = event.gamma; // In degree in the range [-90,90] - - output.innerHTML = "beta : " + x + "\n"; - output.innerHTML += "gamma: " + y + "\n"; - - // Because we don't want to have the device upside down - // We constrain the x value to the range [-90,90] - if (x > 90) { x = 90}; - if (x < -90) { x = -90}; - - // To make computation easier we shift the range of - // x and y to [0,180] - x += 90; - y += 90; - - // 10 is half the size of the ball - // It center the positionning point to the center of the ball - ball.style.top = (maxX*x/180 - 10) + "px"; - ball.style.left = (maxY*y/180 - 10) + "px"; -} - -window.addEventListener('deviceorientation', handleOrientation); -</pre> - -<p>여기 실제로 실행해 볼 수 있는 예제이다:</p> - -<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div> - -<div class="warning"> -<p><strong>경고:</strong> Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.</p> -</div> - -<h2 id="모션_이벤트_처리하기">모션 이벤트 처리하기</h2> - -<p>모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.</p> - -<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre> - -<p><em>HandleMotion</em> 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.</p> - -<p>모션 이벤트는 다음 네 가지 속성을 가진다:</p> - -<ul> - <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> - <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li> - <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li> - <li>{{ domxref("DeviceMotionEvent.interval") }}</li> -</ul> - -<h3 id="모션_값_설명">모션 값 설명</h3> - -<p>{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a> 문서를 참조).</p> - -<p>{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:</p> - -<ul> - <li><code>x</code>: 서쪽에서 동쪽으로 나타나는 축을 의미한다</li> - <li><code>y</code>: 남쪽에서 북쪽으로 나타나는 축을 의미한다</li> - <li><code>z</code>: 땅에서 수직으로 나타나는 축을 의미한다</li> -</ul> - -<p>{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:</p> - -<ul> - <li><code>alpha</code>: 화면(또는 데스크탑의 키보드)에 수직인 축을 따른 회전율을 의미한다</li> - <li><code>beta</code>: 화면(또는 데스크탑의 키보드)의 평면의 왼쪽에서 오른쪽으로 나타나는 축을 따른 회전율을 의미한다</li> - <li><code>gamma</code>: 화면(또는 데스크탑의 키보드)의 평면의 아래에서 위쪽으로 나타나는 축을 따른 회전율을 의미한다</li> -</ul> - -<p>마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.</p> - -<h2 id="스펙">스펙</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>7.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>3.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.2</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 18px;">4.2</span></td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Gecko_구현_참고_사항">Gecko 구현 참고 사항</h3> - -<ol> - <li>Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>을 지원한다</li> -</ol> - -<h2 id="참고_자료">참고 자료</h2> - -<ul> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/document_object_model/events/index.html b/files/ko/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index 84152bbfbc..0000000000 --- a/files/ko/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Events and the DOM -slug: orphaned/Web/API/Document_Object_Model/Events -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -<div>{{DefaultAPISidebar("DOM")}}</div> - -<h2 id="Introduction" name="Introduction">소개</h2> - -<p>이 장에서는 DOM 이벤트 모델을 설명한다. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> 인터페이스는 DOM의 노드에서 이벤트 등록 및 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>를 위한 인터페이스와 더불어 다양한 이벤트 인터페이스가 서로 어떻게 관련되는지 보여주는 몇 가지 더 긴 예와 함께 설명된다.</p> - -<p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p> - -<p>Also see <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a> in the Examples chapter for a more detailed example of how events move through the DOM.</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Event listener등록</h2> - -<p>DOM 요소에 대한 이벤트 핸들러를 등록하는 방법에는 3가지가 있다.</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> - -<pre class="brush: js notranslate">// Assuming myButton is a button element -myButton.addEventListener('click', greet, false) -function greet(event){ - // print and have a look at the event object - // always print arguments in case of overlooking any other arguments - console.log('greet:', arguments) - alert('hello world') -} -</pre> - -<p>이 방식은 근대의 웹페이지에서 사용해야하는 방법이다.</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Internet Explorer 6–8 didn't support this method, offering a similar {{domxref("EventTarget.attachEvent")}} API instead. For cross-browser compatibility, use one of the many JavaScript libraries available.</p> -</div> - -<p>더 자세한 내용은{{domxref("EventTarget.addEventListener")}}를 참조하세요.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">HTML </a>속성</h3> - -<pre class="brush: html notranslate"><button onclick="alert('Hello world!')"> -</pre> - -<p>속성에서 JavaScript 코드는 이벤트 매개변수를 통해 이벤트 객체를 통과합니다. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">반환 값은 HTML 사양에 설명된 특별한 방법으로 처리됩니다.</a></p> - -<div class="blockIndicator warning"> -<p><strong>경고:</strong> 이 방법은 피해야 합니다! 그것은 마크업을 부풀리고, 읽기 어렵게 만듭니다. 내용/구조와 행동에 대한 우려는 잘 분리되어 있지 않아 버그를 찾기가 더 어려워집니다.</p> -</div> - -<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 요소 특성</h3> - -<pre class="brush: js notranslate">// Assuming myButton is a button element -myButton.onclick = function(event){alert('Hello world')} -</pre> - -<p>The function can be defined to take an <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p> - -<p>The problem with this method is that only one handler can be set per element and per event.</p> - -<h2 id="Accessing_Event_interfaces">Accessing Event interfaces</h2> - -<p>Event handlers may be attached to various objects (including DOM elements, document, the {{domxref("window")}} object, etc.). When an event occurs, an event object is created and passed sequentially to the event listeners.</p> - -<p>The {{domxref("Event")}} interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p> - -<pre class="brush: js notranslate">function print(evt) { - // the evt parameter is automatically assigned the event object - // take care of the differences between console.log & alert - console.log('print:', evt) - alert(evt) -} -// any function should have an appropriate name, that's what called semantic -table_el.onclick = print -</pre> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/documentorshadowroot/index.html b/files/ko/orphaned/web/api/documentorshadowroot/index.html deleted file mode 100644 index 526f6687ad..0000000000 --- a/files/ko/orphaned/web/api/documentorshadowroot/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: DocumentOrShadowRoot -slug: orphaned/Web/API/DocumentOrShadowRoot -tags: - - API - - Document - - DocumentOrShadowRoot - - Interface - - NeedsTranslation - - Reference - - ShadowRoot - - TopicStub - - shadow dom -translation_of: Web/API/DocumentOrShadowRoot -original_slug: Web/API/DocumentOrShadowRoot ---- -<div>{{APIRef("Web Components")}}</div> - -<p><span class="seoSummary"><a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM API</a> 의 <strong><code>DocumentOrShadowRoot</code></strong> 믹스인(mixin)은 문서와 섀도우 루트간에 공유되는 API를 제공합니다. 다음 기능은 문서{{DOMxRef("Document")}}와 {{DOMxRef("ShadowRoot")}}에 모두 포함되어 있습니다.</span></p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt> - <dd>포커스를 가지는 섀도우 루트 내의 요소{{DOMxRef('Element')}}를 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt> - <dd>현재 이 문서에서 full screen mode인 요소{{DOMxRef('Element')}}를 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> - <dd>포인터가 잠겨있는 동안 마우스 이벤트의 대상으로 설정된 요소를 반환합니다. 잠금이 보류중이거나 포인터가 잠금 해제되어 있거나, 대상이 다른 문서(document)에 있으면 <code>null</code>을 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt> - <dd>문서에 명시적으로 링크되었거나 포함하고 있는 스타일 시트의 {{DOMxRef('CSSStyleSheet')}} 객체의 {{DOMxRef('StyleSheetList')}}를 반환합니다.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt> - <dd>유저가 선택한 텍스트의 범위, 또는 캐럿(caret - 텍스트 커서)의 현재 위치를 나타내는 {{DOMxRef('Selection')}}객체를 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt> - <dd>지정된 좌표의 최상위 요소를 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> - <dd>지정된 자표에 있는 모든 요소의 배열을 반환합니다.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> - <dd>캐럿을 포함한 DOM 노드와 그 노드 내에서 캐럿의 문자 오프셋을 포함한 {{DOMxRef('CaretPosition')}}를 반환합니다.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td>Implementation in Shadow DOM.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility">Browser Compatibility</h2> - - - -<p>{{Compat("api.DocumentOrShadowRoot")}}</p> - -<p>[1] This interface's features are still implemented on the {{DOMxRef("Document")}} object.</p> diff --git a/files/ko/orphaned/web/api/element/currentstyle/index.html b/files/ko/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index 04b0adabcc..0000000000 --- a/files/ko/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -tags: - - 돔 - - 속성 추출 - - 요소 속성 -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Summary">Summary</h2> - -<p><strong><code>Element.currentStyle</code></strong> 은 표준화된 {{domxref("window.getComputedStyle")}} 메서드의 인터넷 익스플로러 전용 대체 프로퍼티입니다. 오래된 버젼의 인터넷 익스플로러에서 사용 가능합니다.</p> - -<h2 id="Specification">Specification</h2> - -<p>명세에 포함 되는 부분이 아닙니다.</p> - -<p>마이크로소프트 <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">MSDN에 설명이 있습니다</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<p>{{Compat("api.Element.currentStyle")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Element.runtimeStyle")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/ko/orphaned/web/api/elementcssinlinestyle/style/index.html deleted file mode 100644 index ef9d2c90e0..0000000000 --- a/files/ko/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: element.style -slug: orphaned/Web/API/ElementCSSInlineStyle/style -tags: - - API - - HTML DOM - - HTMLElement - - Property - - Reference - - Style -translation_of: Web/API/ElementCSSInlineStyle/style -original_slug: Web/API/ElementCSSInlineStyle/style ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><code><strong>HTMLElement.style</strong></code> 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 <a href="/ko/docs/Web/HTML/Global_attributes/style"><code>style</code> 속성</a>이 포함한 CSS 선언을 담은 {{domxref("CSSStyleDeclaration")}} 객체를 반환합니다</p> - -<h2 id="예제">예제</h2> - -<pre class="brush: js">// Set multiple styles in a single statement -elt.style.cssText = "color: blue; border: 1px solid black"; -// Or -elt.setAttribute("style", "color:red; border: 1px solid blue;"); - -// Set specific style while leaving other inline style values untouched -elt.style.color = "blue";</pre> - -<h2 id="명세">명세</h2> - -<p><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> - -<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("api.HTMLElement.style")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/htmlhyperlinkelementutils/index.html b/files/ko/orphaned/web/api/htmlhyperlinkelementutils/index.html deleted file mode 100644 index 6ae4afa92f..0000000000 --- a/files/ko/orphaned/web/api/htmlhyperlinkelementutils/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: HTMLHyperlinkElementUtils -slug: orphaned/Web/API/HTMLHyperlinkElementUtils -tags: - - API - - Experimental - - Mixin - - NeedsTranslation - - TopicStub - - URL API -translation_of: Web/API/HTMLHyperlinkElementUtils -original_slug: Web/API/HTMLHyperlinkElementUtils ---- -<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> - -<p>The <strong><code>HTMLHyperlinkElementUtils</code></strong> mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.</p> - -<p>There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.</p> - -<h2 id="Properties">Properties</h2> - -<div class="note"> -<p><strong>Note: </strong>This interface doesn't inherit any property.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the whole URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the domain of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the port number of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the username specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the password specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt> - <dd>This returns a {{domxref("USVString")}} containing the origin of the URL (that is its scheme, its domain and its port).</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<div class="note"> -<p><strong>Note: </strong>This interface doesn't inherit any method.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt> - <dd>This returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLHyperlinkElementUtils")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Interfaces implementing this one: {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}} - </li> -</ul> diff --git a/files/ko/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/ko/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index e452583781..0000000000 --- a/files/ko/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - HTMLOrForeignElement - - Property - - Read-only - - Reference -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary"><code><strong>HTMLElement.dataset</strong></code> 읽기 전용 속성은 요소의 <a href="/ko/docs/Web/HTML/Global_attributes/data-*">사용자 지정 데이터 특성</a>(<code>data-*</code>)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다.</span> 반환하는 값은 {{domxref("DOMStringMap")}}으로, 각 데이터 특성마다 하나의 항목을 가집니다. <code>dataset</code> 속성 자체는 읽기 전용이라는 점에 주의하세요. 모든 쓰기 작업은 <code>dataset</code> 안의, 데이터 특성을 나타내는 각각의 속성에 수행해야 합니다. 또한 HTML의 <code>data-이름</code>과, 이에 대응하는 DOM <code>dataset['이름']</code>의 <code>이름</code>은 서로 일치하지 않으나, 다음 규칙에 따라 유사함을 기억하세요.</p> - -<ul> - <li>HTML의 사용자 지정 특성 이름은 <code>data-</code>로 시작합니다. 또한 문자, 숫자, 대시(<code>-</code>), 점(<code>.</code>), 콜론(<code>:</code>), 언더스코어(<code>_</code>)만 사용할 수 있고, ASCII 대문자(<code>A</code>-<code>Z</code>)는 사용할 수 없습니다.</li> - <li>JavaScript의 사용자 지정 특성 이름은 HTML 이름을 카멜 표기법으로 변환한 형태로, 대시, 점 등을 모두 제거합니다.</li> -</ul> - -<p>아래의 내용과 함께, <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a> 아티클에서는 HTML 데이터 속성을 어떻게 쓰는지 안내를 찾을 수 있습니다. </p> - -<h3 id="Name_conversion">Name conversion</h3> - -<p>dash-style 에서 camelCase로 변환: 커스텀 데이터 속성의 이름은 아래의 규칙에 따라 {{ domxref("DOMStringMap") }}의 key로 변환됩니다. </p> - -<ul> - <li>접두사 <code>data-</code> 는 삭제됩니다. (대시 포함);</li> - <li><code>a</code><span style="line-height: 1.5;"> 부터 </span><code>z</code> 까지 <span style="line-height: 1.5;">ASCII 소문자 앞에 오는</span> 모든 대시(<code>U+002D</code>)는 삭제되고 해당 소문자는 대문자로 변환됩니다.</li> - <li>다른 기호는(다른 대시들을 포함한) 바뀌지 않습니다.</li> -</ul> - -<p>camelCase 에서 dash-style로 변환: key를 속성 이름으로 매핑하는 반대의 변환은 아래의 규칙을 따릅니다.:</p> - -<ul> - <li>제약 조건: 대시 바로 뒤에는 <code>a</code> 에서 <code>z</code> 까지 ASCII 소문자를 쓸 수 없습니다 (변환 전);</li> - <li>접두사 <code>data-</code> 가 추가됩니다;</li> - <li><code>A</code> 에서 <code>Z</code> 까지 모든 ASCII 대문자는 대시와 해당 소문자로 변환됩니다;</li> - <li>다른 문자는 변하지 않습니다.</li> -</ul> - -<p>이러한 제약 조건은 반드시 두 변환이 서로의 역이 되도록 합니다.</p> - -<p>예를 들어, <code>data-abc-def</code> 라는 이름의 속성은 <code>abcDef</code> 라는 키에 대응합니다.</p> - -<h3 id="Accessing_values">Accessing values</h3> - -<ul> - <li>속성들은 <code>element.dataset.keyname</code><em>과 같이</em> dataset의 객체 속성처럼 camelCase 이름(키)을 사용해서 설정하거나 읽을 수 있습니다</li> - <li>속성들은 또한 <code>element.dataset[keyname]</code>과 같이 객체 속성의 괄호 신택스로 설정하거나 읽을 수 있습니다.</li> -</ul> - -<h2 id="Syntax">Syntax</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> - <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> - <li> - <p>HTML elements에서 사용자가 지정한 data attribute에 직접 설정할 수 있으나 attribute names는 위의 데이터 문법을 반드시 사용해야 합니다.</p> - </li> -</ul> - -<h2 id="예시">예시</h2> - -<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> - -<pre class="brush: js">const el = document.querySelector('#user'); - -// el.id === 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -// set the data attribute -el.dataset.dateOfBirth = '1960-10-03'; -// Result: el.dataset.dateOfBirth === 1960-10-03 - -delete el.dataset.dateOfBirth; -// Result: el.dataset.dateOfBirth === undefined - -// 'someDataAttr' in el.dataset === false -el.dataset.someDataAttr = 'mydata'; -// Result: 'someDataAttr' in el.dataset === true -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> class of global attributes.</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> -</ul> diff --git a/files/ko/orphaned/web/api/htmlorforeignelement/tabindex/index.html b/files/ko/orphaned/web/api/htmlorforeignelement/tabindex/index.html deleted file mode 100644 index b159239155..0000000000 --- a/files/ko/orphaned/web/api/htmlorforeignelement/tabindex/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: element.tabIndex -slug: orphaned/Web/API/HTMLOrForeignElement/tabIndex -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/HTMLOrForeignElement/tabIndex -original_slug: Web/API/HTMLOrForeignElement/tabIndex ---- -<p>{{ ApiRef() }}</p> -<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> -<p>현재 요소의 탭 순서를 get/set.</p> -<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3> -<pre class="eval">element.tabIndex =<i>iIndex</i> -</pre> -<h3 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98">매개변수</h3> -<ul> - <li><code>iIndex</code>는 숫자</li> -</ul> -<h3 id=".EC.98.88" name=".EC.98.88">예</h3> -<pre>b1 = document.getElementById("button1"); -b1.tabIndex = 1; -</pre> -<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-40676705">tabIndex </a></p> -<p>{{ languages( { "en": "en/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" } ) }}</p> diff --git a/files/ko/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ko/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 637c74a373..0000000000 --- a/files/ko/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: 기본 개념 -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -tags: - - Advanced - - IndexedDB -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -<p>{{DefaultAPISidebar("IndexedDB")}}</p> - -<div class="summary"> -<p><strong>IndexedDB</strong>는 사용자의 브라우저 안에 데이터를 영구적으로 저장하게 해주는 방법 중 하나입니다. 그것은 네트워크 가능 여부에 상관없이, 풍부한 쿼리 작성 능력으로 웹 애플리케이션을 만들게 해주고, 이 애플리케이션은 온라인과 오프라인 모두에서 동작할 수 있습니다. IndexedDB는 예를 들면, 도서관의 DVD 목록처럼 대용량 데이터를 저장하는 애플리케이션, 그리고 메일 클라이언트, to-do 리스트, 노트패드처럼 동작에 지속적인 인터넷 연결이 필요하지 않은 애플리케이션에 유용합니다.</p> -</div> - -<h2 id="이_문서에_대하여">이 문서에 대하여</h2> - -<p>이 소개글은 IndexedDB의 필수 개념과 용어에 대해 논의합니다. 큰 그림을 제공하고 핵심 개념들을 설명합니다.</p> - -<p>다음과 같은 유용한 정보를 찾을 수 있을 것입니다.</p> - -<ul> - <li>IndexedDB 용어들에 대해 더 배우기 위해, <a href="#definitions">정의</a> 섹션을 보세요.</li> - <li>API 사용법에 대한 자세한 강좌는, <a href="/ko/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">IndexedDB 사용하기</a>를 보세요.</li> - <li>IndexedDB API에 대한 레퍼런스 문서는, <a href="/ko/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> 글과 그 하위 페이지에 있는 IndexedDB에 사용되는 객체의 타입들에 대한 설명을 보세요.</li> - <li>브라우저가 뒷단에서 데이터를 어떻게 저장하는지에 대한 좀 더 많은 정보는 <a href="/ko/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a>를 읽어보세요.</li> -</ul> - -<h2 id="IndexedDB_개요">IndexedDB 개요</h2> - -<p>IndexedDB는 "키(key)"로 지정된 객체를 저장하고 검색할 수 있도록 도와줍니다. 데이터베이스에 적용하는 모든 변경은 트렌잭션 안에서 일어납니다. 대부분의 웹 스토리지 솔루션과 마찬가지로, IndexedDB는 동일 출처 정책 (<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>)을 따릅니다. 따라서 당신이 한 도메인의 데이터에 접근하고 있는 동안, 다른 도메인의 데이터에 접근할 수 없습니다.</p> - -<p>IndexedDB는 <a href="/ko/docs/Web/API/Web_Workers_API/basic_usage">웹 워커</a>를 포함하는 대부분의 문맥(컨텍스트)에 사용될 수 있는 비동기(<a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asynchronous</a>) API입니다. 웹 워커에서 사용하기 위해 동기(<a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">synchronous</a>) 버전도 존재했지만, 웹 커뮤니티의 관심부족으로 웹 스펙에서 제거되었습니다.</p> - -<p>IndexedDB는 WebSQL 데이터베이스와 경쟁 관계에 있었지만, W3C는 2010 11월 8일에 WebSQL을 폐기(deprecated)하였습니다. IndexedDB와 WebSQL 모두 데이터 저장을 위한 솔루션이지만, 동일한 기능을 제공하지는 않습니다. WebSQL Database는 관계형 데이터베이스 접근 시스템인 반면, IndexedDB는 인덱스 테이블 시스템입니다.</p> - -<h2 id="concepts" name="concepts">주요 개념들</h2> - -<p>만약 당신이 다른 DB 시스템을 사용해봤던 경험이 있다면 오히려 잘못된 추측으로 인해 IndexedDB로 작업할 때 힘들어질 수도 있습니다. 그러므로 다음의 중요한 개념들을 잘 정리해 두어야 합니다.</p> - -<ul> - <li> - <p><strong>IndexedDB 데이터베이스는 키(key)-값(value) 한 쌍을 저장합니다.</strong> 값은 복잡한 구조의 객체가 될 수 있고, 키는 이 객체의 프로퍼티가 될 수 있습니다. 빠른 검색을 위해 저장된 계산(sorted enumeration)뿐만 아니라, 객체의 속성을 사용하는 인덱스를 만들 수 있습니다. 키는 바이너리 객체도 될 수 있습니다.</p> - </li> - <li> - <p><strong>IndexedDB는 트랜젝션 데이터베이스 모델을 기반으로 만들어졌습니다</strong>. 당신이 IndexedDB에서 하는 모든 것은 언제나 트랜젝션(<a href="#gloss_transaction">transaction</a>) 문맥(컨텍스트) 내에서 발생합니다. IndexedDB API는 인덱스, 테이블, 커서, 그 외 다른 것을 나타내는 많은 객체를 제공하지만, 이들 각각은 특정 트랜젝션에 묶여있습니다. 그러므로, 당신은 트랜젝션 밖에서 명령을 실행하거나 커서를 열 수 없습니다. 트랜젝션은 명확한 수명(well-defined lifetime)을 가지고 있어서 트랜젝션이 완료된 후에 트랜젝션을 사용하려고 시도하면 예외가 발생합니다. 또한, 트랜젝션은 오토 커밋이고, 수동으로 커밋될 수 없습니다.</p> - - <p>한 사용자가 당신이 만든 웹앱 인스턴스를 두 개의 다른 tabs에서 각각 동시에 열면 어떤 일이 일어날 수 있는지 생각해본다면, 이 트랜젝션 모델이 얼마나 유용한지 알 수 있습니다. 이러한 상황에서 트랜젝션 작업이 없다면, 두 개의 웹앱 인스턴스는 각각의 변경사항으로 인해 충돌할 수도 있습니다. 만약 데이터베이스의 트랜젝션에 익숙하지 않다면, <a href="https://en.wikipedia.org/wiki/Database_transaction">트랜젝션에 대한 위키피디아의 글</a>을 읽어 보세요. 또 정의 섹션의 <a href="#gloss_transaction">transaction</a>을 보세요.</p> - </li> - <li> - <p><strong>The IndexedDB API는 대부분 비동기 방식입니다.</strong> API는 값을 반환하는 방식으로 데이터를 주지 않습니다. 데이터를 받으려면 콜백 함수를 전달해야 합니다. 동기(synchronous) 방식으로는 하나의 값을 데이터베이스에 "저장"하거나 데이터베이스로부터 값을 "조회"할 수 없습니다. 대신, 데이터베이스 작업이 발생하도록 "요청(request)"을 해야 합니다. 작업이 완료되면 DOM 이벤트를 통해 알림을 받고, 이벤트트의 종류를 보면 그 동작이 성공했는지 아닌지를 알 수 있습니다. 처음에는 조금 복잡하게 들릴 수도 있지만, 사실은 <a href="/ko/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a>이 작동하는 방식과 크게 다르지 않습니다.</p> - </li> - <li> - <p><strong>IndexedDB는 많은 request를 사용합니다. </strong>Request는 앞서서 언급되었던 성공 또는 실패 DOM 이벤트를 받는 객체입니다. Request는 <code style="font-size: 14px;">onsucces</code> 와 <code style="font-size: 14px;">onerror</code> 프로퍼티를 가지고 있고, 각각의 프로퍼티에 대해 <code style="font-size: 14px;">addEventListener()</code> 와<code style="font-size: 14px;">removeEventListener()</code>를 호출할 수 있습니다. 또한 request는 request의 상태를 알려주는 <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, 그리고 <code style="font-size: 14px;">errorCode</code> 프로퍼티를 가집니다. 특히 <code style="font-size: 14px;">result</code> 프로퍼티는 request의 생성 방식에 따라 그 값이 매우 다양합니다(예를 들면 <code style="font-size: 14px;">IDBCursor</code> 인스턴스가 될 수도 있고, 데이터베이스에 방금 입력한 값의 키(key)가 될 수도 있습니다.)</p> - </li> - <li> - <p><strong>IndexedDB는 DOM 이벤트를 사용하여 결과가 준비되었음을 알립니다. </strong>DOM 이벤트는 항상 <code style="font-size: 14px;">type</code> 프로퍼티를 가집니다(대체로 <code style="font-size: 14px;">"success"</code> 또는 <code style="font-size: 14px;">"error"</code>로 설정되어 있습니다). 또한 DOM 이벤트는 이벤트가 어디를 향하고 있는지 알려주는 <code style="font-size: 14px;">target</code> 프로퍼티를 가집니다. 대부분의 경우, 이벤트의 <code style="font-size: 14px;">target</code>은 데이터베이스 작업 결과로 생성된 <code style="font-size: 14px;">IDBRequest</code> 객체입니다. Success 이벤트는 버블링 하지 않고, 취소될 수도 없습니다. 반면 Error 이벤트는 버블링되며 취소될 수도 있습니다. error 이벤트는 취소되지 않는 한 자신이 실행되고 있는 트랜잭션은 뭐든지 중단하므로, 이를 알고 있는 것이 중요합니다.</p> - </li> - <li> - <p><strong>IndexedDB는 객체 지향입니다.</strong> IndexedDB는 행열의 모음으로 구성된 테이블을 갖고 있는 관계형 데이터베이스가 아닙니다. 이는 어플리케이션을 설계하고 구축하는 방식에 영향을 끼치는 중요하고 근본적인 차이점입니다.</p> - - <p>전통적인 관계형 데이터베이스 저장소는 데이터의 행과 명시된 데이터 타입을 가진 열의 모음을 저장하고 있습니다. 반면 IndexedDB는 특정 데이터 타입을 저장하기 위한 객체 저장소를 형성하고 나면, 그 객체 저장소에 자바스크립트 객체를 저장하면 됩니다. 각 객체 저장소는 전반에 걸친 쿼리 작업과 반복(iteration) 작업을 효율적으로 만드는 인덱스 모음을 가질 수 있습니다. 만약 당신이 객체 지향 데이터베이스 관리 시스템에 친숙하지 않다면, <a class="external" href="https://en.wikipedia.org/wiki/Object_database" title="http://en.wikipedia.org/wiki/Object_database">Wikipedia article on object database</a>를 읽어 보세요.</p> - </li> - <li> - <p><strong>IndexedDB는 </strong><strong><abbr>SQL문을</abbr> 사용하지 않습니다.</strong> IndexedDB는 커서를 생선하는 index에 대해 쿼리를 사용하는데, 이는 전체 결과 값에 걸쳐 반복을 실행하기 위해 사용합니다. 만약 NoSQL 시스템에 친숙하지 않다면, <a class="external" href="https://en.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">Wikipedia article on NoSQL</a>를 읽어 보세요.</p> - </li> - <li> - <p><a name="origin"><strong>IndexedDB는 하나의 동일 출처 정책(same-origin policy)을 고수합니다</strong></a>. 하나의 출처(origin)는 도메인, 애플리케이션 레이어 프로토콜, 그리고 스크립트가 실행되고 있는 문서의 url 포트입니다. 각 출처는 자신의 연관된 데이터베이스 세트를 가집니다. 모든 데이터베이스는 하나의 출처 안에서 식별하기 위한 하나의 이름을 가집니다.</p> - - <p>IndexedDB의 보안 경계는 다른 출처로 데이터에 접근하는 애플리케이션을 막습니다. 예를 들어, 동일한 출처를 가지고 있는 이유로 <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> 내의 앱이나 페이지가 <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>로부터 데이터를 조회할 수 있는 데 반해, 출처가 다르기 때문에 <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a>(다른 포트) <span style="line-height: 1.5;">또는 </span><a class="link-https" href="https://www.example.com/dir/" rel="freelink" style="line-height: 1.5;">https://www.example.com/dir/</a><span style="line-height: 1.5;"> (다른 프로토콜)로부터는 데이터를 조회할 수 없습니다.</span></p> - - <div class="note"><strong>Note</strong>: 브라우저가 <a href="https://support.mozilla.org/ko/kb/disable-third-party-cookies">서드 파티의 쿠키에 접근할 수 없도록 설정</a>하지 않는 한 서드파티 창의 콘텐츠는 그 안에 임베드된 출처에 대한 IndexedDB 저장소에 접속할 수 있습니다. {{bug("1147821")}}</div> - </li> -</ul> - -<h2 id="definitions" name="definitions">정의</h2> - -<p>이 섹션은 IndexedDB API에서 사용되는 용어들을 정의하고 설명합니다.</p> - -<h3 id="database" name="database">데이터베이스</h3> - -<dl> - <dt><a name="gloss_database">데이터베이스</a></dt> - <dd>일반적으로 하나 혹은 그 이상의 <em><a href="#gloss_object_store" title="#gloss_object_store">객체 저장소</a>로 구성되는 </em>정보의 레파지토리입니다. 개별 데이터베이스는 다음의 내용을 반드시 가져야 합니다. - <ul> - <li>이름(Name). 이것은 하나의 특정 출처 내에서 database를 구별하고 데이터베이스가 존재하는 동안 일정하게 유지됩니다. 이름은 빈 문자열을 포함해서 어떤 문자열 값이라도 될 수 있습니다.</li> - <li> - <p>현재 <a href="#gloss_version"><em>버전</em></a>. 데이터베이스가 처음 만들어질 때, 따로 지정하지 않으면 버전은 정수 1입니다. 각 데이터베이스는 주어진 순간에 오직 하나의 버전을 가질 수 있습니다.</p> - </li> - </ul> - </dd> - <dt><a name="gloss_durable">지속성</a></dt> - <dd> - <p>파이어폭스에서 indexedDB는 지속성을 유지하기 위해 사용됩니다. 즉, 읽기쓰기 트랜젝션{{domxref("IDBTransaction.oncomplete")}}이 모든 데이터가 디스크로 들어갈 수 있도록 보장될 때에만 실행됩니다.</p> - - <p>파이어폭스 40에서, IndexedDB 트랜젝션은 성능을 높이기 위해 지속성 보장을 늦춰왔는데, 이는 IndexedDB를 지원하는 다른 브라우저도 동일한 방식입니다{{Bug("1112702")}}. 이 경우 {{Event("complete")}} 이벤트는 OS가 데이터 쓰기를 하라고 전달한 후, 데이터가 실제로 데이터베이스에 반영되기 전에 잠재적으로 실행됩니다. 이벤트는 이전보다 더 빠르게 전달될지도 모르지만, 만약 OS가 다운되거나 데이터가 데이터베이스에 반영되기 전에 시스템 전원이 부족하면, 전체 트랜젝션은 잃게 될 수도 있는 희박한 위험성이 존재합니다. 그런 치명적인 이벤트는 드물기 때문에, 대부분의 소비자는 더 이상 염려할 필요는 없습니다.</p> - - <div class="note"> - <p><strong>Note</strong>: 파이어폭스에서 (나중에 다시 계산 할 수 없는 까다로운 데이터를 저장하는 것)과 같은 몇 가지 이유로 지속성을 보장하고 싶다면, <code>complete</code> 이벤트가 전달되기 전에 아직 정식 표준이 아닌 실험적인 <code>readwriteflush</code> 모드를 이용하여 트랜젝션을 데이터베이스에 강제로 반영할 수 있습니다. ({{domxref("IDBDatabase.transaction")}} 참고.) 현재는 실험적으로 적용되어 있고(experimental), <code>about:config</code>에서<code>dom.indexedDB.experimental</code>값이 <code>true</code> 로 설정되어 있을 때만 사용할 수 있습니다.</p> - </div> - </dd> - <dt><a name="gloss_object_store">객체 저장소 ( Object Store )</a></dt> - <dd> - <p>데이터베이스에 데이터가 저장되는 매커니즘입니다. 객체 저장소는 키(key)와 값(value)의 쌍으로 된 레코드를 영구적으로 잡습니다. 한 객체 저장소 안의 레코드는 키(key)에 따라 오름차순으로 정렬됩니다.</p> - - <p>모든 객체 저장소는 데이터베이스 안에서 고유한 이름을 가져야 합니다. 객체 저장소는 선택적으로 <em><a href="#gloss_keygenerator">key generator</a></em>와 <em><a href="#gloss_keypath">key path</a>를 가질 수 있습니다</em>. 만약 객체 저장소가 key path를 가진다면, 그것은 <em><a href="#gloss_inline_key">in-line keys</a>를 사용합니다. </em> 아니면, 그것은 <em><a href="#gloss_outofline_key">out-of-line keys</a>를 사용하는 것입니다.</em></p> - - <p>객체 저장소에 대한 보다 자세한 정보는, <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> 또는 <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>를 참조하세요.</p> - </dd> - <dt><a name="gloss_version">version</a></dt> - <dd>Database가 처음 만들어질 때, version은 정수형 숫자로 1입니다. 각 database는 하나의 version을 집니다; 하나의 데이터베이스가 한번에 여러 version으로 존재할 수 없다. version을 바꾸는 유일한 방법은 현재 버전보다 큰 버전으로 그것을 여는 것입니다. 이렇ㄱ하면 <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>트랜잭션을 시작하고</em> <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event를 발생시킵니다. database의 schema를 변경하려면 upgradeneed 이벤트 핸들러내에서 수행해야 합니다.</dd> - <dd>Note: 이 스펙은 <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">most recent specification</a>, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> method.</dd> - <dt><a name="gloss_database_connection">database connection</a></dt> - <dd> <em><a href="#gloss_database">database</a>를 여는 것에 의해 생성되는 operation</em>. 한 주어진 database는 동시에 여러개의 connections를 가질 수 있다.</dd> - <dt><a name="gloss_transaction">transaction</a></dt> - <dd> - <p>특정 database에 대한 data-access와 data-modification operations의 원자적이고 견고한 집합. 그것이 database에서 당신이 data로 상호작용하는 방법이다. 사실, database에서의 어떠한 data의 읽기 또는 변경도 transaction 내에서 일어나야 한다.</p> - - <p>하나의 database connection은 한번에 그에 연관된 여러 active transaction을 가질 수 있다, writing transactions이 겹치는 <em><a href="#scope">scopes</a>을 갖지 않는 동안</em>. 생성에서 정의되는 transactions의 scope은 그 transaction이 어느 object stores와 상호작용할 수 있는지를 결정하고 그 transaction의 lifetime동안 일정하다. 따라서, 예를 들어, 만약 한 database connection이 <code>flyingMonkey</code> object store를 커버하는 scope의 writing transaction을 이미 가지면, 당신은 <code>unicornCentaur과</code> <code>unicornPegasus</code> object stores의 scope을 가진 두번째 transaction을 시작할 수 있다. reading transactions로서, 당신은 여러개를 가질 수 있다 — 심지어 겹치는 것들이라도.</p> - - <p>Transactions는 short-lived일 것이 기대된다, 그래서 브라우저는 너무 오래걸리는 transaction을 종료할 수 있다, 그 long-running transaction이 lock한 storage resources를 해제하기 위해. 당신은 transaction을 abort할 수 있다 , 이는 그 transaction에서 만들어진 변경들을 roll back한다. 그리고 당신은 심지어 transaction을 abort하기 위해 그것이 시작되거나 활성화되기를 기다릴 필요가 없다.</p> - - <p>Transaction의 세가지 모드는: <code>readwrite</code>, <code>readonly</code>, 그리고 <code>versionchange</code>. Object stores와 indexes를 생성하는 유일한 방법은 <a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> transaction을 이용하는 것이다. transaction types를 더 배우기 위해, <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>에 대한 reference article을 보라.</p> - - <p>모든 것은 하나의 transaction에서 일어나기 때문에, IndexedDB에서 그것은 매우 중요한 개념이다. transactions에 대해 더 배우기 위해, 특히 그것들이 어떻게 versioning과 관련되는가에 대해, <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a>를 보라, 그는 또한 reference documentation을 가진다. synchronous API에 대한 문서를 위해, <a href="../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>를 보라.</p> - </dd> - <dt><a name="gloss_request">request</a></dt> - <dd>database에 읽고 쓰기를 행하는 operation. 모든 request는 하나의 읽기 혹은 쓰기 operation을 나타낸다.</dd> - <dt><a name="gloss_index">index</a></dt> - <dd> - <p>하나의 index는 다른 object store의 records를 찾기 위한 specialized object store이다, <em>referenced object store라 불리는</em>. index는 그 records의 value part가 referenced object store의 한 record의 key part인 영구적인 key-value storage이다. 하나의 index의 records는 referenced object안에 record가 삽입되고 update되고 삭제될 때마다 자동적으로 생성된다. 하나의 index의 각 record는 그의 referenced object store의 오직 하나의 record를 가리킬 수 있다, 그러나 여러 indexes가 같은 object store를 참조할 수 있다. object store가 변할 때, 그 object store를 참조하는 모든 index는 자동으로 update된다.</p> - - <p><span style="line-height: 1.5;">다른 방법으로, </span><a href="#gloss_key" style="line-height: 1.5;">key</a><span style="line-height: 1.5;">를 사용해서 object store에서 records를 찾을 수 있다</span><em>.</em></p> - - <p>indexes 사용하기에 대해 더 배우기 위해, <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>를 보라. index에 대한 reference documentation을 위해, <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>를 보라.</p> - </dd> -</dl> - -<h3 id="key" name="key">Key and value</h3> - -<dl> - <dt><a name="gloss_key">key</a></dt> - <dd> - <p>object store에서 이에 의해 저장된 values가 조직되고 조회되는 하나의 data value. object store는 세 sources 중 하나로부터 key를 이끌어낼 수 있다: <em><a href="#gloss_keygenerator">key generator</a></em>, <em><a href="#gloss_keypath">key path</a></em>, 또는 명시적으로 지정된 value. key는 그 앞에 있는 것보다 큰 값을 지닌 한 data type의 것이어야 한다. object store의 각 record는 같은 store 내에서 유일한 key를 가져야 한다, 따라서 당신은 주어진 object store에서 같은 key의 여러 records를 가질 수 없다.</p> - - <p>하나의 key는 다음의 types 중 하나가 될 수 있다: <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float, 그리고 <a href="/en/JavaScript/Reference/Global_Objects/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a>. arrays에 대해, key는 empty value로부터 infinity의 범위가 될 수 있다. 그리고 당신은 array 내에 array를 포함할 수 있다. string 또는 integer의 key만 사용해야 한다는 요구사항은 없다.</p> - - <p>다른 방법으로, 당신은 <em><a href="#gloss_index">index</a>를 사용해서 object store에서 records를 찾을 수 있다.</em></p> - </dd> - <dt><a name="gloss_keygenerator">key generator</a></dt> - <dd>정렬 sequence로 새 keys를 생성하기 위한 mechanism. 만약 한 object store가 key generator를 가지지 않으면, application은 저장되는 records를 위한 keys를 제공해야 한다. Generators는 stores 간에 공유되지 않는다. 이것은 브라우저 구현 세부사항에 가깝다, 때문에 web 개발에서, 당신은 실제로 key generators를 만들고 접근할 필요가 없다.</dd> - <dt><a name="gloss_inline_key">in-line key</a></dt> - <dd>저장되는 value의 부분으로서 저장되는 key. <em>key path를 사용함으로써 찾아진다</em>. 하나의 in-line key는 generator를 이용해서 생성될 수 있다. key가 생성된 후에, 그것은 key path를 사용하는 value에 저장될 수 있거나 key로서 사용될 수 있다.</dd> - <dt><a name="gloss_outofline_key">out-of-line key</a></dt> - <dd>저장되는 value와는 따로 저장되는 key.</dd> - <dt><a name="gloss_keypath">key path</a></dt> - <dd>object store 또는 index에서 브라우저가 어디로부터 key를 추출해야 하는지 정의한다. 하나의 valid key path는 다음 중 하나를 포함할 수 있다: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. 그것은 spaces를 포함할 수 없다.</dd> - <dt><a name="gloss_value">value</a></dt> - <dd> - <p>각각의 record는 하나의 value를 가진다, 이는 javascript로 표현될 수 있는 어떤 것이라도 포함할 수 있다, <a href="/en/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/en/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/en/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a>, 그리고 null을 포함해서.</p> - - <p>object 또는 array가 저장될 때, 그 object 또는 array의 properties 와 values는 적합한 어떤 값이라도 될 수 있다.</p> - - <p><a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a>와 files가 저장될 수 있다, cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a>.</p> - </dd> -</dl> - -<h3 id="range" name="range">Range and scope</h3> - -<dl> - <dt>scope</dt> - <dd>한 transaction이 적용되는 object stores와 indexe. read-only transactions의 scope은 겹칠 수 있고 동시에 실행될 수 있다. 한편으로, writing transactions의 scope은 겹칠 수 없다. 당신은 여전히 동시에 같은 scope의 여러 transaction을 실행할 수 있지만 그들은 queue up하고 하나하나 차례로 실행된다.</dd> - <dt>cursor</dt> - <dd>한 key range의 여러 records에 대한 iterating을 위한 mechanism. The cursor는 그것이 iterating하는 것이 어느 index또는 object store인지 가리키는 한 source를 가진다. 그것은 그 range 내의 position을 가지고, record keys의 순서에서 증가 혹은 감소하는 한 방향으로 움직인다. cursors에 대한 reference documentation을 위해, <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> 또는 <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a>를 보라.</dd> - <dt>key range</dt> - <dd> - <p>keys를 위해 사용되는 몇몇 data type에 대한 하나의 연속 구간. Records는 keys 또는 하나의 range of keys를 사용하는 object sotres와 indexes로부터 조회될 수 있다. 당신은 lower 그리고 upper bound를 사용해서 range를 제한하거나 걸러낼 수 있다. 예를 들어, 당신은 x와 y 사이의 한 key의 모든 값에 대해 iterate할 수 있다.</p> - - <p>key range에 대한 reference documentation을 위해, <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>를 보라.</p> - </dd> -</dl> - -<h2 id="limitations" name="limitations">한계점들</h2> - -<p>IndexedDB는 client-side storage가 필요한 대부분의 경우를 해결하기 위해 만들어졌다. 하지만 그것은 다음과 같은 몇 가지 경우를 해결하진 못 한다:</p> - -<ul> - <li>Internationalized sorting. 모든 언어가 strings를 같은 방법으로 정렬하지 않기 때문에 internationalized sorting은 지원되지 않는다. database가 특정 internationalized order로 데이터를 정렬할 수 없는 반면, 당신이 스스로 database 바깥으로 data를 읽어와서 정렬할 수 있다.</li> - <li>Synchronizing. 이 API는 server-side database와의 동기화를 다루기 위해 제작되지 않았다. 당신이 스스로 client-side indexedDB database를 server-side database와 동기화시키는 코드를 작성해야 한다.</li> - <li>Full text searching. 이 API는 SQL의 <span style="direction: ltr;"><code>LIKE</code> operator의 equivalent를 가지지 않는다. </span></li> -</ul> - -<p>덧붙여서, 다음과 같은 조건에서 브라우저가 데이터베이스를 지울 수 있음을 알아두라:</p> - -<ul> - <li>유저가 삭제를 요청한다. 많은 브라우저는 유저가 주어진 웹페이지에 대해 저장된 데이터를 지울 수 있도록 한다, cookies, bookmarks, stored passwords, 그리고 IndexedDB data를 포함해서.</li> - <li>브라우저가 private browsing mode 상태에 있다. 특정 브라우저들은 (Firefox의 경우) "private browsing" 혹은 (Chrome의 경우) "incognito" modes 를 가지고 있다. 그 session의 끝에서, 브라우저는 그 데이터베이스를 지운다.</li> - <li>disk 또는 quota limit에 다다랐다.</li> - <li>데이터가 오염되었다.</li> - <li>그 feature에 호환되지 않는 변경이 이루어졌다.</li> -</ul> - -<p>정확한 삭제 시점과 브라우져의 DB 수용능력은 때때로 달라질 수 있습니다만, 브라우져 벤더가 지킬려고 노력하는 가장 기본적인 철학은 데이터를 가능한 최대한 데이터를 지킬려고 노력한다는 것입니다.</p> - -<h2 id="next" name="next">Next steps</h2> - -<p>이제 큰 그림은 이해할 수 있게 됐고 아울러 보다 복잡한 사용법을 익힐 준비가 됐네요. 실제로 어떻게 API를 사용하는지 알아보기 위해서, <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>를 살펴봅시다.</p> - -<h2 id="함께_보기">함께 보기</h2> - - - -<ul> - <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> - <li><a href="https://developer.mozilla.org/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li> - <li><a href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li> - <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> -</ul> - - - -<div id="gtx-trans" style="position: absolute; left: 225px; top: 8418px;"> -<div class="gtx-trans-icon"></div> -</div> diff --git a/files/ko/orphaned/web/api/offscreencanvas/toblob/index.html b/files/ko/orphaned/web/api/offscreencanvas/toblob/index.html deleted file mode 100644 index f3cf0b08a9..0000000000 --- a/files/ko/orphaned/web/api/offscreencanvas/toblob/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: OffscreenCanvas.convertToBlob() -slug: orphaned/Web/API/OffscreenCanvas/toBlob -tags: - - API - - Canvas - - Experimental - - Method - - OffscreenCanvas - - Reference -translation_of: Web/API/OffscreenCanvas/toBlob -original_slug: Web/API/OffscreenCanvas/toBlob ---- -<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div> - -<p><strong><code>OffscreenCanvas.convertToBlob()</code></strong> 메소드는 캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 생성합니다.</p> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">Promise<Blob> OffscreenCanvas.convertToBlob(<var>options</var>);</pre> - -<h3 id="매개_변수">매개 변수</h3> - -<dl> - <dt><code>options</code> {{optional_inline}}</dt> - <dd> - <p>객체를 {{domxref("Blob")}} 객체로 전환할 때 다양한 옵션을 줄 수 있습니다.</p> - - <pre class="brush: js">const blob = offscreenCanvas.convertToBlob({ - type: "image/jpeg", - quality: 0.95 -});</pre> - - <p>options:</p> - - <ul> - <li><strong><code>type</code></strong>: 이미지 포맷을 가리키는 {{domxref("DOMString")}}. 상세 타입은 <code>image/png</code></li> - <li><code><strong>quality</strong></code>: <code>type</code> 옵션이 <code>image/jpeg</code> 혹은 <code>image/webp</code> 일 때 이미지의 품질을 가리키는 <code>0</code>과 <code>1</code>사이의 {{jsxref("Number")}}. 이 매개 변수가 다른 값이라면, 이미지 품질의 기본 설정값이 적용됩니다. 다른 매개 변수들은 무시됩니다.</li> - </ul> - </dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 반환하는 {{jsxref("Promise")}}</p> - -<h2 id="예시">예시</h2> - -<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256); -var gl = offscreen.getContext("webgl"); - -// ... gl 컨텍스트를 이용해 무언가를 그립니다 ... - -offscreen.convertToBlob().then(function(blob) { - console.log(blob); -}); - -// Blob { size: 334, type: "image/png" }</pre> - -<h2 id="상세">상세</h2> - -<p>현재 작성되고 있는 중입니다: <a href="https://wiki.whatwg.org/wiki/OffscreenCanvas">OffscreenCanvas</a>.</p> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("api.OffscreenCanvas.convertToBlob")}}</p> -</div> - -<p> </p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li>이 메소드를 정의하는 인터페이스, {{domxref("OffscreenCanvas")}}.</li> -</ul> diff --git a/files/ko/orphaned/web/api/parentnode/append/index.html b/files/ko/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index a488b110bc..0000000000 --- a/files/ko/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>ParentNode.append()</code></strong> 메서드는 <code>ParentNode</code>의 마지막 자식 뒤에 {{domxref("Node")}} 객체 또는 {{domxref("DOMString")}} 객체를 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드처럼 삽입한다.</p> - -<p>{{domxref("Node.appendChild()")}}와 다른 점:</p> - -<ul> - <li><code>ParentNode.append()</code>는 {{domxref("DOMString")}} 객체도 추가할 수 있다. 한편 <code>Node.appendChild()</code>는 오직 {{domxref("Node")}} 객체만 허용한다.</li> - <li><code>ParentNode.append()</code>는 반환하는 값이 없다. 한편 <code>Node.appendChild()</code>는 추가한 {{domxref("Node")}} 객체를 반환한다.</li> - <li><code>ParentNode.append()</code>는 여러 개 노드와 문자를 추가할 수 있다. 한편 <code>Node.appendChild()</code>는 오직 노드 하나만 추가할 수 있다.</li> -</ul> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ParentNode.append((Node or DOMString)... nodes); -</pre> - -<h3 id="매개_변수">매개 변수</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>삽입하려고 하는 {{domxref("Node")}} 객체 집합 또는 {{domxref("DOMString")}} 객체 집합.</dd> -</dl> - -<h3 id="예외">예외</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 계층 구조의 지정된 지점에 노드를 삽입 할 수 없다.</li> -</ul> - -<h2 id="예제">예제</h2> - -<h3 id="요소element_추가하기">요소(element) 추가하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append(p); - -console.log(parent.childNodes); // NodeList [ <p> ] -</pre> - -<h3 id="문자text_추가하기">문자(text) 추가하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); - -console.log(parent.textContent); // "Some text"</pre> - -<h3 id="요소element와_문자text_함께_추가하기">요소(element)와 문자(text) 함께 추가하기</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.append_범위_지정_불가"><code>ParentNode.append()</code> 범위 지정 불가</h3> - -<p><code>append()</code> 메소드는 <code>with</code> 문으로 범위를 지정하지 않는다. 더 자세한 내용은 {{jsxref("Symbol.unscopables")}} 참고.</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - append("foo"); -} -// ReferenceError: append is not defined </pre> - -<h2 id="대체_구현">대체 구현</h2> - -<p>다음 코드를 이용하면 인터넷 익스플로러 9 이상에서 <code>append() method</code>를 대체하여 구현할 수 있다.</p> - -<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('append')) { - return; - } - Object.defineProperty(item, 'append', { - configurable: true, - enumerable: true, - writable: true, - value: function append() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.appendChild(docFrag); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">참고</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>초기 정의</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.ParentNode.append")}}</p> - -<h2 id="참고">참고</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/parentnode/children/index.html b/files/ko/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 71dd79c408..0000000000 --- a/files/ko/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -<div>{{ APIRef("DOM") }}</div> - -<p><span class="seoSummary">{{domxref("ParentNode")}}의 속성 <code><strong>children</strong></code>은 호출된 요소의 모든 자식 노드의 {{domxref("Element","elements")}}를 담고있는 실시간 {{domxref("HTMLCollection")}}을 반환합니다.</span></p> - -<h2 id="Syntax">Syntax </h2> - -<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre> - -<h3 id="Value">Value</h3> - -<p>실시간이며, <code>node</code>의 자식 DOM 요소들의 정렬된 컬렉션인 {{ domxref("HTMLCollection") }}. 각 자식 요소를 컬렉션 안에서 접근하기 위해서 {{domxref("HTMLCollection.item", "item()")}} 메소드를 이용하거나 Javascript 배열 스타일의 문법을 사용할 수 있습니다.</p> - -<p>만약 노드가 자식요소를 갖고 있지 않나면, <code>children</code>은 0의 <code>length</code>를 가진 빈 리스트 일 것입니다.</p> - -<h2 id="Example">Example</h2> - -<pre class="brush: js">var foo = document.getElementById('foo'); -for (var i = 0; i < foo.children.length; i++) { - console.log(foo.children[i].tagName); -} -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">// Overwrites native 'children' prototype. -// Adds Document & DocumentFragment support for IE9 & Safari. -// Returns array instead of HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.children == null) { - Object.defineProperty(constructor.prototype, 'children', { - get: function() { - var i = 0, node, nodes = this.childNodes, children = []; - while (node = nodes[i++]) { - if (node.nodeType === 1) { - children.push(node); - } - } - return children; - } - }); - } -})(window.Node || window.Element); -</pre> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.children")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} interfaces.</li> - <li> - <div class="syntaxbox">Object types implementing this interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> - </li> - <li> - <div class="syntaxbox">{{domxref("Node.childNodes")}}</div> - </li> -</ul> diff --git a/files/ko/orphaned/web/api/parentnode/index.html b/files/ko/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 00fe1aba9d..0000000000 --- a/files/ko/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - Mixin - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><code><strong>ParentNode</strong></code> 믹스인<sup>mixin</sup>은 자식을 가질 수 있는 모든 종류의 {{domxref("Node")}} 객체가 공통으로 가지는 메서드와 속성을 가집니다.</span> {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("DocumentFragment")}} 객체가 구현합니다.</p> - -<p><a href="/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">선택자로 DOM 요소 선택하기</a> 문서를 참고하여 <a href="/ko/docs/Web/CSS/CSS_Selectors">CSS 선택자</a>로 원하는 노드나 요소를 선택하는 법을 알아보세요.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> - <dd><code>ParentNode</code>가 가진 자식 중 요소의 수를 반환합니다.</dd> - <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> - <dd><code>ParentNode</code>가 가진 모든 자식 중 요소만 모은 {{domxref("HTMLCollection")}}을 반환합니다.</dd> - <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> - <dd><code>ParentNode</code>의 자식이자 {{jsxref("Element")}}인 객체 중 첫 번째를 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.</dd> - <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> - <dd><code>ParentNode</code>의 자식이자 {{jsxref("Element")}}인 객체 중 마지막을 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> - <dd><code>ParentNode</code>의 마지막 자식 다음에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. <code>DOMString</code> 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.</dd> - <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> - <dd><code>ParentNode</code>의 첫 번째 자식 이전에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. <code>DOMString</code> 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.</dd> - <dt>{{domxref("ParentNode.querySelector()")}}</dt> - <dd>현재 <code>ParentNode</code>를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 첫 번째 {{domxref("Element")}}를 반환합니다.</dd> - <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> - <dd>현재 <code>ParentNode</code>를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 모든 요소의 {{domxref("NodeList")}}를 반환합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.ParentNode")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{domxref("ChildNode")}} 순수 인터페이스.</li> - <li> - <div class="syntaxbox"><code>ParentNode</code>를 구현하는 {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/ko/orphaned/web/api/parentnode/prepend/index.html b/files/ko/orphaned/web/api/parentnode/prepend/index.html deleted file mode 100644 index 989246cdc1..0000000000 --- a/files/ko/orphaned/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend -translation_of: Web/API/ParentNode/prepend -original_slug: Web/API/ParentNode/prepend ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>ParentNode.prepend()</code></strong> 메소드는 {{domxref("Node")}} 객체 또는{{domxref("DOMString")}} 객체를 {{domxref("ParentNode")}}의 첫 자식노드 앞에 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입된다.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>nodesToPrepend</code></dt> - <dd>One or more nodes to insert before the first child node currently in the <code>ParentNode</code>. Each node can be specified as either a {{domxref("Node")}} object or as a string; strings are inserted as new {{domxref("Text")}} nodes.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p><code>undefined</code>.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="Prepending_an_element">Prepending an element</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -var span = document.createElement("span"); -parent.append(p); -parent.prepend(span); - -console.log(parent.childNodes); // NodeList [ <span>, <p> ] -</pre> - -<h3 id="Prepending_text">Prepending text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); -parent.prepend("Headline: "); - -console.log(parent.textContent); // "Headline: Some text"</pre> - -<h3 id="Appending_an_element_and_text">Appending an element and text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.prepend("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.prepend()_is_unscopable"><code>ParentNode.prepend()</code> is unscopable</h3> - -<p>The <code>prepend()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - prepend("foo"); -} -// ReferenceError: prepend is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>You can polyfill the <code>prepend()</code> method if it's not available:</p> - -<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('prepend')) { - return; - } - Object.defineProperty(item, 'prepend', { - configurable: true, - enumerable: true, - writable: true, - value: function prepend() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.insertBefore(docFrag, this.firstChild); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.prepend")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html b/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html deleted file mode 100644 index ef2e3e7be4..0000000000 --- a/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: RTCPeerConnection.onidentityresult -slug: orphaned/Web/API/RTCPeerConnection/onidentityresult -translation_of: Web/API/RTCPeerConnection/onidentityresult -original_slug: Web/API/RTCPeerConnection/onidentityresult ---- -<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> - -<p><code><strong>RTCPeerConnection.onidentityresult</strong></code> 이벤트 핸들러는 {{domxref("RTCPeerConnection")}}가 {{domxref("RTCIdentityEvent")}} 타입의 {{event("identityresult")}} 이벤트를 수신하게되면 실행되는 코드를 담고 있는 속성입니다. 이러한 이벤트는 {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}} 혹은 offer 혹은 answer를 생성하는 과정에 의해 식별인자 주장이 생성되면 전송됩니다.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="eval"><em>peerconnection</em>.onidentityresult = <em>function</em>; -</pre> - -<h3 id="값">값</h3> - -<ul> - <li><code>function</code> 은 개발자가 정의한 함수로 괄호 <code>()</code>나 매개 변수 혹은 <code>function(event) {...}</code>와 같은 이름 없는 함수 정의가 필요 없습니다. 이벤트 핸들러는 항상 {{domxref("RTCIdentityEvent")}} 타입의 이벤트를 포함하는 하나의 변수를 가집니다. </li> -</ul> - -<h2 id="예시">예시</h2> - -<pre class="brush: js">pc.onidentityresult = function(ev) { alert("onidentityresult event detected!"); }; -</pre> - -<h2 id="Specifications" name="Specifications">사양서</h2> - -<table class="standard-table" style="height: 49px; width: 1000px;"> - <thead> - <tr> - <th scope="col">사양서</th> - <th scope="col">상태</th> - <th scope="col">코멘트</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onidentityresult', 'RTCPeerConnection.onidentityresult') }}</td> - <td>{{ Spec2('WebRTC 1.0') }}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.RTCPeerConnection.onidentityresult")}}</p> - -<h2 id="참조">참조</h2> - -<ul> - <li>{{event("identityresult")}} 이벤트와 해당 타입인 {{domxref("RTCIdentityEvent")}}를 참조하십시오.</li> -</ul> diff --git a/files/ko/orphaned/web/css/index/index.html b/files/ko/orphaned/web/css/index/index.html deleted file mode 100644 index 52279781f5..0000000000 --- a/files/ko/orphaned/web/css/index/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: CSS documentation index -slug: orphaned/Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index -original_slug: Web/CSS/Index ---- -<p>{{Index("/ko/docs/Web/CSS")}}</p> diff --git a/files/ko/orphaned/web/css/linear-gradient()/index.html b/files/ko/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index ba07032e05..0000000000 --- a/files/ko/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: linear-gradient -slug: orphaned/Web/CSS/linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Graphics - - Layout - - Reference - - Web - - gradient - - 그라데이션 - - 그레이디언트 -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>linear-gradient()</code></strong> 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("<image>")}}의 특별한 종류인 {{cssxref("<gradient>")}} 자료형입니다.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox notranslate">/* 45도로 기울어진 파랑 시작 빨강 종료 그레이디언트 */ -linear-gradient(45deg, blue, red); - -/* 우하단에서 좌상단으로, 파랑 시작 빨강 종료 그레이디언트 */ -linear-gradient(to left top, blue, red); - -/* 색상 정지점: 아래에서 위로, - 파랑에서 시작해 길이의 40%에서 초록으로, - 빨강 종료 그레이디언트 */ -linear-gradient(0deg, blue, green 40%, red); - -/* 색상 힌트: 왼쪽에서 오른쪽으로, - 빨강에서 시작해 길이의 10% 지점에서 중간 색상으로, - 나머지 90% 길이 동안 파랑으로 변하는 그레이디언트 */ -linear-gradient(.25turn, red, 10%, blue); - -/* 다중 위치 색상 정지점: 45도 기울어진, - 좌하단 절반 빨강, 우상단 파랑 절반에 - 두 색이 만나는 지점을 정확히 나누는 그레이디언트 */ -linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre> - -<h3 id="값">값</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>그레이디언트 축의 시작점. 지정할 경우, <code>to</code> 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있습니다. 하나는 수평 방향(<code style="font-size: 14px;">left</code> 또는 <code>right</code>)이고, 다른 하나는 수직 방향(<code>top</code> 또는 <code>bottom</code>)입니다. 방향 키워드의 순서는 상관하지 않으며, 기본값은 <code>to bottom</code>입니다.</dd> - <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> 값은 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>와 같습니다. 나머지 값은 각도로 변환됩니다.</dd> - <dt>{{cssxref("<angle>")}}</dt> - <dd>그레이디언트 축의 방향. <code>0deg</code>는 <code>to top</code>과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.</dd> - <dt><code><linear-color-stop></code></dt> - <dd>색상 정지점의 {{CSSxRef("<color>")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("<percentage>")}} 또는 {{CSSxRef("<length>")}})</dd> - <dt><code><color-hint></code></dt> - <dd><code>color-hint</code>는 두 인접한 색상 정지점 사이에서 그레이디언트가 진행하는 방식을 지정하는 보간 힌트입니다. 길이는 두 정지점 간의 길이에서 어느 지점에 그 중간 색에 도달해야 하는지 지정합니다. 생략할 경우 가운데에서 중간 색에 도달합니다.</dd> - <dd> - <div class="note"> - <p><strong>참고:</strong> <a href="#다중_위치_색상_정지점을_가진_그레이디언트">CSS 그레이디언트에서의 색상 정지점 렌더링</a>은 <a href="/ko/docs/Web/SVG/Tutorial/Gradients">SVG 그레이디언트</a>에서의 색상 정지점과 동일한 규칙을 따라갑니다.</p> - </div> - </dd> -</dl> - -<h2 id="설명">설명</h2> - -<p>다른 그레이디언트와 마찬가지로, 선형 그레이디언트는 본질 크기를 가지지 않습니다. 즉 기본 크기나 선호 크기, 선호 비율이 없으며, 실제 크기는 그레이디언트를 적용한 요소의 크기와 동일해집니다.</p> - -<p>반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 {{cssxref("repeating-linear-gradient")}} 함수를 사용하세요.</p> - -<p><code><gradient></code>는 <code><image></code>의 한 종류로서 <code><image></code>를 사용하는 곳에만 적용할 수 있습니다. 따라서 <code>linear-gradient()</code>는 {{cssxref("background-color")}}와 같은 {{cssxref("<color>")}} 자료형을 받는 속성에는 사용할 수 없습니다.</p> - -<h3 id="선형_그레이디언트의_구성">선형 그레이디언트의 구성</h3> - -<p>선형 그레이디언트는 하나의 축(그레이디언트 라인)과 두 개 이상의 색상 정지점으로 정의할 수 있습니다. 축 위의 점은 모두 고유한 색을 가집니다. <code>linear-gradient()</code> 함수는 부드러운 그레이디언트를 만들기 위해 축과 직교하는 무수한 선을 그리며, 각 수직선의 색은 축과 교차하는 점의 색과 일치합니다.</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; font-size: 13.63636302948px; height: 383px; line-height: 19.0909080505371px; width: 309px;">그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.</p> - -<p>시작점은 그레이디언트 축의 한 점으로, 첫 번째 색상이 시작하는 지점입니다. 종료점은 마지막 색상이 끝나는 지점입니다. 두 점은 직사각형에서 자신과 같은 사분면에 위치하는 꼭지점으로부터 시작하여 그레이디언트 축과 직교하는 지점으로 정의합니다. 종료점은 시작점의 대칭점으로 간단하게 알아둘 수도 있습니다. 이렇게 다소 복잡한 정의로 인해, 시작점과 가장 가까운 꼭지점이 시작점의 색을, 종료점과 가장 가까운 꼭지점이 종료점의 색을 갖는 특이한 효과를 확인할 수도 있습니다. 이 효과는 "매직 코너"라고 불리기도 합니다.</p> - -<h4 id="그레이디언트_만들기">그레이디언트 만들기</h4> - -<p>그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색 사이로 전환하는, 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 {{cssxref("<length>")}}나 {{cssxref("<percentage>")}}를 사용해 명시적으로 지정할 수 있습니다. 따로 위치를 정하지 않으면 이전 정지점과 다음 정지점의 중간 지점에 위치합니다. 다음 두 그레이디언트는 동일합니다.</p> - -<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> - -<p>기본적으로 그레이디언트에서 색상 전환은 하나의 색상 정지점에서 다른 색상 정지점으로 부드럽게 일어나고, 가운데 지점은 두 색상의 사이값을 가집니다. 그러나 두 색의 사이에 색상 힌트를 넣어서 직접 색의 중간 지점을 정할 수도 있습니다. 다음 예제의 그레이디언트는 시작점에서 10% 지점까지 완전한 빨강이고, 90% 지점까지는 빨강에서 파랑으로 서서히 전환하며, 마지막 10%는 완전한 파랑입니다. 그러나 빨강과 파랑 사이 전환의 중간 지점은 50%가 아닌 30% 지점이 됩니다.</p> - -<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre> - -<p>두 개 이상의 색상 정지점을 같은 위치에 배치하면 부드럽게 전환하는 대신 이전 색과 다음 색이 경계선을 그리며 바로 바뀝니다.</p> - -<p>색상 정지점의 순서는 오름차순이어야 합니다. 다음 정지점의 위치가 이전 정지점보다 앞이면, 이전 정지점의 위치를 재설정하고 색 전환도 경계선을 그리며 일어납니다. 다음 그레이디언트는 30% 지점에서 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환합니다.</p> - -<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%); -</pre> - -<p>색상 정지점이 여러 위치를 가질 수도 있습니다. 색상을 선언할 때 인접한 두 정지점의 위치를 모두 포함할 수 있습니다. 다음 세 그레이디언트는 모두 같습니다.</p> - -<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre> - -<p>기본적으로, 0% 지점에 색을 할당하지 않으면 처음으로 선언한 색이 0%에 배치됩니다. 비슷하게 100% 지점에 색이 없는 경우 마지막 색이 100% 지점까지 도달합니다.</p> - -<h2 id="예제">예제</h2> - -<h3 id="45도_기울어진_그레이디언트">45도 기울어진 그레이디언트</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(45deg, red, blue); -} -</pre> - -<p>{{EmbedLiveSample("45도_기울어진_그레이디언트", 120, 120)}}</p> - -<h3 id="축의_60_지점에서_시작하는_그레이디언트">축의 60% 지점에서 시작하는 그레이디언트</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(135deg, orange 60%, cyan); -}</pre> - -<p>{{EmbedLiveSample("축의_60_지점에서_시작하는_그레이디언트", 120, 120)}}</p> - -<h3 id="다중_위치_색상_정지점을_가진_그레이디언트">다중 위치 색상 정지점을 가진 그레이디언트</h3> - -<p>이 예제는 다중 위치 색상 정지점을 사용하면서, 인접한 색상 정지점의 위치를 같게 하여 줄무늬 효과를 냅니다.</p> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -}</pre> - -<p>{{EmbedLiveSample("다중_위치_색상_정지점을_가진_그레이디언트", 120, 120)}}</p> - -<h3 id="더_많은_예제">더 많은 예제</h3> - -<p><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a> 문서에서 더 많은 예제를 확인하세요.</p> - -<h2 id="Specifications" name="Specifications">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Adds interpolation hints.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a></li> - <li>다른 그레이디언트 함수: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li> - <li>{{CSSxRef("<image>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 836db281db..0000000000 --- a/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: 이벤트 생성 및 트리거 -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - NeedsContent - - 가이드 - - 고급 - - 이벤트 - - 자바스크립트 -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 <strong>인공 이벤트(synthetic events)</strong>라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.</p> - -<h2 id="커스텀_이벤트_생성하기">커스텀 이벤트 생성하기</h2> - -<p>다음과 같이 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 생성자를 사용해 Events 를 생성할 수 있습니다.</p> - -<pre class="brush: js">var event = new Event('build'); - -// 이벤트 리슨. -elem.addEventListener('build', function (e) { /* ... */ }, false); - -// 이벤트 디스패치. -elem.dispatchEvent(event);</pre> - -<p>위 코드 예제는 <a href="/ko/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 메소드를 사용합니다.</p> - -<p>이 생성자는 대부분의 최신 브라우저(Internet Exploere 는 예외)에서 지원됩니다. 더 장황한 접근법(Internet Explorer 에서도 동작하는)은, 아래 <a href="#The_old-fashioned_way" title="#The_old-fashioned_way">옛날 방식</a> 부분을 참고하세요.</p> - -<h3 id="커스텀_데이터_추가_–_CustomEvent()">커스텀 데이터 추가 – CustomEvent()</h3> - -<p>이벤트 객체에 더 많은 데이터를 추가하려면, <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a> 인터페이스가 존재하고 <u><strong>detail</strong></u> 프로퍼티를 통해 커스텀 데이터를 전달할 수 있습니다<br> - <span style="line-height: 1.5;">예를 들면, 다음과 같이 이벤트가 생성될 수 있습니다.</span></p> - -<pre class="brush: js">var event = new CustomEvent('build', { detail: elem.dataset.time });</pre> - -<p>그럼 이벤트 리스너의 부가적인 데이터에 접근할 수 있게 됩니다.</p> - -<pre class="brush: js">function eventHandler(e) { - console.log('The time is: ' + e.detail); -} -</pre> - -<h3 id="옛날_방식">옛날 방식</h3> - -<p>생성 이벤트로의 오래된 접근법은 Java 로부터 영감을 받은 API들을 사용합니다. 다음은 그 예시를 보여줍니다.</p> - -<pre class="brush: js">// 이벤트 생성. -var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event'); - -// 이벤트 이름을 'build' 라 정의. -event.initEvent('build', true, true); - -// 이벤트 리슨. -elem.addEventListener('build', function (e) { - // e.target 은 elem 과 일치 -}, false); - -// target 은 어떤 엘리먼트나 다른 이벤트 타켓이 될 수 있음. -elem.dispatchEvent(event); - -</pre> - -<h3 id="이벤트_버블링">이벤트 버블링</h3> - -<p>자식 엘리먼트로부터 이벤트를 발생시키고 그 조상이 이를 캐치하도록 하는것은 종종 바람직합니다. 선택적으로 데이터도 함께합니다.</p> - -<pre class="brush: html"><form> - <textarea></textarea> -</form> -</pre> - -<pre class="brush: js">const form = document.querySelector('form'); -const textarea = document.querySelector('textarea'); - -// 새로운 이벤트를 생성하고, 버블링을 허용하며, "details" 프로퍼티로 전달할 데이터를 제공합니다 -const eventAwesome = new CustomEvent('awesome', { - bubbles: true, - detail: { text: () => textarea.value } -}); - -// form 엘리먼트는 커스텀 "awesome" 이벤트를 리슨한 후 전달된 text() 메소드의 결과를 콘솔에 출력합니다 -form.addEventListener('awesome', e => console.log(e.detail.text())); - -// 사용자가 입력한대로, form 내의 textarea 는 이벤트를 디스패치/트리거하여 시작점으로 사용합니다 -textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome)); -</pre> - -<h3 id="이벤트를_동적으로_생성하고_디스패칭하기">이벤트를 동적으로 생성하고 디스패칭하기</h3> - -<p>엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.</p> - -<pre class="brush: html"><form> - <textarea></textarea> -</form> -</pre> - -<pre class="brush: js">const form = document.querySelector('form'); -const textarea = document.querySelector('textarea'); - -form.addEventListener('awesome', e => console.log(e.detail.text())); - -textarea.addEventListener('input', function() { - // 이벤트 즉시 생성 및 디스패치/트리거 - // 노트: 선택적으로, 우리는 "함수 표현"("화살표 함수 표현" 대신)을 사용하므로 "this"는 엘리먼트를 나타냅니다 - this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) -}); -</pre> - -<h2 id="내장_이벤트_트리거">내장 이벤트 트리거</h2> - -<p>이 예제는 DOM 메소드를 사용해 체크박스에 클릭을 시뮬레이팅하는 것을 보여줍니다(클릭 이벤트를 프로그래밍적으로 발생시키는 것입니다). <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">동작하는 예제를 확인하세요.</a></p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - view: window, - bubbles: true, - cancelable: true - }); - var cb = document.getElementById('checkbox'); - var cancelled = !cb.dispatchEvent(event); - if (cancelled) { - // 핸들러가 preventDefault 를 호출했음. - alert("cancelled"); - } else { - // 어떤 핸들러도 preventDefault 를 호출하지 않음. - alert("not cancelled"); - } -}</pre> - -<h2 id="함께_보기">함께 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/guide/events/index.html b/files/ko/orphaned/web/guide/events/index.html deleted file mode 100644 index 596c7f932d..0000000000 --- a/files/ko/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsUpdate - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> - -<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p> - -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p> - -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p> - -<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p> - -<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> - -<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p> - -<p>The <strong>process</strong> loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p> - -<p>The <strong>user interaction</strong> with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:</p> - -<ul> - <li>the original 'click' event,</li> - <li>mouse events,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> - <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li> -</ul> - -<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> - -<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> - -<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> - -<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> - -<div class="note"> -<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p> -</div> - -<h2 id="Docs">Docs</h2> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index 3690555d42..0000000000 --- a/files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Overview of Events and Handlers -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers ---- -<div class="summary"> -<p> 이 글은 이벤트 및 이벤트 핸들링(event handling)에 대한 개요로서, 웹 페이지가 열려있는 동안 일어나는 사건(incident)에 대해 반응할 수 있도록 하는 코드 설계 패턴에 대해 설명하고, 현 세대의 웹 브라우저에서 핸들링할 수 있는 사건의 종류에 대해 요약한다.</p> -</div> - -<p> 이벤트와 이벤트 핸들링은 웹 페이지가 사용자에 의해 열린 상태를 유지하는 동안 일어나는 사건에 대한 반응을 구현하기 위한 자바스크립트의 핵심적인 기술이다. 이러한 사건에는 페이지가 전시(display)되기 위한 준비과정 중 일어나는 사건, 웹 페이지상의 컨텐츠와 사용자의 상호작용에 의한 사건, 브라우저가 실행되는 기반 장치와 관련된 사건, 매체 스트림(media stream) 재생이나 애니메이션 시간 간격 등 기타 요인에 의한 사건 등이 있다.</p> - -<p> 이벤트와 이벤트 핸들링은 자바스크립트가 처음 도입된 시점부터 중심적인 역할을 했으며, 이와 함께 브라우저의 렌더링 아키텍처 역시 단일 처리경로(single pass) 페이지 렌더링으로부터 리플로우(reflow) 기반, 이벤트 구동식(driven) 페이지 렌더링 개념으로 바뀌었다.</p> - -<p> 최초에는 브라우저는 페이지의 모든 부분에 대한 문법분석(parse), 처리(process), 그리기(draw) 및 사용자에게 표현(present)까지의 모든 과정이 끝날 때까지 대기하고, 페이지 작업이 끝나면 그 상태로 바뀌지 않고 새 페이지 요청이 있어서 가져오기(fetch)작업이 일어나기 전까지는 그대로의 모습을 유지했다. </p> - -<p> 리플로우 기반 이벤트 구동식 페이지 렌더링 개념으로 바뀐 뒤에는 브라우저는 처리, 그리기, 컨텐츠 표현(present), 반복순환작업을 다시 개시하도록 하는 이벤트 트리거에 대한 대기 등의 작업을 반복순환(loop)하여 수행한다. 이 이벤트 트리거라는 것은 이벤트를 발생하게 하는 사건을 이르는 것으로서, 네트워크상의 자원 로드 완료( 예 : 이미지가 다운로드되어 화면상에 그릴 수 있게 됨), 브라우저에 의한 자원의 문법분석 완료( 예 : HTML페이지 처리가 끝남) 페이지의 컨텐츠와 사용자와의 상호작용(예 : 버튼을 클릭한다) 등이 이러한 사건이 될 수 있다.</p> - -<p> 더글라스 크록포드는 <em>An inconvenient API : The theory of the DOM(불편한 API : DOM의 이론)</em>이라는 제목의 강연에서 이러한 변화를 여러 단원에 걸쳐 설명하였는데, 본래의 작업 흐름에서 이벤트 구동식 브라우저의 작업 흐름으로 바뀌는 것을 다음과 같이 보여주었다.</p> - -<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> - -<p> 두 번째 그림에 보이는 처리방식은 마지막 단계의 작업흐름을 변화시킴으로써 첫 번째 그림의 단일 경로 처리흐름에서 반복순환 흐름으로 바뀐 것을 보여준다. 두 번째 그림은 Paint작업이 끝나면 새로운 이벤트 발생에 대한 처리(이벤트 핸들링)를 하기 위해 이벤트를 기다리게 된다. 이 혁신적인 개념을 이용하면 자원을 다 획득하지 않았더라도 페이지를 부분적으로 렌더링하는 것이 가능하며, 최초에는 자바스크립트에 의해 발전된 이벤트 구동에 의한 동작 효과적으로 구현할 수 있다. (이 강의는 <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">여기</a>를 포함한 다양한 경로로 볼 수 있다) 현재 모든 자바스크립트 코드 실행 환경에서는 이벤트와 이벤트 핸들링을 사용한다.</p> - -<h2 id="이벤트_설계_패턴">이벤트 설계 패턴</h2> - -<p>이벤트 시스템은 근본적으로는 단순한 프로그래밍 설계 패턴이다. 이 패턴는 기본적으로 이벤트의 종류와 다음 사항에 대해 합의된 약속을 기반으로 한다.</p> - -<ul> - <li>각 이벤트를 가리키는 이벤트명 문자열</li> - <li>각 이벤트의 핵심 프로퍼티를 나타내기 위한 자료구조의 형식</li> - <li>각 이벤트를 발동할 자바스크립트 객체</li> -</ul> - -<p>패턴을 구현하기 위해서는 다음이 필요하다.</p> - -<ul> - <li>위에서 약속된 자료구조를 인수로 받는 자바스크립트 함수를 정의한다.</li> - <li>이벤트를 발동할 객체에 약속된 해당 이벤트의 이벤트명을 사용하여 위의 함수를 등록한다.</li> -</ul> - -<p>이 함수는 리스너(listener) 또는 핸들러(handler)라는 혼용된 명칭으로 불린다. 이 패턴은 <a href="/ko/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">커스텀 이벤트에 관한 글</a>에서 설명한 대로의 완전한 커스텀 이벤트를 사용하여 쉽게 구현할 수 있다. 이 패턴은 사용자 입력, 브라우저 활동 등에 의해 발동되는 다양한 이벤트를 정의하는 최신 웹 브라우저에서도 많이 사용한다.</p> - -<p> 최신 웹 브라우저는 이 이벤트 패턴을 표준화된 방식으로 구현한다. 브라우저는 어떤 이벤트의 프로퍼티를 나타내는 자료 구조로서 <code>EventPrototype</code> 객체를 원천으로 하는 어떤 객체를 사용한다. 또한 이러한 자료구조를 핸들링할 함수에 대한 등록 메소드로서 <code>addEventListener </code>메소드를 사용하는데 이것은 인수로서 이벤트명과 핸들러 함수를 받는다<code>.</code> 마지막으로 브라우저는 이벤트 발동자(emitter)로 수많은 객체를 정의하며 또한 이 객체들에 의해 생성되는 여러 이벤트형(event type)을 정의한다.</p> - -<h2 id="Button_Event_Handler" name="Button_Event_Handler">버튼 이벤트 핸들러 데모</h2> - -<p>하나의 예시로서 브라우저 <code>button 요소(element)는 'click'이라는 이름의 이벤트를 마우스 클릭 또는 터치스크린의 경우 손가락 터치에 반응하여 발동시킨다.</code> 버튼은 HTML 페이지에서 다음과 같이 정의할 수 있다.</p> - -<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> - -<p>그리고 자바스크립트 코드에서 'click' 이벤트에 대한 리스너로서의 함수, 즉 핸들러로 사용할 함수를 정의한다.</p> - -<pre class="brush: js">var example_click_handler = function (ev){ - var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; - alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); -};</pre> - -<p>그 다음 해당 <code>Button</code> 객체와 함께 위의 함수를 등록하는데, 첫 번째 방법은 HTML 페이지의 DOM(문서 객체 모델) 표현법을 이용하여 다음과 같이 스크립트상에서 나타내는 방법이다. </p> - -<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); -buttonDOMElement.addEventListener('click', example_click_handler);</pre> - -<p>또 다른 방법은 HTML 페이지 상에서 'onclick' 애트리뷰트의 값으로 핸들러로 쓸 함수를 대입시키는 것인데, 보통 이 방식은 매우 단순한 웹 페이지에서나 쓰인다.</p> - -<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> - -<p>This code relies on the agreement that there is a kind of event called <code>'click'</code> which will call any listener (or 'handler') function with an <code>Event</code> object argument (actually, in this case a derivative <code>MouseEvent</code> object) and which will be fired by HTML <code>button</code> elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the <code>buttonDOMElement</code> Javascript object would call the <code>example_click_handler</code> function with an <code>Event</code> object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the <code>ev</code> object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.</p> - -<p>As a second example, much modern Javascript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:</p> - -<pre class="brush: js">var funcInit = function(){ - // user code goes here and can safetly address all the HTML elements from the page - // since the document has successfully been 'loaded' -} -document.addEventListener('DOMContentLoaded', funcInit); -</pre> - -<p>so that this code will only be executed after the <code>document</code> object emits the <code>'DOMContentLoaded'</code> event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.</p> - -<p>The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.</p> - -<h2 id="Notable_events">Notable events</h2> - -<p>Web browsers define a large number of events so it is not practical to list them all. The <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> attempts to maintain a list of the standard Events used in modern web browsers.</p> - -<p>In general, we can distinguish events of different kinds based on the object emitting the event including:</p> - -<ul> - <li>the <code>window</code> object, such as due to resizing the browser,</li> - <li>the <code>window.screen</code> object, such as due to changes in device orientation,</li> - <li>the <code>document</code> object, including the loading, modification, user interaction, and unloading of the page,</li> - <li>the objects in the DOM (document object model) tree including user interactions or modifications,</li> - <li>the <code>XMLHttpRequest</code> objects used for network requests, and</li> - <li>the media objects such as <code>audio</code> and <code>video</code>, when the media stream players change state.</li> -</ul> - -<p>although this list is currently incomplete.</p> - -<p>Some notable events are:</p> - -<div class="note"> -<p><strong>Note:</strong> This list of will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> or in <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> -</div> - -<ul> - <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a> when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed,</li> - <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a> when the height or the width of the browser window is changed by a user,</li> - <li>the DOM object <a href="/en-US/docs/Web/API/Document"><code>document</code></a> representing the HTML document emits an event called<code> <a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code> when the document has finished loading,</li> - <li>the DOM node objects such as <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> or <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a> emit an event called <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a> when the user presses the mouse button while the mouse pointer is on top of the DOM node in the HTML page.</li> -</ul> - -<p> </p> - -<h2 id="The_Event_object_hierarchy">The Event object hierarchy</h2> - -<p>The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the <code>EventPrototype</code> object.</p> - -<p>A partial diagram of the class hierarchy of event objects is:</p> - -<div class="note"> -<p><strong>Note:</strong> This diagram is incomplete.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> - -<p>The Web API Documentation contains <a href="/en-US/docs/Web/API/Event">a page defining the Event object</a> which also includes the known DOM event subclasses of the <code>Event</code> object.</p> - -<h2 id="Documents">Documents</h2> - -<p>Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:</p> - -<ul> - <li>this <a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> which is part of the <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li> - <li>the <a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> - <li>the Web API documentation for the <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object.</li> -</ul> - -<p> </p> - -<p> </p> - -<p> </p> diff --git a/files/ko/orphaned/web/guide/html/html5/index.html b/files/ko/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index f7a60615ef..0000000000 --- a/files/ko/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -<p><strong>HTML5</strong>는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 명세</a>는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중 많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 및 <a href="/ko/List_of_Mozilla-Based_Applications" title="ko/List of Mozilla-Based Applications">다른 많은 제품</a>으로 사용되어 있는 Mozilla의 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.</p> - -<p>(<a href="/ko/HTML/HTML5/HTML5_Thematic_Classification" title="ko/HTML/HTML5/HTML5 Thematic Classification">HTML5의 문서에 대한 다른 분류</a>도 참고하세요.)</p> - -<h2 id="HTML5_소개">HTML5 소개</h2> - -<dl> - <dt><a href="/ko/HTML/HTML5/Introduction_to_HTML5" title="ko/HTML/Introduction to HTML5"><strong>HTML5의 소개</strong></a></dt> - <dd>이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.</dd> -</dl> - -<h2 id="HTML5의_요소">HTML5의 요소</h2> - -<dl> - <dt><a href="/ko/HTML/HTML5/HTML5_Tags_List" title="ko/HTML/HTML5/HTML5 Tags List"><strong>HTML5 요소·태그의 목록</strong></a></dt> - <dd>현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.</dd> - <dt><a href="/Ja/Using_HTML5_audio_and_video" title="ko/Using_audio_and_video_in_Firefox">오디오/비디오 사용하기</a></dt> - <dd>Firefox 3.5이상에서 HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.</dd> - <dt><a href="/ko/HTML/Forms_in_HTML" title="ko/HTML/HTML5/Forms in HTML5">HTML5 웹 폼양식</a></dt> - <dd>HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.</dd> - <dt><a href="/ko/Sections_and_outlines_of_an_HTML5_document" title="ko/Sections and Outlines of an HTML5 document">HTML5 섹션과 아웃라인</a></dt> - <dd>HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.</dd> - <dt>{{ HTMLElement("mark") }} 요소</dt> - <dd>mark 요소는 텍스트중에서의 특별한<em> 관련성</em>을 강조시키기 위해서 이용합니다.</dd> - <dt>{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소</dt> - <dd>주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.</dd> -</dl> - -<h3 id="Canvas_기술_지원">Canvas 기술 지원</h3> - -<dl> - <dt><a href="/ko/Canvas_tutorial" title="https://developer.mozilla.org/ko/Canvas_tutorial">Canvas 튜토리얼</a></dt> - <dd>새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.</dd> - <dt><a href="/ko/Drawing_text_using_a_canvas" title="ko/Drawing_text_using_a_canvas"><code>canvas</code> 요소의 HTML5 text API</a></dt> - <dd>{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.</dd> -</dl> - -<h2 id="웹_애플리케이션_기능">웹 애플리케이션 기능</h2> - -<dl> - <dt><a href="/ko/HTML/Using_the_application_cache" title="ko/Offline_resources_in_Firefox">Firefox 오프 라인 자원</a></dt> - <dd>Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.</dd> - <dt><a href="/ko/Online_and_offline_events" title="ko/Online_and_offline_events">Online 이벤트와 Offline 이벤트</a></dt> - <dd>Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.</dd> - <dt><a href="/ko/DOM/Storage" title="ko/DOM/Storage">WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)</a></dt> - <dd>클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.</dd> - <dt><a href="/ko/HTML/Content_Editable" title="ko/HTML/Content Editable"><code>contentEditable</code> 속성： 웹 사이트 및 위키 편집 용이성</a></dt> - <dd>HTML5 에서는 <code>contentEditable</code> 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.</dd> - <dt><a href="/ko/Using_files_from_web_applications" title="ko/Using_files_from_web_applications">로컬 파일 사용하기</a></dt> - <dd>새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 <a href="/ko/HTML/Element/Input#attr-type" title="ko/HTML/Element/input#attr-type"><strong>type</strong></a> 속성의 값에 <code>file</code>를 지정한 <code>{{ HTMLElement("input") }}</code> 요소에 새롭게 추가된 <a href="/ko/HTML/Element/Input#attr-multiple" title="ko/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.</dd> -</dl> - -<h2 id="DOM_주요_기능">DOM 주요 기능</h2> - -<dl> - <dt><a href="/ko/DOM/document.getElementsByClassName" title="ko/DOM/document.getElementsByClassName">getElementsByClassName</a></dt> - <dd>Document 및 Element 노드에 있어서의 <code>getElementsByClassName</code> 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.</dd> - <dt><a href="/Ja/DragDrop/Drag_and_Drop" title="ko/DragDrop/Drag_and_Drop">드래그 앤 드롭</a></dt> - <dd>HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.</dd> - <dt><a href="/ko/Focus_management_in_HTML" title="ko/Focus_management_in_HTML">HTML 내 포커스 관리</a></dt> - <dd>HTML5가 새로운 <code>activeElement</code> 속성과 <code>hasFocus</code> 속성이 지원되어 있습니다.</dd> - <dt><a href="/ko/Web-based_protocol_handlers" title="ko/Web-based_protocol_handlers">웹 기반 프로토콜 핸들러</a></dt> - <dd><code>navigator.registerProtocolHandler()</code>메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.</dd> -</dl> - -<h2 id="HTML_파서">HTML 파서</h2> - -<p>Gecko의 <a href="/ko/HTML/HTML5/HTML5_Parser" title="ko/HTML/HTML5/HTML5 parser">HTML5 표준 파서</a>(HTML 문서를 DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).</p> - -<h2 id="추가_변경사항">추가 변경사항</h2> - -<ul> - <li>HTML 문서에 있어서의 <code>localName</code> 및 <code>namespaceURI</code>는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, <code>localName</code>는 소문자를 돌려주어, HTML 요소의 <code>namespaceURI</code>는 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code>를 돌려줍니다.</li> - <li>페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 <code>hashchange</code> 이벤트가 페이지에 보내집니다. 자세한 것은 <code><a href="/ko/DOM/window.onhashchange" title="ko/DOM/window.onhashchange">window.onhashchange</a></code>를 참조해 주십시오.</li> - <li><code>class</code> 속성을 보다 간단하게 취급할 수 있도록 HTML5의 <code><a href="/ko/DOM/element.classList" title="ko/DOM/element.classList">element.classList</a></code>이 기술 지원되었습니다.</li> - <li>문서에 즉시 생성되는 이벤트에 응하는 <code><a href="/ko/DOM/document.onreadystatechange" title="ko/DOM/document.onreadystatechange">document.onreadystatechange</a></code>와 <code><a href="/ko/DOM/document.readyState" title="ko/DOM/document.readyState">document.readyState</a></code>가 기술 지원되었습니다.</li> - <li>표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.</li> -</ul> - -<h2 id="HTML5의_일부로서_포함된_기술">HTML5의 일부로서 포함된 기술</h2> - -<p>아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.</p> - -<ul> - <li><a href="/ko/WebGL" title="ko/WebGL">WebGL</a></li> - <li><a href="/ko/DOM/FileReader" title="ko/DOM/FileReader">FileReader</a></li> - <li><a href="/ko/DOM/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></li> - <li><a href="/ko/DOM/Locating_DOM_elements_using_selectors" title="ko/DOM/Locating DOM elements using selectors">querySelector(All)</a></li> - <li><a href="/Ja/Using_geolocation" title="ko/Using geolocation">Geolocation</a></li> - <li><a href="/ko/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> - <li><a href="/ko/CSS/CSS3" title="CSS3">CSS3</a></li> - <li><a href="/ko/XBL2_specification_(external)" title="ko/XBL2 specification (external)">XBL2</a></li> - <li><a href="/ko/DOM/Using_web_workers" title="ko/Using web workers">Web Workers</a></li> - <li><a href="/ko/WebSockets" title="https://developer.mozilla.org/ko/WebSockets">Web Sockets</a></li> - <li>JavaScript의 고속화</li> -</ul> - -<h2 id="관련_문서">관련 문서</h2> - -<p>웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：</p> - -<ul> - <li><a href="/ko/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li> - <li><a href="/ko/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li> - <li><a href="/ko/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li> - <li><a href="/ko/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li> - <li><a href="/ko/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li> - <li><a href="/ko/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li> - <li><a href="/ko/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li> - <li><a href="/ko/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li> - <li><a href="/ko/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li> - <li><a href="/ko/Firefox_3.6_for_developers" title="ko/Firefox 3.6 for developers">Firefox 3.6 </a></li> - <li><a href="/Ja/Firefox_3.5_for_developers" title="ko/Firefox 3.5 for developers">Firefox 3.5 </a></li> - <li><a href="/ko/Firefox_3_for_developers" title="ko/Firefox 3 for developers">Firefox 3 </a></li> - <li><a href="/ko/Firefox_2_for_developers" title="ko/Firefox 2 for developers">Firefox 2 </a></li> - <li><a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox 1.5 for developers">Firefox 1.5</a></li> -</ul> diff --git a/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 5066c368b8..0000000000 --- a/files/ko/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: HTML5 소개 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML5 - - 웹개발 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.</p> - -<p>HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. <a href="/ko/HTML/HTML5" title="ko/HTML/HTML5">HTML5의 메인 페이지</a>에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 웹 사이트를 참조해 주십시오.</p> - -<h2 id="HTML5_DOCTYPE">HTML5 DOCTYPE</h2> - -<p>HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：</p> - -<pre><!DOCTYPE html> -</pre> - -<p>이 DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.</p> - -<p>이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.</p> - -<h2 id="<meta_charset>으로_문자셋_정의하기"><code><meta charset>으로 문자셋 정의하기</code></h2> - -<p>보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.</p> - -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> - -<p><code>이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.</code></p> - -<p><code>HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.</code></p> - -<h2 id="새로운_HTML5_해석기의_사용">새로운 HTML5 해석기의 사용</h2> - -<p>HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.</p> - -<p>이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.</p> - -<p>걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!</p> diff --git a/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 37bebc6df3..0000000000 --- a/files/ko/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: HTML 구획과 개요 사용하기 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<div>{{HTMLSidebar}}</div> - -<div class="warning"> -<p><strong>중요</strong>: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 <a href="https://html.spec.whatwg.org/multipage/sections.html#outline">개요</a> 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 <strong>안됩니다</strong>. 문서 작성자는 대신 제목 <a href="https://html.spec.whatwg.org/multipage/sections.html#rank">순위</a>(<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1-h6</a>)를 사용해 문서 구조를 나타내는 것이 좋습니다.</p> -</div> - -<p>HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.</p> - -<p>예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.</p> - -<p>새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.</p> - -<h2 id="HTML4에서의_문서_구조">HTML4에서의 문서 구조</h2> - -<p><span style="line-height: inherit;">문서의 구조, 즉 <code><body></code>와 <code></body></code> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다.</span> HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.</p> - -<p>그래서 다음과 같은 마크업은:</p> - -<pre class="brush: xml"><div class="section" id="forest-elephants"> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. - ...섹션 내용 진행 중... - <div class="subsection" id="forest-habitat"> - <h2>서식지</h2> - <p><span style="color: #323333; font-family: courier new;">둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> - ...하위 섹션 내용 진행 중... - </div> -</div></pre> - -<p><span style="line-height: inherit;">다음과 같은 문서 아웃라인을 가지게 됩니다:</span></p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 -</pre> - -<p>새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,</p> - -<pre class="brush: xml"><h1>둥근귀코끼리</h1> -<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. -...섹션 내용 진행 중... -<h2>서식지</h2> -<p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> -...하위 섹션 내용 진행 중... -<h2>먹이</h2> -<h1>몽골 게르빌루스쥐</h1></pre> - -<p>앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 - 1.2 먹이 -2. 몽골 게르빌루스쥐 -</pre> - -<h2 id="HTML5에서_해결한_문제들">HTML5에서 해결한 문제들</h2> - -<p>HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:</p> - -<ol> - <li>의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 <strong>class</strong> 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 <font color="#000000">것은 불가능합니다</font>("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">보조 장비에 사용되는 기술</a>에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.</li> - <li>여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.</li> - <li>HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.</li> - <li>반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.</li> -</ol> - -<p>좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.</p> - -<h2 id="HTML5_문서_아웃라인_알고리즘">HTML5 문서 아웃라인 알고리즘</h2> - -<p>HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.</p> - -<h3 id="HTML5에서의_섹션_정의">HTML5에서의 섹션 정의</h3> - -<p>우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.</p> - -<div class="note">각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽#HTML5.EC.97.90.EC.84.9C_.EC.A0.9C.EB.AA.A9_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EB.B2.95" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">HTML5에서 제목 지정하는 법</a>을 보십시오.</div> - -<p>보기:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h1>서식지</h1> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section> - <aside> - <p>광고 구역</p> - </aside> -</section> -<footer> - <p>(c) 2013 회사 이름</p> -</footer></pre> - -<p>위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:</p> - -<pre><span style="color: red;"><section> - <h1></span>둥근귀<span style="color: red;">코끼리</h1> - <section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h1>서식지</h1> - <p></span>둥근귀<span style="color: red;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section> - <aside> - <p>광고 구역</p> - </aside> -</section></span> - -<span style="color: green;"><footer> - <p>(c) 2013 회사 이름?</p> -</footer></span></pre> - -<p>첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:</p> - -<pre><section> - <h1>둥근귀코끼리</h1> - - <span style="color: red;"><section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p></span> -<span style="color: red;"> </section></span> - - <span style="color: green;"><section> - <h1>서식지</h1> - <p></span>둥근귀<span style="color: green;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section></span> - - <span style="color: blue;"><aside> - <p>광고 구역</p> - </aside></span> -</section> - -<footer> - <p>(c) 2013 회사 이름</p> -</footer></pre> - -<p>그래서 다음과 같은 구조를 가지게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 소개 - 1.2 서식지 - 1.3 광고 구역 (aside) -</pre> - -<h3 id="HTML5에서_제목_지정하는_법">HTML5에서 제목 지정하는 법</h3> - -<p>비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.</p> - -<p><span style="line-height: inherit;">제목 요소엔 요소 이름에 붙은 숫자를 가지고 <em>계급</em>을 매기는데,</span> {{HTMLElement("h1")}}이 <em>최상위</em> 계급이며 {{HTMLElement("h6")}}는 <em>최하위</em> 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...계속 된 섹션 내용... - <section> - <h2>서식지</h2> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. - ...계속 된 하위 섹션 내용... - </section> -</section> -<section> - <h3>몽골 게르빌루스쥐</h3> - <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다. - ...계속 된 섹션 내용... -</section></pre> - -<p>이는 다음과 같은 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 -2. 몽골 게르빌루스쥐</pre> - -<p>여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)</p> - -<h3 id="은연중_자동으로_정의되는_섹션">은연중 자동으로 정의되는 섹션</h3> - -<p>HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 <span style="line-height: inherit;">절대적으로 </span><span style="line-height: inherit;">필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 </span><em>은연중 자동으로 정의되는 섹션</em><span style="line-height: inherit;">이라 하겠습니다</span><span style="line-height: inherit;">.</span></p> - -<p>HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...섹션 내용 진행 중... - <h3 class="implicit subsection">서식지</h3> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. - ...하위 섹션 내용 진행 중... -</section></pre> - -<p>이는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 <em>(</em>h3 요소에 의해 은연중 자동으로 정의됨<em>)</em> -</pre> - -<p>만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...섹션 내용 진행 중... - <h1 class="implicit section">몽골 게르빌루스쥐</h1> - <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... -</section></pre> - -<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 -2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐) -</pre> - -<p>만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> - -<pre class="brush:xml"><body> - <h1>포유 동물</h1> - <h2>고래</h2> - <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... - <section> - <h3>둥근귀코끼리</h3> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... - <h3>몽골 게르빌루스쥐</h3> - <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다. - ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... - <h2>파충류</h2> - <p>파충류는 냉혈 동물입니다. - ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... - </section> -</body></pre> - -<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre dir="rtl">1. 포유 동물 - 1.1 고래 <em>(</em>h2 요소에 의해 자동으로 정의됨<em>)</em> - 1.2 둥근귀코끼리 <em>(</em>섹션 요소에 의해 명시적으로 정의됨<em>)</em> - 1.3 몽골 게르빌루스쥐 <em>(</em>h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em> -2. 파충류 <em>(</em>h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em></pre> - -<p>단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 <span style="line-height: inherit;">브라우저가 </span><span style="line-height: inherit;">원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.</span></p> - -<p>제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.</p> - -<h3 id="섹션_구분의_근원점"><a name="sectioning_root">섹션 구분의 근원점</a></h3> - -<p>섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.</p> - -<p>보기:</p> - -<pre class="brush:xml"><section> - <h1>숲 코끼리</h1> - <section> - <h2>소개</h2> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h2>서식지</h2> - <p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. -</span> 과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p> - <blockquote> - <h1>보르네오 섬</h1> - <p>보르네오 섬에 서식하는 둥근귀코끼리...</p> - </blockquote> - </section> -</section> -</pre> - -<p>위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:</p> - -<pre>1. 숲 코끼리 - 1.1 소개 - 1.2 서식지</pre> - -<p>이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.</p> - -<h3 id="문서의_아웃라인_밖에_존재하는_섹션">문서의 아웃라인 밖에 존재하는 섹션</h3> - -<p><span style="line-height: inherit;">HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:</span></p> - -<ol> - <li>HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.</li> - <li>HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.</li> - <li>HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.</li> - <li>HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.</li> -</ol> - -<h2 id="섹션을_구분짓는_요소의_주소와_발행_시간">섹션을 구분짓는 요소의 주소와 발행 시간</h2> - -<p>문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.</p> - -<p>가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.</p> - -<p>비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.</p> - -<h2 id="HTML5_미지원_브라우저에서_HTML5_요소를_사용하는_법">HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법</h2> - -<p>섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 <code>display:inline</code> 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.</p> - -<div>그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:</div> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:</p> - -<pre class="brush:xml"><noscript> - <strong>주의 !</strong> - 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. - 그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. -</noscript></pre> - -<p>그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>주의 !</strong> - 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. - 그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. - <code></noscript> -</code><![endif]--> -</pre> - -<h2 id="맺음말">맺음말</h2> - -<p>HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.</p> diff --git a/files/ko/orphaned/web/html/element/command/index.html b/files/ko/orphaned/web/html/element/command/index.html deleted file mode 100644 index 458108784f..0000000000 --- a/files/ko/orphaned/web/html/element/command/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: <command> -slug: orphaned/Web/HTML/Element/command -tags: - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Element/command ---- -<div>{{obsolete_header()}}</div> - -<p><span class="seoSummary">The <strong>HTML Command element</strong> (<strong><code><command></code></strong>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar.</span> However, they can be used anywhere on the page.</p> - -<div class="note"> -<p>The <code><command></code> element is included in the W3C specification, but not in the WHATWG specification, and browser support is nonexistent. You should use the {{HTMLElement("menuitem")}} element instead, although that element is non-standard and only supported in Edge and Firefox.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, metadata content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>The <span>start tag</span> is mandatory, but, as it is a void element, the <span>use of an end tag</span> is forbidden.</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{HTMLElement("span")}} as child.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLCommandElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Indicates whether the command is selected. Must be omitted unless the <code>type</code> attribute is <code>checkbox </code>or <code>radio</code>.</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Iindicates that the command is not available.</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Gives a picture which represents the command.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>The name of the command as shown to the user.</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>This attribute gives the name of the group of commands, with a <code>type</code> of <code>radio</code>, that will be toggled when the command itself is toggled. This attribute must be omitted unless the <code>type</code> attribute is <code>radio</code>.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>This attribute indicates the kind of command. This can be one of three values. - <ul> - <li> - <p><code>command</code> or empty which is the default state and indicates that this is a normal command.</p> - </li> - <li> - <p><code>checkbox</code> indicates that the command can be toggled using a checkbox.</p> - </li> - <li> - <p><code>radio</code> indicates that the command can be toggled using a radio button.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: html"><command type="command" label="Save" - icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#commands')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.command")}}</p> - -<p>{{ HTMLRef }}</p> diff --git a/files/ko/orphaned/web/html/element/element/index.html b/files/ko/orphaned/web/html/element/element/index.html deleted file mode 100644 index 9f5f8e5190..0000000000 --- a/files/ko/orphaned/web/html/element/element/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: <element> -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Element/element ---- -<div>{{HTMLRef}}{{obsolete_header}}</div> - -<p><span class="seoSummary">The obsolete <strong>HTML <code><element></code> element</strong> was part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> specification; it was intended to be used to define new custom DOM elements.</span> It was removed in favor of a JavaScript-driven approach for creating new custom elements.</p> - -<div class="warning"> -<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>???</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<p>The <code><element></code> element was formerly in a draft specification of <a href="http://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a> but it has been removed.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.element")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}</li> -</ul> diff --git a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html b/files/ko/orphaned/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 488b51cf46..0000000000 --- a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: dropzone -slug: orphaned/Web/HTML/Global_attributes/dropzone -tags: - - Deprecated - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone -original_slug: Web/HTML/Global_attributes/dropzone ---- -<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> - -<p><strong><code>dropzone</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:</p> - -<ul> - <li><code>copy</code>, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.</li> - <li><code>move</code>, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.</li> - <li><code>link</code>, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.</li> -</ul> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> -</ul> diff --git a/files/ko/orphaned/web/html/preloading_content/index.html b/files/ko/orphaned/web/html/preloading_content/index.html deleted file mode 100644 index 52f29f67f4..0000000000 --- a/files/ko/orphaned/web/html/preloading_content/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Preloading content with rel="preload" -slug: orphaned/Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content -original_slug: Web/HTML/Preloading_content ---- -<p class="summary"><span class="seoSummary"> {{htmlelement("link")}}엘리먼트의 {{htmlattrxref("rel", "link")}} 속성에 <code>preload</code>라는 값이 부여되면 페이지 라이프사이클 초기에 필요한 자원에 대해서 HTML {{htmlelement("head")}} 에서 fetch 요청을 선언할 수 있다. 이는 해당 자원의 가용시점을 앞당기고 렌더링의 방해가 일어나지 않게 함으로서 성능을 개선한다. </span></p> - -<p class="summary">이 문서는 <code><link rel="preload"></code> 이 어떻게 동작하는지 기본적인 가이드를 제공한다.</p> - -<h2 id="The_basics">The basics</h2> - -<p>You most commonly use <code><link></code> to load a CSS file to style your page with:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> - -<p>Here however, we will use a <code>rel</code> value of <code>preload</code>, which turns <code><link></code> into a preloader for any resource we want. You will also need to specify:</p> - -<ul> - <li>The path to the resource in the {{htmlattrxref("href", "link")}} attribute.</li> - <li>The type of resource in the {{htmlattrxref("as", "link")}} attribute.</li> -</ul> - -<p>A simple example might look like this (see our <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS and CSS example source</a>, and <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">also live</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>JS and CSS preload example</title> - - <link rel="preload" href="style.css" as="style"> - <link rel="preload" href="main.js" as="script"> - - <link rel="stylesheet" href="style.css"> -</head> - -<body> - <h1>bouncing balls</h1> - <canvas></canvas> - - <script src="main.js" defer></script> -</body></pre> - -<p>Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <code><link rel="stylesheet"></code> and <code><script></code> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:</p> - -<ul> - <li>Resources that are pointed to from inside CSS, like fonts or images.</li> - <li>Resources that JavaScript can request, like JSON, imported scripts, or web workers.</li> - <li>Larger images and video files.</li> -</ul> - -<p><code>preload</code> has other advantages too. Using <code>as</code> to specify the type of content to be preloaded allows the browser to:</p> - -<ul> - <li>Prioritize resource loading more accurately.</li> - <li>Store in the cache for future requests, reusing the resource if appropriate.</li> - <li>Apply the correct <a href="/en-US/docs/Web/HTTP/CSP">content security policy</a> to the resource.</li> - <li>Set the correct {{HTTPHeader("Accept")}} request headers for it.</li> -</ul> - -<h3 id="What_types_of_content_can_be_preloaded">What types of content can be preloaded?</h3> - -<p>Many different content types can be preloaded. The possible <code>as</code> attribute values are:</p> - -<ul> - <li><code>audio</code>: Audio file, as typically used in {{htmlelement("audio")}}.</li> - <li><code>document</code>: An HTML document intended to be embedded by a {{htmlelement("frame")}} or {{htmlelement("iframe")}}.</li> - <li><code>embed</code>: A resource to be embedded inside an {{htmlelement("embed")}} element.</li> - <li><code>fetch</code>: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.</li> - <li><code>font</code>: Font file.</li> - <li><code>image</code>: Image file.</li> - <li><code>object</code>: A resource to be embedded inside an {{htmlelement("object")}} element.</li> - <li><code>script</code>: JavaScript file.</li> - <li><code>style</code>: CSS stylesheet.</li> - <li><code>track</code>: WebVTT file.</li> - <li><code>worker</code>: A JavaScript web worker or shared worker.</li> - <li><code>video</code>: Video file, as typically used in {{htmlelement("video")}}.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>. Also note that the full list of values the <code>as</code> attribute can take is governed by the Fetch spec — see <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>.</p> -</div> - -<h2 id="Including_a_MIME_type">Including a MIME type</h2> - -<p><code><link></code> elements can accept a {{htmlattrxref("type", "link")}} attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the <code>type</code> attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.</p> - -<p>You can see an example of this in our video example (see the <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">full source code</a>, and also <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">the live version</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Video preload example</title> - - <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> - <link rel="preload" href="sintel-short.webm" as="video" type="video/webm"> -</head> -<body> - <video controls> - <source src="sintel-short.mp4" type="video/mp4"> - <source src="sintel-short.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> - </video> -</body></pre> - -<p>So in this case, browsers that support MP4s will preload and use the MP4, making the video player hopefully smoother/more responsive for users. Browsers that don't support MP4 can still load the WebM version, but don't get the advantages of preloading. This shows how preloading content can be combined with the philosophy of progressive enhancement.</p> - -<h2 id="Cross-origin_fetches">Cross-origin fetches</h2> - -<p>If you've got your sites' <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <code><link></code> element.</p> - -<p>One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>).</p> - -<p>Let's use this case as an example. You can see the full <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Web font example</title> - - <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin> - <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> - - <link href="style.css" rel="stylesheet"> -</head> -<body> - … -</body></pre> - -<p>Not only are we providing the MIME type hints in the <code>type</code> attributes, but we are also providing the <code>crossorigin</code> attribute to handle the CORS issue.</p> - -<h2 id="Including_media">Including media</h2> - -<p>One nice feature of <code><link></code> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a> or full-blown <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p> - -<p>Let's look at an example (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Responsive preload example</title> - - <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> - <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> - - <link rel="stylesheet" href="main.css"> -</head> -<body> - <header> - <h1>My site</h1> - </header> - - <script> - var mediaQueryList = window.matchMedia("(max-width: 600px)"); - var header = document.querySelector('header'); - - if (mediaQueryList.matches) { - header.style.backgroundImage = 'url(bg-image-narrow.png)'; - } else { - header.style.backgroundImage = 'url(bg-image-wide.png)'; - } - </script> -</body></pre> - -<p>We include <code>media</code> attributes on our <code><link></code> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> for more).</p> - -<p>This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).</p> - -<p>This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.</p> - -<h2 id="Scripting_and_preloads">Scripting and preloads</h2> - -<p>Another nice thing about these preloads is that you can execute them with script. For example, here we create a {{domxref("HTMLLinkElement")}} instance, then attach it to the DOM:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>This means that the browser will preload the <code>myscript.js</code> file, but not actually use it yet. To use it, you could do this:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>This is useful when you want to preload a script, but then defer execution until exactly when you need it.</p> - -<h2 id="Other_resource_preloading_mechanisms">Other resource preloading mechanisms</h2> - -<p>Other preloading features exist, but none are quite as fit for purpose as <code><link rel="preload"></code>:</p> - -<ul> - <li><code><link rel="prefetch"></code> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the <strong><em>next</em></strong> navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give <code>prefetch</code> resources a lower priority than <code>preload</code> ones — the current page is more important than the next. See <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> for more details.</li> - <li><code><link rel="prerender"></code> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats <code>prerender</code> as a <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a> instead.</li> - <li><code><link rel="subresource"></code> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as <code>preload</code>, but it had a problem: there was no way to work out a priority for the items (<code>as</code> didn't exist back then), so they all got fetched with fairly low priority.</li> - <li>There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.</li> -</ul> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td>Further details of <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Definition of <code>rel=preload</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("html.elements.link.rel.preload")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> -</ul> - -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p> diff --git a/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html b/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html deleted file mode 100644 index 0d247bd7f8..0000000000 --- a/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Differential inheritance in JavaScript -slug: orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript -translation_of: Web/JavaScript/Differential_inheritance_in_JavaScript -original_slug: Web/JavaScript/Differential_inheritance_in_JavaScript ---- -<h2 id="Introduction">Introduction</h2> - -<p>차등 상속(Differential Inheritance)은 자바 스크립트와 같은 프로토 타입 기반 프로그래밍 언어에서 사용되는 일반적인 상속 모델입니다. 대부분의 객체는 다른 일반적인 객체에서 파생되고 몇 가지 작은 측면에서만 차이가 있다는 원칙에 따라 동작합니다. 일반적으로 객체가 다른 다른 객체에 대한 포인터 목록을 내부적으로 유지합니다.</p> - -<h2 id="Example">Example</h2> - - - -<p>다음 코드는 개체를 "상속"하는 간단한 메서드 예제입니다.</p> - -<pre class="brush: js notranslate">Object.prototype.inherit = function(){ - // Create a new object with this as its prototype - var p = Object.create(this); - - /* actually not necessary: - // Apply the constructor on the new object - this.constructor.apply(p, arguments); - */ - - return p; -}; -</pre> - -<p>상속(<font face="Consolas, Liberation Mono, Courier, monospace">inherit)</font>을 사용하면 일반 프로토 타입에서보다 구체적인 개체를 간단히 파생시킬 수 있습니다. 다음은 상속 방법 및 차등 상속을 사용하여 점점 더 구체적인 객체를 구성하는 간단한 예입니다.</p> - -<pre class="brush: js notranslate">var root = {}; // Could be any object with any prototype object - -var record = root.inherit(); -record.toString = function(){ return "a Record"; }; - -var person = root.inherit(); -person.firstName = false; -person.lastName = false; -person.toString = function(){ - if (this.firstName) { - if (this.lastName) { - return this.firstName + " " + this.lastName; - } else { - return this.firstName; - } - } else if (this.lastName) { - return this.lastName; - } else { - return "a Person"; - } -}; - -JoePerson = person.inherit(); -JoePerson.firstName = "Joe"; -alert( JoePerson.toString() ); -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">inheritance and the prototype chain</a></li> -</ul> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html deleted file mode 100644 index 69e27ae450..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: About -slug: orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About ---- -<h3 id=".EC.9D.B4.EB.B2.88_.EB.A6.B4.EB.A6.AC.EC.A6.88.EC.9D.98_.EC.83.88_.EA.B8.B0.EB.8A.A5" name=".EC.9D.B4.EB.B2.88_.EB.A6.B4.EB.A6.AC.EC.A6.88.EC.9D.98_.EC.83.88_.EA.B8.B0.EB.8A.A5"> 이번 릴리즈의 새 기능 </h3> -<p>JavaScript 버전 1.5는 다음과 같은 개선과 새 기능을 제공합니다: -</p><p><b>런타임 오류</b><br> -런타임 오류가 예외로서 보고됩니다. -</p><p><b>숫자 표현 서식 개선</b><br> -숫자를 표현하는 서식이 Number.prototype.toExponential, Number.prototype.toFixed, Number.prototype.toPrecision 메소드를 포함함으로서 개선되었습니다. <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Number_Object">Number 개체</a> 페이지를 보십시오. -</p><p><b>정규 표현식 개선</b><br> -정규표현식이 다음과 같이 개선되었습니다: -</p> -<ul><li> 한정자 — +, *, ?, {} — 뒤에 ?를 붙여서 greedy하지 않도록 할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">정규 표현식 패턴 쓰기</a> 페이지에서 ?에 대한 항목을 보십시오. -</li><li> Non-capturing parentheses, (?:x) can be used instead of capturing parentheses(x). When non-capturing parentheses are used, matched subexpressions are not available as back-references. See the entry for (?:x) on page <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">Writing a Regular Expression Pattern</a>. -</li><li> Positive and negative lookahead assertions are supported. Both assert a match depending on what follows the string being matched. See the entries for x(?=y) and x(?!y) on page <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">Writing a Regular Expression Pattern</a>. -</li><li> The m flag has been added to specify that the regular expression should match over multiple lines. See the <a href="ko/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Executing_a_Global_Search%2c_Ignoring_Case%2c_and_Considering_Multiline_Input">Executing a Global Search, Ignoring Case, and Considering Multiline Input</a> page. -</li></ul> -<p><b>조건부 함수 선언</b><br> -함수를 if 조건안에서 선언할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Defining_Functions">함수 정의</a> 페이지를 참고하세요. -</p><p><b>함수 표현식</b> <br> -함수를 표현식 안에서 선언할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Defining_Functions">함수 정의</a> 페이지를 참고하세요. -</p><p><b>Multiple catch clauses</b><br> -Multiple catch clauses in a try...catch statement are supported. See <a href="ko/Core_JavaScript_1.5_Guide/Exception_Handling_Statements/try...catch_Statement#The_catch_Block">The catch Block</a> page. -</p><p><b>Getters와 Setters</b><br> -JavaScript writers can now add getters and setters to their objects. This feature is available only in the C implementation of JavaScript. See the <a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters">Defining Getters and Setters</a> page. -</p><p><b>상수</b> <br> -읽기전용의 상수가 지원됩니다. This feature is available only in the C implementation of JavaScript. See the <a href="ko/Core_JavaScript_1.5_Guide/Constants">Constants</a> page. -</p> -<h3 id=".EB.AF.B8.EB.A6.AC_.EC.95.8C.EA.B3.A0_.EC.9E.88.EC.96.B4.EC.95.BC_.ED.95.A0_.EA.B2.83" name=".EB.AF.B8.EB.A6.AC_.EC.95.8C.EA.B3.A0_.EC.9E.88.EC.96.B4.EC.95.BC_.ED.95.A0_.EA.B2.83"> 미리 알고 있어야 할 것 </h3> -<p>이 안내서는 당신이 다음과 같은 배경지식을 지녔다고 가정합니다: -</p> -<ul><li> 인터넷과 World Wide Web (WWW)에 대한 상식적인 이해 -</li><li> HyperText Markup Language (HTML)에 대한 충분한 지식<br> -</li></ul> -<p>C 혹은 Visual Basic에 대한 프로그래밍 경험이 있으면 좋지만, 필수사항은 아닙니다. -</p> -<h3 id="JavaScript_.EB.B2.84.EC.A0.84" name="JavaScript_.EB.B2.84.EC.A0.84"> JavaScript 버전 </h3> -<table class="fullwidth-table"> -<tbody><tr> -<th>JavaScript 버전</th> -<th>Navigator 버전</th> -</tr> -<tr> -<td>JavaScript 1.0</td> -<td>Navigator 2.0</td> -</tr> -<tr> -<td>JavaScript 1.1</td> -<td>Navigator 3.0</td> -</tr> -<tr> -<td>JavaScript 1.2</td> -<td>Navigator 4.0-4.05</td> -</tr> -<tr> -<td>JavaScript 1.3</td> -<td>Navigator 4.06-4.7x</td> -</tr> -<tr> -<td>JavaScript 1.4</td> -<td> </td> -</tr> -<tr> -<td>JavaScript 1.5</td> -<td>Navigator 6.0<br>모질라 (오픈소스 브라우저)</td> -</tr> -</tbody></table> -<p><small><b>표1: JavaScript와 Navigator 버전</b></small><br> -<br> -Each version of the Netscape Enterprise Server also supports a different version of JavaScript. To help you write scripts that are compatible with multiple versions of the Enterprise Server, this manual uses an abbreviation to indicate the server version in which each feature was implemented. -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>Abbreviation</th> -<th>Enterprise Server version</th> -</tr> -<tr> -<td>NES 2.0</td> -<td>Netscape Enterprise Server 2.0</td> -</tr> -<tr> -<td>NES 3.0</td> -<td>Netscape Enterprise Server 3.0</td> -</tr> -</tbody></table> -<p><small><b>Table 2: Abbreviations of Netscape Enterprise Server versions</b></small> -</p> -<h3 id="JavaScript_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3" name="JavaScript_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3"> JavaScript 정보를 찾을 수 있는 곳 </h3> -<p>The core JavaScript documentation includes the following books: -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Guide">The Core JavaScript Guide</a> (this guide) provides information about the core JavaScript language and its objects. -</li><li> <a href="ko/Core_JavaScript_1.5_Reference">The Core JavaScript Reference</a> provides reference material for the core JavaScript language. -</li></ul> -<p>If you are new to JavaScript, start with the <a href="ko/Core_JavaScript_1.5_Guide">Core JavaScript Guide</a>. Once you have a firm grasp of the fundamentals, you can use the <a href="ko/Core_JavaScript_1.5_Reference">Core JavaScript Reference</a> to get more details on individual objects and statements. -</p> -<h3 id=".EB.AC.B8.EC.84.9C_.EA.B7.9C.EC.95.BD" name=".EB.AC.B8.EC.84.9C_.EA.B7.9C.EC.95.BD"> 문서 규약 </h3> -<p>JavaScript 응용프로그램은 많은 운영체제에서 실행됩니다. 이 책에 있는 정보는 모든 운영체제에 적용됩니다. 파일과 디렉토리 경로는 Windows 형식(디렉토리 이름을 구분하는데 역슬래시를 사용)으로 썼습니다. Unix에서는 역슬래시를 슬래시로 바꾸어 사용하면 됩니다. -</p><p>이 안내서에서 URL은 다음과 같은 형태로 씁니다. -</p><p><code><span class="nowiki">http://server.domain/path/file.html</span></code> -</p><p>이 URL에서 "server"는 우리가 응용프로그램을 실행하는 서버 이름(research1이나 www 등)이고, "domain"은 인터넷 도메인 이름(netscape.com이나 uiuc.edu 등)입니다. "path"는 서버의 디렉토리 구조를 나타내고, "file.html"은 파일 이름입니다. 일반적으로 URL에서 이탤릭체로 쓴 부분은 알맞은 내용으로 바꿔써야 할 내용(placeholder)이고, 평범한 고정폭 글꼴은 그대로 쓰면 되는 내용입니다. Secure Socket Layer(SSL)을 사용하는 서버라면 http 대신 https를 쓰면 됩니다. -</p><p>이 안내서는 다음과 같은 관례를 따릅니다. -</p> -<ul><li> <code>고정폭 글꼴</code>은 샘플 코드, API, 언어 요소(메소드 이름, 속성 이름 등), 파일 이름, 경로, 디렉토리 이름, HTML 태그, 화면에 입력해야 할 텍스트를 나타내는 데 쓰입니다. (고정폭 이탤릭체는 코드 내용 중에서 적당히 알맞은 내용으로 바꿔써야 할 부분을 나타내는 데 씁니다.) -</li><li> <i>이탤릭체</i>는 책 제목, 강조, 변수, 뜻 그대로 쓰인 단어(words in the literal sense)에 씁니다. -</li><li> <b>굵은 글씨</b>는 용어에 씁니다. -</li></ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide", "Core_JavaScript_1.5_Guide:JavaScript_Overview") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/About", "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos", "ja": "ja/Core_JavaScript_1.5_Guide/About", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html deleted file mode 100644 index 2ff86aff3c..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Class-Based vs. Prototype-Based Languages -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages ---- -<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">클래스 기반언어와 프로토타입 기반언어</h3> -<p>Java와 C++이라는 클래스 기반의 객체지향언어는 클래스와 인스턴스라는 2개의 다른 실체가 있다는 개념에 기초하고 있습니다.</p> -<ul> <li>클래스는 어떤 객체의 집합을 특징짓는 모든 속성(Java에서는 메소드와 필드를, C++에서는 멤버를 프로퍼티로 간주)을 정의합니다. 클래스란 그것이 나타내는 객체집합의 특정멤버가 아닌, 추상적인것입니다. 예를들어, Employee클래스는 모든 종업원의 집합을 나타냅니다.</li> <li>한편, 인스턴스는 클래스를 실례로 한것입니다. 즉, 그 멤버중 하나인것입니다. 예를들어, Victoria는 Employee클래스의 인스턴스가 될 수 있습니다. 이 클래스는 특정 개인을 종업원으로서 표현하고 있는것입니다. 인스턴스는 그 부모클래스의 속성을 정확하게 유지하고 있습니다.</li> -</ul> -<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p> -<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4> -<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p> -<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p> -<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4> -<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p> -<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p> -<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4> -<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p> -<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4> -<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p> -<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody> -</table> -<div class="noinclude"> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p> -</div> -<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html deleted file mode 100644 index ebebbdbb32..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Creating a Regular Expression -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression ---- -<h3 id=".EC.A0.95.EA.B7.9C.ED.91.9C.ED.98.84.EC.8B.9D_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.A0.95.EA.B7.9C.ED.91.9C.ED.98.84.EC.8B.9D_.EB.A7.8C.EB.93.A4.EA.B8.B0">정규표현식 만들기</h3> -<p>정규표현식은 다음의 두 가지 방법으로 만들 수 있습니다.</p> -<ul> - <li>정규표현식 상수값을 이용하여 만들기</li> -</ul> -<pre> re = /ab+c/; </pre> -<dl> - <dd> - <dl> - <dd> - 정규표현식 상수값은 스크립트가 실행될 때 컴파일됩니다. 따라서 정규표현식의 값이 변하지 않을 경우, 이 방법을 사용하면 좀 더 나은 성능을 얻을 수 있습니다.</dd> - </dl> - </dd> -</dl> -<ul> - <li><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">RegExp</a> 객체의 생성자를 호출하여 만들기</li> -</ul> -<pre> re = new RegExp("ab+c"); </pre> -<dl> - <dd> - <dl> - <dd> - 생성자를 이용하면 실행 시간에 정규표현식이 컴파일됩니다. 정규표현식 패턴이 바뀔 것을 알고 있거나, 또는 패턴을 사용자의 입력 등을 통해 외부에서 가져오려고 할 때 이 방법을 사용하십시오.</dd> - </dl> - </dd> -</dl> -<div class="noinclude"> - <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Special_Operators", "Core_JavaScript_1.5_Guide:Writing_a_Regular_Expression_Pattern") }}</p> -</div> -<p> </p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html deleted file mode 100644 index 760bf0d3a0..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Defining Getters and Setters -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters ---- -<h3 id="getter.2Fsetter_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0" name="getter.2Fsetter_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0">getter/setter 정의하기</h3> - -<p>getter는 속성의 값을 얻어오는 메소드이고, setter는 속성의 값을 설정하는 메소드입니다. 우리는 언어에서 미리 정의한 핵심 개체들과 사용자 정의 개체에 getter/setter를 정의할 수 있습니다. getter와 setter를 정의할 때 쓰이는 문법은 개체 상수값 문법입니다.</p> - -<p>다음의 JS 쉘 세션은 사용자가 정의한 개체 o에 대해서 getter와 setter가 어떻게 동작하는지 보여줍니다. JS 쉘은 JavaScript를 한 번에 실행(batch)하거나 대화식으로(interactively) 실행할 수 있게 해주는 응용프로그램입니다.</p> - -<p><code>o</code> 개체에는 이런 속성이 있습니다.</p> - -<ul> - <li>o.a - 수</li> - <li>o.b - o.a 더하기 1을 반환하는 getter</li> - <li>o.c - 받은 값을 2로 나누어서 o.a에 설정하는 setter</li> -</ul> - -<pre>js> o = new Object; -[object Object] -js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}}; -[object Object] -js> o.a -7 -js> o.b -8 -js> o.c = 50 -js> o.a -25 -js> -</pre> - -<p>다음 JavaScript 쉘 세션은 이미 정의된 <code>Date</code> 모든 인스턴스에 year 속성을 추가하기 위해서 getter/setter가 어떻게 Date 프로토타입을 확장하는지 보여줍니다. 이 세션에서는 year 속성의 getter와 setter를 지원하기 위해서 <code>Date</code>에 있는 <code>getFullYear</code> 메소드와 <code>setFullYear</code> 메소드를 사용하고 있습니다.</p> - -<p>이 문장들은 year 속성에 대한 getter와 setter를 정의합니다.</p> - -<pre>js> var d = Date.prototype; -js> d.__defineGetter__("year", function() { return this.getFullYear(); }); -js> d.__defineSetter__("year", function(y) { this.setFullYear(y); }); -</pre> - -<p>이 문장들은 <code>Date</code>의 getter/setter를 사용합니다.</p> - -<pre>js> var now = new Date; -js> print(now.year); -2000 -js> now.year=2001; -987617605170 -js> print(now); -Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 -</pre> - -<div class="note">JavaScript 1.5를 개발하는 동안 이미 존재하는 개체에 getter/setter를 추가할 때 <code>getter =</code>, <code>setter =</code>이라는 식의 문법을 사용하던 때가 잠깐 있었습니다. 이 문법은 이제 사용하지 말아야 합니다. 현재의 JS 1.5 엔진에서는 경고를 발생시키고, 더 나중의 버전에서는 문법 에러를 발생시키게 될 것입니다.</div> - -<p> </p> - -<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> - -<p>getter/setter를</p> - -<ul> - <li><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자</a>를 이용해서 정의하거나,</li> - <li>개체가 만들어진 이후에 getter/setter 추가 메소드를 이용해서 언제든지 추가할 수 있습니다.</li> -</ul> - -<p><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자</a>를 이용할 때는 단순히 getter 메소드 앞에는 <code>get</code>을 써주고 setter 메소드 앞에는 <code>set</code>을 써주기만 하면됩니다. 물론 getter 메소드에는 매개변수가 없어야 하고 setter에는 정확히 하나만 있어야 합니다. 다음 예제에서와 같이 말입니다.</p> - -<pre class="eval">o = { - a:7, - <strong>get</strong> b() { return this.a+1; }, - <strong>set</strong> c(x) { this.a = x/2; } -}; -</pre> - -<p>개체가 생성된 이후에 어느 때라도 <code>__defineGetter__</code>와 <code>__defineSetter__</code>라는 메소드를 이용하면 getter/setter를 정의할 수 있습니다. 두 메소드 모두 첫 번째 매개변수에 getter/setter 이름을 나타내는 문자열을 받습니다. 두 번째 매개변수는 getter/setter로서 호출될 함수를 받습니다. 예제를 보십시오.</p> - -<pre class="eval">o.__defineGetter__("b", function() { return this.a+1; }); -o.__defineSetter__("c", function(x) { this.a = x/2; }); -</pre> - -<p>두 가지 중에서 어떤 방식을 택할지는 프로그래밍 스타일이나 해야할 작업에 달려있습니다. 프로토타입을 정의하는데 이미 개체 초기화 지정자를 사용하고 있다면 거의 첫 번째 방식을 사용할 것입니다. 첫 번째가 좀 더 단순하고 자연스러운 방식입니다. 그러나 우리가 직접 프로토토입을 만들거나 개체를 생성할 수 없어서 나중에 getter/setter를 추가해야 하는 상황이라면 두 번째 방식을 사용할 수 밖에 없습니다. 두 번째 방식은 JavaScript의 동적인 특성을 잘 보여주는 방식입니다. 하지만 코드를 읽고 이해하기 어렵게 만들 수도 있습니다.</p> - -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html deleted file mode 100644 index dd76945d49..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Defining Methods -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods ---- -<h3 id=".EB.A9.94.EC.86.8C.EB.93.9C_.EC.A0.95.EC.9D.98" name=".EB.A9.94.EC.86.8C.EB.93.9C_.EC.A0.95.EC.9D.98">메소드 정의</h3> -<p> - <i> - 메소드</i> - 는 개체와 연관되어 있는 함수입니다. 일반적인 함수를 정의하는 것과 같은 방법으로 메소드를 정의합니다. 그 후에, 존재하는 개체와 함수를 연관시키기 위해서 다음과 같은 문법을 사용합니다.</p> -<pre>object.methodname = function_name -</pre> -<p><code>object</code>는 존재하는 개체중에 하나이고, <code>methodname</code>은 지금 추가하려는 메소드 이름이며, <code>function_name</code>은 함수 이름입니다.</p> -<p>이제 우리는 개체의 메소드를 호출할 때 다음과 같이 할 수 있습니다.</p> -<pre>object.methodname(params); -</pre> -<p>개체 생성자 함수에 메소드 정의를 포함시켜서 개체 타입에 대한 메소드를 정의할 수 있습니다. 예를 들어, 미리 정의된 car 개체의 속성을 출력해주는 함수를 정의할 수 있습니다.</p> -<pre>function displayCar() { - var result = "A Beautiful " + this.year + " " + this.make - + " " + this.model; - pretty_print(result); -} -</pre> -<p><code>pretty_print</code>는 가로선과 문자열을 출력하는 함수입니다. 이 메소드가 포함된 개체를 참조하기 위해서 <code>this</code>를 사용하고 있다는 것을 주의해서 보십시오.</p> -<p>아래 문장을 개체 정의에 추가함으로써 이 함수를 car의 메소드로 만들 수 있습니다.</p> -<pre>this.displayCar = displayCar; -</pre> -<p>그러므로 <code>car</code> 개체의 완벽한 정의는 아래와 같은 모습이 될 것입니다.</p> -<pre>function car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; - this.displayCar = displayCar; -} -</pre> -<p>그러면 우리는 모든 car 개체에 대해서 이런 식으로 <code>displayCar</code> 메소드를 호출할 수 있게됩니다.</p> -<pre>car1.displayCar() -car2.displayCar() -</pre> -<p>이 코드는 다음 그림과 같은 내용을 만들어냅니다.</p> -<p><img alt="Image:obja.gif"> <small><b>그림 7.1: 메소드 출력 결과</b></small></p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html deleted file mode 100644 index 6b458144cc..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Defining Properties for an Object Type -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type ---- -<h3 id=".EA.B0.9C.EC.B2.B4_.ED.98.95.EC.8B.9D.EC.97.90_.EC.86.8D.EC.84.B1_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EC.B2.B4_.ED.98.95.EC.8B.9D.EC.97.90_.EC.86.8D.EC.84.B1_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0">개체 형식에 속성 정의하기</h3> -<p><code>prototype</code> 속성을 이용하면 이미 정의해 놓은 개체 형식에 속성을 추가할 수 있습니다. 이 방법을 사용하면 개체의 인스턴스 하나에만 속성이 추가되는 것이 아니라 같은 타입의 모든 개체가 공유하는 속성을 정의합니다. 다음 코드는 <code>car</code> 형식의 모든 개체에 <code>color</code> 속성을 추가하고, <code>car1</code> 개체의 <code>color</code> 속성에 값을 할당하는 코드입니다.</p> -<pre>Car.prototype.color=null; -car1.color="black"; -</pre> -<p>더 많은 정보를 얻으려면 <a href="ko/Core_JavaScript_1.5_Reference">기본 JavaScript 레퍼런스</a>에 있는 Function 개체의 <a href="ko/Core_JavaScript_1.5_Reference/Objects/Function#Properties"><code>prototype</code> 속성</a>을 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html deleted file mode 100644 index e5cf88cec9..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Deleting Properties -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties ---- -<h3 id=".EC.86.8D.EC.84.B1_.EC.A0.9C.EA.B1.B0" name=".EC.86.8D.EC.84.B1_.EC.A0.9C.EA.B1.B0">속성 제거</h3> -<p><code>delete</code> 연산자를 사용하여 속성을 제거할 수 있습니다. 어떻게 속성을 제거하는지 코드를 보십시오.</p> -<pre>//a와 b라는 속성을 가지는 새 개체를 만듭니다. -myobj = new Object; -myobj.a = 5; -myobj.b = 12; - -//myobj가 속성 b만을 가지도록 속성 a를 지웁니다. -delete myobj.a; -</pre> -<p>전역 변수를 선언할 때 <code>var</code> 키워드를 사용하지 않았다면 그 전역 변수를 제거하는데 <code>delete</code> 연산자를 사용할 수 있습니다.</p> -<pre>g = 17; -delete g; -</pre> -<p>더 많은 정보를 얻으려면 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators#delete">delete</a>를 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html deleted file mode 100644 index a1a24a41af..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Creating New Objects -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html deleted file mode 100644 index 6c96480b54..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Indexing Object Properties -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties ---- -<h3 id=".EA.B0.9C.EC.B2.B4_.EC.86.8D.EC.84.B1_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EC.B2.B4_.EC.86.8D.EC.84.B1_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0">개체 속성 접근하기</h3> -<p>JavaScript 1.0에서는 개체의 속성을 참조할 때 개체 이름이나 순서 인덱스를 사용할 수 있습니다. 그러나 JavaScript 1.1과 그 이후 버전에서는 처음에 속성을 정의할 때 이름으로 정의했으면 항상 이름으로만 참조해야 하고, 인덱스로 정의했으면 인덱스로만 참조해야 합니다.</p> -<p>이런 제한은 앞 페이지 예제의 car 개체 형식처럼 생성자 함수로 개체와 개체 속성을 만들 때나 명시적으로 개별 속성을 만들 때(예를 들어 <code>myCar.color = "red"</code> 같은 식으로 속성을 추가할 때) 모두 적용됩니다. 그러므로 <code>myCar{{ mediawiki.external(5) }} = "25 mpg"</code>라고 인덱스를 이용해서 속성을 정의하면 그 이후로는 항상 <code>myCar{{ mediawiki.external(5) }}</code>로 참조할 수 있습니다.</p> -<p>이 규칙은 <code>forms</code> 배열 같이 HTML을 반영하여 생성된 개체에는 예외입니다. 이 배열에 있는 개체를 참조할 때는 순서(문서에 기록된 순서)를 나타내는 숫자나 이름(이름을 정의한 경우에만)을 이용하여 참조할 수 있습니다. 예를 들어, 문서에 있는 두 번째 <code><FORM></code> 태그가 "myForm"이라는 값을 가진 <code>NAME</code> 속성을 갖고 있다면 이 폼은 <code>document.forms{{ mediawiki.external(1) }}</code>, <code>document.forms{{ mediawiki.external('\"myForm\"') }}</code>, <code>document.myForm</code>으로 접근할 수 있습니다. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html deleted file mode 100644 index 0b2e514d4b..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Using a Constructor Function -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function ---- -<h3 id=".EC.83.9D.EC.84.B1.EC.9E.90_.ED.95.A8.EC.88.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.83.9D.EC.84.B1.EC.9E.90_.ED.95.A8.EC.88.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">생성자 함수 사용하기</h3> -<p>다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다.</p> -<ol> - <li>생성자 함수를 작성함으로써 개체를 정의합니다.</li> - <li>new 키워드를 사용하여 개체의 인스턴스를 만듭니다.</li> -</ol> -<p>개체 형식을 정의하기 위해서, 개체의 이름, 속성, 메소드를 지정하는 함수를 만듭니다. 자동차를 나타내기 위한 개체를 만들고 싶다고 해봅시다. 그렇다면 이 형식이 <code>car</code>라고 불리길 원할 것이고, make, model, year라는 속성이 있기를 원할 것입니다. 원하는 것을 이루기 위해서 이런 함수를 작성합니다.</p> -<pre>function car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> -<p>함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해서 <code>this</code>를 사용했다는 것을 명심하십시오.</p> -<p>이제 우리는 <code>mycar</code>라는 개체를 이렇게 만들 수 있습니다.</p> -<pre>mycar = new car("Eagle", "Talon TSi", 1993); -</pre> -<p>이 문장은 <code>mycar</code>를 만들고, 지정된 값을 mycar의 속성에 할당합니다. 그러면 <code>mycar.make</code>는 "Eagle"이라는 문자열 값을 가지고, <code>mycar.year</code>는 1993이라는 정수를 가질 것입니다.</p> -<p>우리는 <code>new</code>를 써서 <code>car</code> 개체를 몇 개라도 만들 수 있습니다.</p> -<pre>kenscar = new car("Nissan", "300ZX", 1992); -vpgscar = new car("Mazda", "Miata", 1990); -</pre> -<p>개체는 다른 개체를 속성으로 가질 수 있습니다. 예를 들어, <code>person</code> 개체를 다음과 같이 정의했다고 합시다.</p> -<pre>function person(name, age, sex) { - this.name = name; - this.age = age; - this.sex = sex; -} -</pre> -<p>그리고나서 person 개체의 인스턴스 두 개를 만듭니다.</p> -<pre>rand = new person("Rand McKinnon", 33, "M"); -ken = new person("Ken Jones", 39, "M"); -</pre> -<p>이제 우리는 car가 owner라는 속성으로 <code>person</code> 개체를 가지도록 car의 정의를 바꿀 수 있습니다.</p> -<pre>function car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; -} -</pre> -<p>새 개체 인스턴스를 만들 때 이렇게 쓸 수 있습니다.</p> -<pre>car1 = new car("Eagle", "Talon TSi", 1993, rand); -car2 = new car("Nissan", "300ZX", 1992, ken); -</pre> -<p>위 문장에서 owner 인자로 문자열 상수값이나 정수값을 전달하는 대신 <code>rand</code>와 <code>ken</code>이라는 개체를 전달했다는 사실에 주의하십시오. 이제 car2의 소유자 이름을 알고 싶으면 이런식으로 접근할 수 있습니다.</p> -<pre>car2.owner.name -</pre> -<p>정의된 개체에 아무때나 속성을 추가할 수 있다는 사실을 기억하십시오.</p> -<pre>car1.color = "black" -</pre> -<p>이 문장은 car1에 <code>color</code> 속성을 추가하고 "black"이라는 값을 할당합니다. 그러나 이 문장이 다른 개체에 영향을 미치지는 않습니다. 같은 형식을 가지는 모든 개체에 새 속성을 추가하고 싶으면 car 개체 형식의 정의에 속성을 추가해야 합니다.</p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_Object_Initializers", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html deleted file mode 100644 index 2c67101057..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Using this for Object References -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References ---- -<h3 id="this.EB.A5.BC_.EC.82.AC.EC.9A.A9.ED.95.9C_.EA.B0.9C.EC.B2.B4_.EC.B0.B8.EC.A1.B0" name="this.EB.A5.BC_.EC.82.AC.EC.9A.A9.ED.95.9C_.EA.B0.9C.EC.B2.B4_.EC.B0.B8.EC.A1.B0">this를 사용한 개체 참조</h3> -<p>JavaScript에는 <code>this</code>라는 키워드가 있는데, 메소드 안에서 현재 개체를 참조하기 위해서 이 키워드를 사용할 수 있습니다. 예를 들어, 개체의 값 속성을 검증하는 <code>validate</code>라는 함수가 있다고 해봅시다.</p> -<pre>function validate(obj, lowval, hival) { - if ((obj.value < lowval) || (obj.value > hival)) - alert("Invalid Value!"); -} -</pre> -<p>그러면 폼의 각 요소의 <code>onchange</code> 이벤트 핸들러에서 <code>validate</code>를 호출할 때, 다음 예제와 같은 방법으로 this를 사용해서 폼 요소를 <code>validate</code>에 전달할 수 있습니다.</p> -<pre><input type="text" name="age" size="3" - onChange="validate(this, 18, 99)"> -</pre> -<p><code>form</code> 속성과 같이 사용하면, <code>this</code>는 현재 개체의 부모 폼을 참조할 수 있습니다. 다음 예제에서, <code>myForm</code>이라는 폼은 <code>Text</code> 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 <code>Text</code> 개체의 값을 폼 이름으로 바꿉니다. 버튼의 <code>onclick</code> 이벤트 핸들러에서 부모 폼인 <code>myForm</code>을 참조하기 위해서 <code>this.form</code>을 사용하고 있습니다.</p> -<pre><form name="myForm"> -<p><label>Form name:<input type="text" name="text1" value="Beluga"></label> -<p><input name="button1" type="button" value="Show Form Name" - onclick="this.form.text1.value=this.form.name"> -</p> -</form> -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html deleted file mode 100644 index e1d0b7a8c9..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Expressions -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions ---- -<h3 id=".ED.91.9C.ED.98.84.EC.8B.9D" name=".ED.91.9C.ED.98.84.EC.8B.9D"> 표현식 </h3> -<p><i>표현식</i>은 상수(literals), 변수, 연산자 그리고 단일값을 반환하는 계산식(값은 숫자, 문자열, 논리값이 가능)이 알맞게 조합된 집합체다. -</p><p>개념적으로 보면 표현식에는 두가지 타입이 있다: 하나는 변수에 값을 할당하는 것이고 다른 하나는 단순히 값을 가지고 있는 것이다. 예를 들어, x = 7 이라는 표현식은 x 에 7이라는 값을 할당하는 표현식이다. 이 표현식은 스스로 7이라는 값을 부여한다. 이런 표현식들은 <i>할당 연산자</i>를 사용한다. 반면에, 3 + 4 라는 표현식은 단순히 7이라는 값을 계산할 뿐이다; 할당하지 않는다. 이런 표현식에서 사용되는 연산자는 그냥 단순히 <i>연산자</i>라고만 한다. -</p><p>JavaScript에는 다음과 같은 타입의 표현식이 있다: -</p> -<ul><li> 산술형 : 3.14159와 같이 숫자를 표현(evaluate). (일반적으로 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">산술 연산자</a>를 사용) -</li><li> 문자열형: "Fred"나 "234"와 같이 문자열을 표현(evaluate). (일반적으로 <a href="ko/Core_JavaScript_1.5_Guide/Operators/String_Operators">문자열 연산자</a>를 사용) -</li><li> 논리형: 참(true) 혹은 거짓(false)을 표현(evaluate). (종종 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">논리 연산자</a>와 함께 사용) -</li><li> 객체형: 객체를 표현(evaluate). (객체표현식에 사용하는 다양한 연산자는 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators">특수 연산자</a>를 참고) -</li></ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Unicode", "Core_JavaScript_1.5_Guide:Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wyra\u017cenia" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html deleted file mode 100644 index 8bd3674552..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: JavaScript Overview -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview ---- -<h3 id="JavaScript.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name="JavaScript.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">JavaScript란 무엇인가?</h3> -<p>JavaScript는 크로스 플랫폼, 객체 지향 스크립트 언어입니다. JavaScript는 작고, 가벼운 언어입니다; JavaScript는 단독으로 쓰이는 언어로는 유용하지 않지만, 웹 브라우져 같은 다른 제품이나 프로그램에 포함하기 쉽습니다. 호스트 환경에서 JavaScript는 그 환경의 다른 개체(object)들을 프로그램적으로 제어하기 위해서 그들과 연결될 수 있습니다.</p> -<p>기본 JavaScript(core JavaScript)는 <code>Array</code>, <code>Date</code>, <code>Math</code>등 기본이 되는 개체들(core set of objects)과 연산자, 제어 구조, 문장등 언어의 기본 요소들(core set of language elements)을 포함하고 있습니다. 기본 JavaScript는 다른 개체를 추가함으로써 다양한 목적을 위해 확장될 수 있습니다. 예를 들면 다음과 같은 것들입니다.</p> -<ul> <li>"클라이언트쪽 JavaScript"는 브라우저(Navigatore 또는 다른 브라우저들)와 브라우저의 Document Object Model(DOM)을 제어할 수 있는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 클라이언트쪽 확장 기능은 응용프로그램이 HTML 폼에 요소를 두어 마우스 클릭이나 폼 입력, 페이지 이동 같은 사용자 이벤트에 반응할 수 있게 합니다.</li> <li>"서버쪽 JavaScript"는 서버에서 JavaScript를 실행하는 데 연관되는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 서버쪽 확장 기능은 응용프로그램이 관계형 데이터베이스와 통신할 수 있게 하고, 응용프로그램의 호출들 사이에 연속성을 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.</li> -</ul> -<p>JavaScript의 LiveConnect 기능을 통해서, Java와 JavaScript 코드가 서로 통신할 수 있습니다. JavaScript에서 Java 개체를 초기화하여 개체의 공개 메소드와 필드에 접근할 수 있습니다. Java에서 JavaScript 개체, 속성(property), 메소드에 접근할 수 있습니다.</p> -<p>Netscape가 JavaScript를 개발했고 Netscape 브라우저에서 JavaScript가 가장 먼저 사용되었습니다.</p> -<h3 id="JavaScript.EC.99.80_Java" name="JavaScript.EC.99.80_Java">JavaScript와 Java</h3> -<p>JavaScript 와 Java 는 여러가지 면에서 비슷하지만 본질적으로 다릅니다. JavaScript는 Java 와 공통점이 있지만 Java 처럼 형(type)을 검사하지 않습니다. JavaScript는 Java 문법의 대부분과 제어흐름의 기본적인 개념들을 지원합니다.</p> -<p>Java의 클래스 선언으로 이루어지는 컴파일 타임 시스템에 대조적으로, JavaScript는 수, 불리언, 문자열 값을 나타내는 작은 규모의 자료형에 기반한 런타임 시스템을 지원합니다. JavaScript는 클래스 기반 개체 모델이 아닌 프로토타입 기반(prototype-based) 개체 모델을 갖고 있습니다. 프로토타입 기반 개체 모델은 동적인 상속을 제공합니다. 즉, 각각의 개체를 상속할 수 있는 것입니다. JavaScript는 또 특별히 선언시의 요구사항이 없는 함수도 지원합니다. 함수는 느슨하게 타입된 메소드로 실행됨으로써 개체의 속성이 될 수 있습니다.(Functions can be properties of objects, executing as loosely typed methods.)</p> -<p>Java에 비해 JavaScript는 형식이 자유로운 언어입니다. 모든 변수, 클래스, 메소드들을 꼭 선언 할 필요는 없습니다. 메소드가 public, private, protected 인지 고민해야할 필요가 없고, interface를 구현할 필요도 없습니다. 변수, 매개변수(parameter), 함수의 반환 형식도 명시적으로 지정할 필요가 없습니다.</p> -<p>Java는 클래스 기반 프로그래밍 언어로서, 빠른 실행과 형 안정성(type safety)을 위해 설계되었습니다. 형 안정성이란 예를 들면 Java에서 정수를 개체 참조로 변환할 수 없고, Java 바이트코드에 오류를 일으켜서 사적인(private) 메모리 공간에 접근할 수 없다는 말입니다. 자바의 클래스 기반 모델은 프로그램이 클래스와 클래스의 메소드로만 이루어진다는 의미입니다. Java의 클래스 상속과 엄격한 형 검사(strong typing)는 일반적으로 단단히 결합된 개체의 계층 구조를 필요로 합니다. 이런 요구사항이 JavaScript 프로그래밍에 비해 Java 프로그래밍을 더 복잡하게 만듭니다.</p> -<p>반면 JavaScript는 HyperTalk나 dBASE 같이 적은 줄수의 동적 타입 언어를 계승한 것입니다. 이런 스크립트 언어는 더 많은 사람들을 위한 프로그래밍 도구로서 제공되는데, 이 언어들이 문법이 쉽고, 내장되기에 쉬우며, 개체 생성에 요구 사항이 단순하기 때문입니다.</p> -<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript</th> <th>Java</th> </tr> <tr> <td>개체 지향. 개체의 형식 사이에 구분이 없음. 프로토타입 메커니즘을 통해 상속을 지원하고, 어떤 개체에든지 동적으로 속성과 메소드를 추가할 수 있습니다.</td> <td>클래스 기반. 개체는 클래스 계층 구조를 관통하는 상속을 통해서 클래스와 인스턴스(instance)로 나뉩니다. 클래스와 인스턴스에는 동적으로 속성과 메소드를 추가할 수 없습니다.</td> </tr> <tr> <td>변수의 자료형을 선언하지 않음(동적 형 검사)</td> <td>변수의 자료형을 반드시 선언해야 함(정적 형 검사)</td> </tr> <tr> <td>Cannot automatically write to hard disk.</td> <td>Cannot automatically write to hard disk.</td> </tr> </tbody> -</table> -<p><small><strong>표(Table) 1.1: JavaScript 와 Java 비교</strong></small><br> -<br> -Java와 JavaScript 사이의 차이점에 대해서 더 알고 싶으시면 <a href="/ko/Core_JavaScript_1.5_Guide#.EA.B0.9C.EC.B2.B4_.EB.AA.A8.EB.8D.B8.EC.9D.98_.EC.83.81.EC.84.B8_.EB.82.B4.EC.9A.A9" title="ko/Core_JavaScript_1.5_Guide#.EA.B0.9C.EC.B2.B4_.EB.AA.A8.EB.8D.B8.EC.9D.98_.EC.83.81.EC.84.B8_.EB.82.B4.EC.9A.A9">개체 모델의 상세 내용</a>을 보시기 바랍니다.</p><h3 id="JavaScript.EC.99.80_ECMAScript_.EB.AA.85.EC.84.B8" name="JavaScript.EC.99.80_ECMAScript_.EB.AA.85.EC.84.B8">JavaScript와 ECMAScript 명세</h3> -<p>Netscape가 JavaScript를 개발했고, Netscape 브라우저에서 가장 처음으로 사용되었습니다. 그러나 <a class="external" href="http://www.ecma-international.org/">Ecma International</a> - 정보와 통신 시스템을 표준화하기 위한 유럽 기구(공식적으로 ECMA - the European Computer Manufacturers Association으로 알려짐) - 과 Netscape가 공동으로 작업하여 기본 JavaScript에 기반하여 표준화되고 국제적인 프로그래밍 언어를 만들어냈습니다. JavaScript의 표준화된 버전은 ECMAScript라고 부르고, 표준을 지원하는 응용프로그램에서는 모두 동일하게 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해서 공개된 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세에 문서화되어 있습니다.</p> -<p>ECMA-262 표준은 <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization, 국제 표준화기구)의 승인을 받아 ISO-16262가 되었습니다. Mozilla 웹사이트에서 <a class="external" href="http://www.mozilla.org/js/language/E262-3.pdf">ECMA-262의 PDF 문서</a>를 얻을 수 있습니다. <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International 웹사이트</a> 에서도 명세를 찾을 수 있습니다. ECMAScript 명세는 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>에서 표준화 한 Document Object Model(DOM)에 대해서는 설명하지 않습니다. DOM은 HTML 문서 개체들이 스크립트에 노출되는 방식을 정의합니다.</p> -<h4 id="JavaScript_.EB.B2.84.EC.A0.84.EA.B3.BC_ECMAScript_.ED.8C.90.EB.B3.B8_.EC.82.AC.EC.9D.B4.EC.9D.98_.EA.B4.80.EA.B3.84" name="JavaScript_.EB.B2.84.EC.A0.84.EA.B3.BC_ECMAScript_.ED.8C.90.EB.B3.B8_.EC.82.AC.EC.9D.B4.EC.9D.98_.EA.B4.80.EA.B3.84">JavaScript 버전과 ECMAScript 판본 사이의 관계</h4> -<p>Netscape는 ECMA와 밀접하게 작업하여 ECMAScript Specification(ECMA-262)를 만들었습니다. JavaScript 버전과 ECMAScript 판본(edition)들 사이의 관계가 아래 표에 설명되어 있습니다.</p> -<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript 버전</th> <th>ECMAScript 판본과의 관계</th> </tr> <tr> <td>JavaScript 1.1</td> <td>ECMA-262, 1판은 JavaScript 1.1에 기초합니다.</td> </tr> <tr> <td>JavaScript 1.2</td> <td>JavaScript 1.2가 발표됐을 때 ECMA-262가 아직 완성되지 않았습니다. 다음과 같은 이유때문에 JavaScript 1.2는 ECMA-262 1판과 완벽하게 호환되지 않습니다. <ul> <li>Netscape는 JavaScript 1.2에 몇 가지 기능을 추가했으나, ECMA-262에서 고려하지 못했습니다.</li> <li>ECMA-262는 두 가지 새 기능을 추가했습니다. 유니코드를 이용한 국제화, 모든 플랫폼에서의 동일한 동작. Date 개체 같은 JavaScript 1.2의 몇 가지 기능이 플랫폼에 의존적이었습니다.</li> </ul> </td> </tr> <tr> <td> <p>JavaScript 1.3</p> </td> <td> <p>JavaScript 1.3은 ECMA-262 1판과 완벽하게 호환됩니다.</p> <p>JavaScript 1.3은 ==와 !=연산자를 제외하고는 JavaScript 1.2의 추가적인 기능을 그대로 유지하면서 JavaScript 1.2가 ECMA-262와 어긋나던 점들을 해결했습니다. ==, != 연산자는 ECMA-262에 맞추기 위해 수정되었습니다.</p> </td> </tr> <tr> <td> <p>JavaScript 1.4</p> </td> <td> <p>JavaScript 1.4는 ECMA-262 1판과 완벽하게 호환됩니다.</p> <p>JavaScript 1.4가 발표되었을 때 ECMAScript 명세의 세 번째 버전이 아직 완성되지 않았습니다.</p> </td> </tr> <tr> <td>JavaScript 1.5</td> <td>JavaScript 1.5는 ECMA-262 3판과 완벽하게 호환됩니다.</td> </tr> </tbody> -</table> -<p><small><strong>표 1.2: JavaScript 버전과 ECMAScript 판본</strong></small><br> -<br> -참고: ECMA-262 2판은 1판에 편집상 사소한 변경과 버그 수정을 가한 판본입니다. 현재 ECMA의 TC39 워킹그룹에서 ECMAScript 4판을 작업하고 있습니다. 4판은 JavaScript 2.0과 대응될 것입니다.</p> -<p><a href="/ko/Core_JavaScript_1.5_Guide" title="ko/Core_JavaScript_1.5_Guide">JavaScript 기본 레퍼런스</a>에서 ECMAScript 호환 기능을 보여줍니다.</p> -<p>JavaScript는 항상 ECMAScript Specification에 포함되지 않은 기능들을 포함할 것입니다. JavaScript는 추가적인 기능을 제공하지만 ECMAScript와 호환됩니다.</p> -<h4 id="JavaScript_.EB.AC.B8.EC.84.9C_vs_ECMAScript_.EB.AA.85.EC.84.B8.EC.84.9C" name="JavaScript_.EB.AC.B8.EC.84.9C_vs_ECMAScript_.EB.AA.85.EC.84.B8.EC.84.9C">JavaScript 문서 vs ECMAScript 명세서</h4> -<p>ECMAScript 명세는 ECMAScript를 구현하는데 필요한 요구사항을 모아놓은 것입니다. 이것은 우리가 JavaScript의 한 기능이 다른 ECMAScript 구현에서도 지원될 것인지 결정하는데 유용합니다. ECMAScript에서 지원하는 기능만을 사용하는 JavaScript 코드를 작성할 계획이라면 ECMAScript 명세를 살펴볼 필요가 있을 것입니다.</p> -<p>ECMAScript 문서는 스크립트 프로그래머를 돕기위해 작성된 것이 아닙니다. 스크립트 작성에 대한 정보를 얻으려면 JavaScript 문서를 보십시오.</p> -<h4 id="JavaScript.EC.99.80_ECMAScript_.EC.9A.A9.EC.96.B4" name="JavaScript.EC.99.80_ECMAScript_.EC.9A.A9.EC.96.B4">JavaScript와 ECMAScript 용어</h4> -<p>ECMAScript 명세는 JavaScript 프로그래머에게는 친숙하지 않은 용어와 문법을 사용하여 작성되었습니다. 비록 ECMAScript의 언어 설명이 다르긴 하지만 언어는 똑같습니다. JavaScript는 ECMAScript 명세에서 설명하는 모든 기능을 지원합니다.</p> -<p>JavaScript 문서는 JavaScript 프로그래머에게 적당한 언어의 측면을 설명합니다. 예를 들면 이렇습니다.</p> -<ul> <li>전역 개체(Global Object)는 JavaScript 문서에서는 논의되지 않는데, 그것은 우리가 그 개체를 직접 사용할 일이 없기 때문입니다. 전역 개체에서 우리가 사용할 만한 메소드와 속성은 JavaScript 문서에서 논의되고 있기는 하지만 최상위(top-level) 함수와 속성이라고 부릅니다.</li> <li>JavaScript 문서에서 매개변수가 없는 <code>Number</code>와 <code>String</code> 개체 생성자는 논의되지 않고 있는데, 그것은 거의 사용할 일이 없기 때문입니다. <code>Number</code>의 인자없는 생성자는 +0을 반환하고, <code>String</code>의 인자없는 생성자는 ""(빈 문자열)을 반환합니다.</li> -</ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:About", "Core_JavaScript_1.5_Guide:Values") }}</p> -<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/JavaScript_Overview", "fr": "fr/Guide_JavaScript_1.5/Aper\u00e7u_de_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/JavaScript_Overview", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_JavaScriptu" } ) }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html deleted file mode 100644 index 0b40cb802d..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Objects and Properties -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties ---- -<h3 id=".EA.B0.9D.EC.B2.B4.EC.99.80_.EC.86.8D.EC.84.B1" name=".EA.B0.9D.EC.B2.B4.EC.99.80_.EC.86.8D.EC.84.B1"> 객체와 속성 </h3> -<p>자바스크립트 객체는 객체를 구성하는 속성을 가지고 있습니다. 속성에는 간단한 방법으로 접근할 수 있습니다.: -</p> -<pre>객체이름.속성이름 -</pre> -<p>객체 이름과 속성 이름 두 가지 모두에 대해 알기쉬운 예가 있습니다. 속성은 값을 지정하여 정의합니다. 예를 들어 <code>myCar</code>라는 객체가 있다면(객체가 이미 존재한다고 가정합니다.), <code>make</code>, <code>model</code>, <code>year</code>라는 속성에 다음과 같이 값을 지정할 수 있습니다. -</p> -<pre>myCar.make = "Ford"; -myCar.model = "Mustang"; -myCar.year = 1969; -</pre> -<p>배열은 한 가지 변수 이름으로 결합되어 있는 연속된 값의 집합입니다. 자바스크립트에서 속성과 배열은 밀접한 관련이 있습니다; 말하자면 그 두 가지는 같은 데이터 구조에 다른 인터페이스라는 뜻입니다. 예를 들면 <code>myCar</code> 객체에 다음과 같이 접근할 수도 있습니다: -</p> -<pre>myCar["make"] = "Ford"; -myCar["model"] = "Mustang"; -myCar["year"] = 1967; -</pre> -<p>이러한 배열의 종류는 <i>연관 배열</i>이라고 부릅니다. 왜냐하면 각각의 인덱스 요소가 문자열 값과 연관되어 있기 때문입니다. 이러한 방식에 대한 설명은 다음의 함수에 객체와 객체의 이름을 입력했을 때 객체의 속성을 표시해주는 다음과 같은 함수에서 알아볼 수 있습니다: -</p> -<pre>function show_props(obj, obj_name) { - var result = ""; - for (var i in obj) - result += obj_name + "." + i + " = " + obj[i] + "\n"; - return result; -} -</pre> -<p>결과적으로 <code>call show_props(myCar, "myCar")</code>라는 함수 호출은 다음과 같은 값을 반환합니다: -</p> -<pre>myCar.make = Ford -myCar.model = Mustang -myCar.year = 1967 -</pre> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Functions:escape_and_unescape_Functions", "Core_JavaScript_1.5_Guide:Creating_New_Objects") }} -</p>{{ languages( { "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_i_w\u0142a\u015bciwo\u015bci" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html deleted file mode 100644 index e76f0b7653..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Assignment Operators -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators ---- -<h3 id=".ED.95.A0.EB.8B.B9_.EC.97.B0.EC.82.B0.EC.9E.90" name=".ED.95.A0.EB.8B.B9_.EC.97.B0.EC.82.B0.EC.9E.90">할당 연산자</h3> -<p>할당 연산자는 왼쪽 피연산자에 오른쪽 피연산자의 값을 할당합니다. 가장 기본적인 할당 연산자에는 등호(=)가 있는데, 왼쪽 피연산자의 값을 오른쪽 연산자에 할당합니다. 즉, x = y 라고 하면 y의 값이 x에 할당되는 것입니다.</p> -<p>다른 할당 연산자는 다음 표에서 보듯이 표준연산을 약식으로 쓰는 것입니다.</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>약식 연산자</th> - <th>의미</th> - </tr> - <tr> - <td>x += y</td> - <td>x = x + y</td> - </tr> - <tr> - <td>x -= y</td> - <td>x = x - y</td> - </tr> - <tr> - <td>x *= y</td> - <td>x = x * y</td> - </tr> - <tr> - <td>x /= y</td> - <td>x = x / y</td> - </tr> - <tr> - <td>x %= y</td> - <td>x = x % y</td> - </tr> - <tr> - <td>x <<= y</td> - <td>x = x << y</td> - </tr> - <tr> - <td>x >>= y</td> - <td>x = x >> y</td> - </tr> - <tr> - <td>x >>>= y</td> - <td>x = x >>> y</td> - </tr> - <tr> - <td>x &= y</td> - <td>x = x & y</td> - </tr> - <tr> - <td>x ^= y</td> - <td>x = x ^ y</td> - </tr> - <tr> - <td>x |= y</td> - <td>x = x | y</td> - </tr> - </tbody> -</table> -<p><small><b>표: 할당 연산자</b></small></p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators", "Core_JavaScript_1.5_Guide:Operators:Comparison_Operators") }}</p> diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html deleted file mode 100644 index a0c66afea2..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Operators -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators ---- -<h3 id=".EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.97.B0.EC.82.B0.EC.9E.90"> 연산자 </h3> -<p>JavaScript에는 다음과 같은 연산자 타입이 있습니다. 이 섹션은 연산자에 대해 기술하고 연산자 우선순위에 대한 정보를 제공합니다. -</p> -<ul><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators">할당 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators">비교 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">산술 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">비트 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">논리 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/String_Operators">문자열 연산자</a> -</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators">특수 연산자</a> -</li></ul> -<p>JavaScript는 이항연산자와 단항연산자를 모두 사용할 수 있습니다. 이항연산자는 두개의 피연산자(operand)를 가지며, 하나의 피연산자는 연산자 앞에 나머지 하나는 뒤에 위치합니다: -</p> -<pre>operand1 operator operand2 -</pre> -<p>예를 들자면, <code>3+4</code> 혹은 <code>x*y</code>와 같은 것입니다. -</p><p>단항연산자는 연산자 앞 혹은 뒤쪽에 하나의 피연산자만 있으면 됩니다: -</p> -<pre>operator operand -</pre> -<p>혹은 -</p> -<pre>operand operator -</pre> -<p>예를 들자면, <code>x++</code> 혹은 <code>++x</code>와 같은 것입니다. -</p><p>덧붙여, JavaScript는 한개의 삼항연산자, 조건 연산자를 가지고 있습니다. 삼항 연산자는 세개의 피연산자가 필요합니다. -</p> -<h4 id=".EC.97.B0.EC.82.B0.EC.9E.90_.EC.9A.B0.EC.84.A0.EC.88.9C.EC.9C.84" name=".EC.97.B0.EC.82.B0.EC.9E.90_.EC.9A.B0.EC.84.A0.EC.88.9C.EC.9C.84"> 연산자 우선순위 </h4> -<p><small><i><a>관련된 논의</a>에 따라서, 아래의 표는 우선순위 순으로 <b>내림차순</b> 정렬되었습니다.</i></small> -</p> -<table class="fullwidth-table"> -<tbody><tr> -<th>연산자 타입</th> -<th>사용하는 연산자</th> -</tr> -<tr> -<td>멤버 </td> -<td>. []</td> -</tr> -<tr> -<td>호출 / 인스턴스 생성 </td> -<td>() new</td> -</tr> -<tr> -<td>부정/증감 </td> -<td>! ~ - + ++ -- typeof void delete</td> -</tr> -<tr> -<td>곱하기/나누기 </td> -<td>* / %</td> -</tr> -<tr> -<td>더하기/빼기 </td> -<td>+ -</td> -</tr> -<tr> -<td>비트 이동 </td> -<td><< >> >>></td> -</tr> -<tr> -<td>관계 </td> -<td>< <= > >= in instanceof</td> -</tr> -<tr> -<td>같음 </td> -<td>== != === !==</td> -</tr> -<tr> -<td>비트연산-and </td> -<td>&</td> -</tr> -<tr> -<td>비트연산-xor </td> -<td>^</td> -</tr> -<tr> -<td>비트연산-or </td> -<td>|</td> -</tr> -<tr> -<td>논리연산-and </td> -<td>&&</td> -</tr> -<tr> -<td>논리연산-or </td> -<td>||</td> -</tr> -<tr> -<td>조건 </td> -<td>?:</td> -</tr> -<tr> -<td>할당 </td> -<td>= += -= *= /= %= <<= >>= >>>= &= ^= |=</td> -</tr> -<tr> -<td>컴마</td> -<td>,</td> -</tr> -</tbody></table> -<p><small><b>표: 연산자 우선순위</b></small> -</p><p>이 표의 보다 자세한 버전은 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Operator_Precedence#Table">레퍼런스 섹션</a>에 있는 각 연산자별 상세한 추가 설명 링크를 참고하세요. -</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Expressions", "Core_JavaScript_1.5_Guide:Operators:Assignment_Operators") }} -</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html deleted file mode 100644 index 5d7d2e2892..0000000000 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Array Object -slug: >- - orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -original_slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object ---- -<h3 id="Array_.EA.B0.9C.EC.B2.B4" name="Array_.EA.B0.9C.EC.B2.B4">Array 개체</h3> -<p>JavaScript에는 명시적인 배열 자료형이 없습니다. 하지만 배열을 다루기 위해서 <code>Array</code> 개체와 그 개체의 메소드를 이용할 수 있습니다. <code>Array</code> 개체에는 다양한 방법으로 배열을 다루기 위한 메소드들이 있는데, 배열을 합치거나, 순서를 뒤집거나, 정렬하는 등의 작업을 할 수 있습니다. 배열 길이를 알 수 있는 속성과 정규 표현식에 사용할 수 있는 속성들이 있습니다. - <i> - 배열</i> - 은 이름이나 색인으로 참조할 수 있는 값들을 모아놓은, 값의 순서가 유지되는 집합입니다. 예를 들어, 우리는 고용 번호로 색인된 고용인의 이름을 담고 있는 <code>emp</code>라는 배열을 만들 수 있습니다. 이 때 <code>emp{{ mediawiki.external(1) }}</code>는 1번 고용인, <code>emp{{ mediawiki.external(2) }}</code> 2번 고용인이 되는 것입니다.</p> -<p> </p> -<h4 id=".EB.B0.B0.EC.97.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.B0.B0.EC.97.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">배열 만들기</h4> -<p><code>Array</code> 개체는 이렇게 만들 수 있습니다.</p> -<pre>1. arrayObjectName = new Array(element0, element1, ..., elementN) -2. arrayObjectName = new Array(arrayLength) -</pre> -<p><code>arrayObjectName</code>은 새 개체의 이름이거나 존재하는 다른 개체의 속성 이름입니다. <code>Array</code> 개체의 속성이나 메소드를 이용할 때는 arrayObjectName은 존재하는 <code>Array</code> 개체 이름이거나 존재하는 다른 개체의 속성입니다.</p> -<p><code>element0, element1, ..., elementN</code>는 배열의 원소(element)가 될 값들입니다. 이런 식으로 지정하면, 나열한 값들을 원소로 가지고, 길이는 값의 개수인 배열이 만들어집니다.</p> -<p><code>arrayLength</code>는 배열의 초기 길이입니다. 다음 코드는 원소 다섯 개를 가지는 배열을 만듭니다.</p> -<pre>billingMethod = new Array(5) -</pre> -<p>배열 상수값 또한 <code>Array</code> 개체입니다. 예를 들어, 다음과 같은 상수값은 <code>Array</code> 개체입니다. 배열 상수값에 대한 자세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Literals#.EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">배열 상수값</a>을 보시기 바랍니다.</p> -<pre>coffees = ["French Roast", "Columbian", "Kona"] -</pre> -<h4 id=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.9B.90.EC.86.8C_.EB.84.A3.EA.B8.B0" name=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.9B.90.EC.86.8C_.EB.84.A3.EA.B8.B0">배열에 원소 넣기</h4> -<p>원소에 값을 할당함으로써 배열에 값을 넣을 수 있습니다.</p> -<pre>emp[1] = "Casey Jones" -emp[2] = "Phil Lesh" -emp[3] = "August West" -</pre> -<p>배열을 만들 때 값을 넣을 수도 있습니다.</p> -<pre>myArray = new Array("Hello", myVar, 3.14159) -</pre> -<h4 id=".EB.B0.B0.EC.97.B4_.EC.9B.90.EC.86.8C_.EC.B0.B8.EC.A1.B0.ED.95.98.EA.B8.B0" name=".EB.B0.B0.EC.97.B4_.EC.9B.90.EC.86.8C_.EC.B0.B8.EC.A1.B0.ED.95.98.EA.B8.B0">배열 원소 참조하기</h4> -<p>배열 원소의 순서를 나타내는 숫자로 원소를 참조할 수 있습니다. 예를 들어 다음과 같은 배열을 만들었다고 해봅시다.</p> -<pre>myArray = new Array("Wind","Rain","Fire") -</pre> -<p>그러면 첫 번째 원소는 <code>myArray{{ mediawiki.external(0) }}</code>으로 참조할 수 있고, 두 번째 원소는 <code>myArray{{ mediawiki.external(1) }}</code>로 참조할 수 있습니다.</p> -<p>원소의 색인은 영(0)부터 시작하지만 배열 길이(예를 들면 <code>myArray.length</code>)는 배열의 원소 개수를 나타냅니다.</p> -<p> </p> -<h4 id="Array_.EA.B0.9C.EC.B2.B4.EC.9D.98_.EB.A9.94.EC.86.8C.EB.93.9C" name="Array_.EA.B0.9C.EC.B2.B4.EC.9D.98_.EB.A9.94.EC.86.8C.EB.93.9C">Array 개체의 메소드</h4> -<p><code>Array</code> 개체는 다음과 같은 메소드들을 가지고 있습니다.</p> -<ul> - <li><code>concat</code> 메소드는 두 배열을 합쳐서 새 배열 하나를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1","2","3") -myArray = myArray.concat("a", "b", "c"); // myArray는 ["1", "2", "3", "a", "b", "c"]이 되었습니다. -</pre> -<ul> - <li><code>join(deliminator = ",")</code> 메소드는 배열의 모든 원소를 문자열로 바꿔서 하나의 문자열을 만들어줍니다.</li> -</ul> -<pre>myArray = new Array("Wind","Rain","Fire") -list = myArray.join(" - "); // list는 "Wind - Rain - Fire"입니다. -</pre> -<ul> - <li><code>pop</code> 메소드는 배열의 마지막 원소를 배열에서 제거하고 그 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1", "2", "3"); -last=myArray.pop(); // MyArray는 ["1", "2"], last = "3"이 되었습니다. -</pre> -<ul> - <li><code>push</code> 메소드는 하나 또는 그 이상의 원소를 배열 끝에 추가하고, 추가된 마지막 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array("1", "2"); -myArray.push("3"); // MyArray는 ["1", "2", "3"]이 되었습니다. -</pre> -<ul> - <li><code>reverse</code> 메소드는 원소의 순서를 뒤집어서 첫 번째 원소가 마지막 원소가 되고, 마지막 원소가 첫 번째 원소가 되도록 합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3"); -myArray.reverse(); // myArray = [ "3", "2", "1" ]이 되었습니다. -</pre> -<ul> - <li><code>shift</code> 메소드는 첫 번째 요소를 배열에서 제거하고, 그 원소를 반환합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3"); -first=myArray.shift(); // MyArray는 ["2", "3"], first는 "1"이 되었습니다. -</pre> -<ul> - <li><code>slice (start_index, upto_index)</code> 메소드는 배열의 일부분을 추출하여 새 배열을 반환합니다.</li> -</ul> -<pre>myArray = new Array ("a", "b", "c", "d", "e"); -myArray = myArray.slice(1,4); //색인 1부터 색인 4 바로 앞까지의 원소를 추출해서 [ "b", "c", "d" ]를 반환합니다. -</pre> -<ul> - <li><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code> 메소드는 배열에 원소를 추가하거나 배열에서 원소를 제거합니다.</li> -</ul> -<pre>myArray = new Array ("1", "2", "3", "4", "5"); -myArray.splice(1,3,"a","b","c", "d"); // MyArray는 ["1", "a", "b", "c", "d", "5"]가 되었습니다. -// 이 코드는 색인 1(즉 "2")부터 원소 세 개를 제거하고, 그 자리에 원소를 추가합니다. -</pre> -<ul> - <li><code>sort</code> 메소드는 원소를 정렬합니다.</li> -</ul> -<pre>myArray = new Array("Wind","Rain","Fire") -myArray.sort(); // 배열을 정렬했으므로 myArrray = [ "Fire", "Rain", "Wind" ]가 되었습니다. -</pre> -<p><code>sort</code> 메소드에 배열을 어떻게 정렬할지 결정하는 콜백 함수를 전해줄 수 있습니다. 그 함수는 두 값을 비교해서 다음 셋 중 하나를 반환해야 합니다.</p> -<ul> - <li>정렬할 때 a가 b보다 작다면 -1(또는 임의의 음수)를 반환</li> - <li>정렬할 때 a가 b보다 크다면 1(또는 임의의 양수)를 반환</li> - <li>a와 b가 같으면 0을 반환</li> -</ul> -<p>예를 들어 다음 코드는 원소의 마지막 글자를 기준으로 배열을 정렬합니다.</p> -<pre>var sortFn = function(a,b){ - if (a[a.length - 1] < b[b.length - 1]) return -1; - if (a[a.length - 1] > b[b.length - 1]) return 1; - if (a[a.length - 1] == b[b.length - 1]) return 0; - } -myArray.sort(sortFn); // 배열을 정렬했으므로 myArray = ["Wind","Fire","Rain"]가 되었습니다. -</pre> -<ul> - <li><code>unshift</code> 메소드는 하나 또는 그 이상의 원소를 배열 앞에 추가하고 배열의 새 길이를 반환합니다.</li> -</ul> -<h4 id="2.EC.B0.A8.EC.9B.90_.EB.B0.B0.EC.97.B4" name="2.EC.B0.A8.EC.9B.90_.EB.B0.B0.EC.97.B4">2차원 배열</h4> -<p>다음 코드는 2차원 배열을 만듭니다.</p> -<pre>a = new Array(4) -for (i=0; i < 4; i++) { - a[i] = new Array(4) - for (j=0; j < 4; j++) { - a[i][j] = "["+i+","+j+"]" - } -} -</pre> -<p>바로 위 코드는 이런 배열을 만들어냅니다.</p> -<pre>Row 0:[0,0][0,1][0,2][0,3] -Row 1:[1,0][1,1][1,2][1,3] -Row 2:[2,0][2,1][2,2][2,3] -Row 3:[3,0][3,1][3,2][3,3] -</pre> -<h4 id=".EB.B0.B0.EC.97.B4.EA.B3.BC_.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D" name=".EB.B0.B0.EC.97.B4.EA.B3.BC_.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D">배열과 정규 표현식</h4> -<p>배열이 정규 표현식과 문자열을 매치한 결과로 생성되었을 때, 그 배열은 매치에 대한 정보를 제공하는 속성과 원소를 포함하고 있습니다. <code>RegExp.exec</code>, <code>String.match</code>, <code>String.split</code>의 반환 값은 배열입니다. 정규 표현식과 관련된 배열 사용에 대한 정보를 얻으려면 4장 <a href="ko/Core_JavaScript_1.5_Guide#.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D">정규 표현식</a>을 보십시오.</p> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Boolean_Object") }}</p> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html deleted file mode 100644 index 7030f4daf3..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: BigInt.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype -tags: - - BigInt - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>BigInt.prototype</code></strong> 속성은 {{jsxref("BigInt")}} 생성자의 프로토타입을 나타냅니다.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="설명">설명</h2> - -<p>모든 {{jsxref("BigInt")}} 인스턴스는 <code>BigInt.prototype</code>을 상속합니다. <code>BigInt</code> 생성자의 프로토타입 객체를 변형해 모든 <code>BigInt</code> 인스턴스에 영향을 줄 수 있습니다.</p> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>BigInt.prototype.constructor</code></dt> - <dd>이 객체의 인스턴스를 만들 때 사용한 함수를 반환합니다. 기본값은 {{jsxref("BigInt")}} 객체입니다.</dd> -</dl> - -<h2 id="메서드">메서드</h2> - -<dl> - <dt><code>BigInt.prototype.toLocaleString()</code></dt> - <dd>BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd> - <dt><code>BigInt.prototype.toString()</code></dt> - <dd><code>BigInt</code>의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> - <dt><code>BigInt.prototype.valueOf()</code></dt> - <dd><code>BigInt</code> 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> -</dl> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - </tr> - <tr> - <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype">BigInt.prototype</a></td> - <td>Stage 3</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html deleted file mode 100644 index c3bc792458..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Map.prototype[@@toStringTag] -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag ---- -<div>{{JSRef}}</div> - -<p><strong><code>Map[@@toStringTag]</code></strong> 프로퍼티의 초기값은 "Map"입니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}</div> - - - -<div>{{js_property_attributes(0,0,1)}}</div> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox">Map[Symbol.toStringTag]</pre> - -<h2 id="예제">예제</h2> - -<pre class="brush:js">Object.prototype.toString.call(new Map()) // "[object Map]" -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.@@toStringTag")}}</p> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/clear/index.html deleted file mode 100644 index 292c68789c..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -<div>{{JSRef}}</div> - -<p><code><strong>clear()</strong></code> 메서드는 <code>Map</code> 객체의 모든 요소를 제거합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><em>myMap</em>.clear(); -</pre> - -<h2 id="예제">예제</h2> - -<h3 id="clear()_사용하기"><code>clear()</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', 'baz'); -myMap.set(1, 'foo'); - -myMap.size; // 2 -myMap.has('bar'); // true - -myMap.clear(); - -myMap.size; // 0 -myMap.has('bar') // false -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.clear")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/delete/index.html deleted file mode 100644 index 0db3f71805..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -<div>{{JSRef}}</div> - -<p><code><strong>delete()</strong></code> 메서드는 <code>Map</code> 객체에서 특정 요소를 제거합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">myMap.delete(<em>key</em>);</pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>key</code></dt> - <dd><code>Map</code> 객체에서 제거할 요소의 키.</dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>요소가 <code>Map</code> 객체에 존재해서 제거했을 경우 <code>true</code>, 존재하지 않았으면 <code>false</code>.</p> - -<h2 id="예제">예제</h2> - -<h3 id="delete()_사용하기"><code>delete()</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', 'foo'); - -myMap.delete('bar'); // Returns true. Successfully removed. -myMap.has('bar'); // Returns false. The "bar" element is no longer present. -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.delete")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/entries/index.html deleted file mode 100644 index 202115e2d6..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -<div>{{JSRef}}</div> - -<p><code><strong>entries()</strong></code> 메서드는 <code>Map</code> 객체의 각 요소에 해당하는 <code>[키, 값]</code> 쌍을 <code>Map</code>에 등록한 순서대로 포함한 새로운 <strong><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong> 객체를 반환합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre> - -<h3 id="반환_값">반환 값</h3> - -<p>A new {{jsxref("Map")}} iterator object.</p> - -<h2 id="예제">예제</h2> - -<h3 id="entries()_사용하기"><code>entries()</code> 사용하기</h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set('0', 'foo'); -myMap.set(1, 'bar'); -myMap.set({}, 'baz'); - -var mapIter = myMap.entries(); - -console.log(mapIter.next().value); // ["0", "foo"] -console.log(mapIter.next().value); // [1, "bar"] -console.log(mapIter.next().value); // [Object, "baz"] -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.entries")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/foreach/index.html deleted file mode 100644 index b26b7c7d37..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -<div>{{JSRef}}</div> - -<p><code><strong>forEach()</strong></code><strong> </strong>메소드는 <code>Map</code> 오브젝트 내의 key/value 쌍의 개수 만큼 주어진 함수를 순서대로 실행합니다. </p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div> - - - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> - -<h3 id="파라미터">파라미터</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>각각의 요소를 처리하기 위한 함수.</dd> - <dt><code>thisArg</code></dt> - <dd> <code>callback</code> 을 실행할때 <code>this</code> 로 사용되는 값.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="설명">설명</h2> - -<p><code>forEach</code> 메서드는 map의 각각의 키마다 주어진 <code>callback</code> 함수를 실행합니다. 삭제된 키에대해서는 호출되지 않습니다. 그러나, 값이 존재하지만 <code>undefined</code> 인 값에 대해서는 실행됩니다.</p> - -<p><code>callback</code> 은 <strong>3가지 인수</strong>로 호출됩니다.</p> - -<ul> - <li><strong>요소의 value</strong></li> - <li><strong>요소의 key</strong></li> - <li><strong><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">사용될 </span></font>Map</code> 객체</strong></li> -</ul> - -<p><code>thisArg</code> 파라미터가 <code>forEach</code> 에 제공되면, <code>this</code> 값으로 사용하기 위해 호출될때 <code>callback</code> 으로 넘겨집니다. 그렇지 않으면 <code>undefined</code> 값이 <code>this</code> 값으로 넘겨질 것입니다. 궁극적으로 <code>callback</code> 으로 보여지게 된 <code>this</code> 값은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">함수에 의해 보여지는 this 를 결정하기 위한 일반적인 규칙에 따라 결정됩니다.</a></p> - -<p>각각의 value는 한번씩 사용됩니다. 다만 <code>forEach</code> 가 끝나기 전에 value가 삭제되거나 재추가 된 경우는 예외입니다. <code>callback</code> 은 사용되기 전에 삭제된 value에 의해 호출되지 않습니다. <code>forEach</code> 가 끝나기 전에 새롭게 추가된 value가 사용 됩니다.</p> - -<p><code>forEach</code> 는 <code>Map</code> 오브젝트 내에 있는 각각의 요소마다 <code>callback</code> 함수를 실행합니다; 깂을 반환하지 않습니다.</p> - -<h2 id="예제">예제</h2> - -<h3 id="Map_오브젝트의_내용을_출력"><code>Map</code> 오브젝트의 내용을 출력</h3> - -<p>아래의 코드는 <code>Map</code> 오브젝트 내의 각각 요소들을 행별로 출력합니다:</p> - -<pre class="brush:js">function logMapElements(value, key, map) { - console.log(`map.get('${key}') = ${value}`); -} -new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements); -// logs: -// "map.get('foo') = 3" -// "map.get('bar') = [object Object]" -// "map.get('baz') = undefined" -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Map.forEach")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Set.prototype.forEach()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/get/index.html deleted file mode 100644 index 7fbd5c19f3..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get ---- -<div>{{JSRef}}</div> - -<p><code><strong>get()</strong></code> 메서드는 <code>Map</code> 객체에서 지정한 요소를 회수합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><em>myMap</em>.get(<em>key</em>);</pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>key</code></dt> - <dd><code>Map</code> 객체에서 회수할 요소의 키.</dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>주어진 키와 연결된 요소. 그런 요소가 없으면 {{jsxref("undefined")}}.</p> - -<h2 id="예제">예제</h2> - -<h3 id="get_사용하기"><code>get</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', 'foo'); - -myMap.get('bar'); // "foo" 반환. -myMap.get('baz'); // undefined 반환. -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.get")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/has/index.html deleted file mode 100644 index 8f3d1c475e..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has ---- -<div>{{JSRef}}</div> - -<p><code><strong>has()</strong></code> 메서드는 주어진 키를 가진 요소가 <code>Map</code>에 존재하는지를 반환합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.has(<em>key</em>);</code></pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>key</code></dt> - <dd>존재 여부를 판별할 키값.</dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>주어진 키를 가진 요소가 있으면 <code>true</code>, 아니면 <code>false</code>.</p> - -<h2 id="예제">예제</h2> - -<h3 id="has()_사용하기"><code>has()</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', "foo"); - -myMap.has('bar'); // returns true -myMap.has('baz'); // returns false -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.has")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 32a5de42f7..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Map</code> </strong>객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다.</span> 아무 값(객체와 {{Glossary("Primitive", "원시 값")}})이라도 키와 값으로 사용할 수 있습니다.</p> - -<h2 id="설명">설명</h2> - -<p><code>Map</code> 객체는 요소의 삽입 순서대로 원소를 순회합니다. {{jsxref("Statements/for...of", "for...of")}} 반복문은 각 순회에서 <code>[key, value]</code>로 이루어진 배열을 반환합니다.</p> - -<h3 id="키_동일성">키 동일성</h3> - -<ul> - <li>키 동일성은 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness#등가0_같음"><code>sameValueZero</code></a> 알고리즘에 기반합니다.</li> - <li><code>NaN !== NaN</code>이지만, 그럼에도 <code>NaN</code>은 <code>NaN</code>과 일치한다고 간주하며, 다른 모든 값은 <code>===</code> 연산자의 결과를 따릅니다.</li> - <li>현 ECMAScript 명세는 <code>-0</code>과 <code>+0</code>을 같은 값으로 처리하지만 초기 명세에서는 그렇지 않았습니다. {{anch("브라우저 호환성")}}의 "<em>Key equality for -0 and 0</em>"을 참고하세요.</li> -</ul> - -<h3 id="jsxrefObject와_Map_비교">{{jsxref("Object")}}와 <code>Map</code> 비교</h3> - -<p>{{jsxref("Object")}}는 값에 키를 할당할 수 있고, 그 키로 값을 얻을 수 있고, 키를 삭제할 수 있으며 어떤 키에 값이 존재하는지 확인할 수 있다는 점에서 <code>Map</code>과 유사합니다. 이런 이유에 더해, 이전에는 내장된 대체제가 없었기 때문에, <code>Object</code>를 <code>Map</code> 대신 사용하곤 했습니다.</p> - -<p>그러나 어떤 상황에선, <code>Map</code>을 선호해야 할 몇 가지 중요한 차이점이 있습니다.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row"></th> - <th scope="col"><code>Map</code></th> - <th scope="col"><code>Object</code></th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">의도치 않은 키</th> - <td><code>Map</code>은 명시적으로 제공한 키 외에는 어떤 키도 가지지 않습니다.</td> - <td> - <p><code>Object</code>는 프로토타입을 가지므로 기본 키가 존재할 수 있습니다. 주의하지 않으면 직접 제공한 키와 충돌할 수도 있습니다.</p> - - <div class="blockIndicator note"> - <p><strong>참고:</strong> ES5부터, 프로토타입으로 인한 키 충돌은 {{jsxref("Object.create", "Object.create(null)")}}로 해결할 수 있지만, 실제로 쓰이는 경우는 적습니다.</p> - </div> - </td> - </tr> - <tr> - <th scope="row">키 자료형</th> - <td><code>Map</code>의 키는 함수, 객체 등을 포함한 모든 값이 가능합니다.</td> - <td><code>Object</code>의 키는 반드시 {{jsxref("String")}} 또는 {{jsxref("Symbol")}}이어야 합니다.</td> - </tr> - <tr> - <th scope="row">키 순서</th> - <td> - <p><code>Map</code>의 키는 정렬됩니다. 따라서 <code>Map</code>의 순회는 삽입순으로 이뤄집니다.</p> - </td> - <td> - <p><code>Object</code>의 키는 정렬되지 않습니다.</p> - - <div class="blockIndicator note"> - <p><strong>참고:</strong> ECMAScript 201 이후로, 객체도 문자열과 <code>Symbol</code> 키의 생성 순서를 유지합니다. ECMEScript 2015 명세를 준수하는 JavaScript 엔진에서 문자열 키만 가진 객체를 순회하면 삽입 순을 따라갑니다.</p> - </div> - </td> - </tr> - <tr> - <th scope="row">크기</th> - <td><code>Map</code>의 항목 수는 {{jsxref("Map.prototype.size", "size")}} 속성을 통해 쉽게 알아낼 수 있습니다.</td> - <td><code>Object</code>의 항목 수는 직접 알아내야 합니다.</td> - </tr> - <tr> - <th scope="row">순회</th> - <td><code>Map</code>은 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">순회 가능</a>하므로, 바로 순회할 수 있습니다.</td> - <td><code>Object</code>를 순회하려면 먼저 모든 키를 알아낸 후, 그 키의 배열을 순회해야 합니다.</td> - </tr> - <tr> - <th scope="row">성능</th> - <td>잦은 키-값 쌍의 추가와 제거에서 더 좋은 성능을 보입니다.</td> - <td>잦은 키-값 쌍의 추가와 제거를 위한 최적화가 없습니다.</td> - </tr> - </tbody> -</table> - -<h2 id="생성자">생성자</h2> - -<dl> - <dt>{{jsxref("Map.Map", "Map()")}}</dt> - <dd>새로운 <code>Map</code> 객체를 생성합니다.</dd> -</dl> - -<h2 id="속성">속성</h2> - -<dl> - <dt><code>Map.length</code></dt> - <dd>값이 0인 속성입니다.<br> - 요소의 수는 {{jsxref("Map.prototype.size")}}로 알아낼 수 있습니다.</dd> - <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> - <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd> - <dt>{{jsxref("Map.prototype")}}</dt> - <dd><code>Map</code> 생성자의 프로토타입을 나타냅니다. 모든 <code>Map</code> 인스턴스에 속성을 추가할 수 있습니다.</dd> -</dl> - -<h2 id="Map_인스턴스"><code>Map</code> 인스턴스</h2> - -<p>모든 <code>Map</code> 인스턴스는 {{jsxref("Map.prototype")}}을 상속합니다.</p> - -<h3 id="속성_2">속성</h3> - -<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> - -<h3 id="메서드">메서드</h3> - -<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> - -<h2 id="예제">예제</h2> - -<h3 id="Map_객체_사용하기"><code>Map</code> 객체 사용하기</h3> - -<pre class="brush: js">let myMap = new Map() - -let keyString = '문자열' -let keyObj = {} -let keyFunc = function() {} - -// 값 설정 -myMap.set(keyString, "'문자열'과 관련된 값") -myMap.set(keyObj, 'keyObj와 관련된 값') -myMap.set(keyFunc, 'keyFunc와 관련된 값') - -myMap.size // 3 - -// getting the values -myMap.get(keyString) // "'문자열'과 관련된 값" -myMap.get(keyObj) // "keyObj와 관련된 값" -myMap.get(keyFunc) // "keyFunc와 관련된 값" - -myMap.get('문자열') // "'문자열'과 관련된 값" - // keyString === '문자열'이기 때문 -myMap.get({}) // undefined, keyObj !== {} -myMap.get(function() {}) // undefined, keyFunc !== function () {}</pre> - -<h3 id="Map의_키로_NaN_사용하기"><code>Map</code>의 키로 <code>NaN</code> 사용하기</h3> - -<p>{{jsxref("NaN")}}도 키로서 사용할 수 있습니다. 모든 <code>NaN</code>은 자기 자신과 동일하지 않지만(<code>NaN !== NaN</code>), <code>NaN</code>을 서로 구분할 수도 없기 때문에 아래 예제도 잘 동작합니다.</p> - -<pre class="brush: js">let myMap = new Map() -myMap.set(NaN, 'not a number') - -myMap.get(NaN) -// "not a number" - -let otherNaN = Number('foo') -myMap.get(otherNaN) -// "not a number"</pre> - -<h3 id="for..of로_Map_순회하기"><code>for..of</code><font face="Open Sans, arial, sans-serif">로 </font><code>Map</code> 순회하기</h3> - -<p><code>Map</code>은 <code>for..of</code> 반복문을 사용해 순회할 수 있습니다.</p> - -<pre class="brush: js">let myMap = new Map() -myMap.set(0, 'zero') -myMap.set(1, 'one') - -for (let [key, value] of myMap) { - console.log(key + ' = ' + value) -} -// 0 = zero -// 1 = one - -for (let key of myMap.keys()) { - console.log(key) -} -// 0 -// 1 - -for (let value of myMap.values()) { - console.log(value) -} -// zero -// one - -for (let [key, value] of myMap.entries()) { - console.log(key + ' = ' + value) -} -// 0 = zero -// 1 = one</pre> - -<h3 id="forEach로_Map_순회하기"><code>forEach()</code>로 <code>Map</code> 순회하기</h3> - -<p><code>Map</code>은 {{jsxref("Map.prototype.forEach", "forEach()")}} 메서드로 순회할 수 있습니다.</p> - -<pre class="brush: js">myMap.forEach(function(value, key) { - console.log(key + ' = ' + value) -}) -// 0 = zero -// 1 = one</pre> - -<h3 id="Array_객체와의_관계"><code>Array</code> 객체와의 관계</h3> - -<pre class="brush: js">let kvArray = [['key1', 'value1'], ['key2', 'value2']] - -// Use the regular Map constructor to transform a 2D key-value Array into a map -let myMap = new Map(kvArray) - -myMap.get('key1') // returns "value1" - -// Use Array.from() to transform a map into a 2D key-value Array -console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray - -// A succinct way to do the same, using the spread syntax -console.log([...myMap]) - -// Or use the keys() or values() iterators, and convert them to an array -console.log(Array.from(myMap.keys())) // ["key1", "key2"]</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.builtins.Map")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/map/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/map/index.html deleted file mode 100644 index 8a384863bd..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/map/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Map() 생성자 -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/Map -tags: - - Constructor - - JavaScript - - Map - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map/Map ---- -<div>{{JSRef}}</div> - -<p><strong><code>Map()</code> 생성자</strong>는 {{jsxref("Map")}} 객체를 생성합니다.</p> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">new Map([<var>iterable</var>])</pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code><var>iterable</var></code></dt> - <dd>요소가 키-값 쌍인, {{jsxref("Array")}} 또는 다른 순회 가능한 객체(예: <code>[[1, 'one'], [2, 'two']]</code>). 각 키-값 쌍은 새로운 <code>Map</code>에 포함됩니다.</dd> -</dl> - -<h2 id="예제">예제</h2> - -<pre class="brush: js">let myMap = new Map([ - [1, 'one'], - [2, 'two'], - [3, 'three'], -]) -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-constructor', 'Map constructor')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.Map")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/set/index.html deleted file mode 100644 index 8a8907a278..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set ---- -<div>{{JSRef}}</div> - -<p><code><strong>set()</strong></code> 메서드는 Map 객체에서 주어진 키를 가진 요소를 추가하고, 키의 요소가 이미 있다면 대체합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}</div> - - - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.set(<em>key</em>, <em>value</em>);</code></pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>key</code></dt> - <dd><code>Map</code>에 추가하거나 변경할 요소의 키.</dd> - <dt><code>value</code></dt> - <dd><code>Map</code>에 추가하거나 변경할 요소의 값.</dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>호출한 <code>Map</code> 객체.</p> - -<h2 id="예제">예제</h2> - -<h3 id="set()_사용하기"><code>set()</code> 사용하기</h3> - -<pre class="brush: js">var myMap = new Map(); - -// Add new elements to the map -myMap.set('bar', 'foo'); -myMap.set(1, 'foobar'); - -// Update an element in the map -myMap.set('bar', 'baz'); -</pre> - -<h3 id="set()_체이닝"><code>set()</code> 체이닝</h3> - -<p><code>set()</code>이 같은 <code>Map</code>을 반환하므로 메서드를 여러 번 연속해서 호출할 수 있습니다.</p> - -<pre class="brush: js">// Add new elements to the map with chaining. -myMap.set('bar', 'foo') - .set(1, 'foobar') - .set(2, 'baz'); -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.set")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/map/size/index.html deleted file mode 100644 index acbb861542..0000000000 --- a/files/ko/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size ---- -<div>{{JSRef}}</div> - -<p><code><strong>size</strong></code> 접근자 프로퍼티는 {{jsxref("Map")}} 객체의 요소 갯수를 반환합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</div> - - - -<h2 id="설명">설명</h2> - -<p><code>size</code> 값은 얼마나 많은 엔트리를 <code>Map</code> 객체가 가지고 있는지를 표현합니다. <code>size</code> 를 설정할 수 있는 접근자 함수는 <code>undefined</code> 입니다. 당신은 이 프로퍼티를 변경할 수 없습니다.</p> - -<h2 id="예제">예제</h2> - -<h3 id="Using_size">Using <code>size</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set('a', 'alpha'); -myMap.set('b', 'beta'); -myMap.set('g', 'gamma'); - -myMap.size // 3 -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("javascript.builtins.Map.size")}}</p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/ko/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/ko/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 1202a44bff..0000000000 --- a/files/ko/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 파이프 연산자 -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -tags: - - Experimental - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> - -<p><span class="seoSummary"><strong>파이프 연산자</strong>(<code>|></code>)는 실험적 기능(stage 1)으로, 표현식의 값을 함수에 전달합니다. 파이프 연산자를 활용하면 중첩 함수 호출을 좀 더 읽기 좋은 형식으로 작성할 수 있습니다.</span> 결과물은 문법적 설탕<sup>syntactic sugar</sup>으로, 하나의 인수를 제공하는 함수 호출은 다음 코드처럼 쓸 수 있습니다.</p> - -<pre class="brush: js">let url = "%21" |> decodeURI;</pre> - -<p>전통적인 구문에서는 아래처럼 호출합니다.</p> - -<pre class="brush: js">let url = decodeURI("%21"); -</pre> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox"><em>expression</em> |> <em>function</em> -</pre> - -<p>지정한 <code>expression</code>의 값이 <code>function</code>의 유일한 매개변수로 전달됩니다.</p> - -<h2 id="예제">예제</h2> - -<h3 id="함수_체이닝">함수 체이닝</h3> - -<p>파이프 연산자를 사용해, 여러 번 중첩된 함수 호출을 읽기 편한 형태로 바꿀 수 있습니다.</p> - -<pre class="brush: js">const double = (n) => n * 2; -const increment = (n) => n + 1; - -// 파이프 연산자 없이 -double(increment(double(double(5)))); // 42 - -// 파이프 연산자 사용 -5 |> double |> double |> increment |> double; // 42 -</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Pipeline operator draft</a></td> - <td>Stage 1</td> - <td>Not part of the ECMAScript specification yet.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("javascript.operators.pipeline")}}</p> -</div> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> - <li><a href="https://github.com/tc39/proposals">TC39 제안서</a></li> -</ul> diff --git a/files/ko/orphaned/web/reference/api/index.html b/files/ko/orphaned/web/reference/api/index.html deleted file mode 100644 index 4800908512..0000000000 --- a/files/ko/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Web API 설명집 -slug: orphaned/Web/Reference/API -tags: - - API - - 대문 - - 웹 - - 편람 -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -<p><span class="seoSummary">여러분이 알고 있는 웹에는 여러 유용한 작업을 수행할 수 있는 다양한 API가 제공됩니다. 이러한 API는 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 {{domxref("window")}}나 {{domxref("element")}}에 대한 간단한 작업에서부터 <a href="/ko/docs/Web/WebGL">WebGL</a>이나 <a href="/ko/docs/Web_Audio_API">Web Audio</a>와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능합니다.</span></p> - -<p>모든 API에 대한 각각의 인터페이스는 <a href="/ko/docs/Web/API">색인</a>에 열거돼 있습니다.</p> - -<p>또한 이벤트 레퍼런스에 <a href="/ko/docs/Web/Reference/Events">이용가능한 모든 이벤트 목록</a>도 있습니다.</p> - -<div class="cleared topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/ko/docs/DOM">문서 객체 모델(Document Object Model)</a></dt> - <dd>DOM은 문서를 조회하거나 수정할 수 있는 API입니다. 문서의 {{domxref("Node")}} 및 {{domxref("Element")}}를 조작할 수 있습니다. HTML, XML, SVG는 DOM을 확장함으로써 각각의 실제적인 요소(element)를 조작합니다.</dd> - <dt>디바이스 API</dt> - <dd>본 API는 웹 페이지 및 애플리케이션에서 사용할 수 있는 다양한 하드웨어 기능을 조작합니다. 예: <a href="/ko/docs/WebAPI/Using_Light_Events"> 주변 조명 센서 API</a>, <a href="/ko/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">배터리 상태 API</a>, <a href="/ko/docs/Using_geolocation" title="Using_geolocation">지리적 위치 API</a>, <a href="/ko/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">포인터 잠금 API</a>, <a href="/ko/docs/WebAPI/Proximity" title="WebAPI/Proximity">근접 API</a>, <a href="/ko/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">디바이스 방향성 API</a>, <a href="/ko/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">화면 방향성 API</a>, <a href="/ko/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">진동 API</a>.</dd> - <dt>커뮤니케이션 API</dt> - <dd>본 API는 웹 페이지 및 애플리케이션에서 다른 페이지나 기기와 통신할 수 있습니다. 예: <a href="/ko/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">네트워크 정보 API</a>, <a href="/ko/docs/WebAPI/Using_Web_Notifications" title="WebAPI/Using_Web_Notifications">웹 알림</a>, <a href="/ko/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">단순 푸시 API</a>.</dd> - <dt id="Data_management_APIs">데이터 관리 API</dt> - <dd>본 API는 사용자 데이터를 보관하고 관리할 수 있습니다. 예: <a href="/ko/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/ko/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> -</dl> - -<p>이러한 API는 어떠한 웹 사이트나 앱에서도 사용할 수 있지만 한정 권한 및 공인 애플리케이션에서는 더 강력한 Mozilla API 셋을 사용하실 수 있습니다.</p> - -<dl> - <dt>한정 권한 API</dt> - <dd>한정 권한 애플리케이션은 설치 방식 앱으로서 사용자가 특정 권리를 허용한 것입니다. 한정 권한 API로는 <a href="/ko/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP 소켓 API</a>, <a href="/ko/docs/WebAPI/Contacts" title="WebAPI/Contacts">주소록 API</a>, <a href="/ko/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">디바이스 스토리지 API</a>, <a href="/ko/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">브라우저 API</a> 등이 있습니다.</dd> - <dt>공인 API</dt> - <dd>공인된 애플리케이션은 파이어폭스 OS와 같은 운영체제에 중요한 조작을 수행하는 저층(low-level) 애플리케이션입니다. 한정 권한이 낮은 애플리케이션은 <a href="/ko/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities"> Web Activities</a>를 사용하여 이러한 애플리케이션과 소통합니다. 공인 API로는 <a href="/ko/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> 블루투스 API</a>, <a href="/ko/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection"> 모바일 연결 API</a>, <a href="/ko/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats"> 네트워크 상태 API</a>,<a href="/ko/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony"> 전화 기능</a>,<a href="/ko/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>,<a href="/ko/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information"> 와이파이 정보 API</a>, <a href="/ko/docs/WebAPI/Camera" title="WebAPI/Camera">카메라 API</a>,<a href="/ko/docs/WebAPI/Power_Management" title="WebAPI/Power_Management"> 전원 관리 API</a>, <a href="/ko/docs/WebAPI/Settings" title="WebAPI/Settings">설정 API</a>,<a href="/ko/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API"> 대기 API</a>,<a href="/ko/docs/WebAPI/Permissions" title="WebAPI/Permissions">사용 권한 API</a>,<a href="/ko/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock"> 시간/시계 API</a> 등이 있습니다.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Community" id="EditCommunity" name="EditCommunity">커뮤니티</h2> - -<p>저희 메일링 리스트나 뉴스그룹를 통해 Web API 커뮤니티에 참여하세요.</p> - -<ul> - <li><a href="https://lists.mozilla.org/listinfo/dev-webapi">메일링 리스트</a></li> - <li><a href="news://news.mozilla.org/mozilla.dev.webapi">뉴스그룹</a></li> - <li><a href="http://groups.google.com/group/mozilla.dev.webapi">Google그룹</a></li> - <li><a href="http://groups.google.com/group/mozilla.dev.webapi/feeds">웹 피드</a></li> - <li><a href="http://hacks.mozilla.or.kr/category/webapi/">한국 Mozilla Hacks</a></li> -</ul> - -<p><a href="https://wiki.mozilla.org/IRC">IRC</a>에서 <a href="irc://irc.mozilla.org/webapi">#webapi</a> 채널의 실시간 토론도 꼭 참여하세요.</p> - -<h2 class="Related_Topics" id="Related_topics" name="Related_topics">관련 주제</h2> - -<p>다음 주제도 확인해보세요.</p> - -<ul> - <li><a href="/ko/docs/Web/API">웹 API 인터페이스의 전체 색인</a></li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/ko/orphaned/web/reference/index.html b/files/ko/orphaned/web/reference/index.html deleted file mode 100644 index 892b42d80a..0000000000 --- a/files/ko/orphaned/web/reference/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: 웹 기술 문서 목록 -slug: orphaned/Web/Reference -tags: - - Landing - - Reference - - Web -translation_of: Web/Reference -original_slug: Web/Reference ---- -<p>{{draft()}}<br> - 오픈 웹은 많은 기술을 사용하여 구축됩니다. 이 기술들을 사용하기 위해서는 적절한 지식이 필요합니다.<br> - 아래에서 각각의 참조 자료에 대한 링크를 찾아볼 수 있습니다.</p> - -<h2 class="Documentation" id="웹_기술들">웹 기술들</h2> - -<p>여러분에게 <a href="/ko/docs/Learn/Getting_started_with_the_web">웹과 함께 시작하기</a>를 추천하지만, 필수는 아닙니다.</p> - -<dl> - <dt><strong><a href="/ko/docs/Glossary/HTML">HTML</a></strong> — Structuring the web</dt> - <dd>하이퍼텍스트 마크업언어(HyperText Markup Language)는 의미론적으로 웹 페이지의 콘텐츠(<a href="/ko/docs/Glossary/markup">마크업</a>)를 잘 구조화된 형식으로 의미론적으로 정의하고 표현하는데 사용됩니다. HTML은 HTML 요소(HTML elements)라고 불리는 불록으로 구성된 구조화된 문서를 작성하는 방법을 제공합니다. HTML요소는 태그로 구분되며, 꺽쇠괄호(<>)를 사용하여 표현합니다. 일부는 페이지에 직접 내용을 소개하고, 다른 일부는 문서 텍스트에 대한 정보를 제공하고, 다른 태그는 하위 요소로 포함할 수 있습니다. 분명히, 브라우저는 페이지 내용을 해석하는데 사용하기 때문에, 그대로 문서에 보여주지 않습니다.<br> - <br> - <a href="/ko/Learn/HTML/Introduction_to_HTML">HTML 소개</a>| <a href="/ko/Learn/HTML">HTML 배우기</a> | <a href="/ko/docs/Web/Guide/HTML/HTML5">HTML5</a> | <a href="/ko/docs/Web/Guide/HTML">개발자 가이드</a> | <a href="/ko/docs/Web/HTML/Element">HTML 요소 레퍼런스</a> | <a href="/ko/docs/Web/HTML/Reference">HTML 참조</a></dd> - <dt><strong><a href="/en-US/docs/Glossary/CSS">CSS</a></strong> — Styling the web</dt> - <dd><strong>Cascading Style Sheets</strong> 는 웹 컨텐츠의 모양을 꾸미는데 사용합니다.<br> - <br> - <a href="/ko/Learn/CSS/Introduction_to_CSS">CSS 소개</a> | <a href="/ko/docs/Web/Guide/CSS/Getting_started">CSS 시작하기</a> | <a href="/ko/Learn/CSS">CSS 배우기</a> | <a href="/ko/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/ko/docs/Web/Guide/CSS">개발자 가이드</a> | <a href="/ko/docs/Web/CSS/Common_CSS_Questions">일반적인 CSS 질문들</a> | <a href="/ko/docs/Web/CSS/Reference">CSS 참조</a></dd> - <dt><strong><a href="/ko/docs/Glossary/JavaScript">JavaScript</a></strong> — D<strong>ynamic client-side scripting</strong></dt> - <dd><strong>JavaScript</strong> 프로그래밍 언어는 사용자와의 대화식 이용 및 그외 동적 기능을 웹 사이트에 추가하는데 사용됩니다.</dd> - <dd><a href="/ko/docs/Learn/JavaScript">자바스크립트 배우기</a> | <a href="/ko/docs/Web/JavaScript/Guide">개발자 가이드</a> | <a href="/ko/docs/Web/JavaScript/Reference">자바스크립트 참조</a></dd> -</dl> diff --git a/files/ko/orphaned/web/security/information_security_basics/index.html b/files/ko/orphaned/web/security/information_security_basics/index.html deleted file mode 100644 index 807a154611..0000000000 --- a/files/ko/orphaned/web/security/information_security_basics/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Information Security Basics -slug: orphaned/Web/Security/Information_Security_Basics -translation_of: Web/Security/Information_Security_Basics -original_slug: Web/Security/정보_보안_기본 ---- -<p><span class="seoSummary"> 정보 보안에 대한 기본적인 이해는 불안전하거나 취약점으로 인해 생긴 약점이 악의적인 이유로 악용되지 않게 당신을 도와줄 것입니다. 이 기사는 당신이 알아야 할 것을 배우는데 도움을 줄 것 입니다.</span> 이 정보를 이용하면, 웹 개발주기 및 콘텐츠 배포를 넘어 보안의 역할과 중요성을 알게될 것입니다.</p> - -<dl> - <dt><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">신뢰성, 무결성, 가용성</a></dt> - <dd>보안을 이해하기 위해 필수적이고 기본적인 보안의 목적에 대해 설명합니다. </dd> - <dt><a href="/en-US/Learn/Vulnerabilities">취약점</a></dt> - <dd>취약점의 주요 카테고리를 정의하고, 모든 소프트웨어에 있는 취약점에 대해서 논의합니다. </dd> - <dt><a href="/en-US/Learn/Threats">위협</a></dt> - <dd>주요한 위협의 개념에 대해 간단히 소개합니다.</dd> - <dt><a href="/en-US/Learn/Security_Controls">보안 제어</a></dt> - <dd>보안 제어의 주요 카테고리를 정의하고, 잠재적인 단점에 대해서 논의합니다. </dd> - <dt><a href="/en-US/Learn/TCP_IP_Security">TCP/IP 보안</a></dt> - <dd>SSL에 대한 보안 고려 사항에 초점을 맞춘 TCP / IP 모델의 개요.</dd> -</dl> - -<h2 id="참고">참고</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Security">Browser security</a></li> - <li><a href="/en-US/docs/Web/Security">Web security</a></li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a></li> - <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Firefox Security Basics for Developers</a></li> -</ul> |